/* ═══════════════════════════════════════════════════════
   Vista Brain — Mission Control Dashboard
   Main Stylesheet (layout, components, responsive)
   All colors via CSS variables from themes.css
   ═══════════════════════════════════════════════════════ */


/* ── 1. Reset & Base ──────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    display: flex;
    overflow: hidden;
    font-size: 16px;
    line-height: 24px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--accent-hover);
}

img {
    max-width: 100%;
    display: block;
}

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}


/* ── 2. Custom Scrollbar ──────────────────────────────── */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
}


/* ── 3. Focus Styles (accessibility) ──────────────────── */

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--input-focus);
    outline-offset: 1px;
}


/* ═══════════════════════════════════════════════════════
   4. Sidebar
   ═══════════════════════════════════════════════════════ */

/* Z-Index Scale:
   10  = topbar (sticky, below sidebar)
   100 = sidebar (fixed nav)
   150 = sidebar backdrop (mobile overlay)
   200 = modals & lightbox
   300 = toasts (always on top)
   400 = ocean nav pill
*/

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 250px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 18px;
    height: 60px;
    white-space: nowrap;
    border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-brand .brand-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.3rem;
    background: var(--accent-light);
    border-radius: var(--radius-sm);
}

.sidebar-brand .brand-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.sidebar-nav {
    flex: 1;
    padding: 8px 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.nav-item {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    margin: 1px 8px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all var(--transition);
    white-space: nowrap;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 13px;
}

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

.nav-item.active {
    background: var(--sidebar-active);
    color: var(--accent);
    font-weight: 600;
}

.nav-item .icon,
.nav-item svg {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.7;
}

.nav-item.active svg {
    opacity: 1;
}

.nav-item .label,
.nav-item .nav-text {
    opacity: 1;
    font-size: 13px;
    font-weight: 500;
}

.nav-separator {
    height: 1px;
    background: var(--sidebar-border);
    margin: 8px 12px;
}

.separator {
    margin-top: 16px;
    border-top: 1px solid var(--sidebar-border);
    padding-top: 8px;
}

/* ── Collapsible Nav Groups ────────────────────────── */

.nav-group {
    list-style: none;
}

.nav-group-toggle {
    height: 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    margin-top: 16px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all var(--transition);
    white-space: nowrap;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
    user-select: none;
}

.nav-group-toggle:hover {
    background: var(--sidebar-hover);
    color: var(--text-primary);
}

.nav-group-toggle svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.6;
}

.nav-group-toggle .nav-text {
    flex: 1;
    font-size: 11px;
}

.group-arrow {
    font-size: 10px;
    transition: transform var(--transition);
    opacity: 0.5;
}

.nav-group-items {
    list-style: none;
    padding: 0;
    overflow: hidden;
    max-height: 500px;
    transition: max-height 0.3s ease;
}

.nav-group.collapsed .nav-group-items {
    max-height: 0;
}

.nav-group-items .nav-item {
    padding-left: 24px;
    margin-left: 16px;
}

.sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--sidebar-border);
    font-size: 11px;
}

.sidebar-version {
    color: var(--text-muted);
    font-size: 10px;
}


/* ═══════════════════════════════════════════════════════
   5. Main Content
   ═══════════════════════════════════════════════════════ */

#main-content,
.main-content {
    margin-left: 250px;
    flex: 1;
    overflow-y: auto;
    padding: 0;
    min-height: 100vh;
}

#panels-container {
    padding: 20px 24px;
}

/* SEO panel: full-bleed — negate parent padding, SEO has its own layout */
.panel[data-panel-id="seo"] {
    margin: -20px -24px;
    width: calc(100% + 48px);
}


/* ═══════════════════════════════════════════════════════
   6. Topbar
   ═══════════════════════════════════════════════════════ */

.topbar,
#topbar {
    display: none !important;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.topbar-left h1 {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

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

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    transition: all var(--transition);
}

.topbar-btn:hover {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.topbar-btn.refreshing i,
.topbar-btn.spinning i,
.env-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.logo {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.logo-icon {
    font-size: 1.3rem;
}

.last-refresh {
    color: var(--text-secondary);
    font-size: 0.85rem;
    white-space: nowrap;
}

.theme-toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.1rem;
    transition: all var(--transition);
}

.theme-toggle:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.user-badge {
    color: var(--text-secondary);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hamburger {
    display: none;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.2rem;
    transition: all var(--transition);
}

.hamburger:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

/* Floating hamburger for mobile (topbar is hidden) */
.hamburger-floating {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 110;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: all var(--transition);
}
.hamburger-floating:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}


/* ═══════════════════════════════════════════════════════
   7. Date Filter — Button Group + Custom Picker
   ═══════════════════════════════════════════════════════ */

.date-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════
   7a. In-Panel Date Range Controls
   ═══════════════════════════════════════════════════════ */

.panel-date-range {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 8px 12px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.panel-date-buttons {
    display: flex;
    gap: 2px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: 2px;
}

.panel-date-btn {
    background: transparent;
    border: none;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
    white-space: nowrap;
    font-family: inherit;
}

.panel-date-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.panel-date-btn.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 1px 3px rgba(99, 140, 255, 0.3);
}

.panel-date-custom {
    display: flex;
    align-items: center;
    gap: 6px;
    animation: fadeIn 0.2s ease;
}

.panel-date-custom.hidden {
    display: none;
}

.panel-date-custom input[type="date"] {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    padding: 5px 8px;
    font-size: 12px;
    color: var(--text-primary);
    font-family: inherit;
}

.panel-date-custom input[type="date"]:focus {
    outline: none;
    border-color: var(--input-focus);
}

.date-sep {
    color: var(--text-muted);
    font-size: 11px;
}

/* Legacy — hidden (old topbar date controls) */
.date-range-buttons,
select.date-filter,
#date-range {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════
   7b. SEO Page Specific Styles
   ═══════════════════════════════════════════════════════ */

.seo-changes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing);
    margin-bottom: var(--spacing-lg);
}

.seo-half .table-wrapper {
    max-height: 280px;
    overflow-y: auto;
    position: relative;
}

.seo-table-scroll {
    max-height: 500px;
    overflow-y: auto;
    position: relative;
}

.rank-num {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
}

.opp-rec {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
}

.chart-subtitle {
    font-size: 12px;
    font-weight: 400;
    margin-left: 6px;
}

.live-dot {
    color: var(--success) !important;
    font-size: 11px;
}

/* Period label in Improved/Dropped headers */
.period-label {
    font-size: 10px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}

/* Chart axis direction labels */
.chart-axis-labels {
    display: flex;
    justify-content: space-between;
    padding: 4px 8px 0;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.axis-label-better { color: var(--success); }
.axis-label-worse  { color: var(--danger); }

/* Custom chart legend with checkboxes */
.chart-legend-custom {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 12px 4px 4px;
    border-top: 1px solid var(--border);
    margin-top: 12px;
}

.chart-legend-custom label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 11px;
    color: var(--text-secondary);
    user-select: none;
    transition: color 0.15s ease;
}

