:root {
    --primary: #249fd9;
    --primary-hover: #1b85b8;
    --primary-light: #e0f2fe;
    --secondary: #ec4899;
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --background: #f8fafc;
    --surface: #ffffff;
    --text-main: #0f172a;
    --text-body: #334155;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --border-hover: #cbd5e1;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

:root[data-theme='dark'] {
    --primary: #38bdf8;
    --primary-hover: #0ea5e9;
    --primary-light: rgba(56, 189, 248, 0.18);
    --secondary: #f472b6;
    --background: #060d1b;
    --surface: #0f1a30;
    --text-main: #e2e8f0;
    --text-body: #cbd5e1;
    --text-muted: #93a6be;
    --border: #22324a;
    --border-hover: #334b6c;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.35);
    --shadow: 0 4px 12px -2px rgb(0 0 0 / 0.45), 0 2px 6px -3px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 10px 24px -6px rgb(0 0 0 / 0.5), 0 4px 12px -6px rgb(0 0 0 / 0.45);
    --shadow-xl: 0 18px 36px -10px rgb(0 0 0 / 0.55), 0 8px 20px -10px rgb(0 0 0 / 0.45);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--background);
    color: var(--text-main);
    line-height: 1.6;
    padding: 0;
    overflow-x: hidden;
}

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

.app-container {
    display: flex;
    min-height: 100vh;
}

/* ========================================
   SIDEBAR
   ======================================== */

.sidebar {
    width: 280px;
    background: #0f172a;
    color: white;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    z-index: 100;
    box-shadow: var(--shadow-lg);
}

.sidebar-header {
    margin-bottom: 3rem;
    text-align: center;
    padding: 0 1rem;
}

.sidebar-logo {
    max-width: 160px;
    filter: brightness(0) invert(1);
    transition: var(--transition);
}

.sidebar-logo:hover {
    opacity: 0.9;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    padding: 0 0.5rem;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    color: #94a3b8;
    text-decoration: none;
    border-radius: var(--radius);
    font-weight: 500;
    font-size: 0.95rem;
    transition: var(--transition);
    position: relative;
}

.nav-item i {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
    transform: translateX(2px);
}

.nav-item.active {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 12px rgba(36, 159, 217, 0.4);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: white;
    border-radius: 0 4px 4px 0;
}

.nav-item.feature-locked {
    opacity: 0.55;
}

.nav-item.feature-locked:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
}

.sidebar-footer {
    padding-top: 2rem;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.75rem;
    color: #64748b;
    text-align: center;
}

.sidebar-user-row {
    margin-bottom: 1rem;
    color: #cbd5e1;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.sidebar-user-icon {
    width: 16px;
    height: 16px;
}

.sidebar-user-name {
    font-size: 0.85rem;
}

.sidebar-user-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.sidebar-theme-toggle {
    color: #93c5fd;
    padding: 2px;
}

.sidebar-theme-toggle:hover {
    background: rgba(59, 130, 246, 0.2);
    color: #bfdbfe;
}

.sidebar-logout-btn {
    color: #fca5a5;
    padding: 2px;
}

.sidebar-logout-btn:hover {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.2);
}

.sidebar-quota-box {
    margin-bottom: 1rem;
    padding: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: var(--radius-sm);
    background: rgba(15, 23, 42, 0.38);
    text-align: left;
}

.sidebar-quota-title {
    font-size: 0.72rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sidebar-quota-stats {
    margin-top: 0.25rem;
    color: #f8fafc;
    font-weight: 700;
    font-size: 1rem;
}

.sidebar-quota-left {
    margin-top: 0.25rem;
    color: #cbd5e1;
    font-size: 0.75rem;
}

.sidebar-quota-progress {
    margin-top: 0.5rem;
    height: 8px;
    background: rgba(148, 163, 184, 0.25);
    border-radius: 999px;
    overflow: hidden;
}

.sidebar-quota-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #38bdf8, #22c55e);
    transition: width 0.25s ease;
}

/* ========================================
   MAIN CONTENT
   ======================================== */

.main-content {
    flex: 1;
    margin-left: 280px;
    padding: 3rem 4rem;
    background: var(--background);
    min-height: 100vh;
}

.view {
    display: none;
    max-width: 1100px;
    margin: 0 auto;
    animation: fadeIn 0.3s ease-out;
}

.view.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.view-header {
    margin-bottom: 2.5rem;
}

.view-header h1 {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.5rem;
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.02em;
}

.view-header p {
    font-size: 1.05rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* ========================================
   CARDS
   ======================================== */

.card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
    transition: var(--transition);
}

.card:hover {
    box-shadow: var(--shadow-lg);
}

.card-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border);
}

.card-title i {
    width: 24px;
    height: 24px;
}

.search-card {
    padding: 2rem !important;
    border-radius: var(--radius-lg) !important;
    background: linear-gradient(to bottom, white, #fafbfc);
}

.quota-summary-card {
    padding: 1.2rem 1.4rem !important;
    margin-bottom: 1rem;
}

.quota-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.quota-summary-values {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

.quota-summary-values span {
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem;
    color: var(--primary);
}

.quota-summary-values small {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.billing-plan-card {
    background: linear-gradient(160deg, #ffffff, #f8fbff);
}

.billing-plan-summary-card,
.billing-plans-card {
    background: linear-gradient(160deg, #ffffff, #f8fbff);
}

.billing-plan-summary-grid,
.billing-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.billing-plan-summary-item,
.billing-plan-option {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: white;
    padding: 1rem;
}

.billing-plan-summary-item .label {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.billing-plan-summary-item strong {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    color: var(--text-main);
}

.billing-plan-summary-item small {
    color: var(--text-muted);
}

.billing-plan-option {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    transition: var(--transition);
}

.billing-plan-option.active {
    border-color: rgba(34, 197, 94, 0.45);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.12);
}

.billing-plan-option.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px rgba(36, 159, 217, 0.16);
}

.billing-plan-option-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.billing-plan-option-head h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-main);
}

.billing-plan-option-head p {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.billing-plan-price {
    font-family: 'Outfit', sans-serif;
    font-size: 1.45rem;
    color: var(--primary);
    white-space: nowrap;
}

.billing-plan-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.billing-plan-metrics div {
    border-radius: var(--radius);
    background: #f8fbff;
    padding: 0.65rem 0.75rem;
}

.billing-plan-metrics span {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
}

.billing-plan-metrics strong {
    font-size: 1rem;
    color: var(--text-main);
}

.billing-plan-source-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.billing-plan-source-chip {
    border-radius: 999px;
    background: #eef6ff;
    color: #2563eb;
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.billing-plan-select-btn {
    width: 100%;
}

.billing-plan-actions {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.billing-schedule-card {
    background: linear-gradient(160deg, #ffffff, #f8fbff);
}

.billing-schedule-usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.billing-schedule-form-grid {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr);
    gap: 1rem;
    align-items: end;
}

.billing-schedule-form-grid .form-group {
    margin-bottom: 0;
}

.billing-inline-check-group {
    margin-bottom: 0;
}

.billing-inline-check {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 52px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    padding: 0.875rem 1rem;
    font-weight: 600;
    color: var(--text-main);
    box-sizing: border-box;
}

.billing-inline-check input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}

.billing-switch {
    justify-content: flex-start;
    gap: 0.75rem;
    border: 1.5px solid var(--border);
    background: #fff;
}

.billing-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.billing-switch-track {
    display: inline-block;
    position: relative;
    width: 44px;
    height: 24px;
    min-width: 44px;
    border-radius: 999px;
    background: #d6deea;
    transition: background-color .2s ease;
    flex-shrink: 0;
    vertical-align: middle;
}

.billing-switch-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(8, 36, 79, .25);
    transition: transform .2s ease;
}

.billing-switch input[type="checkbox"]:checked + .billing-switch-track {
    background: linear-gradient(135deg, #2ec5ff, #0f7ecf);
}

.billing-switch input[type="checkbox"]:checked + .billing-switch-track::after {
    transform: translateX(20px);
}

.billing-switch input[type="checkbox"]:focus-visible + .billing-switch-track {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.billing-switch input[type="checkbox"]:disabled + .billing-switch-track {
    opacity: .55;
}

.billing-schedule-slots-wrap {
    margin-top: 1rem;
}

.billing-schedule-slots-wrap > label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-main);
}

.billing-schedule-slots {
    display: grid;
    gap: 0.6rem;
}

.billing-schedule-slot-row {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) minmax(110px, 140px);
    gap: 0.6rem;
}

.billing-schedule-slot-fixed-time {
    min-height: 48px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: #f8fbff;
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 0 0.75rem;
}

.billing-schedule-actions {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.billing-plans-card {
    border: 1px solid var(--border);
}

.billing-pricing-hero {
    text-align: center;
    margin-bottom: 1.25rem;
}

.billing-pricing-hero h2 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    line-height: 1.15;
    color: var(--text-main);
}

.billing-pricing-hero p {
    margin: 0.45rem 0 0;
    color: var(--text-muted);
    font-size: 1rem;
}

.billing-pricing-points {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem 1.5rem;
}

.billing-pricing-points span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #0f766e;
    font-weight: 500;
    font-size: 0.92rem;
}

.billing-pricing-points i {
    width: 0.7rem;
    height: 0.7rem;
    fill: currentColor;
    color: #16a34a;
}

.billing-trial-warning {
    margin: 0.95rem auto 0;
    max-width: 900px;
    padding: 0.72rem 0.9rem;
    border-radius: 12px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 0.93rem;
    line-height: 1.45;
}

.billing-trial-warning strong {
    color: #1e40af;
}

.billing-plans-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.1rem;
}

