:root {
    /* Bright Theme - User Palette */
    --bg-body: #f5f5f5;
    --bg-surface: #fafafa;

    --text-primary: #191919;
    --text-secondary: #444746;
    --text-muted: #747775;

    /* Sexy AI Gradients: Purple #814aff -> Lighter Vibrant Purple */
    /* User request: "like my purple #814aff" & "too dark". */
    /* Solution: Keep #814aff as base, blend to a slightly lighter/vibrant purple #9e75ff for depth without darkness */
    --gradient-primary: linear-gradient(135deg, #814aff, #9e75ff);
    /* Greens replaced with Black as per request */
    --gradient-success: linear-gradient(135deg, #000000, #333333);
    --gradient-glow: linear-gradient(135deg, rgba(129, 74, 255, 0.2), rgba(158, 117, 255, 0.4));

    --accent-blue: #814aff;
    --accent-purple: #814aff;
    --accent-green: #000000;
    /* Replaced Green with Black */
    --accent-red: #ea4335;
    --accent-pink: #ffcbff;

    --border-radius-lg: 24px;
    --border-radius-md: 16px;

    /* No Shadows */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;

    --font-family: 'Noto Sans Hebrew', sans-serif;
    --max-width: 1400px;
}

html {
    scrollbar-gutter: stable;
    /* Fixes scroll wiggle */
}

/* Animations: Apple Keynote Style */
@keyframes keynotePop {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pop-in {
    /* Smooth, premium easing - Snappier Reveal */
    animation: keynotePop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
    /* Start invisible */
}

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

body {
    font-family: var(--font-family);
    background-color: var(--bg-body);
    color: var(--text-primary);
    min-height: 100vh;
    padding-bottom: 40px;
    overflow-x: hidden;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* Header */
header {
    background: var(--bg-surface);
    padding: 16px 0;
    margin-bottom: 32px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
    /* Header Animation Disabled */
    /* opacity: 0; */
    /* animation: keynotePop 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; */
    /* animation-delay: 2s; */
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 48px;
    object-fit: contain;
}

.profile-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-body);
    padding: 6px 6px 6px 16px;
    border-radius: 50px;
}

.avatar {
    width: 32px;
    height: 32px;
    background: var(--gradient-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.8rem;
}

/* Controls Bar */
.controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
    opacity: 0;
    /* Animated entry */
}

.control-group {
    display: flex;
    gap: 12px;
}

.control-pill {
    background: var(--bg-surface);
    border: 1px solid #e0e0e0;
    padding: 8px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.control-pill:hover {
    background: #f0f0f0;
    border-color: #d0d0d0;
}

.control-pill.active {
    background: var(--bg-surface);
    /* Keeping it clean/flat */
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.control-pill.primary {
    background: var(--text-primary);
    color: white;
    border-color: var(--text-primary);
}

.control-pill.primary:hover {
    opacity: 0.9;
}

.control-pill .material-symbols-rounded {
    font-size: 18px;
}

/* New: Product Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    /* Better auto-filling */
    gap: 16px;
    width: 100%;
    /* Constrain width */
}

.product-card {
    background: var(--bg-body);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    transition: transform 0.2s;
    overflow: hidden;
    /* Prevent overflow */
}

.product-card:hover {
    transform: translateY(-3px);
}

.product-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    /* or cover if we want full bleed */
    mix-blend-mode: normal;
    /* Multiply can look weird on some images, normal is safer for 'real photos' */
    border-radius: 8px;
    margin-bottom: 8px;
    background: #fff;
    /* Ensure transparent pngs look ok */
}

.prod-name {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prod-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* New: Flex Charts */
.flex-charts {
    display: flex;
    gap: 24px;
    width: 100%;
    min-height: 0;
    /* Critical for flex containers to not overflow */
}

.chart-wrapper {
    flex: 1;
    position: relative;
    height: 250px;
    /* Fixed height for charts */
    width: 100%;
    /* Constraint */
    min-width: 0;
    /* Critical for flex children */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Grid Layout */
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

/* Cards */
.card {
    background: var(--bg-surface);
    border-radius: var(--border-radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid #ffffff;
    /* opacity: 0; Start hidden for animation build-up - DISABLED to prevent blank screen */
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Hero Section (A/B Test) */
.hero-ab {
    grid-column: span 12;
    background: var(--bg-surface);
    position: relative;
    overflow: hidden;
    padding: 48px;
    min-height: 500px;
    /* Prevent layout shift */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hero-ab::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: var(--gradient-glow);
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
}

.ab-content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 48px;
}

.ab-stat-group {
    flex: 1;
    text-align: center;
}

.ab-vs {
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--text-muted);
    opacity: 0.3;
}

.stat-value-huge {
    font-size: 5rem;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1;
    margin-bottom: 8px;
}

.stat-label-lg {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

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

.val-ai {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    /* Compatible */
    -webkit-text-fill-color: transparent;
}

.lift-badge {
    display: inline-block;
    background: var(--gradient-success);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    /* Black shadow */
}

/* Metrics Row */
.metric-card {
    grid-column: span 3;
    text-align: center;
}

.metric-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 16px 0 8px;
}

.metric-sub {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Insights Section */
.card-wide {
    grid-column: span 6;
}

.card-tall {
    grid-column: span 4;
    grid-row: span 2;
}

/* Emotional Ranking */
.emotion-bar {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
}

.emotion-label {
    width: 100px;
    font-weight: 500;
    color: var(--text-secondary);
}

.emotion-track {
    flex: 1;
    height: 12px;
    background: var(--bg-body);
    border-radius: 6px;
    overflow: hidden;
}

.emotion-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 1s ease-out;
}

/* Thought Stream */
.thought-stream {
    background: #191919;
    /* Contrast dark bg */
    color: #fff;
    padding: 12px 24px;
    border-radius: 50px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: 'Courier New', monospace;
    /* Tech vibe */
    box-shadow: 0 4px 20px rgba(129, 74, 255, 0.4);
    opacity: 0;
}

.stream-label {
    color: var(--accent-purple);
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.stream-content {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    font-size: 0.9rem;
}

.thought-item {
    display: inline-block;
    margin-right: 32px;
    animation: ticker 20s linear infinite;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* Gap Analysis List */
.gaps-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gap-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #eee;
}

.gap-query {
    font-weight: 600;
    color: var(--text-primary);
}

.gap-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.gap-tag {
    background: #000;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
}

.section-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 16px;
    margin-top: -16px;
}

/* AI Smart Actions */
.actions-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.action-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.action-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.action-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--accent-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.action-content {
    flex-grow: 1;
}

.action-title {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.action-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.action-meta {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

.impact-badge {
    font-size: 0.75rem;
    font-weight: 800;
    color: #0d8a43;
    /* Green for money */
    background: #e6f4ea;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.btn-action {
    background: var(--accent-purple);
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s;
}

.btn-action:hover {
    background: #6a3bc9;
}

/* Trending List */
.trend-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--bg-body);
}

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

.trend-rank {
    width: 24px;
    height: 24px;
    background: var(--bg-body);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-right: 12px;
}

.trend-info {
    flex: 1;
}

.trend-name {
    font-weight: 600;
    color: var(--text-primary);
}

.trend-diff {
    font-weight: 700;
    color: var(--accent-green);
    font-size: 0.9rem;
}

/* Phase 2: Pulse Grid (Header) */
.pulse-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.pulse-card {
    background: var(--bg-surface);
    border-radius: var(--border-radius-md);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #fff;
    box-shadow: var(--shadow-sm);
}

.pulse-card.highlight {
    background: var(--gradient-primary);
    color: white;
    border: none;
}

.pulse-card.highlight .pulse-label,
.pulse-card.highlight .pulse-sub {
    color: rgba(255, 255, 255, 0.8);
}

.pulse-card.highlight .pulse-val {
    color: white;
}

.pulse-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 8px;
}

.pulse-val {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}

.pulse-sub {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Ticker */
/* Ticker */
.pulse-ticker-container {
    grid-column: span 2;
    background: linear-gradient(145deg, rgba(23, 23, 23, 0.9) 0%, rgba(35, 35, 35, 0.95) 100%);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Exact match to pulse-card */
    display: flex;
    align-items: center;
    overflow-x: hidden;
    /* JS handle scroll */
    position: relative;
    padding: 0 16px;
    cursor: grab;
    user-select: none;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); Removed per request */
}

.pulse-ticker-container:active {
    cursor: grabbing;
}

.ticker-track {
    display: flex;
    gap: 24px;
    width: max-content;
    white-space: nowrap;
    /* Animation removed for JS control */
}

.ticker-item {
    color: rgba(255, 255, 255, 0.95);
    /* High contrast */
    font-size: 0.9rem;
    font-weight: 600;
    /* Bolder font restored */
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.ticker-item:hover {
    color: var(--text-primary);
    background: rgba(var(--accent-purple-rgb), 0.2);
    transform: scale(1.05);
}

/* Battle Card */
.hero-battle {
    border: 2px solid rgba(129, 74, 255, 0.1);
    /* Subtle purple border */
    background: linear-gradient(180deg, var(--bg-surface) 0%, rgba(129, 74, 255, 0.02) 100%);
}

/* Funnel Viz */
.funnel-viz {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
}

.funnel-step {
    display: flex;
    align-items: center;
    gap: 16px;
}

.funnel-label {
    width: 120px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: right;
    color: var(--text-secondary);
}

.funnel-bar-bg {
    flex: 1;
    height: 24px;
    background: var(--bg-body);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.funnel-bar-fill {
    height: 100%;
    background: var(--accent-purple);
    border-radius: 6px;
    transition: width 1s ease-out;
}

.funnel-val {
    width: 60px;
    text-align: right;
    font-weight: 700;
    font-size: 0.9rem;
}

.funnel-delta {
    width: 80px;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-green);
    /* Or calculated color */
}

/* Void Table */
.void-table {
    width: 100%;
    border-collapse: collapse;
}

.void-table th {
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bg-body);
}

.void-table td {
    padding: 12px 0;
    border-bottom: 1px solid var(--bg-body);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.void-query {
    font-weight: 600;
    color: var(--text-primary);
}

/* Responsive */
@media (max-width: 1000px) {
    .grid {
        grid-template-columns: 1fr;
    }

    .hero-ab,
    .metric-card,
    .card-wide,
    .card-tall {
        grid-column: span 1;
    }

    .status-group {
        flex-direction: column;
    }

    .ab-content {
        flex-direction: column;
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }

    /* Header Stack */
    .header-inner {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .tenant-brand-pill {
        width: 100%;
        justify-content: space-between;
    }

    /* Controls Bar Scrollable */
    .controls-bar {
        overflow-x: auto;
        padding-bottom: 8px;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }


    .control-pill.disabled {
        opacity: 0.4;
        pointer-events: none;
        filter: grayscale(1);
    }

    .control-pill {
        white-space: nowrap;
        font-size: 0.8rem;
        padding: 6px 12px;
    }

    /* Pulse Grid Stack */
    .pulse-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .pulse-ticker-container {
        grid-column: span 1;
        /* Reset from span 2 */
        order: -1;
        /* Move ticker to top on mobile? Or keep bottom? Let's keep distinct. */
    }

    /* Main Grid Stack */
    .grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .card {
        grid-column: span 12 !important;
        /* Force full width */
        padding: 20px;
    }

    /* Adjust Chart Heights for Mobile */
    .chart-wrapper {
        height: 200px;
    }

    /* Adjust Typography */
    .card-title {
        font-size: 1.1rem;
    }

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

    /* Tables scrollable */
    .table-container {
        overflow-x: auto;
    }
}