.chart-legend-custom label:hover {
    color: var(--text-primary);
}

.chart-legend-checkbox {
    width: 14px;
    height: 14px;
    accent-color: var(--primary);
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

.chart-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.chart-legend-text {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Table header bar with search */
.table-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.table-search {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    transition: border-color var(--transition);
}

.table-search:focus-within {
    border-color: var(--input-focus);
}

.table-search-input {
    border: none;
    background: transparent;
    font-size: 12px;
    color: var(--text-primary);
    outline: none;
    width: 160px;
    font-family: inherit;
}

.table-search-input::placeholder {
    color: var(--text-muted);
}

/* Keyword page URL link */
.kw-page-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 12px;
    max-width: 180px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.kw-page-link:hover {
    text-decoration: underline;
    color: var(--accent-hover);
}

/* Sidebar footer theme toggle */
.sidebar-footer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}

.sidebar-theme-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition);
}

.sidebar-theme-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
    background: var(--bg-card);
}

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


/* ═══════════════════════════════════════════════════════
   8. Panels & Sections
   ═══════════════════════════════════════════════════════ */

.panel {
    display: block;
}

.panel.hidden {
    display: none !important;
    padding-top: 20px;
}

.panel-content {
    margin: 0 auto;
}

.panel-header {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.panel-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

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

.section {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    margin-top: 16px;
    border: 1px solid var(--border);
    transition: background var(--transition), border-color var(--transition);
}

.section-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}


/* ═══════════════════════════════════════════════════════
   9. Summary Cards
   ═══════════════════════════════════════════════════════ */

.summary-cards,
.cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.cards-grid.cards-4 { grid-template-columns: repeat(4, 1fr); }
.cards-grid.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-grid.cards-2 { grid-template-columns: repeat(2, 1fr); }

.summary-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 16px 18px;
    border: 1px solid var(--border);
    transition: all var(--transition);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
    opacity: 0;
    transition: opacity var(--transition);
}

.summary-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-card);
}

.summary-card:hover::before {
    opacity: 1;
}

.card-icon {
    width: 34px;
    height: 34px;
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    flex-shrink: 0;
}

.card-icon svg {
    width: 17px;
    height: 17px;
}

.card-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 600;
}

.card-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 2px;
    letter-spacing: -0.5px;
}

.card-change {
    font-size: 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.card-change .positive,
.change.positive,
.card-change.positive {
    color: var(--success);
}

.card-change .negative,
.change.negative,
.card-change.negative {
    color: var(--danger);
}

.card-change .neutral,
.change.neutral,
.card-change.neutral {
    color: var(--text-muted);
}


/* ═══════════════════════════════════════════════════════
   10. Charts
   ═══════════════════════════════════════════════════════ */

.chart-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-top: 24px;
}

.chart-box {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    border: 1px solid var(--border);
}

.chart-box h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-secondary);
}

.chart-box canvas {
    max-height: 300px;
}

.chart-container {
    position: relative;
    height: 220px;
    width: 100%;
}

.chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

.chart-container.small {
    height: 160px;
}

.chart-container.tall {
    height: 320px;
}

/* Chart block wrapper */
.chart-block {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 16px 18px;
    border: 1px solid var(--border);
    margin-top: 16px;
    transition: all var(--transition);
}

.chart-block:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-card);
}

.chart-title {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Charts row (side by side) */
.charts-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.charts-row .chart-block {
    margin-top: 0;
}

.chart-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.chart-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════
   11. Tables
   ═══════════════════════════════════════════════════════ */

.table-section {
    margin-top: 16px;
}

.table-section h3,
.table-title {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-scroll {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: auto;
    border-radius: var(--radius-sm);
}

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

th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-secondary);
    vertical-align: middle;
}

tr:hover td {
    background: var(--bg-card-hover);
}

tr:last-child td {
    border-bottom: none;
}

/* Data table (specific class variant) */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table th {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    background: var(--bg-card);
}

.data-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    vertical-align: middle;
    font-size: 13px;
}

.data-table tr:hover td {
    background: var(--bg-card-hover);
}

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

.table-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.status-badge.confirmed,
.status-badge.active,
.status-badge.ok {
    background: var(--success-bg);
    color: var(--success);
}

.status-badge.pending,
.status-badge.paused,
.status-badge.stale {
    background: var(--warning-bg);
    color: var(--warning);
}

.status-badge.cancelled,
.status-badge.error {
    background: var(--danger-bg);
    color: var(--danger);
}


/* ═══════════════════════════════════════════════════════
   12. Mini AI
   ═══════════════════════════════════════════════════════ */

.mini-ai {
    margin-top: 16px;
    background: var(--mini-ai-bg);
    border: 1px solid var(--mini-ai-border);
    border-radius: var(--radius);
    padding: 14px 16px;
    overflow: hidden;
}

.mini-ai-header {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mini-ai-header svg {
    width: 14px;
    height: 14px;
}

.mini-ai-content {
    min-height: 40px;
}

.mini-ai-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.mini-ai-messages {
    max-height: 200px;
    overflow-y: auto;
    padding: 0;
}

.mini-ai-msg {
    margin-bottom: 8px;
    font-size: 0.85rem;
    line-height: 1.5;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
}

.mini-ai-msg:last-child {
    margin-bottom: 0;
}

.mini-ai-msg.user {
    text-align: right;
    color: var(--text-primary);
    background: var(--accent-light);
}

.mini-ai-msg.ai {
    text-align: left;
    color: var(--text-secondary);
}

.mini-ai-input {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.mini-ai-field {
    flex: 1;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: border-color var(--transition);
}

.mini-ai-field:focus {
    border-color: var(--input-focus);
}

.mini-ai-field::placeholder {
    color: var(--text-muted);
}

.mini-ai-send {
    width: 36px;
    height: 36px;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition);
}

.mini-ai-send:hover {
    background: var(--accent-hover);
}

/* Legacy mini-ai input variant */
.mini-ai-input input {
    flex: 1;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-xl);
    padding: 8px 16px;
    color: var(--text-primary);
    font-size: 0.85rem;
    transition: border-color var(--transition);
}

.mini-ai-input input::placeholder {
    color: var(--text-muted);
}

.mini-ai-input input:focus {
    outline: none;
    border-color: var(--input-focus);
}

.mini-ai-input button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
    transition: background var(--transition);
}

.mini-ai-input button:hover {
    background: var(--accent-hover);
}


/* ═══════════════════════════════════════════════════════
   13. Brain Chat
   ═══════════════════════════════════════════════════════ */

/* Layout: sidebar + main chat */
.brain-chat-layout {
    display: flex;
    height: calc(100vh - 120px);
}