.billing-pricing-option {
    position: relative;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    border: 1px solid #d7dce5;
    border-radius: 16px;
    background: #ffffff;
    padding: 1.1rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.billing-pricing-option.active {
    border-color: rgba(34, 197, 94, 0.45);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.12);
}

.billing-pricing-option.selected,
.billing-pricing-option.is-popular {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.16);
}

.billing-pricing-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.18rem 0.72rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 0.72rem;
    font-weight: 700;
}

.billing-pricing-head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.billing-pricing-name {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.76rem;
    color: #64748b;
    font-weight: 700;
}

.billing-pricing-price-line {
    display: flex;
    align-items: baseline;
    gap: 0.22rem;
}

.billing-pricing-price-line .price {
    font-family: 'Outfit', sans-serif;
    font-size: 2.65rem;
    line-height: 1;
    color: #0f172a;
}

.billing-pricing-price-line .per {
    font-size: 1.45rem;
    color: #64748b;
}

.billing-pricing-note {
    font-size: 0.85rem;
    color: #64748b;
}

.billing-pricing-trial-note {
    margin-top: 0.35rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0c4a6e;
    font-size: 0.76rem;
    font-weight: 700;
}

.billing-pricing-head p {
    margin: 0.35rem 0 0;
    color: #475569;
    font-size: 0.95rem;
}

.billing-pricing-divider {
    border-top: 1px solid #e2e8f0;
}

.billing-pricing-facts {
    display: grid;
    gap: 0.4rem;
}

.billing-pricing-facts div {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    color: #334155;
    font-size: 0.93rem;
}

.billing-pricing-facts span {
    color: #64748b;
}

.billing-pricing-facts strong {
    color: #0f172a;
    font-weight: 700;
    text-align: right;
}

.billing-pricing-model-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.billing-pricing-model-tags .billing-plan-source-chip {
    border: 1px solid #dbe4ef;
    background: #f8fafc;
    color: #475569;
    padding: 0.23rem 0.58rem;
    font-size: 0.74rem;
    font-weight: 600;
}

.billing-pricing-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.billing-pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    color: #1e293b;
    font-size: 0.91rem;
}

.billing-pricing-features i {
    width: 0.95rem;
    height: 0.95rem;
    color: #16a34a;
    margin-top: 0.1rem;
    flex: 0 0 auto;
}

.billing-pricing-features li.is-unavailable {
    color: #8b9bb0;
}

.billing-pricing-features li.is-unavailable i {
    color: #94a3b8;
}

.billing-pricing-option .billing-plan-select-btn {
    margin-top: auto;
    min-height: 44px;
    border-radius: 11px;
}

.billing-enterprise-row {
    margin-top: 1rem;
    border: 1px solid #d7dce5;
    border-radius: 14px;
    background: #f8fafc;
    padding: 1rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.billing-enterprise-row strong {
    display: block;
    color: #0f172a;
    font-size: 1.1rem;
    font-family: 'Outfit', sans-serif;
}

.billing-enterprise-row p {
    margin: 0.22rem 0 0;
    color: #64748b;
}

.billing-plan-actions .btn-secondary {
    min-height: 48px;
}

.wizard-check.source-locked {
    opacity: 0.45;
    filter: grayscale(0.35);
}

.wizard-check.source-locked input {
    cursor: not-allowed;
}

.wizard-check.source-locked span {
    text-decoration: line-through;
}

.billing-plan-summary-card .billing-plan-actions {
    margin-top: 1rem;
}

.billing-plan-actions {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.quota-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.85rem;
}

.quota-dashboard-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem;
    background: white;
}

.quota-dashboard-item .label {
    color: var(--text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.quota-dashboard-item .value {
    margin-top: 0.2rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1.45rem;
    color: var(--text-main);
}

.quota-dashboard-item.highlight {
    background: linear-gradient(135deg, rgba(36, 159, 217, 0.12), rgba(34, 197, 94, 0.12));
    border-color: rgba(36, 159, 217, 0.35);
}

.result-card {
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   FORMS
   ======================================== */

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.625rem;
    font-size: 0.95rem;
}

.form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.form-row .form-group {
    min-width: 0;
}

.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

.custom-select,
.custom-input,
.custom-textarea,
.custom-file-input {
    width: 100%;
    padding: 0.875rem 1rem;
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    background: white;
    font-size: 1rem;
    color: var(--text-main);
    outline: none;
    transition: var(--transition);
}

.custom-select:hover,
.custom-input:hover,
.custom-textarea:hover {
    border-color: var(--border-hover);
}

.custom-select:focus,
.custom-input:focus,
.custom-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(36, 159, 217, 0.1);
}

.custom-textarea {
    min-height: 150px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.6;
}

.custom-file-input {
    cursor: pointer;
    padding: 0.75rem;
}

.custom-file-input::-webkit-file-upload-button {
    padding: 0.5rem 1rem;
    border: none;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 500;
    margin-right: 1rem;
    transition: var(--transition);
}

.custom-file-input::-webkit-file-upload-button:hover {
    background: var(--primary-hover);
}

.input-hint {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.competitor-manager {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.competitor-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.competitor-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.625rem;
    align-items: center;
}

.competitor-row-fields {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 0.625rem;
}

.competitor-row .custom-input {
    margin-bottom: 0;
}

.competitor-row-remove {
    height: 46px;
    width: 46px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: #fff;
    color: #ef4444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.competitor-row-remove:hover {
    border-color: #fca5a5;
    background: #fef2f2;
}

.competitor-add-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1.5px dashed var(--border-hover);
    background: #f8fbff;
    color: var(--primary-dark);
    border-radius: 12px;
    padding: 0.6rem 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.competitor-add-btn:hover {
    background: #eef7ff;
    border-color: var(--primary);
}

.competitor-add-btn i {
    width: 16px;
    height: 16px;
}

/* Search Input Wrapper */
.search-input-wrapper {
    background: #f1f5f9;
    padding: 0.5rem;
    border-radius: 60px;
    display: flex;
    align-items: center;
    border: 2px solid transparent;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.search-input-wrapper:focus-within {
    background: white;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(36, 159, 217, 0.1);
}

.search-icon {
    margin-left: 1rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.search-input-wrapper input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0.875rem 1rem !important;
    font-size: 1.05rem !important;
    background: transparent;
    color: var(--text-main);
}

/* Inline Form */
.inline-form {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}

.inline-form input {
    flex: 1;
}

/* Set Form */
.set-form {
    margin-top: 1rem;
}

/* ========================================
   BUTTONS
   ======================================== */

.analyze-button {
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: white;
    border: none;
    padding: 0.875rem 1.75rem;
    border-radius: 60px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    box-shadow: 0 4px 12px rgba(36, 159, 217, 0.3);
    white-space: nowrap;
}

.analyze-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(36, 159, 217, 0.4);
}

.analyze-button:active:not(:disabled) {
    transform: translateY(0);
}

.analyze-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.analyze-button i {
    width: 18px;
    height: 18px;
}

.btn-secondary {
    border: 1px solid var(--border-hover);
    background: #f8fafc;
    color: var(--text-main);
    border-radius: 10px;
    padding: 0.45rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-secondary:hover:not(:disabled) {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
}

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

.btn-primary {
    border: none;
    background: linear-gradient(135deg, #249fd9, #1d7fd0);
    color: white;
    border-radius: 10px;
    padding: 0.45rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: 0 8px 18px rgba(36, 159, 217, 0.16);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(36, 159, 217, 0.22);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: linear-gradient(135deg, #94a3b8, #cbd5e1);
    box-shadow: none;
}

.btn-icon {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    transition: var(--transition);
    padding: 0.375rem;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    color: var(--primary);
    background: var(--primary-light);
}

.btn-icon i {
    width: 18px;
    height: 18px;
}

/* ========================================
   TABS
   ======================================== */

.tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0;
}

.tab-btn {
    padding: 0.875rem 1.5rem;
    border: none;
    background: transparent;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius) var(--radius) 0 0;
    transition: var(--transition);
    position: relative;
    font-size: 0.95rem;
}

.tab-btn:hover {
    background: #f8fafc;
    color: var(--text-main);
}

.tab-btn.active {
    background: transparent;
    color: var(--primary);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary);
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease-out;
}

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

/* ========================================
   ANALYSE WIZARD
   ======================================== */

.analysis-wizard {
    overflow: hidden;
}

.wizard-stepper {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.wizard-step-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: #f8fafc;
    font-size: 0.85rem;
    font-weight: 600;
}

.wizard-step-indicator.active {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

.wizard-step-indicator.done {
    border-color: #86efac;
    color: #166534;
    background: #dcfce7;
}

.wizard-step-no {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    background: white;
    border: 1px solid currentColor;
}

.wizard-step-content {
    display: none;
    animation: fadeIn 0.2s ease-out;
}

.wizard-step-content.active {
    display: block;
}

.wizard-step-title {
    font-size: 1.15rem;
    margin-bottom: 1rem;
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
}

.wizard-step-desc {
    color: var(--text-body);
    margin: -0.45rem 0 1.25rem;
    font-size: 0.95rem;
}

.wizard-active-set {
    display: flex;
    align-items: center;
    min-height: 3rem;
    margin: 0.75rem 0 1.15rem;
    padding: 0.65rem 0;
    border: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 500;
}

.wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* ========================================
   KEYWORD SET VERSIONING
   ======================================== */

.set-group-header {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
    border-left: 3px solid var(--primary);
}

.set-group-header:hover {
    background: linear-gradient(135deg, #f1f5f9, #e8edf2) !important;
}

.set-group-header td {
    font-weight: 600;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.set-group-header td:first-child {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.set-toggle-btn {
    padding: 0.25rem !important;
    color: var(--text-muted) !important;
    transition: var(--transition-fast);
}

.set-toggle-btn:hover {
    color: var(--primary) !important;
    background: var(--primary-light) !important;
}

.set-toggle-btn i,
.set-toggle-icon {
    width: 16px !important;
    height: 16px !important;
}

.set-version-row {
    background: #fcfcfd;
    border-left: 3px solid transparent;
    animation: fadeIn 0.2s ease-out;
}

.set-version-row:hover {
    background: #f5f7fa !important;
    border-left-color: var(--primary-light);
}

.set-version-row td {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.set-version-row td:first-child {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wizard-step-error {
    margin-bottom: 1rem;
}

.wizard-mode-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.wizard-radio,
.wizard-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f8fafc;
    font-size: 0.9rem;
    color: var(--text-body);
}

.wizard-check.inline {
    white-space: nowrap;
}

.wizard-radio input,
.wizard-check input {
    accent-color: var(--primary);
}

.wizard-panel {
    display: none;
}

.wizard-panel.active {
    display: block;
}

.analysis-set-select-hidden,
.analysis-engine-select-native {
    display: none !important;
}

.analysis-engine-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.analysis-engine-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: #f8fafc;
    color: var(--text-main);
    padding: 0.75rem 0.8rem;
    text-align: left;
    cursor: pointer;
    transition: var(--transition-fast);
}

.analysis-engine-card:hover {
    border-color: #93c5fd;
    background: #f0f9ff;
    transform: translateY(-1px);
}

.analysis-engine-card.active {
    border-color: var(--primary);
    background: #eff6ff;
    box-shadow: 0 10px 22px rgba(36, 159, 217, 0.14);
}

.analysis-engine-card.recommended.active {
    box-shadow: 0 12px 24px rgba(36, 159, 217, 0.2);
}

.analysis-engine-card-logo {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid var(--border);
    flex: 0 0 38px;
    overflow: hidden;
}

.analysis-engine-card-logo img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}

.analysis-engine-card-logo.multi {
    width: auto;
    border-radius: 999px;
    padding: 0 0.35rem;
    gap: 0.25rem;
}

.analysis-engine-card-logo.multi img {
    width: 14px;
    height: 14px;
}

.analysis-engine-card-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.analysis-engine-card-name {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
}

.analysis-engine-card-sub {
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.2;
}

.analysis-engine-card-badge {
    position: absolute;
    top: -10px;
    right: 10px;
    background: #2563eb;
    color: #fff;
    border-radius: 999px;
    padding: 0.2rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.wizard-source-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.analysis-keyword-flow-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(520px, 1.35fr);
    gap: 1.15rem;
    align-items: start;
}

.analysis-source-column,
.analysis-keyword-pool-column {
    min-width: 0;
}

.analysis-source-column .wizard-source-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.analysis-source-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    transition: var(--transition-fast);
}

.analysis-source-item.active {
    border-color: var(--primary);
    background: #f8fbff;
    box-shadow: 0 0 0 1px rgba(36, 159, 217, 0.15);
}

.analysis-source-column .wizard-check {
    width: 100%;
    justify-content: flex-start;
    min-height: 48px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0.75rem 0.9rem;
    font-weight: 700;
    color: var(--text-main);
}

.analysis-source-column .wizard-check::before {
    content: '\25B6';
    color: var(--text-main);
    font-size: 0.74rem;
    line-height: 1;
}

.analysis-source-item.active .wizard-check::before {
    content: '\25BC';
}

.analysis-source-column .wizard-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.analysis-source-column .wizard-check small {
    margin-left: auto;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--text-muted);
    padding: 0.18rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.analysis-source-column .wizard-check small:not(:empty) {
    display: inline-flex;
}

.analysis-source-column .wizard-check.source-locked span {
    text-decoration: none;
}

.analysis-source-column .wizard-panel {
    padding: 0 0.9rem 0.9rem;
}

.analysis-source-column .analysis-source-item.active .wizard-panel {
    border-top: 1px dashed var(--border);
    padding-top: 0.75rem;
}

.analysis-source-column .wizard-panel .form-row {
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.analysis-source-column .custom-textarea {
    min-height: 84px;
    font-size: 0.9rem;
    border-style: dashed;
    resize: vertical;
}

.analysis-source-column .custom-input,
.analysis-source-column .custom-select,
.analysis-source-column .custom-file-input {
    padding: 0.65rem 0.75rem;
    font-size: 0.9rem;
}

.analysis-source-column .bulk-actions,
.analysis-source-actions {
    margin-top: 0.8rem;
}

.analysis-source-column .bulk-actions .analyze-button,
.analysis-source-actions .analyze-button {
    min-width: 0;
    flex: 1;
}

.analysis-source-actions {
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}

.analysis-source-actions .badge {
    display: none;
    white-space: normal;
    text-align: center;
}

.analysis-source-item .wizard-check.source-locked small,
.analysis-source-column .wizard-check .source-pro-badge {
    background: #fff7ed;
    color: #ea580c;
}

.analysis-column-heading {
    margin-bottom: 0.55rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.analysis-keyword-pool-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.55rem;
}

.analysis-pool-summary {
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.analysis-keyword-pool-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    padding: 0.65rem;
}

.analysis-keyword-pool-card .analysis-keyword-list-wrapper {
    border: 0;
    border-radius: 0;
    max-height: 420px;
}

.analysis-keyword-pool-card .analysis-keyword-table thead th {
    border-top: 1px solid var(--border);
}

.analysis-keyword-pool-card .analysis-keyword-table th,
.analysis-keyword-pool-card .analysis-keyword-table td {
    padding: 0.65rem 0.6rem;
    vertical-align: middle;
}

.analysis-keyword-pool-card .analysis-keyword-table td {
    font-size: 0.88rem;
}

.analysis-keyword-pool-column .wizard-keyword-toolbar {
    display: grid;
    grid-template-columns: minmax(160px, 1.4fr) minmax(130px, 0.85fr) minmax(130px, 0.85fr);
    gap: 0.55rem;
}

.analysis-keyword-pool-column .wizard-keyword-toolbar .analysis-keyword-filter-select:nth-of-type(n+3),
.analysis-keyword-pool-column .wizard-keyword-toolbar #analysis-keyword-selection-filter,
.analysis-keyword-pool-column .wizard-keyword-toolbar #analysis-keyword-cluster-filter,
.analysis-keyword-pool-column .wizard-keyword-toolbar .badge {
    display: none;
}

.analysis-pool-actions {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border);
}

.analysis-pool-actions .wizard-check {
    min-height: 36px;
}

.analysis-clear-pool-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 36px;
}

.analysis-clear-pool-btn i {
    width: 16px;
    height: 16px;
}

.analysis-selection-save-hint {
    margin-top: 0.6rem;
}

.analysis-config-card {
    background: #fff;
}

.analysis-live-progress-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.15rem;
    background: #fff;
}

.analysis-live-progress-card h4 {
    margin-bottom: 0.85rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
}

.analysis-engine-progress-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 1.2rem;
}

.analysis-engine-progress-row {
    display: grid;
    grid-template-columns: 84px minmax(120px, 1fr) 56px;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.88rem;
}

.analysis-engine-progress-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5e7eb;
}

.analysis-engine-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

#analysis-run-status {
    margin-bottom: 0.75rem;
}

#analysis-run-note {
    margin-bottom: 0.85rem;
}

#bulk-progress .analysis-live-progress-card {
    margin-top: 0.75rem;
    margin-bottom: 1rem;
}

#bulk-progress > .bulk-actions {
    margin-top: 1rem;
    margin-bottom: 1.25rem;
}

.analysis-import-status {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.analysis-import-item {
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    border: 1px solid var(--border);
    background: #f8fafc;
}

.analysis-import-item.success {
    border-color: #86efac;
    background: #f0fdf4;
    color: #166534;
}

.analysis-import-item.error {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.analysis-import-item.loading {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.analysis-import-item.loading::before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #93c5fd;
    border-top-color: #2563eb;
    animation: analysis-import-spin 0.8s linear infinite;
    flex: 0 0 14px;
}

@keyframes analysis-import-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.wizard-keyword-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.wizard-keyword-toolbar .custom-input {
    flex: 1;
    min-width: 220px;
}

.wizard-keyword-toolbar .analysis-keyword-filter-select {
    min-width: 160px;
    max-width: 220px;
}

.analysis-keyword-list-wrapper {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    max-height: 500px;
    overflow-y: auto;
}

.analysis-keyword-table {
    margin: 0 !important;
}

.analysis-sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.analysis-sortable-th::after {
    content: ' \2195';
    color: #94a3b8;
    font-weight: 600;
}

.analysis-sortable-th.active.asc::after {
    content: ' \2191';
    color: #1d4ed8;
}

.analysis-sortable-th.active.desc::after {
    content: ' \2193';
    color: #1d4ed8;
}

.analysis-cost-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    gap: 0.875rem;
    margin-bottom: 1rem;
}

.analysis-cost-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    background: #f8fafc;
}

.analysis-cost-card h4 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: var(--text-main);
}

.analysis-cost-card p {
    margin: 0.15rem 0;
    font-size: 0.86rem;
    color: var(--text-body);
}