/* Session sidebar */
.chat-sidebar {
    width: 260px;
    min-width: 260px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transition: margin-left 0.25s ease, opacity 0.25s ease;
}

.chat-sidebar.collapsed {
    margin-left: -260px;
    opacity: 0;
    pointer-events: none;
}

.chat-sidebar__header {
    padding: 12px;
    border-bottom: 1px solid var(--border);
}

.chat-sidebar__new-btn {
    width: 100%;
    padding: 10px 16px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background var(--transition);
}

.chat-sidebar__new-btn:hover {
    background: var(--accent-hover);
}

.chat-sidebar__sessions {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.chat-session-item {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin-bottom: 4px;
    transition: background var(--transition);
    position: relative;
}

.chat-session-item:hover {
    background: var(--bg-card-hover);
}

.chat-session-item.active {
    background: var(--accent-light);
    border: 1px solid var(--accent);
}

.chat-session-item__title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-session-item__meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    display: flex;
    justify-content: space-between;
}

.chat-session-item__delete {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.chat-session-item:hover .chat-session-item__delete {
    display: flex;
}

.chat-session-item__delete:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

/* Sidebar toggle button */
.chat-sidebar-toggle {
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition);
}

.chat-sidebar-toggle:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

/* Session title in header */
.chat-session-title {
    font-size: 13px;
    color: var(--text-muted);
    margin-left: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.brain-chat-container,
.brain-chat {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    height: 100%;
}

.chat-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Quick prompts bar — always visible above input */
.chat-quick-bar {
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
}

.model-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.model-btn {
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition);
}

.model-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.model-btn.active {
    border-color: var(--accent);
    color: var(--text-primary);
    background: var(--accent-light);
}

.model-dot,
.model-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.model-dot.claude { background: #a78bfa; }
.model-dot.gpt    { background: #34d399; }
.model-dot.gemini { background: #4f8ef7; }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Welcome state */
.chat-welcome {
    text-align: center;
    padding: 40px 20px;
    margin: auto 0;
}

.welcome-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.chat-welcome h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.chat-welcome p {
    color: var(--text-muted);
    font-size: 14px;
}

.quick-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 24px;
}

.quick-prompt {
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
}

.quick-prompt:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.quick-prompt-btn {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 6px 14px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.quick-prompt-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

/* Chat messages */
.chat-message {
    margin-bottom: 16px;
    display: flex;
    gap: 12px;
}

.chat-message.user {
    flex-direction: row-reverse;
}

.chat-message .msg-bubble {
    max-width: 70%;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.6;
}

.chat-message.user .msg-bubble {
    background: var(--accent);
    color: white;
}

.chat-message.assistant .msg-bubble {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.msg-model-tag {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

/* Legacy chat-msg variant */
.chat-msg {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 0.9rem;
    line-height: 1.6;
    word-wrap: break-word;
}

.chat-msg.user {
    background: var(--accent);
    color: white;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.chat-msg.ai {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    margin-right: auto;
    border-bottom-left-radius: 4px;
}

.chat-msg .msg-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.chat-msg.user .msg-meta {
    color: rgba(255, 255, 255, 0.7);
}

.chat-msg pre {
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    padding: 10px;
    overflow-x: auto;
    margin: 8px 0;
    font-size: 0.82rem;
}

.chat-msg code {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.85em;
}

/* Chat input area */
.chat-input-area {
    display: flex;
    gap: 8px;
    padding: 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
}

#chat-input,
.chat-input {
    flex: 1;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius);
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: 14px;
    resize: none;
    max-height: 120px;
    outline: none;
    transition: border-color var(--transition);
}

#chat-input::placeholder,
.chat-input::placeholder {
    color: var(--text-muted);
}

#chat-input:focus,
.chat-input:focus {
    border-color: var(--input-focus);
}

.chat-send-btn {
    width: 44px;
    height: 44px;
    background: var(--accent);
    border: none;
    border-radius: var(--radius);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
    transition: background var(--transition);
}

.chat-send-btn:hover {
    background: var(--accent-hover);
}

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

/* Typing indicator */
.chat-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.chat-typing .dot {
    width: 6px;
    height: 6px;
    background: var(--text-muted);
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out;
}

.chat-typing .dot:nth-child(2) { animation-delay: 0.2s; }
.chat-typing .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}


/* ═══════════════════════════════════════════════════════
   14. Settings
   ═══════════════════════════════════════════════════════ */

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.settings-section {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    border: 1px solid var(--border);
}

.settings-section h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--text-primary);
}

.settings-group {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
}

.settings-group-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    gap: 12px;
}

.setting-row:last-child {
    border-bottom: none;
}

.setting-row label {
    font-size: 13px;
    color: var(--text-secondary);
}

.setting-row select {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    color: var(--text-primary);
    font-size: 13px;
    transition: border-color var(--transition);
}

.setting-row select:focus {
    outline: none;
    border-color: var(--input-focus);
}

.setting-label {
    color: var(--text-primary);
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.setting-label small {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 400;
}

.setting-value {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.settings-section select,
.settings-section input[type="text"],
.settings-section input[type="number"],
.settings-section input[type="password"] {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    color: var(--text-primary);
    transition: border-color var(--transition);
}

.settings-section select:focus,
.settings-section input:focus {
    outline: none;
    border-color: var(--input-focus);
}

/* Connector list */
.connector-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.connector-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
}

.connector-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.connector-status-dot.ok,
.connector-status-dot.success {
    background: var(--success);
}

.connector-status-dot.stale,
.connector-status-dot.warning {
    background: var(--warning);
}

.connector-status-dot.error,
.connector-status-dot.danger {
    background: var(--danger);
}

.connector-name {
    font-size: 13px;
    font-weight: 500;
    flex: 1;
    color: var(--text-primary);
}

.connector-sync {
    font-size: 11px;
    color: var(--text-muted);
}

.connector-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.status-dot.success { background: var(--success); }
.status-dot.danger  { background: var(--danger); }
.status-dot.warning { background: var(--warning); }


/* ═══════════════════════════════════════════════════════
   15. Skeleton Loading
   ═══════════════════════════════════════════════════════ */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-card) 25%,
        var(--bg-card-hover) 50%,
        var(--bg-card) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    width: 100%;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-title {
    height: 22px;
    width: 40%;
    margin-bottom: 12px;
}

.skeleton-card {
    height: 100px;
    border-radius: var(--radius);
}

.skeleton-chart {
    height: 300px;
    border-radius: var(--radius);
}


/* ═══════════════════════════════════════════════════════
   16. Filter Bar
   ═══════════════════════════════════════════════════════ */

.filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 6px 16px;
    border-radius: var(--radius-xl);
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.filter-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.filter-btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.filter-btn.active:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}


/* ═══════════════════════════════════════════════════════
   17. Sub-Tabs
   ═══════════════════════════════════════════════════════ */