.analysis-cost-card.total {
    background: linear-gradient(135deg, #f0f9ff, #ecfeff);
    border-color: #bae6fd;
}

.wizard-confirm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ========================================
   TABLES
   ======================================== */

.table-responsive {
    overflow-x: auto;
    margin-top: 1rem;
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.data-table th {
    text-align: left;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.data-table th:first-child {
    border-radius: var(--radius) 0 0 0;
}

.data-table th:last-child {
    border-radius: 0 var(--radius) 0 0;
}

.data-table td {
    padding: 1.125rem 1.25rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
    color: var(--text-body);
}

.data-table tbody tr {
    transition: var(--transition-fast);
}

.data-table tbody tr:hover {
    background: #fafbfc;
}

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

/* Compact layout only for analytics detailed breakdown table */
.analytics-breakdown-responsive {
    overflow-x: visible;
}

#analytics-breakdown-table {
    table-layout: fixed;
}

#analytics-breakdown-table th,
#analytics-breakdown-table td {
    white-space: normal;
    word-break: break-word;
    padding: 0.65rem 0.5rem;
    font-size: 0.8rem;
    line-height: 1.3;
}

#analytics-breakdown-table th {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
}

#analytics-breakdown-table .status-badge {
    padding: 0.2rem 0.45rem;
    font-size: 0.72rem;
    white-space: nowrap;
}

#analytics-breakdown-table .url-badge {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
}

.badge-set {
    background: #fef3c7;
    color: #92400e;
}

.filter-bar {
    margin-bottom: 1rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.filter-bar .custom-select {
    max-width: 300px;
}

/* ========================================
   RESULTS DISPLAY
   ======================================== */

#results {
    display: none;
}

.ai-answer-content {
    font-size: 1.05rem;
    color: var(--text-body);
    line-height: 1.75;
}

.ai-answer-content p {
    margin-bottom: 1.25rem;
}

.ai-answer-content p:last-child {
    margin-bottom: 0;
}

.ai-answer-content ul,
.ai-answer-content ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.ai-answer-content li {
    margin-bottom: 0.625rem;
}

.ai-answer-content li:last-child {
    margin-bottom: 0;
}

.ai-answer-content strong {
    color: var(--text-main);
    font-weight: 600;
}

.ai-answer-content a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid rgba(36, 159, 217, 0.3);
    transition: var(--transition);
}

.ai-answer-content a:hover {
    border-bottom-color: var(--primary);
    background: rgba(36, 159, 217, 0.05);
}

/* Brands List */
.brands-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.brand-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: var(--text-main);
    border-bottom: 1px solid var(--border);
    transition: var(--transition-fast);
    border-radius: var(--radius-sm);
}

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

.brand-item:hover {
    background: #f8fafc;
}

.brand-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.brand-name {
    font-weight: 500;
}

.brand-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.brand-count {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Position Badge */
.position-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 0.25rem 0.5rem;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: #7dd3fc;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: 'Outfit', monospace;
}

/* Intent Badges */
.intent-badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.intent-informational {
    background: #dbeafe;
    color: #1e40af;
}

.intent-navigational {
    background: #e0e7ff;
    color: #3730a3;
}

.intent-transactional {
    background: #dcfce7;
    color: #166534;
}

.intent-commercial {
    background: #fef3c7;
    color: #92400e;
}

/* URL Badges */
.url-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: #f1f5f9;
    color: #2563eb;
    border-radius: 4px;
    font-size: 0.8rem;
    text-decoration: none;
    border: 1px solid #e2e8f0;
    transition: var(--transition-fast);
    word-break: break-all;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.url-badge:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

.url-badge-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: 4px;
    color: var(--text-muted);
    transition: var(--transition-fast);
    text-decoration: none;
}

.url-badge-small:hover {
    color: var(--primary);
    background: var(--primary-light);
}

/* SoV Bar */
.sov-bar-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 150px;
}

.sov-bar {
    height: 8px;
    background: linear-gradient(90deg, var(--primary), #7dd3fc);
    border-radius: 100px;
    min-width: 2px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.sov-bar-competitor {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.sov-bar-wrapper span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
}

/* Customer Brand Row */
.customer-brand-row {
    background: linear-gradient(90deg, rgba(36, 159, 217, 0.05), transparent) !important;
}

.customer-brand-row td {
    border-bottom: 2px solid var(--primary) !important;
}

/* Provenance / Sources */
.url-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.url-item {
    background: transparent;
    padding: 0;
    border: none;
    margin-bottom: 0;
}

.url-link {
    display: inline-block;
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 0.375rem;
    transition: var(--transition-fast);
    border-bottom: 1px solid transparent;
}

.url-link:hover {
    border-bottom-color: #2563eb;
}

.url-purpose {
    font-size: 0.95rem;
    color: var(--text-body);
    display: block;
    line-height: 1.5;
}

/* Raw JSON Toggle */
.raw-json-toggle {
    display: inline-block;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    margin: 2rem 0 1rem 0;
    border: none;
    padding: 0;
    text-decoration: underline;
    text-decoration-style: dotted;
    transition: var(--transition-fast);
}

.raw-json-toggle:hover {
    background: transparent;
    color: var(--primary);
    transform: none;
    box-shadow: none;
}

#raw-json {
    display: none;
    margin-top: 0.5rem;
    animation: slideDown 0.3s ease-out;
}

#raw-json.visible {
    display: block;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#raw-json-content {
    background: #0f172a;
    color: #e2e8f0;
    padding: 1.5rem;
    border-radius: var(--radius);
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.825rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid #334155;
    box-shadow: var(--shadow);
    max-height: 500px;
    overflow-y: auto;
}

#raw-json-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#raw-json-content::-webkit-scrollbar-track {
    background: #1e293b;
    border-radius: 4px;
}

#raw-json-content::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

#raw-json-content::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* JSON Syntax Highlighting */
.json-key {
    color: #7dd3fc;
}

.json-string {
    color: #86efac;
}

.json-number {
    color: #fbbf24;
}

.json-boolean {
    color: #f472b6;
}

.json-null {
    color: #a78bfa;
}

/* ========================================
   LOADING & STATES
   ======================================== */

.loading-overlay {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin: 3rem 0;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(36, 159, 217, 0.1);
    border-left-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s infinite cubic-bezier(0.5, 0.1, 0.4, 0.9);
}

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

.loading-overlay p {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 1rem;
}

/* Error Message */
.error-message {
    background: #fff1f2;
    color: #be123c;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius);
    border: 1px solid #fda4af;
    margin-bottom: 2rem;
    display: none;
    align-items: center;
    gap: 0.875rem;
    box-shadow: var(--shadow-sm);
}

.error-message i {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ========================================
   PROGRESS & BULK
   ======================================== */

.progress-bar-container {
    width: 100%;
    height: 12px;
    background: #e2e8f0;
    border-radius: 100px;
    margin: 1.5rem 0;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    width: 0%;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(36, 159, 217, 0.5);
}

.bulk-results-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 500px;
    overflow-y: auto;
    padding: 1rem;
    background: #f8fafc;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.bulk-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    background: white;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    transition: var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.bulk-item:hover {
    box-shadow: var(--shadow);
}

.bulk-item.success {
    border-left: 4px solid var(--success);
}

.bulk-item.loading {
    border-left: 4px solid var(--primary);
}

.bulk-item.warning {
    border-left: 4px solid var(--warning);
}

.bulk-item.error {
    border-left: 4px solid var(--error);
}

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

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(8px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 2rem;
    animation: fadeIn 0.2s ease-out;
}

.modal {
    background: white;
    width: 100%;
    max-width: 1000px;
    max-height: 90vh;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    animation: zoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fafbfc;
}

.modal-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
}

.modal-body {
    padding: 2rem;
    overflow-y: auto;
}

.close-modal {
    background: white;
    border: 1px solid var(--border);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    color: var(--text-muted);
}

.close-modal:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: var(--error);
    transform: rotate(90deg);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.mt-1 {
    margin-top: 1rem;
}

.mb-1 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

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

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

/* ========================================
   TABLE CONTROLS (Search + Pagination)
   ======================================== */

.table-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.table-search-wrapper {
    position: relative;
    flex: 1;
    max-width: 320px;
    min-width: 200px;
}

.table-search-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}

.table-search-input {
    width: 100%;
    padding: 0.625rem 1rem 0.625rem 2.5rem;
    border-radius: 50px;
    border: 1.5px solid var(--border);
    background: #f8fafc;
    font-size: 0.875rem;
    color: var(--text-main);
    outline: none;
    transition: var(--transition);
    font-family: 'Inter', sans-serif;
}

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

.table-search-input:focus {
    border-color: var(--primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(36, 159, 217, 0.1);
}

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

.table-pagination {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.table-pagination .page-info,
.dfs-pagination .page-info {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    margin: 0 0.5rem;
    white-space: nowrap;
}

.table-pagination .page-btn,
.dfs-pagination .page-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border);
    background: white;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-body);
    font-size: 0.8rem;
    font-weight: 600;
    transition: var(--transition-fast);
    font-family: 'Inter', sans-serif;
}

.table-pagination .page-btn:hover:not(:disabled),
.dfs-pagination .page-btn:hover:not(:disabled) {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

.table-pagination .page-btn:disabled,
.dfs-pagination .page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.table-pagination .page-btn.active,
.dfs-pagination .page-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 2px 6px rgba(36, 159, 217, 0.3);
}

.table-pagination .page-btn i,
.dfs-pagination .page-btn i {
    width: 16px;
    height: 16px;
}

.table-pagination .rows-select,
.dfs-pagination .rows-select {
    padding: 0.375rem 0.5rem;
    border-radius: 6px;
    border: 1.5px solid var(--border);
    background: white;
    font-size: 0.8rem;
    color: var(--text-body);
    cursor: pointer;
    outline: none;
    font-family: 'Inter', sans-serif;
}

.table-pagination .rows-select:focus,
.dfs-pagination .rows-select:focus {
    border-color: var(--primary);
}