.sub-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.sub-tab {
    padding: 10px 18px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.sub-tab:hover {
    color: var(--text-primary);
    background: var(--bg-card-hover);
}

.sub-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}


/* ═══════════════════════════════════════════════════════
   18. Alerts
   ═══════════════════════════════════════════════════════ */

.alert-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

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

.alert-icon {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1.4;
}

.alert-text {
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.4;
}

.alert-text .alert-time {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-left: 4px;
}

.alert-item.critical .alert-icon { color: var(--danger); }
.alert-item.warning .alert-icon  { color: var(--warning); }
.alert-item.info .alert-icon     { color: var(--accent); }
.alert-item.success .alert-icon  { color: var(--success); }


/* ═══════════════════════════════════════════════════════
   19. Badges & Tags
   ═══════════════════════════════════════════════════════ */

.rank-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-xl);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge.success {
    background: var(--success-bg);
    color: var(--success);
}

.badge.warning {
    background: var(--warning-bg);
    color: var(--warning);
}

.badge.danger {
    background: var(--danger-bg);
    color: var(--danger);
}

.badge.info {
    background: var(--accent-light);
    color: var(--accent);
}

.badge.neutral {
    background: var(--bg-card-hover);
    color: var(--text-secondary);
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    background: var(--bg-card-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}


/* ═══════════════════════════════════════════════════════
   20. Availability Color Coding
   ═══════════════════════════════════════════════════════ */

.avail-high { color: var(--success); }
.avail-mid  { color: var(--warning); }
.avail-low  { color: var(--danger); }


/* ═══════════════════════════════════════════════════════
   21. Buttons
   ═══════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--text-muted);
}

.btn-primary {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn-success {
    background: var(--success);
    color: white;
    border-color: var(--success);
}

.btn-success:hover {
    opacity: 0.9;
}

.btn-danger {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
}

.btn-danger:hover {
    opacity: 0.9;
}

.btn-sm {
    padding: 5px 12px;
    font-size: 0.8rem;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 1rem;
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--radius-sm);
}

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

.btn-group {
    display: flex;
    gap: 8px;
}


/* ═══════════════════════════════════════════════════════
   22. Forms
   ═══════════════════════════════════════════════════════ */

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

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

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: border-color var(--transition);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-muted);
}

.form-textarea {
    resize: vertical;
    min-height: 80px;
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b8fa3' stroke-width='1.5' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.form-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 4px;
}


/* ═══════════════════════════════════════════════════════
   23. Toggle Switch
   ═══════════════════════════════════════════════════════ */

.toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--border);
    border-radius: 24px;
    transition: background var(--transition);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform var(--transition);
}

.toggle input:checked + .toggle-slider {
    background: var(--accent);
}

.toggle input:checked + .toggle-slider::before {
    transform: translateX(20px);
}


/* ═══════════════════════════════════════════════════════
   24. Modals
   ═══════════════════════════════════════════════════════ */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    transform: scale(0.95) translateY(10px);
    transition: transform var(--transition);
}

.modal-overlay.active .modal {
    transform: scale(1) translateY(0);
}

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

.modal-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    font-size: 1.1rem;
}

.modal-close:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
}

.modal.large {
    max-width: 800px;
}

.modal.full {
    max-width: 95vw;
    max-height: 95vh;
}


/* ═══════════════════════════════════════════════════════
   25. Tooltips
   ═══════════════════════════════════════════════════════ */

[data-tooltip] {
    position: relative;
    cursor: help;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    white-space: nowrap;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
    box-shadow: var(--shadow);
    pointer-events: none;
}

[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}


/* ═══════════════════════════════════════════════════════
   26. Progress Bars
   ═══════════════════════════════════════════════════════ */

.progress-bar {
    width: 100%;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

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

.progress-fill.success { background: var(--success); }
.progress-fill.warning { background: var(--warning); }
.progress-fill.danger  { background: var(--danger); }


/* ═══════════════════════════════════════════════════════
   27. Empty States
   ═══════════════════════════════════════════════════════ */

.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-state-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.empty-state-text {
    font-size: 0.9rem;
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════
   28. Notification Toasts
   ═══════════════════════════════════════════════════════ */

.toast-container {
    position: fixed;
    top: 68px;
    right: 20px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 300px;
    max-width: 420px;
    animation: toastSlideIn 0.3s ease;
}

.toast.leaving {
    animation: toastSlideOut 0.3s ease forwards;
}

.toast-icon {
    flex-shrink: 0;
    font-size: 1.1rem;
}

.toast.success .toast-icon { color: var(--success); }
.toast.warning .toast-icon { color: var(--warning); }
.toast.danger .toast-icon  { color: var(--danger); }
.toast.info .toast-icon    { color: var(--accent); }

.toast-content {
    flex: 1;
}

.toast-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.toast-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.toast-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    flex-shrink: 0;
    transition: color var(--transition);
}

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

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

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


/* ═══════════════════════════════════════════════════════
   29. Metric Rows & KPI
   ═══════════════════════════════════════════════════════ */

.metric-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.metric-row:last-child {
    border-bottom: none;
}

.metric-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.metric-value {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.kpi-item {
    text-align: center;
    padding: 12px 8px;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
}

.kpi-number {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
}

.kpi-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}


/* ═══════════════════════════════════════════════════════
   30. Comparison / Before-After
   ═══════════════════════════════════════════════════════ */

.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.compare-label {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.compare-image {
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}


/* ═══════════════════════════════════════════════════════
   31. Timeline / Activity Feed
   ═══════════════════════════════════════════════════════ */

.activity-feed {
    list-style: none;
}

.activity-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

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

.activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    margin-top: 6px;
}

.activity-content {
    flex: 1;
}

.activity-text {
    font-size: 0.9rem;
    color: var(--text-primary);
}

.activity-time {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
}


/* ═══════════════════════════════════════════════════════
   32. Photo Grid / Gallery
   ═══════════════════════════════════════════════════════ */

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}

.photo-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition);
}

.photo-item:hover {
    border-color: var(--accent);
    transform: scale(1.02);
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-item .photo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 8px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    font-size: 0.75rem;
    color: white;
}

/* Lightbox */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
}

.lightbox-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
}

.lightbox-nav:hover {
    background: rgba(0, 0, 0, 0.7);
}

.lightbox-nav.prev { left: 16px; }
.lightbox-nav.next { right: 16px; }


/* ═══════════════════════════════════════════════════════
   33. Live Output / Console
   ═══════════════════════════════════════════════════════ */

.console-output {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    max-height: 500px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--text-secondary);
}

.console-line {
    padding: 1px 0;
}

.console-line.error {
    color: var(--danger);
}

.console-line.success {
    color: var(--success);
}

.console-line.warn {
    color: var(--warning);
}


/* ═══════════════════════════════════════════════════════
   34. Segment Picker (Vista Reels)
   ═══════════════════════════════════════════════════════ */

.segment-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
    padding: 4px;
}

.segment-card {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition);
}

.segment-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
}

.segment-card.selected {
    border-color: var(--accent);
    background: var(--accent-light);
}

.segment-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.segment-info {
    padding: 6px 8px;
}

.segment-duration {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.segment-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
}

.segment-tag {
    font-size: 0.65rem;
    padding: 1px 5px;
    background: var(--bg-primary);
    border-radius: 3px;
    color: var(--text-muted);
}


/* ═══════════════════════════════════════════════════════
   35. Clip Timeline (Vista Reels)
   ═══════════════════════════════════════════════════════ */

.clip-timeline {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 8px 0;
}

.clip-item {
    flex-shrink: 0;
    width: 120px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition);
}

.clip-item:hover {
    border-color: var(--accent);
}

.clip-item.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-light);
}

.clip-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.clip-label {
    padding: 4px 6px;
    font-size: 0.72rem;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clip-qa-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════════
   36. .env / API Keys Manager
   ═══════════════════════════════════════════════════════ */

.env-table {
    width: 100%;
}

.env-key {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem;
    color: var(--accent);
}

.env-value {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem;
    color: var(--text-secondary);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.env-masked {
    color: var(--text-muted);
    letter-spacing: 2px;
}


/* ═══════════════════════════════════════════════════════
   37. Password Lock Screen
   ═══════════════════════════════════════════════════════ */

.lock-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.lock-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
    width: 340px;
    box-shadow: var(--shadow);
}

.lock-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.7;
}

.lock-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
}


/* ═══════════════════════════════════════════════════════
   38. Loading Spinner
   ═══════════════════════════════════════════════════════ */

.spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spinLoader 0.7s linear infinite;
}

.spinner.sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.spinner.lg {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

@keyframes spinLoader {
    to { transform: rotate(360deg); }
}

.loading-center {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
}


/* ═══════════════════════════════════════════════════════
   39. Trend Arrows & Indicators
   ═══════════════════════════════════════════════════════ */

.trend-up {
    color: var(--success);
}

.trend-down {
    color: var(--danger);
}

.trend-flat {
    color: var(--text-muted);
}

.trend-arrow {
    font-size: 0.85rem;
    margin-right: 2px;
}


/* ═══════════════════════════════════════════════════════
   40. Tabs (generic horizontal tabs)
   ═══════════════════════════════════════════════════════ */

.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
    overflow-x: auto;
}

.tab {
    padding: 10px 20px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--transition);
    white-space: nowrap;
}

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

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

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}


/* ═══════════════════════════════════════════════════════
   41. Dropdown Menu
   ═══════════════════════════════════════════════════════ */

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

.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 180px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all var(--transition);
    overflow: hidden;
}

.dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.dropdown-item:hover {
    background: var(--bg-card-hover);
}

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


/* ═══════════════════════════════════════════════════════
   42. Search Bar
   ═══════════════════════════════════════════════════════ */

.search-bar {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.search-bar input {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-xl);
    padding: 8px 16px 8px 36px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: border-color var(--transition);
}

.search-bar input::placeholder {
    color: var(--text-muted);
}

.search-bar input:focus {
    outline: none;
    border-color: var(--input-focus);
}

.search-bar .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.9rem;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════
   43. Utility Classes
   ═══════════════════════════════════════════════════════ */

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-accent    { color: var(--accent); }
.text-success   { color: var(--success); }
.text-warning   { color: var(--warning); }
.text-danger    { color: var(--danger); }

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }

.text-sm   { font-size: 0.8rem; }
.text-base { font-size: 0.9rem; }
.text-lg   { font-size: 1.1rem; }
.text-xl   { font-size: 1.3rem; }

.font-bold     { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium   { font-weight: 500; }
.font-normal   { font-weight: 400; }

.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }

.gap-4  { gap: 4px; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }

.m-0   { margin: 0; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }

.p-0  { padding: 0; }
.p-8  { padding: 8px; }
.p-12 { padding: 12px; }
.p-16 { padding: 16px; }
.p-20 { padding: 20px; }

.w-full { width: 100%; }

.rounded    { border-radius: var(--radius); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }

.hidden  { display: none !important; }
.visible { visibility: visible; }

.change { font-size: 13px; font-weight: 500; }
.change.positive { color: var(--success); }
.change.negative { color: var(--danger); }
.change.neutral  { color: var(--text-muted); }

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.no-select {
    user-select: none;
    -webkit-user-select: none;
}

.clickable {
    cursor: pointer;
}

.divider {
    height: 1px;
    background: var(--border);
    margin: 12px 0;
}


/* ═══════════════════════════════════════════════════════
   44. Responsive Design
   ═══════════════════════════════════════════════════════ */

/* Large screens */
@media (max-width: 1400px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .chart-grid {
        grid-template-columns: 1fr;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .compare-grid {
        grid-template-columns: 1fr;
    }

    .seo-changes-grid {
        grid-template-columns: 1fr;
    }
}

/* Tablets */
@media (max-width: 768px) {
    #sidebar,
    .sidebar {
        transform: translateX(-100%);
        width: 250px;
        z-index: 100;
    }

    .sidebar:hover {
        width: 250px;
    }

    #sidebar.open,
    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar.open .nav-item .label,
    .sidebar.open .nav-item .nav-text {
        opacity: 1;
    }

    .sidebar-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition);
    }

    .sidebar-backdrop.active {
        opacity: 1;
        visibility: visible;
    }

    #main-content,
    .main-content {
        margin-left: 0;
        padding: 16px;
    }

    .summary-cards {
        grid-template-columns: 1fr;
    }

    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .hamburger-floating {
        display: flex;
    }

    #date-range,
    .date-filter select {
        font-size: 12px;
        padding: 4px 6px;
    }

    .panel-date-range {
        padding: 6px 8px;
    }

    .panel-date-buttons {
        flex-wrap: wrap;
        gap: 1px;
    }

    .panel-date-btn {
        padding: 4px 10px;
        font-size: 11px;
    }

    .panel-date-custom {
        flex-wrap: wrap;
    }

    .panel-date-custom input[type="date"] {
        font-size: 11px;
        padding: 3px 6px;
    }

    .seo-changes-grid {
        grid-template-columns: 1fr;
    }

    .seo-table-scroll {
        max-height: 350px;
    }

    .table-header-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .chart-legend-custom {
        gap: 4px 10px;
    }

    .last-refresh {
        display: none;
    }

    .panel-header {
        font-size: 1.1rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .chat-msg,
    .chat-message .msg-bubble {
        max-width: 90%;
    }

    .chat-sidebar {
        position: absolute;
        z-index: 50;
        height: 100%;
    }

    .chat-sidebar.collapsed {
        margin-left: -260px;
    }

    .chat-quick-bar {
        gap: 6px;
    }

    .quick-prompt {
        font-size: 12px;
        padding: 6px 12px;
    }

    .modal {
        width: 95%;
        margin: 16px;
    }

    .photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .segment-picker {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }

    .toast-container {
        right: 8px;
        left: 8px;
    }

    .toast {
        min-width: auto;
        max-width: none;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .topbar-right {
        gap: 8px;
    }

    .user-badge {
        display: none;
    }

    .card-value {
        font-size: 1.5rem;
    }

    .filter-bar {
        gap: 6px;
    }

    .filter-btn {
        padding: 5px 12px;
        font-size: 0.8rem;
    }

    .sub-tabs {
        gap: 0;
    }

    .sub-tab {
        padding: 8px 12px;
        font-size: 0.82rem;
    }

    .model-selector {
        gap: 6px;
    }

    .model-btn {
        padding: 6px 14px;
        font-size: 0.8rem;
    }

    .chat-input,
    #chat-input {
        padding: 10px 16px;
        font-size: 0.9rem;
    }

    .btn {
        padding: 7px 14px;
        font-size: 0.85rem;
    }

    .quick-prompts {
        gap: 6px;
    }

    .quick-prompt,
    .quick-prompt-btn {
        padding: 5px 10px;
        font-size: 0.8rem;
    }

    .section {
        padding: 14px;
    }

    .settings-section,
    .settings-group {
        padding: 14px;
    }

    .panel-date-btn {
        padding: 3px 8px;
        font-size: 10px;
    }

    .panel-date-custom {
        gap: 4px;
    }

    .table-search-input {
        width: 120px;
    }
}