/* AI Engine Badges */
.engine-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.engine-openai {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    color: #2e7d32;
}

.engine-gemini {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: #1565c0;
}
.engine-claude {
    background: linear-gradient(135deg, #f3e8ff, #ddd6fe);
    color: #5b21b6;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
    .sidebar {
        width: 80px;
        padding: 2rem 0.5rem;
    }

    .sidebar span,
    .sidebar-logo,
    .sidebar-footer {
        display: none;
    }

    .nav-item {
        justify-content: center;
        padding: 1rem;
    }

    .nav-item.active::before {
        display: none;
    }

    .main-content {
        margin-left: 80px;
        padding: 2rem 1.5rem;
    }

    .view-header h1 {
        font-size: 1.875rem;
    }

    .form-row {
        flex-direction: column;
    }

    .analysis-cost-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        flex-direction: row;
        padding: 1rem;
    }

    .sidebar-header {
        margin: 0;
    }

    .sidebar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0;
    }

    .main-content {
        margin-left: 0;
        padding: 1.5rem 1rem;
    }

    .inline-form {
        flex-direction: column;
        align-items: stretch;
    }

    .analyze-button {
        width: 100%;
        justify-content: center;
    }

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

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

    .wizard-stepper {
        gap: 0.5rem;
    }

    .wizard-step-indicator {
        width: calc(50% - 0.25rem);
        justify-content: center;
    }

    .analysis-engine-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analysis-keyword-flow-grid {
        grid-template-columns: 1fr;
    }

    .analysis-keyword-pool-column .wizard-keyword-toolbar {
        grid-template-columns: 1fr;
    }

    .wizard-keyword-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .wizard-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .wizard-confirm-row {
        flex-direction: column;
        align-items: stretch;
    }

    .quota-summary-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .quota-summary-values {
        align-items: flex-start;
    }

    .billing-plan-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .billing-pricing-hero h2 {
        font-size: 1.55rem;
    }

    .billing-pricing-points {
        justify-content: flex-start;
        gap: 0.55rem 1rem;
    }

    .billing-trial-warning {
        margin-top: 0.75rem;
        font-size: 0.88rem;
    }

    .billing-pricing-price-line .price {
        font-size: 2.2rem;
    }

    .billing-pricing-price-line .per {
        font-size: 1.2rem;
    }

    .billing-enterprise-row {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 680px) {
    .analysis-engine-grid {
        grid-template-columns: 1fr;
    }

    .analysis-keyword-pool-header,
    .analysis-engine-progress-row {
        grid-template-columns: 1fr;
    }

    .analysis-keyword-pool-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    html {
        scroll-padding-top: 148px;
    }

    .app-container {
        display: block;
        min-width: 0;
    }

    .sidebar {
        position: sticky;
        top: 0;
        z-index: 1000;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 0.65rem;
        width: 100%;
        height: auto;
        max-height: none;
        padding: 0.65rem;
        border-bottom: 1px solid rgba(148, 163, 184, 0.22);
        overflow: visible;
    }

    .sidebar span {
        display: inline;
    }

    .sidebar-logo {
        display: block;
        width: 112px;
        max-width: 112px;
    }

    .sidebar-header {
        margin: 0;
        padding: 0;
        text-align: left;
    }

    .sidebar-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.5rem;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 0;
        text-align: right;
    }

    .sidebar-footer > * {
        font-size: 0.75rem;
    }

    .sidebar-user-row {
        margin: 0;
        justify-content: flex-end;
        gap: 0.4rem;
        min-width: 0;
    }

    .sidebar-user-icon {
        display: none;
    }

    .sidebar-user-name {
        display: inline-block;
        max-width: 116px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.78rem;
    }

    .sidebar-user-actions {
        gap: 0.2rem;
    }

    .sidebar-user-actions .btn-icon {
        width: 32px;
        height: 32px;
    }

    .sidebar-quota-box {
        display: none;
    }

    .sidebar-nav {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.45rem;
        width: 100%;
        padding: 0.2rem 0 0.1rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .sidebar-nav::-webkit-scrollbar {
        display: none;
    }

    .nav-item {
        flex: 0 0 auto;
        min-height: 42px;
        padding: 0.58rem 0.72rem;
        gap: 0.45rem;
        border: 1px solid rgba(148, 163, 184, 0.18);
        background: rgba(255, 255, 255, 0.045);
        border-radius: 999px;
        font-size: 0.8rem;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .nav-item i {
        width: 17px;
        height: 17px;
    }

    .nav-item:hover {
        transform: none;
    }

    .nav-item.active {
        background: var(--primary);
        box-shadow: 0 4px 14px rgba(36, 159, 217, 0.32);
    }

    .main-content {
        width: 100%;
        min-width: 0;
        margin-left: 0;
        padding: 1rem;
    }

    .view {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .view-header {
        margin-bottom: 1.25rem;
    }

    .view-header h1 {
        font-size: clamp(1.6rem, 8vw, 2.1rem);
        line-height: 1.08;
    }

    .view-header p {
        font-size: 0.95rem;
    }

    .card,
    .search-card,
    .billing-plan-card,
    .billing-plan-summary-card,
    .billing-plans-card,
    .billing-schedule-card {
        padding: 1rem !important;
        border-radius: 14px;
        margin-bottom: 1rem;
    }

    .card-title {
        align-items: flex-start;
        gap: 0.55rem;
        font-size: 1.08rem;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
    }

    .filter-bar .custom-select,
    .filter-bar .custom-input,
    .filter-bar .btn-secondary,
    .filter-bar .analyze-button,
    .custom-select,
    .custom-input,
    .custom-textarea,
    .custom-file-input {
        width: 100%;
        max-width: none;
    }

    .stats-grid,
    .customer-kpi-grid,
    .dashboard-insight-grid,
    .billing-plan-summary-grid,
    .billing-plans-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .stat-card {
        padding: 1rem;
        min-width: 0;
    }

    .stat-value {
        font-size: 2rem;
    }

    .customer-kpi-card .stat-value {
        font-size: 1.7rem;
    }

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

    .chart-card {
        padding: 1rem;
    }

    .chart-container {
        height: 260px;
        min-width: 0;
    }

    .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table {
        min-width: 720px;
    }

    .data-table th,
    .data-table td {
        padding: 0.75rem 0.85rem;
        font-size: 0.86rem;
    }

    .analytics-breakdown-responsive {
        overflow-x: auto;
    }

    #analytics-breakdown-table {
        min-width: 820px;
        table-layout: auto;
    }

    .analysis-keyword-list-wrapper {
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .analysis-keyword-table {
        min-width: 660px;
    }

    .analysis-pool-actions,
    .bulk-actions,
    .billing-schedule-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .analysis-pool-actions .wizard-check,
    .analysis-clear-pool-btn,
    .analysis-advanced-prompt-btn,
    .billing-schedule-actions .analyze-button,
    .billing-schedule-actions .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .billing-schedule-usage-grid {
        grid-template-columns: 1fr;
    }

    .billing-pricing-option {
        padding: 1rem;
    }

    .billing-pricing-facts div {
        gap: 0.75rem;
    }

    .billing-enterprise-row {
        padding: 1rem;
    }

    .wizard-stepper {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .wizard-stepper::-webkit-scrollbar {
        display: none;
    }

    .wizard-step-indicator {
        width: auto;
        flex: 0 0 auto;
        min-width: 132px;
        padding: 0.45rem 0.7rem;
        font-size: 0.8rem;
    }

    .analysis-wizard {
        overflow: visible;
    }

    .analysis-source-column,
    .analysis-keyword-pool-column {
        min-width: 0;
    }

    .analysis-engine-grid {
        grid-template-columns: 1fr;
    }

    .analysis-cost-grid {
        grid-template-columns: 1fr;
    }

    .modal-content {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
        overflow-y: auto;
    }

    .notification {
        top: 0.75rem;
        left: 0.75rem;
        right: 0.75rem;
        min-width: 0;
        max-width: none;
        transform: translateY(-130%);
        transition: transform 0.25s ease;
    }

    .notification.show {
        right: 0.75rem;
        transform: translateY(0);
    }
}

@media (max-width: 520px) {
    .sidebar {
        grid-template-columns: 1fr auto;
    }

    .sidebar-logo {
        width: 104px;
        max-width: 104px;
    }

    .sidebar-user-name {
        display: none;
    }

    .main-content {
        padding: 0.8rem;
    }

    .view-header h1 {
        font-size: 1.65rem;
    }

    .card,
    .search-card,
    .billing-plan-card,
    .billing-plan-summary-card,
    .billing-plans-card,
    .billing-schedule-card {
        padding: 0.85rem !important;
    }

    .data-table {
        min-width: 680px;
    }

    .analysis-keyword-table {
        min-width: 620px;
    }
}

/* ========================================
   DELETE BUTTON & NOTIFICATIONS
   ======================================== */

.btn-delete:hover {
    color: var(--error) !important;
    background: #fee2e2 !important;
}

/* Notification Toast */
.notification {
    position: fixed;
    top: 2rem;
    right: -400px;
    background: white;
    padding: 1rem 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-xl);
    display: flex;
    align-items: center;
    gap: 0.875rem;
    z-index: 10000;
    min-width: 300px;
    max-width: 400px;
    border-left: 4px solid var(--primary);
    transition: right 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.notification.show {
    right: 2rem;
}

.notification-success {
    border-left-color: var(--success);
    color: var(--success);
}

.notification-error {
    border-left-color: var(--error);
    color: var(--error);
}

.notification span {
    color: var(--text-main);
    font-weight: 500;
    font-size: 0.95rem;
}

/* ========================================
   ANALYTICS DASHBOARD
   ======================================== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: white;
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    transition: var(--transition);
}

.stat-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stat-value {
    font-family: 'Outfit', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
}

.stat-value.highlight {
    color: var(--primary);
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.customer-kpi-grid {
    margin-bottom: 1.5rem;
    grid-template-columns: repeat(5, minmax(180px, 1fr));
}

.customer-kpi-card .stat-value {
    font-size: 1.9rem;
}

.customer-kpi-value-line {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.kpi-change {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-weight: 700;
    font-size: 0.82rem;
}

.kpi-change.positive {
    background: #dcfce7;
    color: #166534;
}

.kpi-change.negative {
    background: #fee2e2;
    color: #991b1b;
}

.kpi-change.neutral {
    background: #e2e8f0;
    color: #334155;
}

.citation-list {
    display: grid;
    gap: 0.5rem;
    width: 100%;
}

.citation-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.92rem;
    color: var(--text-main);
    border-top: 1px solid var(--border);
    padding-top: 0.45rem;
}

.citation-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.citation-item strong {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
}

.customer-visibility-card {
    margin-bottom: 1.5rem;
}

.metric-info-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    margin-left: 0.3rem;
    padding: 0;
}

.metric-info-icon:hover,
.metric-info-icon:focus-visible {
    background: #e2e8f0;
    color: #334155;
    border-color: #94a3b8;
    outline: none;
}

.dashboard-info-popover {
    position: absolute;
    z-index: 1300;
    width: min(420px, calc(100vw - 24px));
    background: #ffffff;
    border: 1px solid #dbe4f0;
    border-radius: 12px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
    padding: 0.85rem 1rem;
}

.dashboard-info-popover[hidden] {
    display: none;
}

.dashboard-info-popover-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    color: #0f172a;
    margin-bottom: 0.4rem;
}

.dashboard-info-popover-body {
    margin: 0;
    color: #334155;
    font-size: 0.87rem;
    line-height: 1.45;
}

.dashboard-insight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

#customer-dashboard-panel .filter-bar {
    position: sticky;
    top: 0;
    z-index: 8;
    background: #ffffff;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.dashboard-insight-card {
    padding: 1rem 1.1rem;
}

.dashboard-insight-label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}

.dashboard-insight-label.risk { color: #dc2626; }
.dashboard-insight-label.chance { color: #d97706; }
.dashboard-insight-label.insight { color: #1d4ed8; }

.dashboard-insight-card p {
    margin: 0;
    color: var(--text-body);
    font-size: 0.92rem;
}

.model-compare-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 0.75rem;
}

.model-compare-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    background: #f8fafc;
}

.model-compare-card h4 {
    margin: 0 0 0.45rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
}

.model-compare-card p {
    margin: 0.2rem 0;
    font-size: 0.9rem;
    color: var(--text-body);
}

.simple-bar-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.simple-bar-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(120px, 2fr) auto auto;
    gap: 0.65rem;
    align-items: center;
}

.simple-bar-row.is-clickable {
    cursor: pointer;
    border-radius: 10px;
    padding: 0.35rem 0.5rem;
    transition: background-color 0.15s ease;
}

.simple-bar-row.is-clickable:hover {
    background: #f8fafc;
}

.simple-bar-row.is-clickable.is-selected {
    background: #eff6ff;
}

.simple-bar-row.is-own .simple-bar-label {
    font-weight: 700;
    color: #0f172a;
}

.simple-bar-label {
    font-size: 0.9rem;
    color: var(--text-body);
}

.simple-bar-track {
    height: 10px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.simple-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #249fd9, #2a66f5);
}

.simple-bar-value {
    min-width: 56px;
    text-align: right;
    font-size: 0.86rem;
    font-weight: 700;
    color: #334155;
}

.simple-bar-delta {
    min-width: 56px;
    text-align: right;
    font-size: 0.82rem;
    font-weight: 700;
}

.simple-bar-delta.positive { color: #16a34a; }
.simple-bar-delta.negative { color: #dc2626; }
.simple-bar-delta.neutral { color: #64748b; }

.model-delta-positive {
    color: #16a34a;
    font-weight: 800;
}

.model-delta-negative {
    color: #dc2626;
    font-weight: 800;
}

.model-delta-neutral {
    color: #64748b;
    font-weight: 800;
}

.cluster-keyword-panel {
    margin-top: 0.8rem;
    border-top: 1px solid #e2e8f0;
    padding-top: 0.75rem;
}

.cluster-keyword-panel-title {
    font-size: 0.86rem;
    color: #334155;
    margin-bottom: 0.5rem;
}

.cluster-keyword-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.45rem;
}

.cluster-keyword-modal-list {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.cluster-keyword-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #1e3a8a;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.1;
}

#dashboard-competitors-slot,
#dashboard-mentions-slot,
#dashboard-details-slot {
    margin-bottom: 1rem;
}

#dashboard-details-slot #analytics-breakdown-table th:nth-child(7),
#dashboard-details-slot #analytics-breakdown-table th:nth-child(8),
#dashboard-details-slot #analytics-breakdown-table th:nth-child(9),
#dashboard-details-slot #analytics-breakdown-table th:nth-child(10),
#dashboard-details-slot #analytics-breakdown-table th:nth-child(11),
#dashboard-details-slot #analytics-breakdown-table th:nth-child(12),
#dashboard-details-slot #analytics-breakdown-table td:nth-child(7),
#dashboard-details-slot #analytics-breakdown-table td:nth-child(8),
#dashboard-details-slot #analytics-breakdown-table td:nth-child(9),
#dashboard-details-slot #analytics-breakdown-table td:nth-child(10),
#dashboard-details-slot #analytics-breakdown-table td:nth-child(11),
#dashboard-details-slot #analytics-breakdown-table td:nth-child(12) {
    display: none;
}

.customer-visibility-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.segmented-control {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: #f8fafc;
}

.segmented-btn {
    border: 0;
    background: transparent;
    padding: 0.45rem 0.8rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}

.segmented-btn.active {
    background: #e2f2fb;
    color: #0f3d5f;
}

.customer-visibility-container {
    height: 360px;
}

@media (max-width: 900px) {
    .customer-visibility-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .customer-visibility-container {
        height: 300px;
    }

    .customer-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-insight-grid,
    .model-compare-grid {
        grid-template-columns: 1fr;
    }

    .simple-bar-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .simple-bar-value,
    .simple-bar-delta {
        text-align: left;
    }
}

/* Breakdown Table Custom */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-success {
    background: #dcfce7;
    color: #166534;
}

.status-fail {
    background: #fee2e2;
    color: #991b1b;
}

.sentiment-positive {
    background: #dcfce7;
    color: #166534;
}

.sentiment-neutral {
    background: #e2e8f0;
    color: #334155;
}

.sentiment-critical {
    background: #fee2e2;
    color: #991b1b;
}

/* Charts */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.admin-dashboard-grid {
    align-items: start;
}

#dashboard-analytics-host {
    margin-top: 1rem;
}

.admin-error-cell {
    max-width: 520px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chart-card {
    padding: 1.5rem;
}

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

/* Stop Button */
.stop-button {
    background: linear-gradient(135deg, var(--error), #dc2626) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

.stop-button:hover:not(:disabled) {
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4) !important;
}

.bulk-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.85rem;
}

.analysis-advanced-prompt-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.analysis-advanced-prompt-hint {
    margin-bottom: 0.75rem;
}

.advanced-prompt-modal {
    max-width: 760px;
}

.advanced-prompt-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.advanced-prompt-modal-lead {
    margin: 0;
    font-size: 1rem;
    color: var(--text-main);
}

.advanced-prompt-modal-list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-body);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.advanced-prompt-modal-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

/* ========================================
   DATAFORSEO IMPORT
   ======================================== */

.dfs-search-section {
    margin-bottom: 1.5rem;
}

.dfs-input-wrapper {
    position: relative;
}

.dfs-input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    pointer-events: none;
}

.dfs-seed-input {
    padding-left: 2.75rem !important;
}

.dfs-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.5rem 0;
}