/* ═══════════════════════════════════════════════════════
   44b. Panel Error Banner
   ═══════════════════════════════════════════════════════ */

.panel-error {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
    background: var(--danger-bg);
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    animation: toastSlideIn 0.3s ease;
}

.panel-error-icon {
    color: var(--danger);
    flex-shrink: 0;
}

.panel-error-icon svg {
    width: 20px;
    height: 20px;
}

.panel-error-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.panel-error-text strong {
    font-size: 14px;
    color: var(--text-primary);
}

.panel-error-text span {
    font-size: 12px;
    color: var(--text-secondary);
}

.panel-error-retry {
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════
   44c. Auth Box Centering & Polish
   ═══════════════════════════════════════════════════════ */

#env-auth-gate {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

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

.auth-box h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.auth-form {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.auth-form .form-input {
    flex: 1;
}


/* ═══════════════════════════════════════════════════════
   44d. Sidebar Version & Footer Polish
   ═══════════════════════════════════════════════════════ */

.sidebar-version {
    display: block;
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    padding: 4px 16px 8px;
    opacity: 0.6;
}


/* ═══════════════════════════════════════════════════════
   44e. Summary Card Small Variant (Reels)
   ═══════════════════════════════════════════════════════ */

.summary-card.sm {
    padding: 14px;
}

.summary-card.sm .card-value {
    font-size: 22px;
}


/* ═══════════════════════════════════════════════════════
   44f. Responsive cards-grid
   ═══════════════════════════════════════════════════════ */

@media (max-width: 1400px) {
    .cards-grid.cards-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cards-grid.cards-4,
    .cards-grid.cards-3 {
        grid-template-columns: 1fr;
    }

    .charts-row {
        grid-template-columns: 1fr;
    }

    .photo-layout {
        grid-template-columns: 1fr;
    }

    .photo-sidebar {
        max-height: 200px;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════════════
   44g. Smooth Page Transitions
   ═══════════════════════════════════════════════════════ */

.panel:not(.hidden) {
    animation: panelFadeIn 0.25s ease;
}

@keyframes panelFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════
   44h. Ads Subsections Layout
   ═══════════════════════════════════════════════════════ */

.ads-subsections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.ads-subsection {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
}

.subsection-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}

.subsection-title svg {
    width: 15px;
    height: 15px;
    opacity: 0.6;
}

.ads-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ads-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ads-stat-label {
    color: var(--text-secondary);
    font-size: 13px;
}

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

@media (max-width: 768px) {
    .ads-subsections {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════════════
   44i. Reels Layout
   ═══════════════════════════════════════════════════════ */

.reels-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    overflow-x: auto;
}

.reels-tab {
    padding: 10px 20px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--transition);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

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

.reels-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.reels-tab-content {
    display: none;
}

.reels-tab-content.active {
    display: block;
}

.reels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.reels-filter {
    margin-left: auto;
}

.reels-director-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    min-height: 500px;
}

.reels-chat-panel {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.reels-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.reels-chat-header h3 {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.reels-learning-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}

.chat-input-row {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--border);
}

.chat-input-row .form-input {
    flex: 1;
}

.section-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}

.section-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-block-header h3 {
    font-size: 15px;
    font-weight: 600;
}

.trends-ideas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.compose-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}

.compose-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.compose-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.compose-row label {
    width: 100px;
    font-size: 13px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.compose-row .form-input {
    flex: 1;
}

.compose-options {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.compose-options label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .reels-director-layout {
        grid-template-columns: 1fr;
    }
    .trends-ideas-grid {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════════════
   44j. Demographics Grid (Social)
   ═══════════════════════════════════════════════════════ */

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


/* ═══════════════════════════════════════════════════════
   45. Print Styles
   ═══════════════════════════════════════════════════════ */

@media print {
    .topbar,
    .sidebar,
    .sidebar-backdrop,
    .mini-ai,
    .toast-container,
    .modal-overlay,
    .lightbox,
    .hamburger,
    .theme-toggle,
    .btn,
    .filter-bar,
    .chat-input-area,
    .quick-prompts {
        display: none !important;
    }

    #main-content,
    .main-content {
        margin-left: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
    }

    body {
        background: white;
        color: black;
        display: block;
        overflow: visible;
    }

    .section,
    .summary-card,
    .settings-section,
    .settings-group {
        border: 1px solid #ddd;
        box-shadow: none;
        break-inside: avoid;
    }

    .summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ═══════════════════════════════════════════════════════
   50. Sidebar Section Labels
   ═══════════════════════════════════════════════════════ */

.nav-section-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #888);
    padding: 16px 20px 4px;
    list-style: none;
}

/* WebSocket status */
.ws-status-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    font-size: 0.75rem;
    color: var(--text-muted, #888);
}

.ws-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    transition: background 0.3s;
}

.ws-dot.online {
    background: #22c55e;
}


/* ═══════════════════════════════════════════════════════
   51. Module Toolbar
   ═══════════════════════════════════════════════════════ */

.module-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.inline-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius);
}

/* ── Button icon sizing ── */
.btn i, .btn svg { width: 14px; height: 14px; }

/* Secondary button (supplement to section 21) */
.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.btn-secondary:hover {
    background: var(--bg-card-hover);
}

/* Ghost button (supplement to section 21) */
.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: none;
}
.btn-ghost:hover {
    color: var(--text-primary);
}

.link { color: var(--accent); text-decoration: none; }
.link:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════════════════
   52. Data Table Container (overflow wrapper)
   ═══════════════════════════════════════════════════════ */

.data-table-container {
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

/* Table wrapper — scroll container for sticky headers */
.table-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 360px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-card);
    position: relative;
}


/* ═══════════════════════════════════════════════════════
   53. Photo Browser
   ═══════════════════════════════════════════════════════ */

.photo-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 16px;
    min-height: 500px;
}

.photo-sidebar {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: 12px;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

.photo-sidebar h3 {
    font-size: 0.85rem;
    margin-bottom: 12px;
    color: var(--text-muted);
}

.folder-list .folder-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-primary, #e4e4e7);
    transition: background 0.15s;
}

.folder-item:hover { background: var(--bg-card-hover); }
.folder-item.active { background: var(--accent); color: #fff; }
.folder-item .badge { margin-left: auto; }
.folder-item i, .folder-item svg { width: 14px; height: 14px; }

.photo-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}

.photo-thumb {
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s;
}

.photo-thumb:hover { border-color: var(--accent); }

.photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ═══════════════════════════════════════════════════════
   54. Lightbox (supplements section 32)
   ═══════════════════════════════════════════════════════ */

.lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.9);
}


/* ═══════════════════════════════════════════════════════
   55. GMB Panel
   ═══════════════════════════════════════════════════════ */

.gmb-pending-card {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
}

.gmb-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 12px;
}

.gmb-photo-box {
    text-align: center;
}

.gmb-photo-box h4 {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.gmb-photo-box img {
    max-width: 100%;
    max-height: 300px;
    border-radius: 6px;
    object-fit: contain;
}

.gmb-info {
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.gmb-actions {
    display: flex;
    gap: 8px;
}


/* ═══════════════════════════════════════════════════════
   56. Vista Reels Panel — Card & Component Specifics
   (Base tabs/layout in section 44i)
   ═══════════════════════════════════════════════════════ */

.reels-tab svg, .reels-tab i { width: 16px; height: 16px; }

/* Clips Grid */
.reels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.reel-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: border-color 0.2s;
}
.reel-card:hover { border-color: var(--accent); }

.reel-thumb { width: 100%; aspect-ratio: 16/9; background: var(--bg-secondary); overflow: hidden; }
.reel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.reel-thumb-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
}

.reel-card-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px 0;
}

.reel-id { font-family: monospace; font-size: 0.78rem; color: var(--text-muted); }
.reel-caption { font-size: 0.82rem; color: var(--text-primary); margin-bottom: 4px; }
.reel-score { font-size: 0.75rem; color: var(--text-muted); margin-right: 8px; }
.reel-duration { font-size: 0.75rem; color: var(--accent); }

.reel-card-body { padding: 6px 14px; }
.reel-card-actions { display: flex; gap: 6px; padding: 8px 14px 12px; }

/* Compose supplement */
.compose-section h3 {
    font-size: 0.9rem; font-weight: 600;
    margin-bottom: 16px; color: var(--text-primary);
}
.compose-form { max-width: 500px; }

.editable-reel-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0; border-bottom: 1px solid var(--border);
}

/* Trends & Ideas */
.trends-ideas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.section-block-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.section-block-header h3 { margin-bottom: 0; }

.trends-summary ul { padding-left: 18px; font-size: 0.85rem; }
.trends-summary li { margin-bottom: 6px; color: var(--text-primary); }
.trends-summary h4 { font-size: 0.85rem; color: var(--text-secondary); margin: 12px 0 6px; }

.idea-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: 12px;
    margin-bottom: 8px;
}
.idea-card strong { font-size: 0.9rem; color: var(--text-primary); }
.idea-card p { font-size: 0.82rem; color: var(--text-secondary); margin-top: 4px; }
.idea-hook { font-style: italic; color: var(--accent) !important; }

.shooting-guide-content ul { padding-left: 18px; font-size: 0.85rem; }
.shooting-guide-content li { margin-bottom: 6px; }
.shooting-guide-content pre { font-size: 0.78rem; overflow-x: auto; max-height: 300px; }

/* Director layout supplements (base in 44i) */
.reels-chat-panel h3 {
    font-size: 0.9rem; display: flex; align-items: center; gap: 6px; margin: 0;
}
.reels-chat-panel h3 svg { width: 16px; height: 16px; }

.reels-chat-panel .chat-messages {
    flex: 1; overflow-y: auto; margin-bottom: 12px;
    display: flex; flex-direction: column; gap: 8px; padding: 0;
}
.reels-chat-panel .chat-msg {
    padding: 8px 12px; border-radius: 8px;
    font-size: 0.85rem; max-width: 90%; word-break: break-word;
}
.reels-chat-panel .chat-msg.user {
    background: var(--accent); color: #fff;
    align-self: flex-end; border-bottom-right-radius: 2px;
}
.reels-chat-panel .chat-msg.ai {
    background: var(--bg-secondary); color: var(--text-primary);
    align-self: flex-start; border-bottom-left-radius: 2px;
}
.reels-chat-panel .chat-msg.error { color: var(--danger); }
.chat-action { display: block; font-size: 0.75rem; color: var(--accent); margin-top: 4px; }

.reels-learning-panel h3 {
    font-size: 0.9rem; font-weight: 600;
    margin-bottom: 12px; color: var(--text-primary);
}


/* ═══════════════════════════════════════════════════════
   57. API Keys Panel (auth-box in 44c)
   ═══════════════════════════════════════════════════════ */

.auth-box h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.auth-form {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    justify-content: center;
}