.dfs-loading p {
    color: var(--text-muted);
    font-weight: 500;
}

/* Results header */
.dfs-results-header {
    background: linear-gradient(135deg, #f0f9ff, #f8fafc);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.dfs-results-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dfs-results-info h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    margin: 0;
}

.dfs-selected-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: white;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    transition: var(--transition);
}

.dfs-results-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dfs-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 50px;
    color: var(--text-body);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
}

.dfs-action-btn i {
    width: 14px;
    height: 14px;
}

.dfs-action-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

.dfs-filter-wrapper {
    position: relative;
    flex: 1;
    min-width: 180px;
    max-width: 260px;
}

.dfs-filter-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    pointer-events: none;
}

.dfs-filter-input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    border: 1.5px solid var(--border);
    border-radius: 50px;
    background: white;
    font-size: 0.8rem;
    color: var(--text-main);
    outline: none;
    transition: var(--transition);
    font-family: 'Inter', sans-serif;
}

.dfs-filter-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(36, 159, 217, 0.1);
}

/* DataForSEO Table */
.dfs-table-wrapper {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.dfs-table-wrapper::-webkit-scrollbar {
    width: 6px;
}

.dfs-table-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.dfs-table-wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.dfs-table {
    margin: 0 !important;
}

.dfs-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.dfs-table thead th {
    background: #f1f5f9;
    border-bottom: 2px solid var(--border);
}

.dfs-checkbox-col {
    width: 42px;
    text-align: center !important;
}

.dfs-checkbox-col input[type="checkbox"] {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--primary);
}