.env-masked {
    font-family: monospace;
    font-size: 0.82rem;
    cursor: pointer;
    color: var(--text-muted, #888);
}

.env-masked:hover {
    color: var(--accent, #6366f1);
}


/* ═══════════════════════════════════════════════════════
   58. Live Output Console
   ═══════════════════════════════════════════════════════ */

.console-output {
    background: #0a0a0f;
    color: #22c55e;
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    font-size: 0.8rem;
    padding: 16px;
    border-radius: 8px;
    min-height: 400px;
    max-height: calc(100vh - 240px);
    overflow-y: auto;
    line-height: 1.5;
}

.output-line {
    padding: 2px 0;
}

.output-project {
    color: #6366f1;
    font-weight: 600;
}

.output-text {
    color: #d4d4d8;
}

/* Summary card small variant */
.summary-card.sm {
    padding: 10px 14px;
}

.summary-card.sm .card-label {
    font-size: 0.7rem;
}

.summary-card.sm .card-value {
    font-size: 1.1rem;
}

/* Status badges for module tables */
.status-badge.ready { background: #22c55e22; color: #22c55e; }
.status-badge.published, .status-badge.posted { background: #22c55e22; color: #22c55e; }
.status-badge.processing { background: #eab30822; color: #eab308; }
.status-badge.error, .status-badge.failed { background: #ef444422; color: #ef4444; }
.status-badge.draft { background: #6366f122; color: #6366f1; }
.status-badge.approved { background: #22c55e22; color: #22c55e; }
.status-badge.rejected { background: #ef444422; color: #ef4444; }
.status-badge.draft_warning { background: #eab30822; color: #eab308; }
.status-badge.auto_rejected { background: #ef444422; color: #ef4444; }

/* ═══════════════════════════════════════════════════════
   60. Panel Layout — cards-grid, charts-row, sections
   ═══════════════════════════════════════════════════════ */

.cards-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
}
.cards-grid.cards-4 {
    grid-template-columns: repeat(4, 1fr);
}
.cards-grid.cards-3 {
    grid-template-columns: repeat(3, 1fr);
}

.charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.chart-block {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 20px;
}
.chart-block h3 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.chart-block-wide {
    grid-column: span 2;
}
.chart-block-narrow {
    grid-column: span 1;
}

.section-block {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 20px;
    margin-bottom: 20px;
}
.section-block h3 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ads-subsections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
.ads-subsection {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 20px;
}
.ads-subsection h3 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.demographics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.table-wrapper {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 20px;
    margin-bottom: 20px;
    overflow-x: auto;
}
.table-wrapper h3 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive for panel layouts */
@media (max-width: 1024px) {
    .cards-grid.cards-4 { grid-template-columns: repeat(2, 1fr); }
    .charts-row { grid-template-columns: 1fr; }
    .chart-block-wide { grid-column: span 1; }
    .ads-subsections { grid-template-columns: 1fr; }
    .demographics-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .cards-grid.cards-4,
    .cards-grid.cards-3 { grid-template-columns: 1fr; }
}

/* Responsive for module panels */
@media (max-width: 768px) {
    .photo-layout { grid-template-columns: 1fr; }
    .reels-layout { grid-template-columns: 1fr; }
    .gmb-compare { grid-template-columns: 1fr; }
}

/* =================================================================
   SEO TABS & SUB-SECTIONS — Round 3
   ================================================================= */

/* SEO Controls Row — date range + country selector side by side */
.seo-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.seo-country-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.seo-country-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.form-select-sm {
    background: var(--input-bg, var(--bg-card));
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 5px 10px;
    border-radius: var(--radius-sm, 6px);
    font-size: 12px;
    cursor: pointer;
    outline: none;
}
.form-select-sm:focus {
    border-color: var(--primary);
}

/* SEO Tab bar */
.seo-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.seo-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}
.seo-tab:hover {
    color: var(--text-primary);
}
.seo-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.seo-tab i, .seo-tab svg {
    width: 14px;
    height: 14px;
}

/* SEO Tab content */
.seo-tab-content {
    display: none;
}
.seo-tab-content.active {
    display: block;
}

/* Audit styles */
.seo-audit-header {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 24px;
}

.audit-health-score {
    text-align: center;
    flex-shrink: 0;
}
.audit-score-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}
.audit-score-big {
    font-size: 36px;
    font-weight: 700;
    margin-top: 4px;
}
.audit-score-big.good { color: var(--success); }
.audit-score-big.ok { color: var(--warning); }
.audit-score-big.bad { color: var(--danger); }

.audit-summary-cards {
    flex: 1;
}

.severity-error .card-value { color: var(--danger); }
.severity-warning .card-value { color: var(--warning); }
.severity-notice .card-value { color: var(--primary); }

.audit-categories {
    margin-bottom: 20px;
}
.audit-category-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.audit-cat-name {
    width: 140px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}
.audit-cat-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-hover, rgba(255,255,255,0.05));
    border-radius: 4px;
    overflow: hidden;
}
.audit-cat-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}
.audit-cat-score {
    font-size: 13px;
    font-weight: 600;
    width: 45px;
    text-align: right;
}
.audit-cat-issues {
    font-size: 11px;
    width: 70px;
    color: var(--text-muted);
}

/* Severity badges (for issues table) */
.severity-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.severity-badge.error { background: rgba(239,68,68,0.15); color: var(--danger); }
.severity-badge.warning { background: rgba(245,158,11,0.15); color: var(--warning); }
.severity-badge.notice { background: rgba(99,140,255,0.15); color: var(--primary); }

/* Intent badges (for keyword research) */
.intent-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}
.intent-badge.informational { background: rgba(99,140,255,0.12); color: #638cff; }
.intent-badge.transactional { background: rgba(34,197,94,0.12); color: #22c55e; }
.intent-badge.navigational { background: rgba(168,85,247,0.12); color: #a855f7; }
.intent-badge.commercial { background: rgba(245,158,11,0.12); color: #f59e0b; }

/* Placeholder state (GMB tab) */
.placeholder-state {
    text-align: center;
    padding: 60px 20px;
}
.placeholder-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: var(--bg-hover, rgba(255,255,255,0.05));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.placeholder-icon i, .placeholder-icon svg {
    width: 28px;
    height: 28px;
    color: var(--text-muted);
}
.placeholder-state h3 { margin-bottom: 8px; }
.placeholder-preview { margin-top: 24px; opacity: 0.4; pointer-events: none; }
.summary-card.disabled { opacity: 0.4; }

/* Research input bar */
.research-input-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}
.research-input-bar .form-input {
    flex: 1;
}

/* AI SEO container — reuse brain-chat styles */
.seo-ai-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 300px);
    min-height: 400px;
}
.seo-ai-container .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: var(--bg-main, var(--bg-card));
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: 12px;
}
.seo-ai-container .chat-input-area {
    display: flex;
    gap: 8px;
}
.seo-ai-container textarea {
    flex: 1;
    resize: none;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--input-bg, var(--bg-card));
    color: var(--text-primary);
    font-size: 13px;
}
.seo-quick-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.seo-quick-prompt {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.seo-quick-prompt:hover {
    background: var(--bg-hover, rgba(255,255,255,0.05));
    border-color: var(--primary);
    color: var(--primary);
}

/* Competitor comparison bar */
.competitor-visibility-bar {
    display: inline-block;
    height: 6px;
    border-radius: 3px;
    background: var(--primary);
    min-width: 8px;
    vertical-align: middle;
    margin-right: 6px;
}

/* Chart keyword selector toolbar */
.chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.chart-toolbar select {
    background: var(--input-bg, var(--bg-card));
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: var(--radius-sm, 6px);
    font-size: 12px;
}

/* SEO responsive */
@media (max-width: 768px) {
    .seo-controls-row { flex-direction: column; align-items: stretch; }
    .seo-tabs { gap: 0; }
    .seo-tab { padding: 8px 10px; font-size: 12px; }
    .seo-audit-header { flex-direction: column; }
    .audit-cat-name { width: 100px; }
}
@media (max-width: 480px) {
    .seo-tab { padding: 6px 8px; font-size: 11px; }
    .seo-tab i, .seo-tab svg { display: none; }
}