.dfs-table td input[type="checkbox"] {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--primary);
}

.dfs-table tbody tr {
    cursor: pointer;
    transition: var(--transition-fast);
}

.dfs-table tbody tr:hover {
    background: #f0f9ff !important;
}

.dfs-table tbody tr.dfs-selected {
    background: #e0f2fe !important;
}

.dfs-table tbody tr.dfs-selected td {
    border-bottom-color: #bae6fd;
}

/* Volume bar inline */
.dfs-volume-cell {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.dfs-volume-bar {
    width: 60px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 100px;
    overflow: hidden;
    flex-shrink: 0;
}

.dfs-volume-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #7dd3fc);
    border-radius: 100px;
    transition: width 0.4s ease;
}

.dfs-volume-text {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-main);
    min-width: 50px;
}

/* Competition badges */
.dfs-comp-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dfs-comp-low {
    background: #dcfce7;
    color: #166534;
}

.dfs-comp-medium {
    background: #fef3c7;
    color: #92400e;
}

.dfs-comp-high {
    background: #fee2e2;
    color: #991b1b;
}

/* Intent badge variants from DataForSEO */
.intent-badge.intent-commercial_investigation {
    background: #e0e7ff;
    color: #3730a3;
}

/* DFS Pagination */
.dfs-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
}

/* Use selected button area */
.dfs-use-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

@media (max-width: 1024px) {
    .billing-schedule-form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .billing-schedule-form-grid .billing-inline-check-group {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .billing-schedule-form-grid {
        grid-template-columns: 1fr;
    }

    .billing-schedule-slot-row {
        grid-template-columns: 1fr;
    }

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

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

    .competitor-row-remove {
        width: 100%;
    }
}

/* ========================================
   DARK MODE
   ======================================== */

:root[data-theme='dark'] body,
:root[data-theme='dark'] .main-content {
    background: var(--background);
    color: var(--text-main);
}

:root[data-theme='dark'] .card,
:root[data-theme='dark'] .stat-card,
:root[data-theme='dark'] .search-card,
:root[data-theme='dark'] .billing-plan-card,
:root[data-theme='dark'] .billing-plan-summary-card,
:root[data-theme='dark'] .billing-plans-card,
:root[data-theme='dark'] .billing-schedule-card {
    background: linear-gradient(180deg, #0f1b32, #0b1426);
    border-color: var(--border);
}

:root[data-theme='dark'] .billing-plan-summary-item,
:root[data-theme='dark'] .billing-plan-option,
:root[data-theme='dark'] .billing-pricing-option,
:root[data-theme='dark'] .quota-dashboard-item,
:root[data-theme='dark'] .bulk-item,
:root[data-theme='dark'] .modal,
:root[data-theme='dark'] .dashboard-info-popover {
    background: #0f1a30;
    border-color: var(--border);
}

:root[data-theme='dark'] .billing-plan-metrics div,
:root[data-theme='dark'] .model-compare-card,
:root[data-theme='dark'] .bulk-results-list,
:root[data-theme='dark'] .segmented-control,
:root[data-theme='dark'] .table-search-input,
:root[data-theme='dark'] .table-pagination .page-btn,
:root[data-theme='dark'] .table-pagination .rows-select,
:root[data-theme='dark'] .dfs-pagination .rows-select,
:root[data-theme='dark'] .custom-select,
:root[data-theme='dark'] .custom-input,
:root[data-theme='dark'] .custom-textarea,
:root[data-theme='dark'] .custom-file-input {
    background: #0b1426;
    border-color: var(--border);
    color: var(--text-main);
}

:root[data-theme='dark'] .custom-select::placeholder,
:root[data-theme='dark'] .custom-input::placeholder,
:root[data-theme='dark'] .custom-textarea::placeholder,
:root[data-theme='dark'] .table-search-input::placeholder {
    color: var(--text-muted);
}

:root[data-theme='dark'] .data-table th {
    background: #0b1426;
    color: var(--text-muted);
}

:root[data-theme='dark'] .data-table tbody tr:hover,
:root[data-theme='dark'] .simple-bar-row.is-clickable:hover,
:root[data-theme='dark'] .brand-item:hover {
    background: #101d35;
}

:root[data-theme='dark'] .simple-bar-row.is-clickable.is-selected {
    background: #132746;
}

:root[data-theme='dark'] .simple-bar-track,
:root[data-theme='dark'] .progress-bar-container {
    background: #1b2a41;
}

:root[data-theme='dark'] .cluster-keyword-chip {
    background: #162641;
    color: #bfdbfe;
}

:root[data-theme='dark'] .billing-plan-source-chip,
:root[data-theme='dark'] .url-badge {
    background: #132746;
    border-color: #27496f;
    color: #93c5fd;
}

:root[data-theme='dark'] .billing-pricing-option {
    background: linear-gradient(180deg, #101d35, #0b1426);
    border-color: #2a3d59;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.32);
}

:root[data-theme='dark'] .billing-pricing-option.selected,
:root[data-theme='dark'] .billing-pricing-option.is-popular {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.22), 0 16px 30px rgba(0, 0, 0, 0.35);
}

:root[data-theme='dark'] .billing-pricing-option.active {
    border-color: rgba(74, 222, 128, 0.62);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.2), 0 16px 30px rgba(0, 0, 0, 0.35);
}

:root[data-theme='dark'] .billing-pricing-hero h2,
:root[data-theme='dark'] .billing-pricing-price-line .price,
:root[data-theme='dark'] .billing-pricing-facts strong,
:root[data-theme='dark'] .billing-enterprise-row strong,
:root[data-theme='dark'] .quota-dashboard-item .value {
    color: var(--text-main);
}

:root[data-theme='dark'] .billing-pricing-hero p,
:root[data-theme='dark'] .billing-pricing-name,
:root[data-theme='dark'] .billing-pricing-price-line .per,
:root[data-theme='dark'] .billing-pricing-note,
:root[data-theme='dark'] .billing-pricing-head p,
:root[data-theme='dark'] .billing-pricing-facts span,
:root[data-theme='dark'] .billing-enterprise-row p,
:root[data-theme='dark'] .quota-dashboard-item .label {
    color: var(--text-muted);
}

:root[data-theme='dark'] .billing-pricing-points span {
    color: #99f6e4;
}

:root[data-theme='dark'] .billing-pricing-points i {
    color: #34d399;
}

:root[data-theme='dark'] .billing-pricing-facts div,
:root[data-theme='dark'] .billing-pricing-features li {
    color: var(--text-body);
}

:root[data-theme='dark'] .billing-pricing-features li.is-unavailable {
    color: #60738d;
}

:root[data-theme='dark'] .billing-pricing-features li.is-unavailable i {
    color: #64748b;
}

:root[data-theme='dark'] .billing-pricing-divider {
    border-top-color: var(--border);
}

:root[data-theme='dark'] .billing-pricing-trial-note,
:root[data-theme='dark'] .billing-pricing-badge {
    background: rgba(56, 189, 248, 0.18);
    color: #bae6fd;
}

:root[data-theme='dark'] .billing-trial-warning {
    background: rgba(37, 99, 235, 0.18);
    border-color: rgba(96, 165, 250, 0.55);
    color: #dbeafe;
}

:root[data-theme='dark'] .billing-trial-warning strong {
    color: #bfdbfe;
}

:root[data-theme='dark'] .billing-pricing-model-tags .billing-plan-source-chip {
    background: #132746;
    border-color: #2c4f77;
    color: #bfdbfe;
}

:root[data-theme='dark'] .billing-enterprise-row,
:root[data-theme='dark'] .billing-inline-check,
:root[data-theme='dark'] .billing-switch,
:root[data-theme='dark'] .billing-schedule-slot-fixed-time,
:root[data-theme='dark'] .quota-dashboard-item {
    background: #0b1426;
    border-color: var(--border);
    color: var(--text-main);
}

:root[data-theme='dark'] .quota-dashboard-item.highlight {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(34, 197, 94, 0.14));
    border-color: rgba(56, 189, 248, 0.45);
}

:root[data-theme='dark'] .data-table td {
    color: var(--text-body);
}

:root[data-theme='dark'] #sets-table {
    background: #0b1426;
}

:root[data-theme='dark'] #sets-table .set-group-header {
    background: linear-gradient(135deg, #101d35, #0d182d) !important;
    border-left-color: var(--primary);
}

:root[data-theme='dark'] #sets-table .set-group-header:hover {
    background: linear-gradient(135deg, #132746, #101d35) !important;
}

:root[data-theme='dark'] #sets-table .set-version-row {
    background: #0d182d !important;
    border-left-color: rgba(56, 189, 248, 0.18);
}

:root[data-theme='dark'] #sets-table .set-version-row:hover {
    background: #132746 !important;
    border-left-color: var(--primary);
}

:root[data-theme='dark'] #sets-table .set-group-header td,
:root[data-theme='dark'] #sets-table .set-version-row td {
    border-bottom-color: #22324a;
    color: var(--text-body);
}

:root[data-theme='dark'] #sets-table .set-group-header strong {
    color: var(--text-main);
}

:root[data-theme='dark'] #sets-table .text-muted {
    color: #9fb3ca;
}

:root[data-theme='dark'] #sets-table .badge {
    background: rgba(56, 189, 248, 0.18);
    color: #7dd3fc;
}

:root[data-theme='dark'] #sets-table .badge-set {
    background: rgba(251, 191, 36, 0.18);
    color: #fde68a;
}

:root[data-theme='dark'] #sets-table .btn-icon {
    color: #9fb3ca;
}

:root[data-theme='dark'] #sets-table .btn-icon:hover {
    background: rgba(56, 189, 248, 0.14);
    color: #7dd3fc;
}

:root[data-theme='dark'] #sets-table .btn-delete:hover {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #fca5a5 !important;
}

:root[data-theme='dark'] .competitor-row-remove {
    background: #101d35;
    border-color: #334b6c;
    color: #f87171;
}

:root[data-theme='dark'] .competitor-row-remove:hover {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(248, 113, 113, 0.65);
    color: #fca5a5;
}

:root[data-theme='dark'] .competitor-add-btn {
    background: rgba(56, 189, 248, 0.08);
    border-color: #334b6c;
    color: #7dd3fc;
}

:root[data-theme='dark'] .competitor-add-btn:hover {
    background: rgba(56, 189, 248, 0.16);
    border-color: var(--primary);
    color: #bae6fd;
}

:root[data-theme='dark'] .competitor-add-btn:disabled {
    background: #111c31;
    border-color: #2b3d58;
    color: #64748b;
    opacity: 0.65;
    cursor: not-allowed;
}

:root[data-theme='dark'] .notification {
    background: #101d35;
    border: 1px solid var(--border);
    border-left-width: 4px;
    box-shadow: var(--shadow-xl);
}

:root[data-theme='dark'] .notification span {
    color: var(--text-main);
}

:root[data-theme='dark'] .notification-success {
    border-left-color: var(--success);
    color: #34d399;
}

:root[data-theme='dark'] .notification-error {
    border-left-color: var(--error);
    color: #fca5a5;
}

:root[data-theme='dark'] .filter-bar,
:root[data-theme='dark'] #customer-dashboard-panel .filter-bar {
    background: #0d162b;
}

:root[data-theme='dark'] .dashboard-info-popover-title,
:root[data-theme='dark'] .simple-bar-row.is-own .simple-bar-label,
:root[data-theme='dark'] .simple-bar-value {
    color: var(--text-main);
}

:root[data-theme='dark'] .dashboard-info-popover-body,
:root[data-theme='dark'] .model-compare-card p,
:root[data-theme='dark'] .cluster-keyword-panel-title,
:root[data-theme='dark'] .simple-bar-label {
    color: var(--text-body);
}

:root[data-theme='dark'] .table-pagination .page-btn:disabled {
    background: #1a2940;
    border-color: #273a58;
}

:root[data-theme='dark'] .table-pagination .page-btn.active {
    background: #164e8c;
    border-color: #1d71c2;
    color: #e0f2fe;
}

:root[data-theme='dark'] .modal-header,
:root[data-theme='dark'] .card-title,
:root[data-theme='dark'] .cluster-keyword-panel,
:root[data-theme='dark'] .dfs-use-selected {
    border-color: var(--border);
}

:root[data-theme='dark'] .modal-header {
    background: linear-gradient(180deg, #101d35, #0b1426);
}

:root[data-theme='dark'] .modal-header h2 {
    color: var(--text-main);
}

:root[data-theme='dark'] .close-modal,
:root[data-theme='dark'] .btn-icon {
    color: var(--text-muted);
}

:root[data-theme='dark'] .btn-secondary {
    color: var(--text-body);
}

:root[data-theme='dark'] .btn-secondary,
:root[data-theme='dark'] .close-modal {
    background: #0b1426;
    border-color: var(--border);
}

:root[data-theme='dark'] .btn-secondary:hover:not(:disabled) {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

:root[data-theme='dark'] .close-modal:hover {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(248, 113, 113, 0.65);
    color: #fca5a5;
}

:root[data-theme='dark'] .wizard-step-indicator,
:root[data-theme='dark'] .wizard-radio,
:root[data-theme='dark'] .wizard-check,
:root[data-theme='dark'] .dfs-action-btn {
    background: #0b1426;
    border-color: var(--border);
    color: var(--text-body);
}

:root[data-theme='dark'] .wizard-active-set {
    border-top-color: var(--border);
    color: var(--text-muted);
}

:root[data-theme='dark'] .analysis-engine-card {
    background: #0b1426;
    border-color: var(--border);
    color: var(--text-main);
}

:root[data-theme='dark'] .analysis-engine-card:hover {
    background: #132746;
    border-color: #2f4f78;
}

:root[data-theme='dark'] .analysis-engine-card.active {
    background: rgba(56, 189, 248, 0.16);
    border-color: var(--primary);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

:root[data-theme='dark'] .analysis-engine-card-sub {
    color: var(--text-muted);
}

:root[data-theme='dark'] .analysis-engine-card-logo {
    background: #101d35;
    border-color: #27496f;
}

:root[data-theme='dark'] .analysis-engine-card-logo.multi {
    background: transparent;
    border-color: transparent;
}

:root[data-theme='dark'] .analysis-config-card,
:root[data-theme='dark'] .analysis-cost-card,
:root[data-theme='dark'] .analysis-source-item,
:root[data-theme='dark'] .analysis-keyword-pool-card,
:root[data-theme='dark'] .analysis-live-progress-card {
    background: #0b1426;
    border-color: var(--border);
}

:root[data-theme='dark'] .analysis-source-item.active {
    background: #102039;
    border-color: var(--primary);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.18);
}

:root[data-theme='dark'] .analysis-source-column .wizard-check small {
    background: #16243a;
    color: var(--text-muted);
}

:root[data-theme='dark'] .analysis-source-column .wizard-check .source-pro-badge {
    background: rgba(249, 115, 22, 0.16);
    color: #fdba74;
}

:root[data-theme='dark'] .analysis-cost-card.total {
    background: rgba(56, 189, 248, 0.12);
}

:root[data-theme='dark'] .analysis-engine-progress-track {
    background: #1b2a41;
}

:root[data-theme='dark'] .wizard-step-indicator.active {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(56, 189, 248, 0.18);
}

:root[data-theme='dark'] .wizard-step-indicator.done {
    border-color: rgba(74, 222, 128, 0.65);
    color: #86efac;
    background: rgba(34, 197, 94, 0.2);
}

:root[data-theme='dark'] .wizard-check.source-locked {
    background: #16243a;
    border-color: #2b3d58;
    color: var(--text-muted);
    opacity: 0.55;
    filter: grayscale(0.2);
}

:root[data-theme='dark'] .dfs-action-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

/* Final mobile dashboard/backoffice overrides. Kept late in the file so these
   rules win over the dashboard-specific grid definitions above. */
@media (max-width: 768px) {
    .main-content,
    .view,
    .card,
    .stat-card,
    .chart-card,
    .customer-visibility-card,
    .billing-pricing-option,
    .billing-enterprise-row,
    .analysis-keyword-pool-card {
        min-width: 0;
    }

    .stats-grid,
    .customer-kpi-grid,
    .dashboard-insight-grid,
    .model-compare-grid,
    .charts-grid,
    .billing-plan-summary-grid,
    .billing-plans-grid,
    .analysis-cost-grid,
    .analysis-keyword-flow-grid,
    .billing-schedule-usage-grid,
    .billing-schedule-form-grid {
        grid-template-columns: 1fr !important;
    }

    #customer-dashboard-panel .filter-bar {
        position: static;
        top: auto;
        z-index: auto;
    }

    .customer-visibility-head,
    .billing-enterprise-row,
    .wizard-confirm-row {
        flex-direction: column;
        align-items: stretch;
    }

    .segmented-control {
        width: 100%;
        overflow-x: auto;
    }

    .segmented-btn {
        flex: 1 0 auto;
        white-space: nowrap;
    }

    .customer-visibility-container {
        height: 260px;
    }

    .simple-bar-row {
        grid-template-columns: 1fr !important;
        gap: 0.35rem;
    }

    .simple-bar-value,
    .simple-bar-delta {
        text-align: left;
    }

    .table-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
    }

    .table-search-wrapper {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .table-pagination,
    .dfs-pagination {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0.4rem;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 0.15rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .table-pagination::-webkit-scrollbar,
    .dfs-pagination::-webkit-scrollbar {
        display: none;
    }

    .table-pagination .page-info,
    .dfs-pagination .page-info {
        margin: 0 0.45rem 0 0;
        flex: 0 0 auto;
    }

    .table-pagination .page-btn,
    .dfs-pagination .page-btn {
        flex: 0 0 34px;
    }

    .table-pagination .rows-select,
    .dfs-pagination .rows-select {
        width: auto;
        flex: 0 0 auto;
    }

    .dfs-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dfs-table {
        min-width: 720px;
    }
}

@media print {
    body.dashboard-print-mode {
        background: #fff !important;
    }

    body.dashboard-print-mode .sidebar,
    body.dashboard-print-mode #dashboard-export-btn,
    body.dashboard-print-mode .wizard-footer,
    body.dashboard-print-mode .table-controls,
    body.dashboard-print-mode .segmented-control,
    body.dashboard-print-mode .btn-secondary,
    body.dashboard-print-mode .btn-icon {
        display: none !important;
    }

    body.dashboard-print-mode .app-container {
        display: block !important;
    }

    body.dashboard-print-mode .main-content {
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
    }

    body.dashboard-print-mode .view {
        display: none !important;
    }

    body.dashboard-print-mode #view-dashboard {
        display: block !important;
    }

    body.dashboard-print-mode #admin-dashboard-panel {
        display: none !important;
    }

    body.dashboard-print-mode #customer-dashboard-panel {
        display: block !important;
    }

    body.dashboard-print-mode .card,
    body.dashboard-print-mode .stat-card {
        box-shadow: none !important;
        border: 1px solid #dbe3ea !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.dashboard-print-mode .chart-container,
    body.dashboard-print-mode .customer-visibility-container {
        height: 260px !important;
    }
}