/* Registered custom properties for smooth animation interpolation */
@property --prism-glow-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: rgba(34, 211, 238, 0.16);
}

@property --prism-glow-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: rgba(123, 58, 237, 0.12);
}

:root {
    --bg-dark: #0a0a14;
    --card-bg: rgba(255, 255, 255, 0.05);
    --accent-pink: #F43F5E;
    --accent-purple: #8B5CF6;
    --text-main: #ffffff;
    --text-muted: #888899;
}

/* Minimal scrollbar for Windows/desktop */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* SVG text/tspan must inherit font from their parent <text> rather than be
   reset by the universal selector above. Without this, a <text> element's
   inline `font-family: monospace !important` doesn't reach <tspan> children
   because the `*` rule above matches them directly with the same value
   (direct rule beats inheritance regardless of parent !important). Used by
   the prism-animation web component on the About page. */
svg text,
svg tspan {
    font-family: inherit;
}

*::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
}

html {
    height: 100%;
    overflow: hidden;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    /* App-like feel */
}

/* Header */
.app-header {
    position: sticky;
    top: 0;
    background: var(--bg-dark);
    padding: 15px 20px;
    padding-top: calc(15px + env(safe-area-inset-top, 0px));
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 100;
}

.logo {
    font-size: 18px;
    font-weight: 800;
}

.logo span {
    color: var(--accent-pink);
    font-size: 8px;
    vertical-align: top;
}


/* Main Area */
#app-content {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow-y: auto;
    padding-bottom: calc(90px + max(env(safe-area-inset-bottom, 20px), 20px));
    /* Space for fixed bottom nav + phone home indicator */
    transform: translateZ(0);
    will-change: scroll-position;
}

/* Manager scope (v48.0+): bottom nav isn't rendered for products-scope tokens,
   so the 90px reserved at the bottom of #app-content becomes dead empty space.
   Drop it to just the safe-area inset (home indicator clearance only). */
body.scope-products #app-content {
    padding-bottom: max(env(safe-area-inset-bottom, 20px), 20px);
}

.view {
    padding-top: 0;
}

/* 20px breathing room from app header — hub pages only, not sub-reports */
#sales-view,
#menu-view,
#integrations-view {
    padding-top: 20px;
}

.ai-hub {
    padding-top: 20px;
}

#ai-workshop-section,
#ai-history-section,
#ai-usage-section {
    margin-top: -16px;
}

/* Stats Cards */
.stats-row {
    display: flex;
    gap: 10px;
    padding: 10px 20px 10px 20px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 2px;
}

.stat-card.primary-stat {
    flex: 6;
}

.stat-card.secondary-stat {
    flex: 4;
}

.stat-label {
    font-size: 7px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.2;
    width: min-content;
}

.stat-value {
    font-size: 22px;
    font-weight: 600;
    color: #ffffffe0;
    margin-top: -2px;
}

/* Charts */
#chart-container {
    width: 100%;
    min-height: calc(100vh - 250px);
    /* Fill remaining space, dynamically expands */
}

/* Bottom Navigation */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(10, 10, 20, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-around;
    padding:
        10px
        max(12px, env(safe-area-inset-right, 12px))
        max(calc(10px + env(safe-area-inset-bottom, 15px)), 25px)
        max(12px, env(safe-area-inset-left, 12px));
    /* Bottom padding adapts to iPhone home bar via safe-area-inset; */
    /* horizontal padding keeps the leftmost/rightmost icons off the screen edge */
    /* and respects landscape notch insets on devices that report them. */
    z-index: 100;
    transform: translateZ(0);
}

.nav-btn {
    position: relative;
    background: none;
    border: none;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    transition: color 0.3s;
    min-width: 60px;
}

.nav-btn .icon {
    font-size: 20px;
}

.nav-btn.active {
    color: var(--accent-pink);
}

.nav-btn.active svg {
    filter: drop-shadow(0 0 6px rgba(244, 63, 94, 0.5)) drop-shadow(0 0 14px rgba(244, 63, 94, 0.25));
}

/* Loader */
.loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--bg-dark);
    z-index: 50;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--accent-purple);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

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

.hidden {
    display: none !important;
}

/* --- RESTORED: Search & Table Styles --- */
/* search-container base padding; position:relative is also set below in Phase 1 block */
.search-container {
    padding: 0 20px 10px 20px;
}

#live-search {
    width: 100%;
    padding: 12px 35px 12px 35px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: white;
    font-size: 14px;
    outline: none;
    transition: 0.3s;
}

#live-search:focus {
    border-color: var(--accent-pink);
    background: rgba(255, 255, 255, 0.1);
}

/* Visible active state when search has content */
#live-search:not(:placeholder-shown) {
    border-color: var(--accent-purple);
    background: rgba(139, 92, 246, 0.08);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2), 0 0 16px rgba(139, 92, 246, 0.15);
}

#live-search:not(:placeholder-shown):focus {
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3), 0 0 20px rgba(139, 92, 246, 0.25);
}

/* Category Filters */
.category-filters-container {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding: 0 20px 15px 20px;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.category-filters-container::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.cat-filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.cat-filter-btn svg {
    opacity: 0.6;
    transition: opacity 0.2s;
}

.cat-filter-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.cat-filter-btn.active {
    background: rgba(139, 92, 246, 0.15);
    border-color: var(--accent-purple);
    color: #fff;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
}

.cat-filter-btn.active svg {
    opacity: 1;
    color: var(--accent-purple);
}

.modern-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.modern-table th,
.modern-table td {
    padding: 12px 5px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.modern-table th {
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 10px;
    cursor: pointer;
    user-select: none;
}

.text-right {
    text-align: right !important;
}

/* Weekend highlighting for daily sales table */
.modern-table tr.weekend {
    background: rgba(244, 63, 94, 0.06);
}

.modern-table tr.weekend td:first-child {
    color: rgba(244, 63, 94, 0.85);
}

/* Glowing Brand Tags */
@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 2px var(--glow-color);
    }

    100% {
        box-shadow: 0 0 8px var(--glow-color);
    }
}

@keyframes spin-inf {
    100% {
        transform: rotate(360deg);
    }
}

.spin-anim {
    animation: spin-inf 1s linear infinite;
}

.brand-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 50px;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    margin-left: 8px;
    animation: pulseGlow 2s infinite alternate;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* --- Header & Back Button Updates --- */

.logo-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.header-logo-img {
    height: 26px;
    width: auto;
    object-fit: contain;
    /* filter: drop-shadow(0 0 8px rgba(0, 210, 235, 0.3)) drop-shadow(0 0 40px rgba(0, 210, 235, 0.15));*/
}


.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    right: 15px;
}

#sync-btn {
    background: rgba(244, 63, 94, 0.1);
    border: 1px solid rgba(244, 63, 94, 0.3);
    color: var(--accent-pink);
    width: 30px;
    height: 30px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    transition: all 0.2s;
}

/* ─── Product scope toggle (v48.1+) ──────────────────────────────────── */
/* Two-button segmented control in the header: Online (default) vs All.
   Icon-only on mobile, icon+text on desktop. Cyan accent on the active
   button. Karapuziv-only in practice (Polish stores never render the DOM). */

.scope-toggle {
    display: inline-flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 2px;
    gap: 2px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.scope-toggle.hidden {
    display: none;
}

.scope-toggle-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}

.scope-toggle-btn:hover:not(.scope-toggle-btn--active) {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.04);
}

.scope-toggle-btn--active {
    background: rgba(6, 182, 212, 0.22);
    color: #22D3EE;
    box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.4) inset;
}

.scope-toggle-btn__icon {
    flex-shrink: 0;
}

.scope-toggle-btn__label {
    white-space: nowrap;
}

/* Mobile: hide labels, keep icons only. ≤600px is the Karapuziv mobile band. */
@media (max-width: 600px) {
    .scope-toggle-btn__label {
        display: none;
    }
    .scope-toggle-btn {
        padding: 5px 7px;
    }
}

/* Custom Dropdown */
.custom-dropdown {
    position: relative;
    right: auto;
    z-index: 200;
}

.dropdown-trigger {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 6px 20px 6px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}

.dropdown-trigger::after {
    content: '';
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(255, 255, 255, 0.6);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: rgba(15, 15, 25, 0.4);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    min-width: 200px;
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    transform-origin: top right;
    animation: scaleIn 0.2s ease-out;
}

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

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

.dropdown-item {
    padding: 12px 18px;
    color: white;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
    text-align: right;
}

/* Report dropdown items — shared layout for products & sales dropdowns */
.report-type-item,
.sales-dropdown-item {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
}

.report-type-item svg,
.sales-dropdown-item svg {
    opacity: 0.8;
    flex-shrink: 0;
}

.dropdown-item:last-child {
    border-bottom: none !important;
}

/* Hierarchical year rows */
.dropdown-year-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
}

.dropdown-year-row .year-cell {
    flex: 1;
    border-bottom: none;
    background: rgba(99, 102, 241, 0.1);
}

.dropdown-year-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(99, 102, 241, 0.06);
    border-left: 1px solid rgba(99, 102, 241, 0.15);
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.dropdown-year-expand:active {
    background: rgba(99, 102, 241, 0.2);
}

.dropdown-year-expand svg {
    transition: transform 0.2s;
}

.dropdown-year-expand.expanded svg {
    transform: rotate(180deg);
}

.dropdown-year-expand.expanded {
    color: rgba(255, 255, 255, 0.7);
}

/* Nested months */
.dropdown-months-group {
    display: flex;
    flex-direction: column;
}

/* Blue-Indigo-Violet Separators */
.month-cell {
    background: rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 24px;
    font-size: 12px;
}

.year-cell {
    background: rgba(99, 102, 241, 0.15);
    border-bottom: 1px solid rgba(99, 102, 241, 0.3);
    text-align: left;
}

.alltime-cell {
    background: rgba(139, 92, 246, 0.15);
}

/* Hierarchical month rows (with calendar expand) */
.dropdown-month-row {
    display: flex;
    align-items: stretch;
}

.dropdown-month-row .month-cell {
    flex: 1;
}

.dropdown-month-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.06);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgb(255 255 255 / 10%) !important;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.dropdown-month-expand:active {
    background: rgba(255, 255, 255, 0.15);
}

.dropdown-month-expand svg {
    transition: transform 0.2s;
}

.dropdown-month-expand.expanded svg {
    transform: rotate(180deg);
}

.dropdown-month-expand.expanded {
    color: rgba(255, 255, 255, 0.6);
}

/* Calendar grid inside expanded month */
.dropdown-cal-group {
    padding: 6px 10px 10px;
    background: rgba(139, 92, 246, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

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

.cal-header {
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    padding: 2px 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cal-empty {
    min-height: 32px;
}

.cal-day {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    padding: 6px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cal-day.dropdown-item {
    padding: 6px 0;
    font-size: 12px;
    border-bottom: none;
}

.cal-day:not(.cal-future):active {
    background: rgba(139, 92, 246, 0.35);
}

.cal-day.active {
    background: rgba(139, 92, 246, 0.4) !important;
    color: #fff;
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.6);
}

.cal-weekend {
    color: rgba(244, 114, 182, 0.7);
}

.cal-future {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}



/* --- Best Sellers Dashboard --- */
.bs-dashboard {
    padding: 0 0 25px 0;
}

.bs-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 20px;
}

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

.live-dot {
    display: inline-block;
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34D399;
    margin-left: 6px;
    vertical-align: middle;
    transform: translateY(-1px);
}

.live-dot::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(52, 211, 153, 0.6);
    animation: liveRipple 2.5s ease-out infinite;
}

/* Stale state — last data update older than the per-source threshold */
.live-dot.live-dot--stale {
    background: #EF4444;
}
.live-dot.live-dot--stale::after {
    background: rgba(239, 68, 68, 0.6);
}

@keyframes liveRipple {
    0% {
        transform: scale(1);
        opacity: 1;
    }

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

/* =============================================
   TIMELINE / TREND ANALYSIS
   ============================================= */
.timeline-scope-pills {
    display: flex;
    gap: 8px;
    padding: 0 15px;
    margin-top: 12px;
    margin-bottom: 12px;
}

.timeline-scope-pill {
    flex: 1;
    padding: 8px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.timeline-scope-pill.active {
    background: rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.4);
    color: #34D399;
}

.timeline-picker {
    padding: 0 15px;
    margin-bottom: 12px;
}

.timeline-search-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: white;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
    -webkit-appearance: none;
}

.timeline-search-input:focus {
    border-color: rgba(52, 211, 153, 0.5);
}

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

.timeline-picker-list {
    margin-top: 8px;
    border-radius: 10px;
}

/* Group cards — initial collapsed view */
.timeline-group-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.timeline-group-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.timeline-group-card:active {
    background: rgba(255, 255, 255, 0.08);
}

.timeline-group-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
}

.timeline-group-card__body {
    flex: 1;
    min-width: 0;
}

.timeline-group-card__label {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.timeline-group-card__count {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.timeline-group-card__chevron {
    flex-shrink: 0;
    color: var(--text-muted);
}

/* Expanded group header */
.timeline-picker-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 10px;
}

.timeline-group-back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}

.timeline-group-back-btn:active {
    background: rgba(255, 255, 255, 0.06);
}

.timeline-picker-group-count {
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
    padding: 3px 10px;
    border-radius: 10px;
}

.timeline-picker-group {
    margin-bottom: 6px;
}

.timeline-picker-group-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 12px 4px;
}

.timeline-picker-item {
    padding: 10px 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.timeline-picker-item:active {
    background: rgba(255, 255, 255, 0.08);
}

.timeline-picker-item-type {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: 6px;
}

.timeline-chart-header {
    padding: 0 20px 8px;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.timeline-chart-header span {
    color: #34D399;
}

.timeline-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    margin: 0 15px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Incomplete period hint — dashed border + lower opacity */
.chart-row--current .chart-bar {
    opacity: 0.6;
    /*  border: 1px dashed rgba(255, 255, 255, 0.3);*/
}

.bs-scroll-wrap {
    position: relative;
}

.bs-scroll-wrap::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to right, transparent, var(--bg-dark));
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.3s;
    will-change: opacity;
}

.bs-scroll-wrap.scrolled-end::after {
    opacity: 0;
}

.bs-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: 15px;
    scroll-padding-left: 15px;
    transform: translateZ(0);
    will-change: scroll-position;
}

.bs-grid::-webkit-scrollbar {
    display: none;
}

.bs-card {
    min-width: 168px;
    max-width: 168px;
    flex-shrink: 0;
    scroll-snap-align: start;
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--card-color) 18%, transparent) 0%,
            color-mix(in srgb, var(--card-color) 6%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--card-color) 30%, transparent);
    border-radius: 14px;
    padding: 10px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--card-color) 12%, transparent);
    position: relative;
    overflow: hidden;
}

.bs-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--card-color);
    opacity: 0.03;
    z-index: 0;
}

.bs-card>* {
    position: relative;
    z-index: 1;
}

.bs-card:last-child {
    margin-right: 15px;
}

.bs-card:active {
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--card-color) 25%, transparent) 0%,
            color-mix(in srgb, var(--card-color) 10%, transparent) 100%);
    border-color: color-mix(in srgb, var(--card-color) 45%, transparent);
}

.bs-card__header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.bs-card__icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--icon-bg);
    color: var(--icon-color);
}

.bs-card__icon svg {
    width: 16px;
    height: 16px;
}

.bs-card__info {
    min-width: 0;
}

.bs-card__name {
    font-size: 10px;
    font-weight: 700;
    color: white;
    line-height: 1.2;
}

.bs-card__stats {
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bs-card__sellers {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bs-seller {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bs-seller__name {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 4px;
}

.bs-seller__meta {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
    margin-bottom: 2px;
    margin-top: -1px;
}

/* Stock dot: right-aligned inside bestseller cards */
.bs-seller__name .stock-dot {
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.7;
    top: 0;
}

.bs-seller__bar-wrap {
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.bs-seller__bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}

.bs-seller__empty {
    font-size: 9px;
    color: var(--text-muted);
    padding: 8px 0;
    text-align: center;
}

/* Bestsellers entrance animation. Cards fade + lift in with a 50ms stagger
   (--card-i set inline in JS), then each card's seller bars fill from
   scaleX(0) to scaleX(1) starting 250ms after their card lands, with a 40ms
   per-bar stagger (--seller-i set inline). transform-only animation keeps it
   on the compositor — no layout/paint cost beyond the initial render.
   Skipped entirely under prefers-reduced-motion. */
@keyframes bsCardEnter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes bsBarFill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.bs-card--enter {
    animation: bsCardEnter 400ms cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
    animation-delay: calc(var(--card-i, 0) * 50ms);
}

.bs-card--enter .bs-seller__bar {
    transform-origin: left center;
    animation: bsBarFill 500ms cubic-bezier(0.2, 0.8, 0.4, 1) backwards;
    animation-delay: calc(var(--card-i, 0) * 50ms + 250ms + var(--seller-i, 0) * 40ms);
}

@media (prefers-reduced-motion: reduce) {
    .bs-card--enter,
    .bs-card--enter .bs-seller__bar {
        animation: none;
    }
}

.bs-dashboard .uah-sym {
    font-weight: inherit;
}

.dropdown-item.month-cell:hover,
.dropdown-item.month-cell:active {
    background: rgba(59, 130, 246, 0.3);
}

.dropdown-item.year-cell:hover,
.dropdown-item.year-cell:active {
    background: rgba(99, 102, 241, 0.3);
}

.dropdown-item.alltime-cell:hover,
.dropdown-item.alltime-cell:active {
    background: rgba(139, 92, 246, 0.3);
}

.dropdown-item.active {
    color: var(--accent-pink);
    background: rgba(233, 30, 99, 0.15) !important;
    border-bottom-color: rgba(233, 30, 99, 0.4) !important;
}

/* --- Menu View & Brand Header --- */
.brand-header {
    text-align: center;
    margin: 30px 0 20px 0;
}

@keyframes logoGlow {
    0% {
        filter: drop-shadow(0 0 12px rgba(5, 182, 231, 0.2)) drop-shadow(0 6px 18px rgba(5, 182, 231, 0.12));
    }

    50% {
        filter: drop-shadow(0 0 28px rgba(5, 182, 231, 0.55)) drop-shadow(0 6px 32px rgba(5, 182, 231, 0.35));
    }

    100% {
        filter: drop-shadow(0 0 12px rgba(5, 182, 231, 0.2)) drop-shadow(0 6px 18px rgba(5, 182, 231, 0.12));
    }
}

.brand-header img {
    max-width: 270px;
    opacity: 1;
    animation: logoGlow 4s ease-in-out infinite;
}

.menu-section {
    padding: 10px 20px 10px 20px;
}

.menu-section--spaced {
    margin-top: 10px;
}

.menu-section-title {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-left: 5px;
}

/* Premium Modern Buttons */
.menu-item-btn {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: white;
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 10px;
    border-radius: 14px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.menu-item-btn--accent {
    /* border-color: color-mix(in srgb, #22D3EE 30%, transparent); */
}

.menu-item-btn:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.08);
}

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--icon-bg);
    color: var(--icon-color);
}

.btn-text {
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.3px;
}

/* --- Warning Box Component --- */
.warning-box {
    background: rgba(244, 63, 94, 0.06);
    border: 1px solid rgba(244, 63, 94, 0.15);
    border-radius: 12px;
    padding: 12px 15px;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
}

.warning-box__header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    color: #F43F5E;
    font-weight: 700;
    font-size: 12px;
}

.warning-box__header svg {
    margin-right: 6px;
}

.warning-box__text {
    margin-bottom: 8px;
}

.warning-box__text:last-child {
    margin-bottom: 0;
}

/* --- Search Bar Icons --- */
.search-container {
    position: relative;
}

.search-icon {
    position: absolute;
    left: 32px;
    top: calc(50% - 5px);
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    opacity: 0.5;
    pointer-events: none;
}

#clear-search-btn {
    position: absolute;
    right: 28px;
    top: calc(50% - 5px);
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--accent-pink);
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}

/* --- Table Container --- */
#table-container {
    padding: 0 20px 20px 20px;
}

/* --- About View Formatting --- */
.about-card {
    margin: 0;
    padding: 30px 20px;
    background: var(--bg-dark);
    border-radius: 20px;
    border: none;
    text-align: center;
    box-shadow: none;
    overflow: hidden;
}

/* ── About Hero Animation ── */
.about-hero-animation {
    margin: -30px -20px 0;
    padding: 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

.about-hero-animation::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    width: 70%;
    height: 80%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center,
            var(--prism-glow-1, rgba(34, 211, 238, 0.14)) 0%,
            var(--prism-glow-2, rgba(123, 58, 237, 0.10)) 30%,
            transparent 60%);
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
    animation: prism-glow-pulse 12s ease-in-out infinite;
}

@keyframes prism-glow-pulse {

    0%,
    100% {
        --prism-glow-1: rgba(34, 211, 238, 0.16);
        --prism-glow-2: rgba(123, 58, 237, 0.12);
        filter: blur(50px);
    }

    33% {
        --prism-glow-1: rgba(139, 92, 246, 0.18);
        --prism-glow-2: rgba(168, 85, 247, 0.14);
        filter: blur(55px);
    }

    66% {
        --prism-glow-1: rgba(244, 63, 94, 0.16);
        --prism-glow-2: rgba(236, 72, 153, 0.12);
        filter: blur(50px);
    }

}

.about-hero-animation::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(to right, #0a0a14 0%, #0a0a14 15%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.about-hero-animation prism-animation {
    position: relative;
    z-index: 1;
}

.about-prism-svg {
    width: 100%;
    max-width: 420px;
    height: auto;
    position: relative;
    z-index: 1;
}

.about-card h2 {
    color: white;
    margin-bottom: 2px;
    font-size: 24px;
    letter-spacing: 0.5px;
}

/* .version — REMOVED: unused dead rule */

.about-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    background: rgba(0, 0, 0, 0.2);
    padding: 16px;
    border-radius: 14px;
}

.about-block {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.about-block-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.about-block-body {
    flex: 1;
    padding-top: 2px;
}

.about-block-body h3 {
    font-size: 13px;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.about-block-body p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 2px;
}

.about-link {
    color: #22D3EE;
    text-decoration: none;
    font-size: 13px;
}

.about-link:active {
    text-decoration: underline;
}

/* --- ROAS Color Legend --- */
.roas-legend {
    margin-top: 8px;
    padding-bottom: 2px;
}

.roas-legend__bar {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg,
            #DC2626 0%,
            #F43F5E 20%,
            #F97316 40%,
            #EAB308 60%,
            #22C55E 80%,
            #4ADE80 100%);
}

.roas-legend__labels {
    position: relative;
    height: 22px;
    margin-top: 4px;
}

.roas-legend__mark {
    position: absolute;
    transform: translateX(-50%);
}

.roas-legend__mark:first-child {
    transform: translateX(0);
}

.roas-legend__mark:last-child {
    transform: translateX(-100%);
}

.roas-legend__val {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
}

/* Compact inline variant for dashboards */
.roas-legend--inline {
    margin: 0 18px 6px;
    padding: 0 10px 3px 10px;
}

.roas-legend--inline .roas-legend__bar {
    height: 6px;
    border-radius: 3px;
}

.roas-legend--inline .roas-legend__labels {
    height: 18px;
    margin-top: 3px;
}

.roas-legend--inline .roas-legend__val {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.4);
}

/* --- Language Toggle inside About --- */
.lang-toggle-container {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
}

.lang-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 700;
    padding: 9px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
}

.lang-btn.active {
    background: rgba(6, 182, 212, 0.2);
    color: #22D3EE;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.15);
}

.cache-buttons-row {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

.clear-cache-btn {
    padding: 8px 16px;
    border: 1px solid rgba(244, 63, 94, 0.3);
    border-radius: 8px;
    background: rgba(244, 63, 94, 0.1);
    color: var(--accent-pink);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
    flex: 1;
}

.clear-cache-btn:active {
    background: rgba(244, 63, 94, 0.25);
}

.clear-cache-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.clear-cache-status {
    font-size: 11px;
    min-height: 0;
    color: var(--text-muted);
}

.clear-cache-status:empty {
    display: none;
}

/* --- Native Flexbox Charts UI --- */
.native-chart-wrapper {
    padding: 10px 20px;
}

.chart-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.chart-label {
    width: 135px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    padding-right: 5px;
    flex-shrink: 0;
    color: #e0e0e0;
    position: relative;
    word-break: break-word;
}

/* Narrower label for Sales reports */
.native-chart-wrapper--sales .chart-label {
    width: 100px;
}

/* Narrower label for Sales Trend (timeline) reports */
.native-chart-wrapper--timeline .chart-label {
    width: 100px;
}

/* Narrower label for Brands report */
.native-chart-wrapper--brands .chart-label {
    width: 100px;
}

/* Wider label for brand-model-colour (products) report */
.native-chart-wrapper--products .chart-label {
    width: 200px;
}

.chart-label span.brand-glow {
    display: inline;
    font-size: 11px;
    font-weight: 600;
}

.chart-label span.model-glow {
    display: inline;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

/* ── Stock Pills ── */
.stock-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-left: 5px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    flex-shrink: 0;
}

.stock-dot--green {
    background: #4ade80;
    box-shadow: 0 0 4px rgba(74, 222, 128, 0.5);
}

.stock-dot--lime {
    background: #a3e635;
    box-shadow: 0 0 4px rgba(163, 230, 53, 0.4);
}

.stock-dot--yellow {
    background: #facc15;
    box-shadow: 0 0 4px rgba(250, 204, 21, 0.4);
}

.stock-dot--orange {
    background: #fb923c;
    box-shadow: 0 0 4px rgba(251, 146, 60, 0.4);
}

.stock-dot--red {
    background: #ef4444;
    box-shadow: 0 0 5px rgba(239, 68, 68, 0.7);
}

/* ── Chart Label Meta (stock pill + chevron wrapper) ── */
.chart-label__meta {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    white-space: nowrap;
    vertical-align: middle;
}

.expand-chevron {
    font-size: 8px;
    opacity: 0.4;
    margin-left: 4px;
    vertical-align: middle;
}

/* Tighter spacing when chevron/link follows a stock dot */
.stock-dot+.expand-chevron,
.stock-dot+.variant-link-icon+.expand-chevron,
.stock-dot~.expand-chevron {
    margin-left: 1px;
}

/* ── Chart Row Interactivity ── */
.chart-row--expandable {
    cursor: pointer;
}

.chart-row--expandable:active {
    opacity: 0.8;
}

/* ── Expanded Variant Rows ── */
.chart-sub-rows {
    overflow: hidden;
    max-height: 0;
    margin-bottom: 0;
    /*  background: rgba(0, 0, 0, 0.25);*/
    border-radius: 10px;
    transition: max-height 0.35s ease;
}

.chart-sub-rows.expanded {
    max-height: 2000px;
}

.chart-sub-rows>.chart-row:first-child {
    margin-top: 8px;
}

.chart-sub-rows>.chart-row:last-child {
    margin-bottom: 18px;
}

.chart-sub-rows .chart-label {
    width: 200px;
    font-weight: 400;
}

.chart-sub-rows .chart-label .model-glow {
    font-weight: 400;
}

.chart-row--sub {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    padding-left: 10px;
    opacity: 0.85;
}

.chart-row--sub .chart-bar {
    height: 16px;
    border-radius: 4px;
}

/* L2 expandable rows (categories with L3 children) */
.chart-row--expandable-l2 {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.expand-chevron--l2 {
    font-size: 9px;
    opacity: 0.4;
    margin-left: 4px;
}

/* L3 nested sub-rows */
.chart-sub-rows--l3 {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}

.chart-sub-rows--l3.expanded {
    max-height: 1000px;
}

.chart-sub-rows--l3>.chart-row--l3:first-child {
    margin-top: 4px;
}

.chart-sub-rows--l3>.chart-row--l3:last-child {
    margin-bottom: 12px;
}

.chart-row--l3 {
    padding-left: 36px;
    opacity: 0.7;
}

/* ── Product Detail Modal ── */
.product-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.product-modal-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.product-modal {
    background: #1e1e2e9c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 480px;
    padding: 24px 20px 32px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.product-modal-overlay.visible .product-modal {
    transform: translateY(0);
}

.product-modal__img {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.product-modal__img-loading {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    animation: pulse-loading 1.2s ease-in-out infinite;
}

@keyframes pulse-loading {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;
    }
}

.product-modal__photo {
    width: 100%;
    object-fit: contain;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.product-modal__photo--loading {
    opacity: 0;
    transform: scale(0.97);
}

.product-modal__name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    margin-bottom: 6px;
    word-break: break-word;
}

.product-modal__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 12px;
}

.product-modal__crumb-sep {
    color: rgba(255, 255, 255, 0.2);
    margin: 0 2px;
}

.product-modal__price {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.product-modal__price .uah-sym {
    font-size: 16px;
    opacity: 0.5;
}

.product-modal__stats {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 20px;
    line-height: 1.8;
}

.product-modal__stats-period {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}

.product-modal__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.product-modal__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #22d3ee;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 10px;
    background: rgba(34, 211, 238, 0.1);
    transition: background 0.2s;
}

.product-modal__link:active {
    background: rgba(34, 211, 238, 0.2);
}

.product-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}

.product-modal__close:active {
    background: rgba(255, 255, 255, 0.12);
}

.chart-bar-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 60px;
    /* leaves breathing space for value labels on extreme widths */
}

.chart-row--dual {
    margin-bottom: 16px;
}

.chart-bar--offline {
    height: 18px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.chart-bar {
    height: 26px;
    border-radius: 0 4px 4px 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    min-width: 2px;
    transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    width: 0%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Forecast extension on the in-progress bucket bar in Sales by Month / Sales by
   Years reports. Sits flush to the right of the actual revenue bar inside a
   horizontal flex wrapper. Same translucent dark-amber treatment as ERP. */
.chart-bar-row {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.chart-bar-forecast {
    height: 26px;
    width: 0%;
    background: linear-gradient(90deg, rgba(234, 88, 12, 0.15) 0%, rgba(251, 146, 60, 0.10) 100%);
    border-left: 1px dashed rgba(234, 88, 12, 0.55);
    border-radius: 0 4px 4px 0;
    transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    flex-shrink: 0;
}

.chart-value {
    position: absolute;
    right: -8px;
    transform: translateX(100%);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.chart-qty {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.10);
    font-size: 9.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.2px;
    vertical-align: 1px;
}

/* Qty pill anchored inside the bar for wide bars */
.chart-qty--inbar {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0;
    background: rgba(0, 0, 0, 0.3);
}

.chart-value--usd {
    font-size: 9px;
    font-weight: 700;
    color: rgba(74, 222, 128, 0.75);
}

.usd-rate {
    font-size: 7px;
    font-weight: 400;
}

.chart-bar--usd {
    height: 18px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
}

.chart-row--with-usd {
    margin-bottom: 16px;
}

/* =============================================
   SALES DASHBOARD STYLES
   ============================================= */

.sales-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
    color: var(--text-muted);
    font-size: 13px;
}

.sales-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 16px 16px 16px;
}

.sales-card {
    border-radius: 14px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
}

.sales-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0.12;
    z-index: 0;
}

.sales-card>* {
    position: relative;
    z-index: 1;
}

/* Clickable summary cards — tap opens the matching report. Tap feedback is a
   subtle press-down on :active (works on touch; matches the ERP card zones).
   No hover lift — this is a touch-first app. */
.sales-card--clickable {
    cursor: pointer;
    transition: transform 0.1s;
}

.sales-card--clickable:active {
    transform: scale(0.985);
}

/* Pair 1: Today (cyan) | Yesterday (cyan darker) */
.sales-card--today {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.18) 0%, rgba(6, 182, 212, 0.06) 100%);
    border-color: rgba(6, 182, 212, 0.3);
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.12);
}

.sales-card--today::before {
    background: #06B6D4;
}

.sales-card--yesterday {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.10) 0%, rgba(6, 182, 212, 0.03) 100%);
    border-color: rgba(6, 182, 212, 0.18);
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.06);
}

.sales-card--yesterday::before {
    background: #06B6D4;
    opacity: 0.07;
}

/* Pair 2: Month (violet) | Forecast (violet muted) */
.sales-card--month {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.18) 0%, rgba(139, 92, 246, 0.06) 100%);
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.12);
}

.sales-card--month::before {
    background: #8B5CF6;
}

.sales-card--forecast {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.10) 0%, rgba(139, 92, 246, 0.03) 100%);
    border-color: rgba(139, 92, 246, 0.18);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.06);
}

.sales-card--forecast::before {
    background: #8B5CF6;
    opacity: 0.07;
}

/* Pair 3: Year (orange) | Year Forecast (orange muted) */
.sales-card--year {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.18) 0%, rgba(234, 88, 12, 0.06) 100%);
    border-color: rgba(234, 88, 12, 0.3);
    box-shadow: 0 4px 20px rgba(234, 88, 12, 0.12);
}

.sales-card--year::before {
    background: #EA580C;
}

.sales-card--yearforecast {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.10) 0%, rgba(234, 88, 12, 0.03) 100%);
    border-color: rgba(234, 88, 12, 0.18);
    box-shadow: 0 4px 20px rgba(234, 88, 12, 0.06);
}

.sales-card--yearforecast::before {
    background: #EA580C;
    opacity: 0.07;
}

/* =============================================
   DATA SOURCE (ea-core DB path) — CSV fallback marker + live intake card.
   Both exist only when datasource.json puts a surface on "db"; CSV mode never
   renders this markup.
   ============================================= */

/* Header pill: an ea-core call failed and a surface fell back to CSV for the session */
.ds-marker {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: #FBBF24;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.35);
    line-height: 1;
}

/* Live intake card — Sales page, above the statistics title. Cyan = the Today card. */
.db-live {
    margin: 4px 18px 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.16) 0%, rgba(6, 182, 212, 0.04) 100%);
    border: 1px solid rgba(6, 182, 212, 0.3);
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.1);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: background 1.4s ease, border-color 1.4s ease;
}

.db-live--stale {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.db-live__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.db-live__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #22C55E;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.db-live__dot {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34D399;
}

.db-live__dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(52, 211, 153, 0.6);
    animation: liveRipple 2.5s ease-out infinite;
}

.db-live--stale .db-live__pill {
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.db-live--stale .db-live__dot {
    background: #EF4444;
}

.db-live--stale .db-live__dot::after {
    background: rgba(239, 68, 68, 0.6);
}

.db-live__date {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}

.db-live__ago {
    margin-left: auto;
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

.db-live__hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.db-live__main--intake {
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.db-live__label,
.db-live__stat-label {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.db-live__value {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    word-break: break-all;
}

.db-live__main--intake .db-live__value {
    color: #67E8F9;
}

.db-live__sub,
.db-live__stat-sub {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

.db-live__stats {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
}

.db-live__stats:empty,
.db-live__cmp:empty,
.db-live__chips:empty,
.db-live__warn:empty {
    display: none;
}

.db-live__stat {
    padding: 7px 9px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    min-width: 0;
}

.db-live__stat-value {
    font-size: 13px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

.db-live__stat--pending .db-live__stat-value { color: #FBBF24; }
.db-live__stat--pickup .db-live__stat-value { color: #22D3EE; }
.db-live__stat--cancel .db-live__stat-value { color: #F87171; }

.db-live__cmp {
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.db-live__cmp-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 4px;
}

.db-live__cmp-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.db-live__delta {
    font-size: 13px;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 99px;
}

.db-live__delta--up {
    color: #34D399;
    background: rgba(16, 185, 129, 0.14);
}

.db-live__delta--down {
    color: #F87171;
    background: rgba(239, 68, 68, 0.14);
}

.db-live__cmp-avg {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

.db-live__big {
    margin-left: auto;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
}

.db-live__big b {
    color: #FBBF24;
}

.db-live__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.db-live__chip {
    --chip-color: rgba(255, 255, 255, 0.55);
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 99px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid color-mix(in srgb, var(--chip-color) 45%, transparent);
}

.db-live__chip b {
    color: var(--chip-color);
    font-weight: 800;
}

.db-live__chip-sum {
    color: rgba(255, 255, 255, 0.45);
}

.db-live__chip--sale { --chip-color: #34D399; }
.db-live__chip--pickup,
.db-live__chip--pickup_legacy { --chip-color: #22D3EE; }
.db-live__chip--pending,
.db-live__chip--legacy_pending { --chip-color: #FBBF24; }
.db-live__chip--cancel { --chip-color: #F87171; }
.db-live__chip--return { --chip-color: #FB7185; }
.db-live__chip--unclassified { --chip-color: #F59E0B; }

/* "+N" / "Less" toggle after the top status chips */
.db-live__chip--more {
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    color: #22D3EE;
    cursor: pointer;
    --chip-color: #22D3EE;
}

.db-live__warn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    color: #FBBF24;
}

.db-live__warn svg {
    flex-shrink: 0;
}

/* ea-core response warnings[] (stale mirror, unclassified statuses) — amber note under the
   Products bestsellers title; the Sales one lives inside the live card (.db-live__warn). */
.ds-warn {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: -4px 20px 10px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
    color: #FBBF24;
}

.ds-warn svg {
    flex-shrink: 0;
    margin-top: 1px;
}

/* Sales data freshness indicator */
.sales-freshness {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.3);
    padding: 0 20px 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: -5px;
    margin-bottom: 5px;
}

.sales-freshness:empty {
    display: none;
}

.sales-freshness--products {
    margin: 16px 0 0;
}

.sales-freshness svg {
    flex-shrink: 0;
}

/* Sales 30-day sparkline */
.sales-sparkline {
    margin: 4px 18px 10px;
    padding: 12px 14px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.sales-spark-total {
    font-size: 14px;
    font-weight: 700;
    color: #3B82F6;
}

.sales-spark-bar {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.sales-spark-bar__fill {
    width: 100%;
    height: 0;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, #60A5FA, #8B5CF6);
    transition: height 0.5s ease;
    min-height: 2px;
}

.sales-spark-bar__fill--weekend {
    background: linear-gradient(180deg, #F472B6, #DB2777);
}

.sales-spark-bar__fill--today {
    opacity: 0.45;
}

.sales-card__label {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.sales-card__label-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.sales-card__date {
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.3px;
}

.sales-card__value {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    word-break: break-all;
}

.sales-card__offline {
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.sales-card__offline:empty {
    display: none;
}

.sales-card__offline-value {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
}

.sales-card__offline-plus {
    opacity: 0.45;
}

.sales-card__offline-label {
    font-size: 9px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.25);
}

.sales-card__sub {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

/* Progress bar on forecast card */
.sales-progress {
    margin-top: 8px;
}

.sales-progress__bar {
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.sales-progress__fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #F59E0B, #FCD34D);
    width: 0%;
    transition: width 1s ease;
}

.sales-progress__label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 4px;
}

/* .sales-table-title — REMOVED: unused dead rule */

/* Sortable table header */
.sortable-th {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
}

.sortable-th:hover {
    color: #C084FC;
}

/* .sales-report-header, .sales-report-title — REMOVED: unused dead rules */

.sales-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(124, 58, 237, 0.18);
    border: 1px solid rgba(124, 58, 237, 0.4);
    color: #C084FC;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.sales-toggle-btn:active {
    transform: scale(0.95);
    background: rgba(124, 58, 237, 0.3);
}

/* Currency symbol styling */
.uah-sym {
    font-weight: 400;
    opacity: 0.65;
    font-size: 0.82em;
}

/* =============================================
   PRODUCTS REPORT CONTEXT BAR
   ============================================= */
.pmeta-bar {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    gap: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.02);
}

.pmeta-right {
    margin-left: auto;
}

.pmeta-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 4px;
    margin-right: 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    transition: color 0.2s;
}

.pmeta-back-btn:active {
    color: #fff;
}

.report-dropdown-container {
    position: relative;
    z-index: 1000;
}

.pmeta-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    cursor: pointer;
}

/* Mini icon — scaled-down version of .btn-icon */
.pmeta-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 6px;
}

/* The inner div of btn-icon gets injected here — force its size */
.pmeta-icon>div {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
}

.pmeta-name {
    font-size: 14px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
}

/* Sales report title has a slightly tighter gap */
#sales-report-title-display {
    margin-right: 2px;
}

.pmeta-chevron {
    opacity: 0.9;
    color: #fff;
    transform: translateY(1px);
}

/* Report type dropdown menu positioning */
.report-dropdown-menu {
    left: 0;
    min-width: 250px;
    top: 100%;
    margin-top: 10px;
}

/* --- About Page Styles --- */
.about-title {
    font-weight: 800;
    font-size: 40px;
    color: white;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 2px;
    margin-top: -20px;
    position: relative;
    z-index: 3;
}

.about-title__light {
    font-weight: 400;
}

.about-tagline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    margin-top: -3px;
    letter-spacing: 1px;
}

.about-version-row {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.about-version-build {
    font-weight: 600;
    opacity: 0.7;
    margin-left: 4px;
}

.about-version-badge {
    font-size: 11px;
    font-weight: 800;
    color: #0a1a20;
    background: #22D3EE;
    border-radius: 10px 0 0 10px;
    padding: 7px 10px 7px 12px;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
}

/* Developer credit — hero, centred below tagline */
.about-dev-credit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 20px;
    padding: 4px 0;
}

.about-dev-credit__name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.3px;
}

.about-dev-credit__email {
    font-size: 13px;
    font-weight: 500;
    color: #22D3EE;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.about-dev-credit__email:active {
    opacity: 1;
    text-decoration: underline;
}

/* Section title dividers inside about-content */
.about-section-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    padding: 4px 2px 2px;
    margin-top: 14px;
}

.about-section-title:first-child {
    margin-top: 0;
}

.about-block-body b {
    color: #fff;
}

.about-ai-logos {
    margin-top: 15px;
    text-align: left;
}

.about-ai-logos img {
    width: 100%;
    max-width: 180px;
    opacity: 1;
}

/* Settings controls — evenly spaced vertical layout */
.settings-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.pmeta-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pmeta-period {
    font-size: 12px;
    font-weight: 800;
    color: var(--accent-purple);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.25);
    padding: 3px 8px;
    border-radius: 6px;
}


/* =============================================
   INTEGRATIONS HUB
   ============================================= */
.integrations-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 18px 14px;
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.integrations-header svg {
    color: #8B5CF6;
}

.integration-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: calc(100% - 36px);
    margin: 0 18px 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}

.integration-card:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.07);
}

.integration-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.integration-card__body {
    flex: 1;
    min-width: 0;
}

.integration-card__title {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.integration-card__title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.integration-card__metric-pill {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
    flex-shrink: 0;
    line-height: 1;
    margin-left: auto;
}

.integration-card__metric-pill--ga {
    color: #F9AB00;
    background: rgba(249, 171, 0, 0.12);
}

.integration-card__metric-pill--gsc {
    color: #4285F4;
    background: rgba(66, 133, 244, 0.12);
}

.integration-card__metric-pill--gads {
    color: #34A853;
    background: rgba(52, 168, 83, 0.12);
}

.integration-card__metric-pill--meta {
    color: #0081FB;
    background: rgba(0, 129, 251, 0.12);
}

.integration-card__shortcut {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(24, 119, 242, 0.1);
    border: 1px solid rgba(24, 119, 242, 0.25);
    border-radius: 6px;
    color: #1877F2;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.integration-card__shortcut:active {
    background: rgba(24, 119, 242, 0.2);
}

#gads-campaigns-shortcut {
    background: rgba(52, 168, 83, 0.1);
    border-color: rgba(52, 168, 83, 0.25);
    color: #34A853;
}

#gads-campaigns-shortcut:active {
    background: rgba(52, 168, 83, 0.2);
}

#ga-realtime-shortcut {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
    color: #F59E0B;
}

#ga-realtime-shortcut:active {
    background: rgba(245, 158, 11, 0.22);
}

/* Sales-page realtime card — own spacing + extra bottom padding to balance
   the layout now that the "Tap for details" hint isn't rendered here. */
#sales-live-card {
    margin: -2px 18px 16px;
}

.ga-live-card--sales {
    padding-bottom: 16px;
}

.ga-live-card--sales .ga-live-card__bars-axis {
    margin-bottom: 0;
}

.integration-card__meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 3px;
    height: 60px;
    overflow: hidden;
    contain: layout size;
}

/* Smooth reveal for async-loaded card content (spark + meta) */
@keyframes cardContentReveal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.integration-card__spark.loaded,
.integration-card__meta.loaded {
    animation: cardContentReveal 0.3s ease forwards;
}

.integration-card__status {
    flex-shrink: 0;
}

.integration-card__dot {
    display: inline-block;
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    vertical-align: middle;
    margin-left: 4px;
    margin-bottom: 2px;
}

.integration-card__dot--active {
    background: #10B981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}

/* Pulsing ripple on the active dot — matches the .live-dot pattern used on
   the Sales page header. Reuses the shared liveRipple keyframe. */
.integration-card__dot--active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.6);
    animation: liveRipple 2.5s ease-out infinite;
}

/* Stale state on integration card dots — cache age above the per-feed
   threshold (GA/GAds/Meta > 7h, GSC > 13h). Wins over --active via
   combined-class specificity, no !important needed. */
.integration-card__dot--active.integration-card__dot--stale {
    background: #EF4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}
.integration-card__dot--active.integration-card__dot--stale::after {
    background: rgba(239, 68, 68, 0.6);
}

.integration-card--inactive {
    opacity: 0.45;
    cursor: default;
}

.integration-card__not-configured {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
}

.integration-card__arrow {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.3);
}

.integration-card__stat-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
}

.integration-card__stat-row:first-child {
    margin-top: 6px;
}

.integration-card__spark {
    margin-top: 8px;
    height: 36px;
    overflow: hidden;
    contain: layout size;
}

.integration-card__spark .ga-spark-bars,
.integration-card__spark .gsc-spark-bars {
    height: 36px;
    gap: 1.5px;
}

.integration-card__stat-period {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    min-width: 22px;
}

.integration-card__stat-sep {
    color: rgba(255, 255, 255, 0.2);
}

.integration-card__cache-age {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 6px;
}

/* =============================================
   GA / GOOGLE ANALYTICS
   ============================================= */
.ga-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 8px;
}

.ga-header .ga-back-btn {
    margin-right: 2px;
}

.ga-header-icon {
    color: #F59E0B;
}

.ga-header-title {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    flex: 1;
}

.ga-header-domain {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    margin-left: 6px;
}

.ga-header-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 4px rgba(16, 185, 129, 0.5);
    margin-right: 4px;
    vertical-align: middle;
}

.ga-refresh-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.ga-refresh-btn:active {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

.ga-refresh-btn--spinning svg {
    animation: ga-spin 1s linear infinite;
}

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

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

/* Users sparkline — compact vertical bars */
.ga-sparkline {
    margin: 4px 18px 0;
    padding: 12px 14px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.ga-spark-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.ga-spark-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ga-spark-total {
    font-size: 14px;
    font-weight: 700;
    color: #F59E0B;
}

.ga-spark-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 48px;
}

.ga-spark-bar {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.ga-spark-bar__fill {
    width: 100%;
    height: 0;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, #F59E0B, #E37400);
    transition: height 0.5s ease;
    min-height: 2px;
}

.ga-spark-bar__fill--today {
    opacity: 0.4;
}

/* ─── GA Realtime live card ────────────────────────────────────────── */
.ga-live-card {
    margin: 8px 18px 0;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.02));
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.92);
    transition: background 1.4s ease, border-color 1.4s ease;
}

/* Card-level greyscale fade — applied as direct color overrides (NOT filter)
   because we can't put filter on the card root without greying the dot too. */
.ga-live-card--stale {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border-color: rgba(255, 255, 255, 0.10);
}

.ga-live-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.ga-live-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #22C55E;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.ga-live-card__title-suffix {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
    letter-spacing: 0.6px;
}

/* Sales-context title: pulsing dot + "ACTIVE USERS • GA" (green) + muted hint */
.ga-live-card__title--sales {
    flex-wrap: wrap;
    gap: 6px;
}

.ga-live-card__title--sales .ga-live-card__title-suffix {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

.ga-live-card__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    animation: ga-live-pulse 1.6s ease-in-out infinite;
}

@keyframes ga-live-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

/* Stale state — last successful realtime fetch older than 1 minute.
   Separate keyframe because box-shadow color is baked into the pulse. */
.ga-live-card__dot--stale {
    background: #EF4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    animation: ga-live-pulse-stale 1.6s ease-in-out infinite;
}
@keyframes ga-live-pulse-stale {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Stale-card greyscale — when the realtime poll hasn't succeeded for >1 min,
   the whole card desaturates EXCEPT the live dot which stays red. We can't
   put filter on the card root because filter applies to the entire subtree
   and would grey-out the dot too. Instead each child section gets its own
   filter, and the dot (sibling of the title text-span, not a descendant)
   never gets one. Transition is on the same elements so colour fades in/out
   smoothly when the data freshness flips. */
.ga-live-card__title > span:not(.ga-live-card__dot),
.ga-live-card__meta,
.ga-live-card__hero,
.ga-live-card__bars,
.ga-live-card__bars-axis {
    transition: filter 1.4s ease, opacity 1.4s ease;
}

.ga-live-card--stale .ga-live-card__title > span:not(.ga-live-card__dot),
.ga-live-card--stale .ga-live-card__meta,
.ga-live-card--stale .ga-live-card__hero,
.ga-live-card--stale .ga-live-card__bars,
.ga-live-card--stale .ga-live-card__bars-axis {
    filter: grayscale(1);
}

/* Bright numbers (white) stay vivid even after grayscale(1) — desaturation
   only kills colour, not luminance. Drop opacity so the headline values
   visibly fade with the rest of the card while stale. Transition matched
   to the card-bg fade so everything wakes up together. */
.ga-live-card__big-value,
.ga-live-card__sub-value {
    transition: opacity 1.4s ease;
}

.ga-live-card--stale .ga-live-card__big-value,
.ga-live-card--stale .ga-live-card__sub-value {
    opacity: 0.45;
}

.ga-live-card__meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
}

.ga-live-card__hero {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 10px;
}

/* Sales hero: 5min on the left at ~33% width, then a tight right-group
   containing 30min + devices + cities packed close together (~67%). */
.ga-live-card__hero--sales {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.ga-live-card__hero--sales .ga-live-card__big-label,
.ga-live-card__hero--sales .ga-live-card__sub-label {
    white-space: nowrap;
}

.ga-live-card__right-group {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.ga-live-card__hero--sales .ga-live-card__sub {
    text-align: left;
}

.ga-live-mini {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    /* Nudge the tiny info lines down so the first row sits near the cap-line
       of the adjacent big number, not at the absolute top of the column. */
    padding: 3px 0 0 15px;
}

.ga-live-mini__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    font-size: 8px;
    line-height: 1.05;
    min-width: 0;
}

.ga-live-mini__label {
    color: rgba(255, 255, 255, 0.85);
    font-size: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.ga-live-mini__value {
    color: #4ADE80;
    font-weight: 700;
    font-size: 9px;
    flex: 0 0 auto;
}

.ga-live-mini__empty {
    color: rgba(255, 255, 255, 0.3);
    font-size: 9px;
    font-style: italic;
}

.ga-live-card__hero--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 8px 0;
}

.ga-live-card__empty-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.ga-live-card__hero--error .ga-live-card__big-value {
    color: rgba(255, 255, 255, 0.35);
}

.ga-live-card__hero--error .ga-live-card__empty-label {
    color: #FBBF24;
}

.ga-live-card__big {
    flex: 0 0 auto;
}

.ga-live-card__big-value {
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    color: #22C55E;
    letter-spacing: -0.5px;
}

.ga-live-card__big-label {
    font-size: 8px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.ga-live-card__sub {
    flex: 1 1 auto;
    text-align: right;
}

.ga-live-card__sub-value {
    font-size: 36px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1;
    letter-spacing: -0.5px;
}

.ga-live-card__sub-label {
    font-size: 8px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.ga-live-card__bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 36px;
    margin: 4px 0 4px;
}

.ga-live-bar {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.ga-live-bar__fill {
    width: 100%;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, #4ADE80, #16A34A);
    transition: height 0.4s ease;
    min-height: 2px;
}

.ga-live-bar__fill--now {
    background: linear-gradient(180deg, #FBBF24, #F59E0B);
}

/* Skeleton (loading) states — shown immediately on page load so the card
   reserves its final height and doesn't shift content when real data arrives. */
.ga-live-bar__fill--skeleton {
    height: 30%;
    background: rgba(74, 222, 128, 0.25);
    animation: ga-live-skeleton-pulse 1.4s ease-in-out infinite;
}

.ga-live-card__skeleton-text {
    opacity: 0.25;
    animation: ga-live-skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes ga-live-skeleton-pulse {

    0%,
    100% {
        opacity: 0.18;
    }

    50% {
        opacity: 0.4;
    }
}

.ga-live-card__bars-axis {
    display: flex;
    justify-content: space-between;
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.ga-live-card__empty {
    text-align: center;
    padding: 16px 0 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.ga-live-card--compact {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ga-live-card--compact:active {
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.14), rgba(34, 197, 94, 0.04));
}

.ga-live-card__expand-hint {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(34, 197, 94, 0.15);
    font-size: 11px;
    font-weight: 600;
    color: rgba(34, 197, 94, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.ga-live-card--detail {
    margin: 0 0 14px;
    cursor: default;
}

.ga-live-detail__sections {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 0 24px;
}

.ga-live-detail__section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px 14px;
}

.ga-live-detail__section .ga-live-list__title {
    margin-bottom: 10px;
}

.ga-live-detail__section .ga-live-list__row {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 13px;
}

.ga-live-detail__section .ga-live-list__row:last-child {
    border-bottom: none;
}

.ga-live-list__sub {
    display: inline-block;
    margin-left: 8px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    font-weight: 500;
}

.ga-live-card__breakdowns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    margin-top: 4px;
}

.ga-live-list__title {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.ga-live-list__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 12px;
}

.ga-live-list__label {
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.ga-live-list__value {
    color: #4ADE80;
    font-weight: 700;
    flex: 0 0 auto;
}

.ga-live-list__empty {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
}

.ga-live-error {
    padding: 8px 4px;
    font-size: 12px;
    color: #F87171;
}

/* Dashboard block containers — same visual as sparkline */
.ga-dashboard-block {
    margin: 8px 18px 0;
    padding: 2px 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

/* Period pills */
.ga-period-pills {
    display: flex;
    gap: 6px;
    padding: 10px 12px 6px;
}

.ga-period-pill {
    flex: 1;
    padding: 7px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.ga-period-pill.active {
    background: rgba(6, 182, 212, 0.12);
    border-color: rgba(6, 182, 212, 0.3);
    color: #06B6D4;
}

/* Summary cards — styled like sales dashboard cards, cyan palette (matches Today card) */
.ga-summary-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 4px 12px 12px;
}

.ga-summary-card {
    border-radius: 18px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(6, 182, 212, 0.3);
    backdrop-filter: blur(10px);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.18) 0%, rgba(6, 182, 212, 0.06) 100%);
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.12);
    text-align: center;
}

.ga-summary-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #06B6D4;
    opacity: 0.12;
    z-index: 0;
}

.ga-summary-card>* {
    position: relative;
    z-index: 1;
}

/* Softer pair for cards 3-4 */
.ga-summary-card:nth-child(3),
.ga-summary-card:nth-child(4) {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.10) 0%, rgba(6, 182, 212, 0.03) 100%);
    border-color: rgba(6, 182, 212, 0.18);
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.06);
}

.ga-summary-card:nth-child(3)::before,
.ga-summary-card:nth-child(4)::before {
    opacity: 0.07;
}

.ga-summary-card__value {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    word-break: break-all;
}

.ga-summary-card__label {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.ga-summary-card__trend {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
}

.ga-trend-up {
    color: #10B981;
}

.ga-trend-down {
    color: #F43F5E;
}

/* Section containers */
.ga-section {
    padding: 0 18px;
    margin-bottom: 18px;
}

.ga-dashboard-block.ga-section {
    padding: 10px 14px 12px;
    margin-bottom: 20px;
}

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

/* Bar chart rows (traffic sources, regions) */
.ga-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}

.ga-bar-label {
    width: 110px;
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.ga-bar-track {
    flex: 1;
    height: 18px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    overflow: hidden;
}

.ga-bar-fill {
    height: 100%;
    border-radius: 4px;
    width: 0;
}

.ga-bar-value {
    min-width: 43px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Region Sales sub-metrics */
.ga-region-sales-meta {
    display: flex;
    gap: 10px;
    padding: 2px 0 10px 0;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ga-region-sales-meta span {
    white-space: nowrap;
}

.ga-region-sales-row--dimmed {
    opacity: 0.4;
}

.ga-bar-pct {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
}

.ga-ecom-title {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    padding: 16px 16px 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}



/* Pages list */
.ga-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

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

.ga-list-rank {
    width: 22px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
}

.ga-list-text {
    flex: 1;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    word-break: break-all;
    min-width: 0;
}

.ga-list-value {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

/* Device breakdown */
.ga-devices-bar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 10px;
}

.ga-devices-segment {
    transition: width 0.6s ease;
}

.ga-devices-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.ga-devices-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

.ga-devices-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ga-devices-pct {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

/* Error state */
.ga-error {
    text-align: center;
    padding: 40px 20px;
}

.ga-error-icon {
    color: #F59E0B;
    margin-bottom: 12px;
}

.ga-error-title {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 8px;
}

.ga-error-message {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 300px;
    margin: 0 auto;
    word-break: break-word;
}

/* Report buttons */
.ga-report-buttons {
    padding: 0 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.ga-report-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s;
}

.ga-report-btn:active {
    background: rgba(255, 255, 255, 0.08);
}

.ga-report-btn__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-bg);
    color: var(--icon-color);
    flex-shrink: 0;
}

.ga-report-btn__text {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
}

.ga-report-btn__arrow {
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Section header with back button */
.ga-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-top: 14px;
}

.ga-section-header .ga-section-title {
    margin-bottom: 0;
}

.ga-back-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.ga-back-btn:active {
    background: rgba(255, 255, 255, 0.12);
}

/* Period badge in section headers */
.ga-section-period {
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
    padding: 3px 8px;
    border-radius: 6px;
    margin-left: auto;
    white-space: nowrap;
}

/* Daily traffic chart */
.ga-daily-chart-container {
    padding: 0 18px;
}

.ga-daily-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}

.ga-daily-label {
    min-width: 46px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.ga-daily-date {
    width: 42px;
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.ga-daily-bar-track {
    flex: 1;
    height: 18px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    overflow: hidden;
}

.ga-daily-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #F59E0B, #F97316);
    border-radius: 4px;
    width: 0;
    transition: width 0.6s ease;
}

.ga-daily-value {
    width: 43px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* =============================================
   INLINE CSS CLEANUP — Utility Classes
   ============================================= */

/* Pre-auth 403 page — no JS context, minimal styling */
.auth-error-page {
    background: var(--bg-primary, #0a0a14);
    color: var(--text-primary, #fff);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-error {
    text-align: center;
    padding: 40px 20px;
}

.auth-error h1 {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 12px;
    color: var(--accent-pink, #F43F5E);
}

.auth-error p {
    font-size: 14px;
    color: var(--text-muted, #999);
    margin: 0;
}

/* Cache-clear status icon alignment */
.cache-status-icon {
    width: 12px;
    height: 12px;
    vertical-align: -2px;
    margin-right: 4px;
}

/* Empty/error state — replaces inline text-align/padding/color */
.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

/* Error state with retry button */
.error-state {
    text-align: center;
    padding: 20px;
}

.error-state__message {
    color: var(--accent-pink);
    font-size: 13px;
    margin-bottom: 12px;
}

.error-state__retry {
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.4);
    color: #C084FC;
    padding: 8px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.error-state__retry:active {
    background: rgba(139, 92, 246, 0.35);
}

/* Table column widths — replaces inline width on <th> */
.col-qty {
    width: 50px;
}

.col-total {
    width: 80px;
}

/* Bold cell value — replaces inline font-weight on <td> */
.cell-bold {
    font-weight: 700;
}

/* Category label in charts/tables — replaces inline color/font-size */
.category-label {
    color: #fff;
    font-size: 10px;
}

/* Brand highlight in table names — replaces inline font-weight */
.brand-highlight {
    font-weight: 800;
}

/* Cache status result colors */
.cache-status--success {
    color: #34D399;
}

.cache-status--error {
    color: #F43F5E;
}

/* About block icon — consumes custom properties like .btn-icon does */
.about-block-icon {
    background: var(--icon-bg);
    color: var(--icon-color);
}

/* GA daily users bar gradient — replaces inline static gradient */
.ga-daily-bar-fill--users {
    background: linear-gradient(90deg, #06B6D4, #0891B2);
}

/* Current/incomplete month — semi-transparent hint */
.ga-daily-bar-fill--partial {
    opacity: 0.45;
}

/* =============================================
   E-COMMERCE REPORT
   ============================================= */
.ga-ecom-group {
    padding: 0 18px;
    margin-bottom: 18px;
}

.ga-ecom-group__title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ga-ecom-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.ga-ecom-card {
    padding: 12px 10px;
    border-radius: 10px;
    text-align: center;
}

.ga-ecom-card--amber {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.15);
}

.ga-ecom-card--cyan {
    background: rgba(6, 182, 212, 0.08);
    border: 1px solid rgba(6, 182, 212, 0.15);
}

.ga-ecom-card__value {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.ga-ecom-card__label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 4px;
}

.ga-ecom-funnel {
    margin-bottom: 12px;
}

.ga-ecom-rates {
    display: flex;
    gap: 8px;
}

.ga-ecom-rate {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 8px;
}

.ga-ecom-rate__label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

.ga-ecom-rate__value {
    font-size: 13px;
    font-weight: 700;
    color: #A78BFA;
}

/* About page — GA connection status */
.about-ga-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
}

.about-ga-status--active {
    color: #34D399;
}

.about-ga-status--inactive {
    color: var(--text-muted);
}

.about-ga-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34D399;
    display: inline-block;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
}

.about-ga-dot--orange {
    background: #F59E0B;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}

.about-ga-status--warning {
    color: #F59E0B;
}

.about-connections {
    margin-bottom: 12px;
}

.about-connections .about-ga-status {
    margin-top: 4px;
}

/* GA report button icons — unified amber color */
.ga-report-btn__icon {
    --icon-bg: rgba(245, 158, 11, 0.15);
    --icon-color: #F59E0B;
    background: var(--icon-bg);
    color: var(--icon-color);
}

/* =============================================
   GSC / GOOGLE SEARCH CONSOLE
   Blue/indigo accent (#4285F4 Google blue, #6366F1 indigo).
   Reuses many .ga-* layout primitives; only GSC-specific
   chrome and the compact query/page rows live here.
   ============================================= */
.integration-card__icon--gsc {
    color: #4285F4;
    background: transparent;
}

.gsc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 8px;
}

.gsc-header .gsc-back-btn {
    margin-right: 2px;
}

.gsc-back-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}

.gsc-back-btn:active {
    background: rgba(255, 255, 255, 0.08);
}

.gsc-header-icon {
    color: #4285F4;
}

.gsc-header-title {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    flex: 1;
}

.gsc-header-domain {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    margin-left: 6px;
}

.gsc-header-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 4px rgba(16, 185, 129, 0.5);
    margin-right: 4px;
    vertical-align: middle;
}

.gsc-refresh-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}

.gsc-refresh-btn:active {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

/* "Data through YYYY-MM-DD" — acknowledges GSC's 2-3 day publishing delay */
.gsc-freshness {
    margin: 6px 22px 0;
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Clicks sparkline — 28 days, blue gradient */
.gsc-sparkline {
    margin: 4px 18px 0;
    padding: 12px 14px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.gsc-spark-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.gsc-spark-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gsc-spark-total {
    font-size: 14px;
    font-weight: 700;
    color: #4285F4;
}

.gsc-spark-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 48px;
}

.gsc-spark-bar {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.gsc-spark-bar__fill {
    width: 100%;
    height: 0;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, #06B6D4, #0891B2);
    transition: height 0.5s ease;
    min-height: 2px;
}

.gsc-spark-bar__fill--today {
    opacity: 0.55;
}

/* Reuses .ga-dashboard-block container */
.gsc-dashboard-block {
    margin: 8px 18px 0;
    padding: 2px 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

/* Period pills — blue active state instead of cyan */
.gsc-period-pills {
    display: flex;
    gap: 6px;
    padding: 10px 12px 6px;
}

.gsc-period-pill {
    flex: 1;
    padding: 7px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.gsc-period-pill.active {
    background: rgba(66, 133, 244, 0.12);
    border-color: rgba(66, 133, 244, 0.3);
    color: #4285F4;
}

/* Summary cards — blue values instead of amber */
.gsc-summary-card .ga-summary-card__value {
    color: #4285F4;
}

/* Compact metric row used by Queries / Pages / Countries / Appearance */
.gsc-row {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

.gsc-row__head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.gsc-row__rank {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.3);
    min-width: 22px;
    font-variant-numeric: tabular-nums;
}

.gsc-row__label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gsc-row__metrics {
    display: flex;
    gap: 10px;
    padding-left: 30px;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}

.gsc-metric {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
}

.gsc-metric__unit {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.35);
    margin-left: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.gsc-metric--clicks {
    color: #4285F4;
}

.gsc-metric--impr {
    color: #8B5CF6;
}

.gsc-metric--ctr {
    color: #10B981;
}

.gsc-metric--pos {
    color: #F59E0B;
}

/* Branded vs Unbranded */
.gsc-branded-hint {
    margin: 12px 18px 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

.gsc-branded-hint code {
    background: rgba(66, 133, 244, 0.1);
    color: #8AB4F8;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.gsc-split-card {
    margin: 8px 18px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.gsc-split-title {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.gsc-split-bar {
    display: flex;
    height: 16px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
}

.gsc-split-bar__seg {
    height: 100%;
    transition: width 0.6s ease;
}

.gsc-split-bar__seg--branded {
    background: linear-gradient(90deg, #EC4899, #BE185D);
}

.gsc-split-bar__seg--unbranded {
    background: linear-gradient(90deg, #4285F4, #1A73E8);
}

.gsc-split-legend {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.gsc-split-legend__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

.gsc-split-legend__item strong {
    color: #fff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.gsc-split-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.gsc-split-dot--branded {
    background: #EC4899;
}

.gsc-split-dot--unbranded {
    background: #4285F4;
}

.gsc-split-pct {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    font-variant-numeric: tabular-nums;
}

.gsc-branded-lists {
    margin: 8px 18px 0;
}

.gsc-branded-col {
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
}

.gsc-branded-col__title {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

/* Page × Query matrix — collapsible page rows with inline query list */
.gsc-matrix-hint {
    margin: 12px 18px 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

.gsc-matrix-page {
    margin: 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.gsc-matrix-page[open] {
    background: rgba(66, 133, 244, 0.04);
}

.gsc-matrix-page__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 4px;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

.gsc-matrix-page__head::-webkit-details-marker {
    display: none;
}

.gsc-matrix-page__label {
    flex: 1;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gsc-matrix-page__totals {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.gsc-matrix-page__caret {
    color: rgba(255, 255, 255, 0.35);
    transition: transform 0.2s;
    display: inline-flex;
}

.gsc-matrix-page[open] .gsc-matrix-page__caret {
    transform: rotate(180deg);
}

.gsc-matrix-queries {
    padding: 4px 8px 10px 34px;
}

.gsc-matrix-query {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 11px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
}

.gsc-matrix-query:last-child {
    border-bottom: none;
}

.gsc-matrix-query__text {
    flex: 1;
    color: rgba(255, 255, 255, 0.75);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Daily bar variants — reuse .ga-daily-bar-fill geometry, override gradient */
.gsc-daily-bar-fill--clicks {
    background: linear-gradient(90deg, #4285F4, #1A73E8);
}

.gsc-daily-bar-fill--impressions {
    background: linear-gradient(90deg, #8B5CF6, #6D28D9);
}

/* Monthly history — two stacked bars per month (clicks + impressions) */
.gsc-monthly-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.gsc-monthly-date {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    min-width: 54px;
    font-variant-numeric: tabular-nums;
}

.gsc-monthly-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gsc-monthly-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gsc-monthly-bar .ga-daily-bar-track {
    flex: 1;
}

.gsc-monthly-value {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    min-width: 70px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.gsc-monthly-bar-fill--clicks {
    background: linear-gradient(90deg, #4285F4, #1A73E8);
}

.gsc-monthly-bar-fill--impressions {
    background: linear-gradient(90deg, #8B5CF6, #6D28D9);
}

/* =============================================
   GADS / GOOGLE ADS
   Green accent (#34A853 Google green).
   Reuses .ga-* layout primitives; only Ads-specific
   chrome, sparkline, and campaign cards live here.
   ============================================= */
.gads-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 8px;
}

.gads-header .gads-back-btn {
    margin-right: 2px;
}

.gads-back-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}

.gads-back-btn:active {
    background: rgba(255, 255, 255, 0.08);
}

.gads-header-icon {
    color: #34A853;
}

.gads-header-title {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    flex: 1;
}

.gads-header-domain {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    margin-left: 6px;
}

.gads-header-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 4px rgba(16, 185, 129, 0.5);
    margin-right: 4px;
    vertical-align: middle;
}

.gads-refresh-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}

.gads-refresh-btn:active {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

.gads-refresh-btn--spinning svg {
    animation: ga-spin 0.8s linear infinite;
}

/* Cost sparkline — 30 days, green gradient */
.gads-sparkline {
    margin: 4px 18px 0;
    padding: 12px 14px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.gads-spark-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.gads-spark-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gads-spark-total {
    font-size: 14px;
    font-weight: 700;
    color: #42A5F5;
}

.gads-spark-total--roas {
    color: #10B981;
}

.gads-spark-total--spend {
    color: #F43F5E;
}

.gads-spark-header--second {
    margin-top: 10px;
}

.gads-spark-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 48px;
}

.gads-spark-bar {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.gads-spark-bar__fill {
    width: 100%;
    height: 0;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, #42A5F5, #1565C0);
    transition: height 0.5s ease;
    min-height: 2px;
}

.gads-spark-bar__fill--revenue {
    background: linear-gradient(180deg, #42A5F5, #1565C0);
}

.gads-spark-bar__fill--spend {
    background: linear-gradient(180deg, #F43F5E, #BE123C);
}

.gads-spark-bar__fill--roas {
    background: rgba(255, 255, 255, 0.3);
}

/* Campaign hero button — prominent CTA below sparkline */
.campaign-hero-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 36px);
    margin: 10px 18px;
    padding: 24px 16px;
    border-radius: 12px;
    border: 1px solid rgba(52, 168, 83, 0.2);
    background: rgba(52, 168, 83, 0.06);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s;
}

.campaign-hero-btn:active {
    background: rgba(52, 168, 83, 0.12);
}

.campaign-hero-btn--meta {
    border-color: rgba(0, 129, 251, 0.2);
    background: rgba(0, 129, 251, 0.06);
}

.campaign-hero-btn--meta:active {
    background: rgba(0, 129, 251, 0.12);
}

.campaign-hero-btn__logo {
    flex-shrink: 0;
}

.campaign-hero-btn__text {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
}

.campaign-hero-btn__arrow {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.3);
}

.gads-dashboard-block {
    margin: 8px 18px 0;
    padding: 2px 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

/* Period pills — green active state */
.gads-period-pills {
    display: flex;
    gap: 6px;
    padding: 10px 12px 6px;
}

.gads-period-pill {
    flex: 1;
    padding: 7px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.gads-period-pill.active {
    background: rgba(52, 168, 83, 0.12);
    border-color: rgba(52, 168, 83, 0.3);
    color: #34A853;
}

/* Summary cards — green values */
.gads-summary-card .ga-summary-card__value {
    color: #34A853;
}

/* All GAds summary cards — uniform green background.
   Doubled specificity (.ga-summary-card.gads-summary-card) to override
   the base .ga-summary-card:nth-child(3/4) darkening rules. */
.ga-summary-card.gads-summary-card {
    background: linear-gradient(135deg, rgba(52, 168, 83, 0.18) 0%, rgba(52, 168, 83, 0.06) 100%);
    border-color: rgba(52, 168, 83, 0.3);
    box-shadow: 0 4px 20px rgba(52, 168, 83, 0.12);
}

.ga-summary-card.gads-summary-card::before {
    background: #34A853;
    opacity: 0.12;
}

/* ROAS card — slightly brighter accent */
.gads-roas-card .ga-summary-card__value {
    color: #10B981;
}

/* Devices section padding */
#gads-devices-section {
    padding: 10px 12px;
}

/* Report buttons spacing under devices */
#gads-view>.ga-report-buttons {
    margin-top: 20px;
}

/* Integration card sparkline */
.integration-card__spark .gads-spark-bars {
    height: 36px;
    gap: 1.5px;
}

/* Campaign card */
.gads-campaign-card {
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin: 6px 0;
}

.gads-campaign-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}

.gads-campaign-name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    flex: 1;
    min-width: 0;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gads-campaign-type {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.gads-campaign-type--performance_max {
    background: rgba(66, 133, 244, 0.15);
    color: #4285F4;
}

.gads-campaign-type--search {
    background: rgba(52, 168, 83, 0.15);
    color: #34A853;
}

.gads-campaign-type--shopping {
    background: rgba(251, 188, 4, 0.15);
    color: #FBBC04;
}

.gads-campaign-type--display {
    background: rgba(234, 67, 53, 0.15);
    color: #EA4335;
}

.gads-campaign-type--video {
    background: rgba(139, 92, 246, 0.15);
    color: #8B5CF6;
}

/* Campaign metrics — two-row layout */
.gads-campaign-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.gads-campaign-metric {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.gads-metrics-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

.gads-metric--roas {
    font-weight: 700;
}

.gads-metric--revenue {
    background: rgba(66, 165, 245, 0.1);
    color: #42A5F5;
}

.gads-metric--spend {
    background: rgba(244, 63, 94, 0.1);
    color: #F43F5E;
}

.gads-metric--clicks {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
}

.gads-metric--impr {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
}

.gads-metric--conv {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
}

/* Campaign ROAS bar */
.gads-campaign-roas-bar {
    margin-top: 4px;
}

.gads-campaign-roas-bar .ga-daily-bar-track {
    height: 4px;
}

/* Campaign status (paused) */
.gads-campaign-status--paused .gads-campaign-name {
    color: rgba(255, 255, 255, 0.55);
}

/* Daily/Monthly chart bar fills — spend pink, revenue blue (matches Meta) */
.gads-daily-bar-fill--spend {
    background: linear-gradient(90deg, #F43F5E, #BE123C);
}

.gads-daily-bar-fill--revenue {
    background: linear-gradient(90deg, #42A5F5, #1565C0);
}

.gads-monthly-bar-fill--spend {
    background: linear-gradient(90deg, #F43F5E, #BE123C);
}

.gads-monthly-bar-fill--revenue {
    background: linear-gradient(90deg, #42A5F5, #1565C0);
}

/* ROAS bar (shared with daily/monthly) */
.gads-bar-fill--roas {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* Chart legend */
.gads-chart-legend {
    display: flex;
    gap: 14px;
    padding: 8px 0 6px;
}

.gads-chart-legend__item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.gads-chart-legend__dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.gads-chart-legend__dot--spend {
    background: #F43F5E;
}

.gads-chart-legend__dot--revenue {
    background: #42A5F5;
}

.gads-chart-legend__dot--roas {
    background: rgba(255, 255, 255, 0.3);
}

/* Campaign period pills (green theme) */
.gads-campaign-pills {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.gads-campaign-pill {
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.gads-campaign-pill.active {
    background: rgba(52, 168, 83, 0.12);
    border-color: rgba(52, 168, 83, 0.3);
    color: #34A853;
}

/* Sticky header — campaigns sub-report (period pills always visible) */
#gads-campaigns-section .gads-sub-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(17, 17, 19, 0.5);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    margin: 0 -18px;
    padding: 6px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#gads-campaigns-list {
    padding-top: 10px;
}

/* =============================================
   META ADS
   Meta blue accent (#1877F2).
   Reuses .ga-* layout primitives; only Meta-specific
   chrome, sparkline, and campaign cards live here.
   ============================================= */
.meta-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 8px;
}

.meta-header .meta-back-btn {
    margin-right: 2px;
    margin-top: 1px;
}

.meta-header .meta-back-btn svg {
    width: 24px;
    height: 24px;
}

.meta-back-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}

.meta-sub-header .meta-back-btn {
    margin-top: 1px;
}

.meta-sub-header .meta-back-btn svg {
    width: 24px;
    height: 24px;
}

.meta-back-btn:active {
    background: rgba(255, 255, 255, 0.08);
}

.meta-header-icon {
    display: flex;
    align-items: center;
}

.meta-header-title {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    flex: 1;
}

.meta-header-domain {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    margin-left: 6px;
}

.meta-header-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 4px rgba(16, 185, 129, 0.5);
    margin-right: 4px;
    vertical-align: middle;
}

.meta-refresh-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}

.meta-refresh-btn:active {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

.meta-refresh-btn--spinning svg {
    animation: ga-spin 0.8s linear infinite;
}

/* Meta sub-report header — replaces double headers */
.meta-sub-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
}

.meta-sub-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.meta-sub-header__title {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.meta-sub-header__right {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.meta-sub-header__right .meta-refresh-btn {
    margin-top: 2px;
}

/* Sticky header — campaigns sub-report only (period pills always visible) */
#meta-campaigns-section .meta-sub-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(17, 17, 19, 0.5);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    margin: 0 -18px;
    padding: 6px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#meta-campaigns-list {
    padding-top: 10px;
}

/* Spend sparkline — 30 days, Meta blue gradient */
.meta-sparkline {
    margin: 4px 18px 0;
    padding: 12px 14px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.meta-spark-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.meta-spark-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.meta-spark-total {
    font-size: 14px;
    font-weight: 700;
    color: #1877F2;
}

.meta-spark-total--revenue {
    color: #42A5F5;
}

.meta-spark-total--spend {
    color: #F43F5E;
}

.meta-spark-total--roas {
    color: #10B981;
}

.meta-spark-header--second {
    margin-top: 10px;
}

.meta-spark-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 48px;
}

.meta-spark-bar {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.meta-spark-bar__fill {
    width: 100%;
    height: 0;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, #1877F2, #0D47A1);
    transition: height 0.5s ease;
    min-height: 2px;
}

.meta-spark-bar__fill--revenue {
    background: linear-gradient(180deg, #42A5F5, #1565C0);
}

.meta-spark-bar__fill--spend {
    background: linear-gradient(180deg, #F43F5E, #BE123C);
}

.meta-spark-bar__fill--roas {
    background: rgba(255, 255, 255, 0.3);
}

/* Horizontal ROAS bar for daily/monthly reports */
.meta-bar-fill--roas {
    background: rgba(255, 255, 255, 0.3) !important;
}



.meta-dashboard-block {
    margin: 8px 18px 0;
    padding: 2px 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

#meta-platforms-section {
    padding: 10px 14px 12px;
}

#meta-view>.ga-report-buttons {
    margin-top: 20px;
}

/* Period pills — Meta blue active state */
.meta-period-pills {
    display: flex;
    gap: 6px;
    padding: 10px 12px 6px;
}

.meta-period-pill {
    flex: 1;
    padding: 7px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.meta-period-pill.active {
    background: rgba(24, 119, 242, 0.12);
    border-color: rgba(24, 119, 242, 0.3);
    color: #1877F2;
}

/* Campaign report period pills (in section header) */
.meta-campaign-pills {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.meta-campaign-pill {
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.meta-campaign-pill.active {
    background: rgba(24, 119, 242, 0.12);
    border-color: rgba(24, 119, 242, 0.3);
    color: #1877F2;
}

/* Summary cards — uniform Meta blue background for all cards */
.meta-summary-card,
.meta-roas-card {
    background: linear-gradient(135deg, rgba(24, 119, 242, 0.18) 0%, rgba(24, 119, 242, 0.06) 100%);
    border-color: rgba(24, 119, 242, 0.3);
    box-shadow: 0 4px 20px rgba(24, 119, 242, 0.12);
}

.meta-summary-card::before,
.meta-roas-card::before {
    background: #1877F2;
    opacity: 0.12;
}

/* Override the nth-child(3/4) darkening for Meta cards */
.meta-summary-card:nth-child(3),
.meta-summary-card:nth-child(4),
.meta-summary-card:nth-child(5),
.meta-summary-card:nth-child(6),
.meta-summary-card:nth-child(7),
.meta-summary-card:nth-child(8) {
    background: linear-gradient(135deg, rgba(24, 119, 242, 0.18) 0%, rgba(24, 119, 242, 0.06) 100%);
    border-color: rgba(24, 119, 242, 0.3);
    box-shadow: 0 4px 20px rgba(24, 119, 242, 0.12);
}

.meta-summary-card:nth-child(3)::before,
.meta-summary-card:nth-child(4)::before {
    opacity: 0.12;
}

.meta-summary-card .ga-summary-card__value {
    color: #42A5F5;
}

/* ROAS card — green accent for profit */
.meta-roas-card .ga-summary-card__value {
    color: #10B981;
}

/* Integration card sparkline */
.integration-card__spark .meta-spark-bars {
    height: 36px;
    gap: 1.5px;
}


/* Campaign cards */
.meta-campaign-card {
    padding: 14px 16px;
    margin: 0 0 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.meta-campaign-card:has(details[open]) {
    border-color: rgba(24, 119, 242, 0.45);
    box-shadow: 0 0 12px rgba(24, 119, 242, 0.1);
}

.meta-campaign-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.meta-campaign-name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta label icons (from meta_labels.json) */
.meta-label-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
    vertical-align: -2px;
    opacity: 0.85;
}

.meta-campaign-status {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

.meta-campaign-status--active {
    background: #34A853;
    box-shadow: 0 0 4px rgba(52, 168, 83, 0.5);
}

.meta-campaign-status--paused {
    background: #F59E0B;
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.4);
}

.meta-campaign-status--inactive {
    background: #6B7280;
}

.meta-campaign-status--paused~.meta-campaign-name {
    opacity: 0.55;
}

.meta-campaign-type {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--type-color) 15%, transparent);
    color: var(--type-color);
}

.meta-campaign-type svg {
    flex-shrink: 0;
}

.meta-campaign-metrics {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.meta-metrics-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.meta-campaign-metric {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
}

.meta-metric--roas {
    color: #10B981;
    background: rgb(0 0 0 / 26%);
}

.meta-metric--revenue {
    color: #9cd3ff;
    background: rgba(156, 211, 255, 0.1);
}

.meta-metric--spend {
    color: #ff91a3;
    background: rgba(255, 145, 163, 0.1);
}

.meta-metric--purchases {
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0);
    padding: 0 4px;
}

.meta-metric--clicks {
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0);
    padding: 0 4px;
}

.meta-metric--impr {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
}

.meta-metric--visits {
    color: #A78BFA;
    background: rgba(167, 139, 250, 0.1);
}

.meta-metric--views {
    color: #60A5FA;
    background: rgba(96, 165, 250, 0.1);
}

.meta-metric--cpc {
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0);
    padding: 0 4px;
    font-size: 10px;
}

.meta-metric--reactions {
    color: #F472B6;
    background: rgba(244, 114, 182, 0.1);
}

.meta-metric--comments {
    color: #34D399;
    background: rgba(52, 211, 153, 0.1);
}

.meta-metric--shares {
    color: #38BDF8;
    background: rgba(56, 189, 248, 0.1);
}

/* Combined metric pill — value + cost in one element */
.meta-metric--combined {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0;
    background: none;
}

.meta-combined__value {
    padding: 3px 6px 3px 8px;
    border-radius: 6px 0 0 6px;
}

.meta-combined__cost {
    padding: 3px 8px 3px 6px;
    border-radius: 0 6px 6px 0;
    font-size: 10px;
}

/* Clicks combined: cyan */
.meta-metric--clicks-combined .meta-combined__value {
    color: #67E8F9;
    background: rgba(103, 232, 249, 0.1);
}

.meta-metric--clicks-combined .meta-combined__cost {
    color: rgba(103, 232, 249, 0.7);
    background: rgba(103, 232, 249, 0.05);
}

/* Video views combined: blue */
.meta-metric--views-combined .meta-combined__value {
    color: #60A5FA;
    background: rgba(96, 165, 250, 0.1);
}

.meta-metric--views-combined .meta-combined__cost {
    color: rgba(96, 165, 250, 0.7);
    background: rgba(96, 165, 250, 0.05);
}

/* ThruPlays combined: purple */
.meta-metric--thru-combined .meta-combined__value {
    color: #A78BFA;
    background: rgba(167, 139, 250, 0.1);
}

.meta-metric--thru-combined .meta-combined__cost {
    color: rgba(167, 139, 250, 0.7);
    background: rgba(167, 139, 250, 0.05);
}

/* Reach combined: warm green (hidden for now — re-enable by removing display:none) */
.meta-metric--reach-combined {
    display: none;
}

.meta-metric--reach-combined .meta-combined__value {
    color: #34D399;
    background: rgba(52, 211, 153, 0.1);
}

.meta-metric--reach-combined .meta-combined__cost {
    color: rgba(52, 211, 153, 0.7);
    background: rgba(52, 211, 153, 0.05);
}

/* Impressions combined: neutral */
.meta-metric--impr-combined .meta-combined__value {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
}

.meta-metric--impr-combined .meta-combined__cost {
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.03);
}

/* Sales combined (purchases + add to cart): white-ish */
.meta-metric--sales-combined .meta-combined__value {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.06);
}

.meta-metric--sales-combined .meta-combined__cost {
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.03);
}

/* Social row — icon + number, muted, no colored background */
.meta-metric--social {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.55);
    background: none;
    padding: 2px 4px;
    font-size: 11px;
}

.meta-metric--social svg {
    flex-shrink: 0;
}

.meta-campaign-bar {
    margin-top: 8px;
}

.meta-campaign-bar .ga-daily-bar-track {
    height: 4px;
}

.meta-campaign-bar-fill {
    height: 100%;
    border-radius: 4px;
}

/* Weekly ROAS sparkline — vertical bars + ROAS number per week, oldest left → newest right */
.meta-campaign-roas-spark {
    display: flex;
    align-items: flex-start;
    gap: 3px;
    margin-top: 8px;
    padding: 0 1px;
    margin-bottom: 2px;
}

.meta-roas-spark-col {
    flex: 1;
    min-width: 12px;
    max-width: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.meta-roas-spark-bar-area {
    height: 28px;
    display: flex;
    align-items: flex-end;
}

.meta-roas-spark-bar {
    width: 100%;
    border-radius: 2px 2px 0 0;
    opacity: 0.5;
    transition: opacity 0.15s;
}

.meta-roas-spark-bar--current {
    opacity: 1;
}

.meta-roas-spark-num {
    font-size: 9px;
    line-height: 1.1;
    text-align: center;
    margin-top: 3px;
    font-weight: 600;
    letter-spacing: -0.3px;
    opacity: 0.85;
}

/* Ads drill-down — collapsible details */
.meta-ads-group {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.meta-ads-group summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

.meta-ads-group summary::-webkit-details-marker {
    display: none;
}

.meta-ads-group-caret {
    width: 14px;
    height: 14px;
    color: rgba(255, 255, 255, 0.3);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.meta-ads-group[open] .meta-ads-group-caret {
    transform: rotate(90deg);
}

.meta-ads-group-name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.meta-ads-group-count {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
}

.meta-ads-group-count--multi {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
}

/* Campaign drilldown toggle (inside campaign card) */
.meta-campaign-drilldown {
    margin-top: 6px;
    /*border-top: 1px solid rgba(255, 255, 255, 0.04);*/
}

.meta-campaign-drilldown summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0 2px;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

.meta-campaign-drilldown summary::-webkit-details-marker {
    display: none;
}

.meta-campaign-drilldown[open]>summary .meta-ads-group-caret {
    transform: rotate(90deg);
}

/* Ad set level (nested inside campaign) */
.meta-adset-card {
    padding: 10px 14px 10px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin-top: 6px;
    border: 1px solid transparent;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.meta-adset-card:has(details[open]) {
    border-color: rgba(24, 119, 242, 0.35);
    box-shadow: 0 0 8px rgba(24, 119, 242, 0.08);
}

.meta-adset-header {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 6px;
}

.meta-adset-name {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.meta-campaign-status--paused~.meta-adset-name {
    opacity: 0.55;
}

.meta-adset-drilldown {
    margin-top: 6px;
    /* border-top: 1px solid rgba(255, 255, 255, 0.03);*/
}

.meta-adset-drilldown summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0 2px;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

.meta-adset-drilldown summary::-webkit-details-marker {
    display: none;
}

.meta-adset-drilldown[open]>summary .meta-ads-group-caret {
    transform: rotate(90deg);
}

/* Ad level (nested inside ad set) */
.meta-ad-item {
    padding: 8px 8px;
    background: rgba(0, 0, 0, 0.2);
}

.meta-ad-item:first-child {
    border-radius: 8px 8px 0 0;
}

.meta-ad-item:last-child {
    border-radius: 0 0 8px 8px;
}

.meta-ad-item:only-child {
    border-radius: 8px;
}

.meta-ad-item+.meta-ad-item {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.meta-ad-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.meta-ad-thumb-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.meta-ad-thumb {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
}

.meta-ad-thumb-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    flex-shrink: 0;
    padding: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.25);
    box-sizing: border-box;
}

.meta-ad-thumb-link {
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    transition: opacity 0.15s;
}

.meta-ad-thumb-link:active {
    opacity: 0.7;
}

.meta-ad-thumb--dimmed {
    opacity: 0.25;
}

.meta-ad-dest-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 600;
    color: rgba(66, 165, 245, 0.75);
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(24, 119, 242, 0.1);
    border: 1px solid rgba(24, 119, 242, 0.15);
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

.meta-ad-dest-btn:active {
    background: rgba(24, 119, 242, 0.2);
    color: #42A5F5;
}

.meta-ad-header-text {
    flex: 1;
    min-width: 0;
}

.meta-ad-name {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 5px;
}

.meta-campaign-status--paused~.meta-ad-name {
    opacity: 0.55;
}

.meta-ad-metrics {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Ad spend share bar — % of ad set budget */
.meta-ad-spend-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding-left: 50px;
}

.meta-ad-spend-bar .ga-daily-bar-track {
    height: 3px;
}

.meta-ad-spend-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #F43F5E, #BE123C);
    transition: width 0.5s ease;
}

.meta-ad-spend-pct {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    min-width: 28px;
    text-align: right;
}

/* Meta chart color legend */
.meta-chart-legend {
    display: flex;
    gap: 16px;
    padding: 0 0 10px;
}

.meta-chart-legend__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.meta-chart-legend__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.meta-chart-legend__dot--spend {
    background: #F43F5E;
}

.meta-chart-legend__dot--revenue {
    background: #42A5F5;
}

.meta-chart-legend__dot--roas {
    background: rgba(255, 255, 255, 0.3);
}

/* Daily/Monthly chart bar fills — match sparkline colors */
.meta-daily-bar-fill--spend {
    background: linear-gradient(90deg, #F43F5E, #BE123C);
}

.meta-daily-bar-fill--revenue {
    background: linear-gradient(90deg, #42A5F5, #1565C0);
}

.meta-monthly-bar-fill--spend {
    background: linear-gradient(90deg, #F43F5E, #BE123C);
}

.meta-monthly-bar-fill--revenue {
    background: linear-gradient(90deg, #42A5F5, #1565C0);
}

/* =============================================
   AI INTEGRATION DASHBOARD
   Purple/violet accent (#8B5CF6).
   Own nav tab view — tier cards, budget bars,
   recent calls log, test interface link.
   ============================================= */

/* Dashboard container */
.ai-dashboard {
    padding: 0 0 20px;
}

/* AI Report Buttons */
.ai-report-buttons {
    margin-top: 4px;
}

/* AI sub-report back button */
.ai-back-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 6px;
    margin: -6px 0 -6px -6px;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}

.ai-back-btn:active {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}

/* AI usage section — refresh button in header */
#ai-usage-section .ga-section-header .ga-section-title {
    flex: 1;
}

#ai-usage-section .ai-budget-section,
#ai-usage-section .ai-alltime-stats,
#ai-usage-section .ai-recent-section {
    margin-left: 0;
    margin-right: 0;
}

/* Header */
.ai-dashboard-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 8px;
}

.ai-dashboard-header__icon {
    color: #8B5CF6;
    display: flex;
    align-items: center;
}

.ai-dashboard-header__title {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    flex: 1;
}

.ai-refresh-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}

.ai-refresh-btn:active {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

.ai-refresh-btn--spinning svg {
    animation: ga-spin 0.8s linear infinite;
}

/* Tier cards */
.ai-tier-cards {
    display: flex;
    gap: 10px;
    margin: 4px 18px 0;
}

.ai-tier-card {
    flex: 1;
    padding: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-tier-card--small {
    border-left: 3px solid #22D3EE;
}

.ai-tier-card--big {
    border-left: 3px solid #A78BFA;
}

.ai-tier-card__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 6px;
}

.ai-tier-card__model {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.ai-tier-card__provider {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 2px;
}

/* Budget section */
.ai-budget-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 12px 18px 0;
}

.ai-budget-card {
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.ai-budget-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}

.ai-budget-card__header svg {
    color: #A78BFA;
}

.ai-budget-card__value {
    font-size: 28px;
    font-weight: 800;
    color: #A78BFA;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}

.ai-budget-card__split {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    font-variant-numeric: tabular-nums;
    margin-bottom: 10px;
}

.ai-budget-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.ai-budget-bar__fill {
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, #8B5CF6, #A78BFA);
    transition: width 0.6s ease;
}

.ai-budget-card__limit {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 6px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* All-time stats */
.ai-alltime-stats {
    margin: 12px 18px 0;
}

.ai-alltime-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-variant-numeric: tabular-nums;
}

.ai-alltime-row b {
    color: rgba(255, 255, 255, 0.75);
}

/* Recent calls */
.ai-recent-section {
    margin: 16px 18px 0;
}

.ai-recent-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 10px;
}

.ai-call-row {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin-bottom: 6px;
}

.ai-call-row__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.ai-call-row__model {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.ai-call-row__cost {
    font-size: 13px;
    font-weight: 700;
    color: #A78BFA;
    font-variant-numeric: tabular-nums;
}

.ai-call-row__bottom {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    font-variant-numeric: tabular-nums;
}

.ai-call-row__fail {
    color: #F87171;
    font-weight: 700;
}

.ai-call--small {
    border-left: 3px solid rgba(34, 211, 238, 0.4);
}

.ai-call--big {
    border-left: 3px solid rgba(167, 139, 250, 0.4);
}

.ai-call--error {
    border-color: rgba(248, 113, 113, 0.3);
    background: rgba(248, 113, 113, 0.04);
}

.ai-empty {
    text-align: center;
    padding: 24px;
    color: rgba(255, 255, 255, 0.25);
    font-size: 13px;
}

/* Tier card provider logo */
.ai-tier-card__logo {
    margin-bottom: 6px;
    opacity: 0.8;
}

/* Inline Prompt Console */
.ai-prompt-section {
    margin: 20px 18px 0;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
}

.ai-prompt-section__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 14px;
}

.ai-prompt-section__title svg {
    color: #A78BFA;
}

.ai-prompt-field {
    margin-bottom: 12px;
}

.ai-prompt-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 6px;
}

.ai-prompt-textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.5;
}

.ai-prompt-textarea:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.4);
}

.ai-prompt-textarea::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.ai-prompt-textarea--big {
    min-height: 100px;
}

/* Controls row */
.ai-prompt-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}

/* Model picker */
.ai-prompt-model-picker {
    margin-bottom: 2px;
}

.ai-model-list {
    display: flex;
    gap: 5px;
    padding-bottom: 2px;
}

.ai-model-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    padding: 8px 4px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.ai-model-btn__name {
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 1.25;
    margin-top: 2px;
    margin-bottom: -2px;
    word-break: break-word;
}

.ai-chat-settings .ai-model-btn__name {
    font-size: 9px;
}

.ai-model-btn__price {
    font-size: 9px;
    font-weight: 500;
    opacity: 0.6;
    white-space: nowrap;
}

.ai-model-btn__provider {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.5;
    white-space: nowrap;
}

.ai-model-btn.active {
    color: rgba(255, 255, 255, 0.9);
}

.ai-model-btn.active[data-provider="gemini"] {
    background: rgba(65, 121, 218, 0.12);
    border-color: rgba(65, 121, 218, 0.35);
}

.ai-model-btn.active[data-provider="anthropic"] {
    background: rgba(217, 119, 87, 0.12);
    border-color: rgba(217, 119, 87, 0.35);
}

/* Data context pills — touch-friendly toggle buttons */
.ai-data-pills {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.ai-data-pills::-webkit-scrollbar {
    display: none;
}

.ai-data-pill {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 9px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.ai-data-pill.active.ai-data-pill--overview {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.35);
    color: #A855F7;
}

.ai-data-pill.active.ai-data-pill--ga {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #F59E0B;
}

.ai-data-pill.active.ai-data-pill--gsc {
    background: rgba(65, 121, 218, 0.12);
    border-color: rgba(65, 121, 218, 0.35);
    color: #4179DA;
}

.ai-data-pill.active.ai-data-pill--gads {
    background: rgba(52, 168, 83, 0.12);
    border-color: rgba(52, 168, 83, 0.35);
    color: #34A853;
}

.ai-data-pill.active.ai-data-pill--meta {
    background: rgba(24, 119, 242, 0.12);
    border-color: rgba(24, 119, 242, 0.35);
    color: #1877F2;
}

.ai-data-pill.active.ai-data-pill--campaigns {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.35);
    color: #8B5CF6;
}

.ai-data-pill.active.ai-data-pill--sales {
    background: rgba(244, 63, 94, 0.12);
    border-color: rgba(244, 63, 94, 0.35);
    color: #F43F5E;
}

.ai-data-pill.active.ai-data-pill--products {
    background: rgba(20, 184, 166, 0.12);
    border-color: rgba(20, 184, 166, 0.35);
    color: #14B8A6;
}

/* Send button */
.ai-prompt-send {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.ai-prompt-send:active {
    opacity: 0.85;
}

.ai-prompt-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Inline spinner for send button */
.ai-prompt-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ga-spin 0.7s linear infinite;
    vertical-align: middle;
}

/* Response area */
.ai-prompt-response {
    margin-top: 14px;
    padding: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-prompt-response__meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.ai-prompt-response__meta span {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.45);
    font-variant-numeric: tabular-nums;
}

.ai-prompt-response__text {
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
}

.ai-prompt-response__error {
    color: #F87171;
}

/* ===== AI HUB CHAT LAUNCHER ===== */

.ai-chat-launcher {
    background: var(--ai-launcher-bg, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--ai-launcher-border, rgba(255, 255, 255, 0.06));
    transition: background 0.2s, border-color 0.2s;
    width: 100%;
}

.ai-chat-launcher[data-provider="anthropic"] {
    --ai-launcher-bg: rgba(217, 119, 87, 0.12);
    --ai-launcher-border: rgba(217, 119, 87, 0.35);
    --ai-launcher-icon-bg: rgba(217, 119, 87, 0.18);
    --ai-launcher-icon-color: #D97757;
}

.ai-chat-launcher[data-provider="gemini"] {
    --ai-launcher-bg: rgba(65, 121, 218, 0.12);
    --ai-launcher-border: rgba(65, 121, 218, 0.35);
    --ai-launcher-icon-bg: rgba(65, 121, 218, 0.18);
    --ai-launcher-icon-color: #4179DA;
}

.ai-chat-launcher .ai-chat-launcher__icon {
    background: var(--ai-launcher-icon-bg, rgba(255, 45, 117, 0.15));
    color: var(--ai-launcher-icon-color, var(--accent-pink));
}

.ai-chat-launcher__title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
}

.ai-chat-launcher__model {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ai-chat-launcher__model svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.ai-chat-launcher__model-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: flex-start;
    text-align: left;
}

.ai-chat-launcher__model-name {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.2;
}

.ai-chat-launcher__model-provider {
    font-size: 10px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.2;
}

.ai-mcp-notice {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 4px 6px 12px;
    font-size: 11px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.45);
}

.ai-mcp-notice svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: rgba(255, 255, 255, 0.35);
}

.ai-mcp-notice code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
}

/* 5px margin from model picker to data context title */
.ai-prompt-data-toggles {
    margin-top: 5px;
}

/* ===== AI MODEL GREETING (empty chat) ===== */

.ai-chat-model-greeting {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 20px;
    opacity: 0.7;
}

.ai-model-greeting__logo svg {
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.3));
}

.ai-model-greeting__name {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
}

.ai-model-greeting__provider {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

/* Model icon in AI bubble meta line */
.ai-chat-bubble__model-icon {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 4px;
}

.ai-chat-bubble__model-icon svg {
    width: 12px;
    height: 12px;
}

/* ===== AI CHAT UI ===== */

/* Chat-active mode: position-fixed layout bypasses flex chain */
#app-content.ai-chat-mode {
    overflow: hidden;
}

#ai-view.ai-chat-active #ai-chat-section {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    display: flex !important;
    flex-direction: column;
    margin: 0;
    background: var(--bg-dark, #0f0f1a);
    z-index: 50;
    overflow: hidden;
}

/* Toolbar buttons — back, new chat (same family as settings/attach) */
.ai-toolbar-btn {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s;
}

.ai-toolbar-btn:active {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
}

.ai-toolbar-model {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 0 8px;
    min-width: 0;
}

.ai-toolbar-model svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ai-toolbar-model__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.ai-toolbar-model__line1 {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
}

.ai-toolbar-model__line2 {
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.2);
}

/* Header back button — hidden by default, shown in AI chat */
.header-back-btn {
    display: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.header-back-btn:active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

body.ai-chat-mode .app-header {
    justify-content: flex-start;
    gap: 10px;
}

body.ai-chat-mode .header-back-btn {
    display: flex;
}

body.ai-chat-mode .header-actions {
    display: none;
}

.ai-chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 14px 8px;
    -webkit-overflow-scrolling: touch;
}

/* Copy button on bubbles */
.ai-copy-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 4px 5px;
    color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}

.ai-chat-bubble:hover .ai-copy-btn,
.ai-chat-bubble:active .ai-copy-btn {
    opacity: 1;
}

@media (hover: none) {
    .ai-copy-btn {
        opacity: 0.5;
    }
}

.ai-copy-btn:active {
    color: rgba(255, 255, 255, 0.5);
}

.ai-copy-btn--done {
    color: #34D399 !important;
    opacity: 1 !important;
}

/* User copy button stays top-right (same as default now) */

/* Chat bubbles — needs position:relative for copy btn */
.ai-chat-bubble {
    margin-bottom: 14px;
    max-width: 92%;
    animation: aiBubbleIn 0.25s ease-out;
    position: relative;
}

.ai-chat-bubble--assistant {
    max-width: 100%;
}

/* Chat input — fixed at bottom of chat layout, frosted glass */
.ai-chat-input {
    padding: 8px 14px;
    padding-bottom: calc(80px + max(env(safe-area-inset-bottom, 15px), 15px));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 15, 26, 0.65);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    flex-shrink: 0;
}

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

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

.ai-chat-bubble--user {
    margin-left: auto;
}

.ai-chat-bubble--user .ai-chat-bubble__text {
    padding: 10px 14px;
    border-radius: 14px 14px 4px 14px;
    background: rgba(11, 81, 148, 0.44);
    border: 1px solid rgba(11, 81, 148, 0.6);
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.ai-chat-bubble--assistant .ai-chat-bubble__text {
    padding: 12px 14px;
    border-radius: 14px 14px 14px 4px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.65;
    word-break: break-word;
}

.ai-chat-bubble__meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    padding-left: 4px;
}

/* Typing dots animation */
.ai-typing-dots {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 4px 0;
}

.ai-typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.5);
    animation: aiDotPulse 1.2s ease-in-out infinite;
}

.ai-typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.ai-typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes aiDotPulse {

    0%,
    60%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    30% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Streaming bubble — subtle pulsing left border while generating */
.ai-chat-bubble--streaming {
    border-left: 2px solid var(--ai-stream-color, rgba(139, 92, 246, 0.6));
    animation: aiStreamPulse 1.5s ease-in-out infinite;
}

@keyframes aiStreamPulse {

    0%,
    100% {
        border-left-color: var(--ai-stream-color-dim, rgba(139, 92, 246, 0.3));
    }

    50% {
        border-left-color: var(--ai-stream-color, rgba(139, 92, 246, 0.8));
    }
}

/* Markdown typography inside AI responses */
.ai-md h1,
.ai-md h2,
.ai-md h3,
.ai-md h4 {
    color: rgba(255, 255, 255, 0.9);
    margin: 12px 0 6px;
    line-height: 1.3;
}

.ai-md h1 {
    font-size: 18px;
}

.ai-md h2 {
    font-size: 16px;
}

.ai-md h3 {
    font-size: 14px;
}

.ai-md h4 {
    font-size: 13px;
}

.ai-md p {
    margin: 0 0 8px;
}

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

.ai-md ul,
.ai-md ol {
    margin: 6px 0;
    padding-left: 20px;
}

.ai-md li {
    margin-bottom: 3px;
}

.ai-md strong {
    color: rgba(255, 255, 255, 0.9);
}

.ai-code-inline {
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    font-family: 'SF Mono', 'Menlo', monospace;
    font-size: 12px;
    color: #A78BFA;
}

.ai-code-block {
    padding: 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow-x: auto;
    margin: 8px 0;
}

.ai-code-block code {
    font-family: 'SF Mono', 'Menlo', monospace;
    font-size: 12px;
    color: #cbd5e1;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Tables */
.ai-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 13px;
}

.ai-table th,
.ai-table td {
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.ai-table th {
    background: rgba(255, 255, 255, 0.06);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.ai-table td {
    color: rgba(255, 255, 255, 0.7);
}

/* Blockquotes */
.ai-blockquote {
    border-left: 3px solid rgba(139, 92, 246, 0.5);
    padding: 4px 12px;
    margin: 8px 0;
    color: rgba(255, 255, 255, 0.65);
    font-style: italic;
}

/* Links */
.ai-link {
    color: #67e8f9;
    text-decoration: none;
    border-bottom: 1px solid rgba(103, 232, 249, 0.3);
}

/* Horizontal rule */
.ai-hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 12px 0;
}

/* Headings 5-6 */
.ai-md h5 {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 600;
    margin: 8px 0 4px;
}

.ai-md h6 {
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    font-weight: 600;
    margin: 8px 0 4px;
}

/* Strikethrough */
.ai-md del {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: line-through;
}

/* Better list styling */
.ai-md ul,
.ai-md ol {
    padding-left: 20px;
    margin: 6px 0;
}

.ai-md li {
    margin: 2px 0;
    line-height: 1.5;
}

/* .ai-chat-input — defined above in chat-active layout */

/* Top row: full-width textarea */
.ai-chat-input-top {
    display: flex;
}

.ai-chat-textarea {
    flex: 1;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    font-family: inherit;
    font-size: 14px;
    resize: none;
    box-sizing: border-box;
    line-height: 1.5;
    max-height: 120px;
    overflow-y: auto;
}

.ai-chat-textarea:focus {
    outline: none;
    border-color: var(--ai-accent-border, rgba(139, 92, 246, 0.4));
}

.ai-chat-textarea::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.ai-chat-send-btn {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    background: var(--ai-accent, linear-gradient(135deg, #8B5CF6, #6D28D9));
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.3s, opacity 0.2s;
    margin-left: auto;
}

.ai-chat-send-btn:active {
    opacity: 0.85;
}

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

/* Bottom toolbar: settings + attach + future buttons */
.ai-chat-input-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 0 2px;
}

.ai-chat-settings-btn {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--ai-accent-border, rgba(255, 255, 255, 0.06));
    background: var(--ai-accent-bg, rgba(255, 255, 255, 0.03));
    color: var(--ai-accent-color, rgba(255, 255, 255, 0.3));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.3s;
}

.ai-chat-settings-btn.active {
    color: #A78BFA;
    border-color: rgba(167, 139, 250, 0.3);
    background: rgba(139, 92, 246, 0.1);
}

.ai-chat-settings-btn--flash {
    animation: aiSettingsFlash 0.4s ease-in-out 2;
}

@keyframes aiSettingsFlash {

    0%,
    100% {
        box-shadow: none;
    }

    50% {
        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.4);
    }
}

/* Attach button — paperclip */
.ai-attach-btn {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s;
}

.ai-attach-btn:active {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
}

.ai-attach-btn.has-file {
    color: #22D3EE;
    border-color: rgba(34, 211, 238, 0.3);
    background: rgba(34, 211, 238, 0.08);
}

/* Preview strip — shows queued attachment above input row */
.ai-attach-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: aiBubbleIn 0.2s ease-out;
}

.ai-attach-preview__thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-attach-preview__pdf {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(244, 63, 94, 0.12);
    border: 1px solid rgba(244, 63, 94, 0.25);
    color: #F43F5E;
}

.ai-attach-preview__info {
    flex: 1;
    min-width: 0;
}

.ai-attach-preview__name {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-attach-preview__size {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

.ai-attach-preview__remove {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s;
}

.ai-attach-preview__remove:active {
    background: rgba(244, 63, 94, 0.15);
    color: #F43F5E;
}

/* Attachment display inside user bubbles */
.ai-bubble-attachment {
    margin-bottom: 8px;
}

.ai-bubble-attachment__img {
    max-width: 200px;
    max-height: 160px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: block;
}

.ai-bubble-attachment__pdf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(244, 63, 94, 0.1);
    border: 1px solid rgba(244, 63, 94, 0.2);
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 600;
}

.ai-bubble-attachment__pdf svg {
    color: #F43F5E;
    flex-shrink: 0;
}

/* Placeholder for attachments in resumed conversations */
.ai-bubble-attachment__placeholder {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
    font-size: 11px;
    margin-bottom: 6px;
}

/* Settings panel */
/* Chat presets panel */
.ai-chat-presets-panel {
    padding: 8px 0;
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ai-chat-preset-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}

.ai-chat-preset-item:active {
    background: rgba(255, 255, 255, 0.06);
}

.ai-chat-preset-item__icon {
    flex-shrink: 0;
}

.ai-chat-preset-item__label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    text-align: left;
}

.ai-chat-presets-empty {
    padding: 12px;
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
}

.ai-chat-settings {
    padding: 12px 0 4px;
}

.ai-toolbar-btn.active {
    color: #A78BFA;
    border-color: rgba(167, 139, 250, 0.3);
    background: rgba(139, 92, 246, 0.1);
}

/* System prompt */
.ai-chat-system {
    padding-bottom: 8px;
}

/* New Chat / Actions */
.ai-chat-actions {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
}


/* Preset buttons */
.ai-presets {
    padding: 0;
    margin-top: 16px;
}

.ai-preset-buttons {
    margin-top: 0;
}

/* Preset-specific overrides — disable is kept */
.ai-preset-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Conversations list */
.ai-conversations-list {
    padding: 4px 0 0;
}

.ai-conv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 20px;
    color: rgba(255, 255, 255, 0.2);
    font-size: 13px;
}

.ai-conv-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    color: inherit;
    cursor: pointer;
    margin-bottom: 8px;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.ai-conv-item:active {
    background: rgba(255, 255, 255, 0.06);
}

.ai-conv-item__main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-conv-item__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
}

.ai-conv-item__icon svg {
    width: 20px;
    height: 20px;
}

.ai-conv-item__info {
    flex: 1;
    min-width: 0;
}

.ai-conv-item__title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-conv-item__meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 2px;
}

.ai-conv-item__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.ai-conv-action {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s;
}

.ai-conv-action--rename:active {
    color: #22D3EE;
    background: rgba(34, 211, 238, 0.1);
}

.ai-conv-action--delete:active {
    color: #F87171;
    background: rgba(248, 113, 113, 0.1);
}

/* Count badge in header */
.ai-history-count {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: auto;
}

.ai-history-count:empty {
    display: none;
}

/* ── AI Preset Buttons: Model & Data Source Meta ── */
.ai-preset-btn .ga-report-btn__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.ai-preset-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.ai-preset-meta svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.ai-preset-model {
    font-size: 10px;
    color: #94A3B8;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.ai-preset-ds {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 1px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ds-color) 12%, transparent);
    color: var(--ds-color);
    border: 1px solid color-mix(in srgb, var(--ds-color) 25%, transparent);
}

/* ───────────────────── AI v24.1 additions ───────────────────── */

/* Greeting drop-shadow tinted by provider (UX fix #9) */
.ai-chat-model-greeting {
    --ai-accent-glow: rgba(139, 92, 246, 0.3);
}

.ai-model-greeting__logo svg {
    filter: drop-shadow(0 0 10px var(--ai-accent-glow, rgba(139, 92, 246, 0.3)));
}

/* Starter chips inside empty-chat greeting */
.ai-starter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 18px;
    max-width: 420px;
    padding: 0 10px;
}

.ai-starter-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s;
}

.ai-starter-chip:active,
.ai-starter-chip:hover {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.35);
    color: rgba(255, 255, 255, 0.95);
}

/* Context strip above chat input (UX #2) */
.ai-context-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 4px 2px;
    margin-bottom: 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ai-context-strip__label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
}

.ai-context-strip__label svg {
    opacity: 0.7;
}

.ai-context-chip {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 2px 7px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ds-color) 14%, transparent);
    color: var(--ds-color);
    border: 1px solid color-mix(in srgb, var(--ds-color) 28%, transparent);
}


/* Send button → Stop variant while streaming (bug fix #2) */
.ai-chat-send-btn--stop {
    background: linear-gradient(135deg, #F43F5E, #BE123C) !important;
    animation: aiStopPulse 1.3s ease-in-out infinite;
}

@keyframes aiStopPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.4);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(244, 63, 94, 0);
    }
}

/* Token ticker inside streaming bubble (UX 8) */
.ai-streaming-ticker {
    margin-top: 6px;
    padding-left: 4px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Multiple attachment preview layout */
.ai-attach-preview {
    flex-wrap: wrap;
}

.ai-attach-preview__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    flex: 1 1 220px;
    min-width: 180px;
    max-width: 100%;
}

/* Multi-attachment grid inside user bubble */
.ai-bubble-attachment--multi {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ai-bubble-attachment--multi .ai-bubble-attachment__img {
    max-width: 120px;
    max-height: 120px;
}

/* In-app modal (replaces native alert / confirm / prompt, bug fix #11) */
#ai-modal-root {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    display: none;
}

#ai-modal-root.ai-modal--open {
    display: block;
    pointer-events: auto;
}

.ai-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: aiModalFade 0.16s ease-out;
}

.ai-modal__dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(90vw, 380px);
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px 20px 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: aiModalPop 0.18s ease-out;
}

@keyframes aiModalFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes aiModalPop {
    from {
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.ai-modal__title {
    font-size: 15px;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 8px;
}

.ai-modal__body {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 14px;
    word-break: break-word;
}

.ai-modal__input {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #e2e8f0;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.ai-modal__input:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.5);
}

.ai-modal__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.ai-modal__btn {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s, background 0.15s;
}

.ai-modal__btn--cancel {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
}

.ai-modal__btn--cancel:active {
    background: rgba(255, 255, 255, 0.1);
}

.ai-modal__btn--primary {
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
    color: #fff;
}

.ai-modal__btn--primary:active {
    opacity: 0.85;
}

.ai-modal__btn--danger {
    background: linear-gradient(135deg, #F43F5E, #BE123C);
    color: #fff;
}

.ai-modal__btn--danger:active {
    opacity: 0.85;
}

/* Disabled state for chat input controls while streaming (bug fix #1) */
.ai-chat-textarea:disabled,
.ai-attach-btn:disabled,
.ai-toolbar-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ─── CR Report (Conversion Rate by year/month/week/day) ─── */

.cr-loader {
    display: flex;
    justify-content: center;
    padding: 60px 0;
}

.cr-list {
    padding: 12px 16px 32px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cr-row {
    display: grid;
    grid-template-columns: 88px 1fr 56px;
    grid-template-rows: auto auto;
    grid-template-areas:
        "label bar value"
        "sub   sub sub";
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: background 0.2s ease;
}

.cr-row__label {
    grid-area: label;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cr-row__bar-wrap {
    grid-area: bar;
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
}

.cr-row__bar {
    height: 100%;
    width: 0;
    border-radius: 4px;
    transition: width 0.7s cubic-bezier(0.2, 0.8, 0.4, 1);
    box-shadow: 0 0 8px color-mix(in srgb, var(--cr-color) 35%, transparent);
}

.cr-row__value {
    grid-area: value;
    font-size: 14px;
    font-weight: 700;
    color: var(--cr-color);
    text-align: right;
    white-space: nowrap;
}

.cr-row__sub {
    grid-area: sub;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Movers — brand / category trends (3 / 6 / 12 months + current month) ─── */

.icon-accent--violet {
    color: #A78BFA;
}

/* Three options in the title pill — tighter padding so it fits a 430px screen */
.mv-dim-pill .digest-mode-pill__btn {
    padding: 3px 7px;
}

.mv-cats {
    padding-top: 10px;
    padding-bottom: 4px;
}

.mv-list {
    padding: 6px 16px 32px;
}

.mv-note {
    font-size: 11px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.4);
    padding: 4px 2px 8px;
}

.mv-row {
    padding: 8px 8px 8px 10px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    box-shadow: inset 3px 0 0 var(--mv-accent);
    transition: background 0.2s ease;
}

.mv-row__main {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mv-row__main:active {
    opacity: 0.85;
}

.mv-row--total {
    margin-bottom: 10px;
    background: rgba(167, 139, 250, 0.06);
    border-color: rgba(167, 139, 250, 0.18);
}

.mv-row--open {
    background: rgba(255, 255, 255, 0.045);
}

.mv-row__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.mv-row__name {
    font-size: 13px;
    font-weight: 700;
    color: var(--mv-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.mv-row__sum {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.45);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Per-row monthly chart: N complete months + the current one (actual + dashed forecast).
   Value labels sit in a fixed two-line zone above the plot so all plots align. */
.mv-mchart {
    display: flex;
    gap: 2px;
}

.mv-mchart__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mv-mchart__val {
    height: 21px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    font-size: 8.5px;
    line-height: 1.15;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    padding-bottom: 2px;
}

.mv-mchart__fcval {
    color: #FBBF24;
}

.mv-mchart__plot {
    position: relative;
    height: 50px;
}

.mv-mchart__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 3px 3px 1px 1px;
    background: var(--mv-accent);
    opacity: 0.62;
}

.mv-mchart__col--cur .mv-mchart__bar {
    opacity: 0.95;
}

.mv-mchart__fc {
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(234, 88, 12, 0.15);
    border: 1px dashed rgba(245, 158, 11, 0.6);
    border-bottom: none;
    border-radius: 3px 3px 0 0;
}

.mv-mchart__lbl {
    margin-top: 3px;
    font-size: 8.5px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    overflow: hidden;
}

/* Same month a year earlier */
.mv-mchart__ly {
    position: absolute;
    left: -1px;
    right: -1px;
    height: 2px;
    margin-bottom: -1px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 1px;
    box-shadow: 0 0 0 0.5px rgba(10, 10, 20, 0.5);
}

.mv-mchart__col--cur .mv-mchart__lbl {
    color: #FBBF24;
}

/* Year boundary in the 12-month view */
.mv-mchart__col--jan .mv-mchart__plot {
    box-shadow: -2px 0 0 -0.5px rgba(255, 255, 255, 0.18);
}

/* Tone scale — the card's YoY deltas */
.mv-tone--flat { --tone-bg: rgba(255, 255, 255, 0.05); --tone-fg: rgba(255, 255, 255, 0.6); }
.mv-tone--na { --tone-bg: transparent; --tone-fg: rgba(255, 255, 255, 0.25); }
.mv-tone--new { --tone-bg: rgba(34, 211, 238, 0.12); --tone-fg: #67E8F9; }
.mv-tone--up1 { --tone-bg: rgba(34, 197, 94, 0.10); --tone-fg: #86EFAC; }
.mv-tone--up2 { --tone-bg: rgba(34, 197, 94, 0.20); --tone-fg: #A7F3D0; }
.mv-tone--up3 { --tone-bg: rgba(34, 197, 94, 0.32); --tone-fg: #DCFCE7; }
.mv-tone--up4 { --tone-bg: rgba(34, 197, 94, 0.48); --tone-fg: #ffffff; }
.mv-tone--down1 { --tone-bg: rgba(244, 63, 94, 0.10); --tone-fg: #FDA4AF; }
.mv-tone--down2 { --tone-bg: rgba(244, 63, 94, 0.20); --tone-fg: #FECDD3; }
.mv-tone--down3 { --tone-bg: rgba(244, 63, 94, 0.32); --tone-fg: #FFE4E6; }
.mv-tone--down4 { --tone-bg: rgba(244, 63, 94, 0.48); --tone-fg: #ffffff; }

/* Expanded row */
.mv-detail {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mv-stats__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px 56px 64px;
    column-gap: 6px;
    align-items: center;
    padding: 5px 0;
    font-size: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.mv-stats__row:last-child {
    border-bottom: none;
}

.mv-stats__row--head {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.35);
    text-align: right;
}

.mv-stats__label {
    color: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mv-stats__num {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.9);
}

.mv-stats__num--ly {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}

.mv-stats__delta {
    justify-self: end;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    background: var(--tone-bg);
    color: var(--tone-fg);
}

.mv-detail__trend,
.mv-more {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mv-detail__trend {
    background: rgba(167, 139, 250, 0.1);
    border: 1px solid rgba(167, 139, 250, 0.25);
    color: #C4B5FD;
}

.mv-more {
    margin-top: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

.mv-detail__trend:active,
.mv-more:active {
    transform: scale(0.985);
}

.mv-foot {
    margin-top: 12px;
    font-size: 10.5px;
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
}

/* Desktop / Mac shell: keep the list readable instead of stretching across 1200px */
@media (min-width: 700px) {
    .mv-list {
        max-width: 820px;
        margin: 0 auto;
    }

    .mv-mchart__plot {
        height: 60px;
    }
}

/* ─── Bestsellers out of stock ─── */

.icon-accent--rose {
    color: #FB7185;
}

.menu-item-badge {
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 10px;
    background: rgba(244, 63, 94, 0.16);
    border: 1px solid rgba(244, 63, 94, 0.35);
    color: #FDA4AF;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.oos-summary {
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: rgba(244, 63, 94, 0.06);
    border: 1px solid rgba(244, 63, 94, 0.18);
}

.oos-summary__top {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 4px;
}

.oos-summary__big {
    font-size: 20px;
    font-weight: 800;
    color: #FDA4AF;
    font-variant-numeric: tabular-nums;
}

.oos-summary__sep {
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.3);
}

.oos-summary__text {
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.7);
}

.oos-summary__text b {
    color: #fff;
}

.oos-summary__hint {
    margin-top: 4px;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.35);
}

.oos-head {
    display: flex;
    justify-content: space-between;
    padding: 0 12px 6px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.35);
}

.oos-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 10px;
    align-items: start;
    padding: 9px 12px 9px 10px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    box-shadow: inset 3px 0 0 var(--mv-accent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.oos-row:active {
    opacity: 0.85;
}

.oos-row__rank {
    min-width: 30px;
    padding-top: 3px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    font-variant-numeric: tabular-nums;
}

.oos-row__body {
    min-width: 0;
}

.oos-row__title {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.92);
    overflow-wrap: anywhere;
}

.oos-row__sep {
    margin: 0 6px;
    color: rgba(255, 255, 255, 0.35);
}

.oos-row__color {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
}

.oos-row__brand {
    color: var(--mv-accent);
}

.oos-row__sub {
    margin-top: 2px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oos-row__meta {
    margin-top: 4px;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.4);
    font-variant-numeric: tabular-nums;
}

.oos-row__dot {
    margin: 0 5px;
}

.oos-row__num {
    text-align: right;
}

.oos-row__rev {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.oos-row__qty {
    margin-top: 2px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

/* ─── Product Digest (Day / Month) ─────────────────────── */

/* Inline Day/Month picker that finishes the digest title:
   "Product Sales by [day][month]". Sits inline-flex inside .pmeta-name so
   it flows with the title text. Active button uses the digest's rose accent
   (#F43F5E) tint to echo the page's section identity. */
.digest-mode-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 2px;
    gap: 1px;
    vertical-align: middle;
    flex-shrink: 0;
}

.digest-mode-pill__btn {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    cursor: pointer;
    text-transform: lowercase;
    transition: background 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.digest-mode-pill__btn--active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.digest-mode-pill__btn:not(.digest-mode-pill__btn--active):active {
    color: rgba(255, 255, 255, 0.75);
}

/* Variant of .pmeta-name that hosts the inline picker. NO flex at this level
   — content flows inline (prefix text + inline-flex pill via vertical-align)
   so we don't add another align-items/gap layer on top of pmeta-left's flex.
   `flex: 0 0 auto` keeps pmeta-name content-sized inside pmeta-left rather
   than letting it stretch and push the pill to the right. */
.pmeta-name--with-picker {
    flex: 0 0 auto;
    overflow: visible;
}

.pmeta-name--with-picker .digest-mode-pill {
    margin-left: 8px;
    vertical-align: middle;
}

.digest-nav {
    padding: 12px 0 8px;
    overflow-x: hidden;
}

.digest-nav__days {
    display: flex;
    gap: 6px;
    align-items: center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px;
    scrollbar-width: none;
}

.digest-nav__days::-webkit-scrollbar {
    display: none;
}

.digest-nav__day {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    position: relative;
    scroll-snap-align: center;
    flex-shrink: 0;
}

.digest-nav__day--active {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(20, 184, 166, 0.15));
    border-color: rgba(6, 182, 212, 0.35);
    color: #06B6D4;
}

.digest-nav__day--today::after {
    content: '';
    width: 5px;
    height: 5px;
    background: #34D399;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    right: 6px;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.6);
}

.digest-nav__day--future {
    opacity: 0.25;
    pointer-events: none;
}

.digest-nav__day--weekend {
    color: rgba(244, 63, 94, 0.7);
}

.digest-nav__day--weekend.digest-nav__day--active {
    color: #F43F5E;
}

.digest-summary {
    /* --digest-accent is set inline by _digestRender from the active filter's
       pill color. Background/border tint subtly so the whole card inherits the
       active filter's vibe; revenue value below uses the accent at full
       strength. Falls back to a neutral white when no accent is set. */
    --digest-accent: rgba(255, 255, 255, 1);
    margin: 8px 12px 12px;
    padding: 12px 18px;
    background: color-mix(in srgb, var(--digest-accent) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--digest-accent) 22%, transparent);
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.digest-summary__left {
    flex: 1;
    min-width: 0;
}

.digest-summary__filters {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}

.digest-filter__row {
    display: flex;
    gap: 5px;
}

.digest-filter__row .digest-filter__pill {
    flex: 1 1 0;
    text-align: center;
}

.digest-filter__pill {
    --pill-color: #64748B;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--pill-color) 25%, transparent);
    color: color-mix(in srgb, var(--pill-color) 70%, white);
    font-size: 10px;
    font-weight: 600;
    padding: 6px 15px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s ease;
    text-align: center;
}

.digest-filter__pill--active {
    background: var(--pill-color);
    border-color: var(--pill-color);
    color: #0f0f14;
    box-shadow: 0 0 12px color-mix(in srgb, var(--pill-color) 40%, transparent);
}

.digest-filter__pill:active {
    opacity: 0.8;
}

.digest-summary__revenue {
    font-size: 28px;
    font-weight: 700;
    /* Inherits the card's accent so it matches the active filter pill color */
    color: var(--digest-accent, #fff);
    letter-spacing: -0.5px;
    transition: color 0.3s ease;
}

.digest-summary__revenue .uah-sym {
    font-weight: 400;
    opacity: 0.5;
}

.digest-summary__meta {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 4px;
}

.digest-summary__meta span {
    margin: 0 6px;
}

.digest-summary__date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 6px;
    text-transform: capitalize;
}

.digest-summary__date--weekend {
    color: rgba(244, 63, 94, 0.5);
}

.digest-list {
    padding: 0 12px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.digest-group {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
}

.digest-group__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
    overflow: hidden;
}

.digest-group__header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--bar-pct, 0%);
    background: linear-gradient(90deg, color-mix(in srgb, var(--bar-color) 10%, transparent), color-mix(in srgb, var(--bar-color) 5%, transparent));
    pointer-events: none;
    transition: width 0.4s ease;
}

.digest-group__header:active {
    background: rgba(255, 255, 255, 0.04);
}

.digest-group__icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.digest-group__icon svg {
    width: 20px;
    height: 20px;
}

.digest-group__info {
    flex: 1;
    min-width: 0;
}

.digest-group__name {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}

.digest-group__meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 1px;
}

.digest-group__meta strong {
    color: rgba(255, 255, 255, 0.7);
}

.digest-group__chevron {
    color: rgba(255, 255, 255, 0.25);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.digest-group__chevron--open {
    transform: rotate(180deg);
}

.digest-group__items {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    display: none;
    flex-direction: column;
}

.digest-group__items--open {
    display: flex;
}

.digest-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.2s;
    min-height: 64px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.digest-card:last-child {
    border-bottom: none;
}

.digest-card:active {
    background: rgba(255, 255, 255, 0.05);
}

.digest-card__img {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
    position: relative;
}

.digest-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.digest-card__img img.loaded {
    opacity: 1;
}

.digest-card__img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.12);
}

.digest-card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.digest-card__name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.digest-card__brand {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    gap: 6px;
}

.digest-card__cat {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.2px;
}

.digest-card__revenue {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.digest-card__price {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.digest-card__price .uah-sym {
    font-weight: 400;
    opacity: 0.4;
    font-size: 12px;
}

.digest-card__qty-pill {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 7px;
    border-radius: 6px;
    letter-spacing: 0.2px;
}



.digest-today-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 16px 0;
    padding: 8px 14px;
    background: rgba(244, 63, 94, 0.1);
    border: 1px solid rgba(244, 63, 94, 0.2);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(244, 63, 94, 0.8);
}

.digest-today-warning svg {
    flex-shrink: 0;
}

.digest-empty {
    text-align: center;
    padding: 60px 24px;
    color: rgba(255, 255, 255, 0.25);
}

.digest-empty__icon {
    margin-bottom: 16px;
    opacity: 0.3;
}

.digest-empty__text {
    font-size: 14px;
}

.digest-loader {
    display: flex;
    justify-content: center;
    padding: 60px 0;
}

.digest-loader .spinner {
    width: 28px;
    height: 28px;
}

/* ─── AI Prompt Workshop ───────────────────────────────────── */

.ai-workshop-add-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 6px 14px;
    border-radius: 10px;
    border: 1px solid rgba(168, 85, 247, 0.3);
    background: rgba(168, 85, 247, 0.1);
    color: #A855F7;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s;
}

.ai-workshop-add-btn:active {
    background: rgba(168, 85, 247, 0.2);
}

.ai-workshop-list {
    padding: 4px 0 20px;
}

.ai-workshop-card {
    margin-bottom: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
    transition: border-color 0.2s;
}

.ai-workshop-card--dirty {
    border-color: rgba(245, 158, 11, 0.35);
}

.ai-workshop-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}

.ai-workshop-card__header:active {
    background: rgba(255, 255, 255, 0.04);
}

.ai-workshop-card__icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--ws-icon-bg, rgba(139, 92, 246, 0.15));
    color: var(--ws-icon-color, #8B5CF6);
}

.ai-workshop-card__title {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-workshop-card__model {
    font-size: 10px;
    font-weight: 500;
    color: #94A3B8;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    flex-shrink: 0;
}

.ai-workshop-card__chevron {
    color: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    transition: transform 0.2s;
}

.ai-workshop-card--editing .ai-workshop-card__chevron {
    transform: rotate(90deg);
}

.ai-workshop-card__sources {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 14px 10px;
}

.ai-workshop-card__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 0 12px;
}

.ai-workshop-btn {
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ai-workshop-btn:active {
    background: rgba(255, 255, 255, 0.08);
}

.ai-workshop-btn--run {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.08);
    color: #22C55E;
    margin-left: auto;
}

.ai-workshop-btn--run:active {
    background: rgba(34, 197, 94, 0.18);
}

.ai-workshop-btn--save {
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.08);
    color: #A78BFA;
}

.ai-workshop-btn--save:active {
    background: rgba(139, 92, 246, 0.18);
}

.ai-workshop-btn--delete {
    border-color: rgba(248, 113, 113, 0.25);
    color: rgba(248, 113, 113, 0.6);
    background: none;
}

.ai-workshop-btn--delete:active {
    background: rgba(248, 113, 113, 0.1);
    color: #F87171;
}

.ai-workshop-btn--move {
    padding: 7px 8px;
    color: rgba(255, 255, 255, 0.3);
    border: none;
    background: none;
}

.ai-workshop-btn--move:active {
    color: rgba(255, 255, 255, 0.6);
}

/* Editor panel (hidden when collapsed) */
.ai-workshop-editor {
    display: none;
    padding: 0 14px 14px;
}

.ai-workshop-card--editing .ai-workshop-editor {
    display: block;
}

.ai-workshop-editor__group {
    margin-bottom: 14px;
}

.ai-workshop-editor__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-workshop-editor__label span {
    font-size: 9px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.2);
    text-transform: none;
    letter-spacing: normal;
}

.ai-workshop-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    font-family: inherit;
    font-size: 13px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.ai-workshop-input:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.4);
}

.ai-workshop-textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.6;
    box-sizing: border-box;
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.2s;
    tab-size: 2;
}

.ai-workshop-textarea:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.4);
}

/* Data source toggles in editor */
.ai-workshop-ds-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ai-workshop-ds-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s;
}

.ai-workshop-ds-pill.active {
    background: color-mix(in srgb, var(--ds-color, #8B5CF6) 15%, transparent);
    color: var(--ds-color, #8B5CF6);
    border-color: color-mix(in srgb, var(--ds-color, #8B5CF6) 35%, transparent);
}

/* Model picker in editor */
.ai-workshop-model-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ai-workshop-model-btn {
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s;
}

.ai-workshop-model-btn.active {
    background: rgba(139, 92, 246, 0.12);
    color: #A78BFA;
    border-color: rgba(139, 92, 246, 0.35);
}

/* Icon picker grid */
.ai-workshop-icon-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.ai-workshop-icon-btn {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s;
}

.ai-workshop-icon-btn.active {
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(139, 92, 246, 0.1);
    color: #A78BFA;
}

.ai-workshop-icon-btn:active {
    background: rgba(255, 255, 255, 0.08);
}

/* Color picker */
.ai-workshop-color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ai-workshop-color-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s;
}

.ai-workshop-color-btn.active {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

/* Advanced options row */
.ai-workshop-advanced {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.ai-workshop-advanced__field {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-workshop-advanced__field label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

.ai-workshop-advanced__field input[type="number"] {
    width: 70px;
    padding: 5px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    font-size: 12px;
    font-family: inherit;
    box-sizing: border-box;
}

.ai-workshop-advanced__field input[type="number"]:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.4);
}

.ai-workshop-advanced__field input[type="checkbox"] {
    accent-color: #8B5CF6;
}

/* Test result area */
.ai-workshop-result {
    margin-top: 14px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-workshop-result__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.ai-workshop-result__badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: #94A3B8;
}

.ai-workshop-result__badge--cost {
    color: #34D399;
}

.ai-workshop-result__text {
    font-size: 12px;
    line-height: 1.65;
    color: #CBD5E1;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 400px;
    overflow-y: auto;
}

.ai-workshop-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 20px;
    color: rgba(255, 255, 255, 0.2);
    font-size: 13px;
}

/* Saved flash animation */
.ai-workshop-card--saved {
    animation: wsCardSaved 0.6s ease-out;
}

@keyframes wsCardSaved {
    0% {
        border-color: rgba(34, 197, 94, 0.5);
    }

    100% {
        border-color: rgba(255, 255, 255, 0.06);
    }
}

/* ═══════════════════════════════════════════════════════════ */
/* ── Desktop enhancements (progressive, mobile-first safe) ─ */
/* ═══════════════════════════════════════════════════════════ */

@media (min-width: 1200px) {

    /* Meta campaigns: single-row layout — name | sparkline | metrics */
    .meta-campaign-card {
        display: grid;
        grid-template-columns: minmax(200px, 1fr) auto auto;
        align-items: center;
        gap: 0 20px;
    }

    .meta-campaign-header {
        margin-bottom: 0;
        align-items: center;
    }

    .meta-campaign-name {
        -webkit-line-clamp: 1;
    }

    .meta-campaign-roas-spark {
        margin-top: 0;
        margin-bottom: 0;
        width: 280px;
        min-width: 280px;
    }

    .meta-campaign-metrics {
        white-space: nowrap;
    }

    .meta-campaign-metrics .meta-metrics-row {
        display: inline-flex;
        gap: 8px;
    }

    .meta-campaign-drilldown,
    .meta-ad-item {
        grid-column: 1 / -1;
    }
}

/* =============================================
   UPDATE TOAST
   ============================================= */
.update-toast {
    position: fixed;
    bottom: 95px;
    left: 12px;
    right: 12px;
    background: rgba(15, 15, 22, 0.65);
    border: 1px solid rgba(6, 182, 212, 0.25);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 9999;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    transform: translateY(120%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

.update-toast--visible {
    transform: translateY(0);
    opacity: 1;
}

.update-toast svg {
    flex-shrink: 0;
    color: #06B6D4;
}

.update-toast span {
    flex: 1;
}

.update-toast__btn {
    background: #06B6D4;
    color: #0f0f14;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
}

.update-toast__btn:active {
    opacity: 0.8;
}

.update-toast__dismiss {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
    transition: color 0.2s;
}

.update-toast__dismiss:active {
    color: rgba(255, 255, 255, 0.6);
}

.update-toast__whats-new {
    background: none;
    border: none;
    color: rgba(6, 182, 212, 0.8);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    white-space: nowrap;
    transition: color 0.2s;
}

.update-toast__whats-new:active {
    color: rgba(6, 182, 212, 1);
}

/* =============================================
   ABOUT CHANGELOG BUTTON
   ============================================= */
.about-changelog-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.25);
    border-left: none;
    color: rgba(6, 182, 212, 0.9);
    font-size: 12px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    transition: all 0.25s ease;
    margin: 0;
}

.about-changelog-btn:active {
    background: rgba(6, 182, 212, 0.2);
}

/* =============================================
   CHANGELOG OVERLAY
   ============================================= */
.changelog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.changelog-overlay--visible {
    opacity: 1;
}

.changelog-overlay--visible .changelog-panel {
    transform: translateY(0);
}

.changelog-panel {
    width: 100%;
    max-height: 85vh;
    background: #12121ade;
    border-radius: 20px 20px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.changelog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.changelog-header__title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: 700;
}

.changelog-header__title svg {
    color: #06B6D4;
}

.changelog-header__close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.changelog-header__close:active {
    color: rgba(255, 255, 255, 0.6);
}

.changelog-list {
    overflow-y: auto;
    padding: 12px 20px 32px;
    -webkit-overflow-scrolling: touch;
}

.changelog-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    padding: 40px 0;
    font-size: 13px;
}

.changelog-entry {
    position: relative;
    padding: 12px 0 12px 20px;
    border-left: 2px solid rgba(255, 255, 255, 0.06);
}

.changelog-entry::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 18px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}

.changelog-entry--latest {
    border-left-color: rgba(6, 182, 212, 0.3);
}

.changelog-entry--latest::before {
    background: #06B6D4;
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
}

.changelog-entry__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.changelog-entry__version {
    font-size: 13px;
    font-weight: 700;
    color: #06B6D4;
    background: rgba(6, 182, 212, 0.1);
    padding: 2px 8px;
    border-radius: 6px;
}

.changelog-entry--latest .changelog-entry__version {
    background: rgba(6, 182, 212, 0.2);
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.15);
}

.changelog-entry__date {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 500;
}

.changelog-entry__changes {
    list-style: none;
    padding: 0;
    margin: 0;
}

.changelog-entry__changes li {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
    padding: 2px 0;
    position: relative;
    padding-left: 12px;
}

.changelog-entry__changes li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: rgba(255, 255, 255, 0.2);
}

.changelog-entry--latest .changelog-entry__changes li {
    color: rgba(255, 255, 255, 0.7);
}

/* ─── Stores view (1C local-store gross-profit feed) ─── */

#stores-view {
    padding: 16px 14px 100px;
}

.stores-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.store-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px 14px;
    transition: background 0.15s, border-color 0.15s;
}

/* Each clickable zone gets its own affordance */
.store-card__zone {
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.store-card__zone:active {
    transform: scale(0.985);
}

.store-day.store-card__zone:hover,
.store-period.store-card__zone:hover {
    background: rgba(255, 255, 255, 0.045);
}

.store-card__spark.store-card__zone {
    border-radius: 8px;
    padding: 4px 4px 2px;
    margin: -4px -4px 6px;
}

.store-card__spark.store-card__zone:hover {
    background: rgba(255, 255, 255, 0.025);
}

.store-card--inactive {
    opacity: 0.55;
    cursor: default;
}

.store-card--loading {
    cursor: default;
}

.store-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.store-card__title {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Per-store data-freshness dot — green when CSV mtime within 2h, red beyond.
   The 30s heartbeat keeps it accurate even while sitting on the page.
   Inactive (awaiting first upload) cards always render this red.
   Pulsing ripple (::after) matches the .live-dot pattern used elsewhere. */
.store-card__status-dot {
    display: inline-block;
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.45);
    flex-shrink: 0;
    transition: background 0.2s, box-shadow 0.2s;
}

.store-card__status-dot::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.6);
    animation: liveRipple 2.5s ease-out infinite;
}

.store-card__status-dot--stale {
    background: #EF4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.45);
}

.store-card__status-dot--stale::after {
    background: rgba(239, 68, 68, 0.6);
}

/* The closed-day P&L is stale, the live receipts are fresh (agrees with the "Stale data" badge). */
.store-card__status-dot--warn {
    background: #F59E0B;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.45);
}

.store-card__status-dot--warn::after {
    background: rgba(245, 158, 11, 0.6);
}

.store-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.store-card__source {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.store-card__stale {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(244, 63, 94, 0.15);
    color: #FB7185;
}

.store-card__loader,
.store-card__empty {
    padding: 16px 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

/* Sparkline — sits ABOVE the metrics */
.store-card__spark {
    margin-bottom: 10px;
}

.store-spark {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 30px;
}

.store-spark__bar {
    flex: 1;
    min-height: 2px;
    background: linear-gradient(180deg, var(--store-accent, #60A5FA), var(--store-accent-deep, #8B5CF6));
    border-radius: 2px 2px 0 0;
    transition: height 0.4s ease-out;
}

.store-spark__bar--weekend {
    background: linear-gradient(180deg, #F472B6, #DB2777);
}

.store-spark__bar--today {
    opacity: 0.45;
}

/* Per-store identity colors (v46.8) — each store gets 4px left-border accent
   + colored title text + sparkline gradient driven by --store-accent /
   --store-accent-deep. Weekend pink + status dot green/red stay store-agnostic
   (semantic, not identity). Border + padding bundled in a grouped selector so
   the 3px content shift only fires when colors are actually set; if a future
   store is added without a CSS entry, it gracefully falls back to the default
   1px border + default sparkline gradient. */
.store-card[data-slug="mihnovskogo"],
.store-card[data-slug="chistyakivska"],
.store-card[data-slug="sumy_atrium"],
.store-card[data-slug="online"] {
    border-left: 4px solid var(--store-accent);
    padding-left: 11px;
}

.store-card[data-slug="mihnovskogo"] .store-card__title,
.store-card[data-slug="chistyakivska"] .store-card__title,
.store-card[data-slug="sumy_atrium"] .store-card__title,
.store-card[data-slug="online"] .store-card__title {
    color: var(--store-accent);
}

/* Palette v4 (v47.0) — analogous cool spectrum using app-native Tailwind 400/500
   tones. v46.8 was too neony (4 different hue families across the wheel) and
   v46.9 overcorrected (muted to the point of looking out-of-palette). The fix
   was hue-coherence, not desaturation: walking violet → blue → cyan → emerald
   in an analogous spectrum keeps each card distinguishable while reading as
   ONE app palette. Top stops match Tailwind 500-ish; bottom stops are Tailwind
   700–800 for chart depth. Each top color already appears elsewhere in the app
   (category icons, brand accents) so no new vocabulary is introduced. */
.store-card[data-slug="mihnovskogo"]   { --store-accent: #8178F4; --store-accent-deep: #3730A3; } /* indigo-violet (user pick) */
.store-card[data-slug="chistyakivska"] { --store-accent: #60A5FA; --store-accent-deep: #1D4ED8; } /* blue */
.store-card[data-slug="sumy_atrium"]   { --store-accent: #4EC8E8; --store-accent-deep: #0E7490; } /* cyan (user pick, slightly tamer than Tailwind cyan-400) */
.store-card[data-slug="online"]        { --store-accent: #51DD9C; --store-accent-deep: #047857; } /* emerald (user pick, slightly lighter than Tailwind emerald-400) */

/* Identity colour for any store (EA v2): app.js sets --store-accent / --store-accent-deep inline
   from the card order (Міхновського, Чистяківська, Суми, Львів, Інтернет), so a new slug needs no CSS. */
.store-card--accent {
    border-left: 4px solid var(--store-accent);
    padding-left: 11px;
}

.store-card--accent .store-card__title {
    color: var(--store-accent);
}

/* The drill-down borrows the class for the accent vars only (no border on the section). */
#store-detail-section.store-card--accent {
    border-left: none;
    padding-left: 0;
}

.store-card__name {
    min-width: 0;
}

/* "since 03.10" — a store that opened recently (history starts on its first day) */
.store-card__since {
    font-size: 10px;
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--store-accent, #818CF8) 16%, transparent);
    color: var(--store-accent, #C7D2FE);
}

/* Empty slot in the 30-day spark for days before the store's first day */
.store-spark__bar--void {
    height: 2px;
    min-height: 2px;
    background: rgba(255, 255, 255, 0.07);
}

.stores-warn:empty {
    display: none;
}

.stores-warn {
    margin-bottom: 10px;
}

/* Live (shift still open): revenue from till receipts, no profit until the day is closed in 1C */
.store-day--live {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.09) 0%, rgba(16, 185, 129, 0.02) 100%);
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.18);
}

.store-day__value--live {
    color: #A7F3D0;
}

.store-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    background: rgba(16, 185, 129, 0.14);
    color: #6EE7B7;
    border: 1px solid rgba(16, 185, 129, 0.28);
}

.store-live-pill__dot {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    flex-shrink: 0;
}

.store-live-pill__dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.6);
    animation: liveRipple 2.5s ease-out infinite;
}

.store-live-pill--pending {
    background: rgba(245, 158, 11, 0.12);
    color: #FCD34D;
    border-color: rgba(245, 158, 11, 0.28);
}

.store-live-pill--closed {
    background: rgba(148, 163, 184, 0.12);
    color: rgba(226, 232, 240, 0.75);
    border-color: rgba(148, 163, 184, 0.25);
}

/* ФОП / ТОВ split: two-part bar + "ФОП 117 489 · ТОВ 74 848" */
.store-split {
    margin-top: 5px;
}

.store-split__bar {
    display: flex;
    height: 3px;
    border-radius: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    margin-bottom: 3px;
}

.store-split__part {
    display: block;
    height: 100%;
}

.store-split__part--fop {
    background: #A5B4FC;
}

.store-split__part--tov {
    background: #FDE68A;
}

.store-split__text {
    font-size: 10px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.store-split__key {
    font-weight: 700;
}

.store-split__key--fop {
    color: #A5B4FC;
}

.store-split__key--tov {
    color: #FDE68A;
}

/* Drill-down: Разом / ФОП / ТОВ */
.store-entity-row {
    display: flex;
    justify-content: flex-end;
    margin: -8px 0 12px;
}

.store-entity-row.hidden {
    display: none;
}

.store-row__split {
    flex-basis: 100%;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.55);
}

.store-row__live {
    font-size: 10.5px;
    font-weight: 600;
    color: #6EE7B7;
}

.store-row.store-row--live .store-row__bar {
    background: repeating-linear-gradient(135deg, rgba(16, 185, 129, 0.32) 0 6px, rgba(16, 185, 129, 0.18) 6px 12px);
    border-left-color: #34D399;
}

/* The shared pill lowercases its labels; ФОП / ТОВ are abbreviations */
.store-entity-pill .digest-mode-pill__btn {
    text-transform: none;
}

/* ФОП / ТОВ selected: the bars take the entity's colour */
.store-entity--fop .store-row:not(.store-row--live) .store-row__bar {
    background: linear-gradient(90deg, rgba(165, 180, 252, 0.40), rgba(165, 180, 252, 0.12));
    border-left-color: #A5B4FC;
}

.store-entity--tov .store-row:not(.store-row--live) .store-row__bar {
    background: linear-gradient(90deg, rgba(253, 230, 138, 0.32), rgba(253, 230, 138, 0.08));
    border-left-color: #FDE68A;
}

/* Today + Yesterday row — compact, no margin %, dates inline */
.store-card__day-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

.store-day {
    background: rgba(255, 255, 255, 0.025);
    border-radius: 8px;
    padding: 8px 10px;
    position: relative;
}

.store-day__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 3px;
    line-height: 1.2;
}

.store-day__date {
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.store-day__value {
    font-size: 16px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.15;
    margin-bottom: 2px;
}

.store-day__value .uah-sym {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

.store-day__profit {
    font-size: 10px;
    line-height: 1.3;
    color: rgba(34, 211, 238, 0.85);
    margin-bottom: 1px;
    white-space: nowrap;
}

.store-day__profit .uah-sym {
    color: rgba(34, 211, 238, 0.55);
    font-size: 9px;
}

.store-day__sub {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
}

/* Friendly placeholder when today's row hasn't landed yet (pre-first-sale or
   1C upload not yet run). Replaces the value+items lines. */
.store-day__pending {
    font-size: 11px;
    line-height: 1.3;
    color: rgba(255, 133, 133, 0.45);
    margin-top: 2px;
}

/* MTD + YTD row — period label, value, profit, forecast, progress bar */
.store-card__period-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.store-period {
    background: rgba(255, 255, 255, 0.025);
    border-radius: 8px;
    padding: 8px 10px;
    position: relative;
    overflow: hidden;
}

.store-period__label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(165, 180, 252, 0.85);
    margin-bottom: 3px;
}

.store-period__value {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.15;
    margin-bottom: 3px;
}

.store-period__value .uah-sym {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

.store-period__profit {
    font-size: 10px;
    color: rgba(34, 211, 238, 0.85);
    line-height: 1.3;
    margin-bottom: 2px;
}

.store-period__profit .uah-sym {
    color: rgba(34, 211, 238, 0.55);
    font-size: 9px;
}

/* Forecast band — full-width amber strip at the bottom of the period card.
   Uses negative margins to break out of the parent's padding and reach the
   card edges. Parent has overflow:hidden so the band respects the rounded
   bottom corners. Mirrors the dark-amber accent of the year-card on the
   Sales page (#EA580C family). */
.store-period__forecast-band {
    margin: 8px -10px -8px;
    padding: 7px 10px 8px;
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.18) 0%, rgba(234, 88, 12, 0.06) 100%);
    border-top: 1px solid rgba(234, 88, 12, 0.22);
}

.store-period__progress-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 5px;
}

.store-period__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #EA580C, #FB923C);
    border-radius: 2px;
    transition: width 0.4s ease-out;
}

.store-period__forecast {
    font-size: 10px;
    color: rgba(254, 215, 170, 0.92);
    line-height: 1.3;
}

.store-period__forecast .uah-sym {
    color: rgba(254, 215, 170, 0.6);
    font-size: 9px;
}

/* "Open this report" hint button — top-right corner of clickable mini-cards.
   Subtle indigo tint matching the dropdown trigger style elsewhere in the app —
   visible enough to read as a tap target, quiet enough not to compete with data. */
.store-card__hint-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    background: rgba(99, 102, 241, 0.16);
    color: rgba(199, 210, 254, 0.85);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 5px;
    font-size: 9px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    /* pointer-events:none lets the click pass through to the parent zone, which
       carries the data-store-action handler. The button is purely a visual cue. */
}

.store-card__hint-btn svg {
    flex-shrink: 0;
}

/* Reserve room on the label side so it doesn't run under the hint button */
.store-card__zone--has-hint .store-day__label,
.store-card__zone--has-hint .store-period__label {
    padding-right: 70px;
}

/* ─── Store detail drill-down ─── */

#store-detail-section {
    padding-top: 4px;
}

.store-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.store-detail-title {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* View dropdown — Daily / Monthly / Yearly */
.store-view-dropdown {
    position: relative;
    flex-shrink: 0;
}

.store-view-dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.30);
    border-radius: 8px;
    color: #C7D2FE;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.store-view-dropdown__trigger:hover,
.store-view-dropdown--open .store-view-dropdown__trigger {
    background: rgba(99, 102, 241, 0.20);
    border-color: rgba(99, 102, 241, 0.45);
}

.store-view-dropdown__trigger svg {
    transition: transform 0.2s;
}

.store-view-dropdown--open .store-view-dropdown__trigger svg {
    transform: rotate(180deg);
}

.store-view-dropdown__menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 10;
    background: rgba(20, 20, 28, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    overflow: hidden;
    min-width: 140px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.store-view-dropdown__menu button {
    display: block;
    width: 100%;
    padding: 9px 14px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
}

.store-view-dropdown__menu button:hover {
    background: rgba(99, 102, 241, 0.18);
    color: #fff;
}

.store-detail-section {
    margin-bottom: 24px;
}

.store-detail-section__title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.store-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.store-row--partial {
    opacity: 0.65;
}

.store-row__label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
}

.store-row__bar-wrap {
    position: relative;
    min-height: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.store-row__bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.45), rgba(139, 92, 246, 0.22));
    border-left: 2px solid #818CF8;
    border-radius: 2px;
}

.store-row__values {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 4px 8px;
    font-size: 12px;
}

.store-row__rev {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.store-row__rev .uah-sym {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

.store-row__prof {
    color: rgba(34, 211, 238, 0.9);
    font-size: 11px;
}

.store-row__prof .uah-sym {
    color: rgba(34, 211, 238, 0.55);
    font-size: 10px;
}

.store-row__items {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    margin-left: auto;
}

/* Weekend rows in by-day report — pink palette matching the spark-line weekend bars */
.store-row--weekend .store-row__bar {
    background: linear-gradient(90deg, rgba(244, 114, 182, 0.42), rgba(219, 39, 119, 0.18));
    border-left-color: #F472B6;
}

.store-row--weekend .store-row__label {
    color: rgba(244, 114, 182, 0.85);
}

/* Forecast extension on the in-progress bucket bar (current month / current
   year). Translucent dark-amber sits flush against the right edge of the
   actual-revenue bar; dashed left border separates "booked" from "projected". */
.store-row__bar--forecast {
    position: absolute;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(234, 88, 12, 0.15) 0%, rgba(251, 146, 60, 0.10) 100%);
    border-left: 1px dashed rgba(234, 88, 12, 0.55);
    border-radius: 0 2px 2px 0;
}
/* ═══════════════════════════════════════════════════════════════════════
   MONEY TAB (v50) — live bank balances. Terracotta/rose accents (no violet
   per house rule); tinted blocks, never grey-with-colored-border.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --money-accent: #d97757;      /* terracotta — primary/warm */
    --money-hot: #F43F5E;         /* rose — active/hot */
    --money-in: #34D399;          /* incoming money = emerald */
    --money-out: #ff91a3;         /* outgoing = soft rose */
}
.money-page {
    padding: 20px 16px calc(90px + env(safe-area-inset-bottom));
    max-width: 640px;
    margin: 0 auto;
}

/* ── Locked state ── */
.money-lock {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 20px;
    gap: 14px;
    min-height: 60vh;
    justify-content: center;
}
.money-lock__badge {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    color: var(--money-accent);
    background: rgba(217, 119, 87, 0.12);
    border: 1px solid rgba(217, 119, 87, 0.30);
}
.money-lock__title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.money-lock__sub {
    color: var(--text-muted);
    font-size: 14px;
    max-width: 280px;
}
.money-unlock-btn {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 14px;
    border: 1px solid rgba(217, 119, 87, 0.35);
    background: rgba(217, 119, 87, 0.14);
    color: #f6c3ac;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.2s ease;
}
.money-unlock-btn:active { transform: scale(0.97); background: rgba(217, 119, 87, 0.22); }
.money-unlock-btn:disabled { opacity: 0.5; }
.money-enroll-row {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.money-enroll-hint { font-size: 12px; color: var(--text-muted); }
.money-enroll-btn {
    background: none;
    border: none;
    color: var(--money-accent);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px;
}
.money-lock__msg {
    font-size: 13px;
    color: var(--text-muted);
    min-height: 18px;
    margin-top: 4px;
}
.money-lock__msg--err { color: var(--money-hot); }

/* ── Dashboard head ── */
.money-dash__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 4px 18px;
}
.money-total__label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}
.money-total__value {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    margin-top: 4px;
    color: #fff;
}
.money-total__value .uah-sym { font-size: 22px; color: rgba(255, 255, 255, 0.7); font-weight: 500; }
/* in/out line — green in, rose out */
.money-inout {
    display: flex;
    gap: 12px;
    align-items: baseline;
    font-weight: 700;
    white-space: nowrap;
}
.money-inout--total { margin-top: 8px; font-size: 15px; }
.money-inout__in { color: var(--money-in); }
.money-inout__in .uah-sym { color: var(--money-in); opacity: 0.65; font-size: 0.8em; }
.money-inout__out { color: var(--money-out); }
.money-inout__out .uah-sym { color: var(--money-out); opacity: 0.65; font-size: 0.8em; }
.money-dash__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
.money-actions-row { display: flex; gap: 8px; }
.money-refresh-btn {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #c9c9d4;
    cursor: pointer;
    transition: transform 0.12s ease;
}
.money-refresh-btn:active { transform: scale(0.92); }
.money-freshness { font-size: 11px; white-space: nowrap; text-align: right; transition: color 0.2s ease; }
.money-freshness--live { color: var(--text-muted); display: inline-flex; align-items: center; gap: 7px; }
.money-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--money-in);
    flex-shrink: 0;
    animation: liveRipple 2s infinite;
}
.money-freshness--stale { color: #F59E0B; }
.money-freshness--flash { color: var(--money-accent); font-weight: 600; }

/* ── Period picker ── */
.money-period {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    margin-bottom: 12px;
}
.money-period__btn {
    flex: 1;
    padding: 8px 4px;
    border: none;
    border-radius: 9px;
    background: none;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.money-period__btn.active {
    background: rgba(217, 119, 87, 0.18);
    color: #f6c3ac;
}

/* ── Tabs ── */
.money-tabs {
    display: flex;
    gap: 6px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    margin-bottom: 16px;
}
.money-tab {
    flex: 1;
    padding: 9px;
    border: none;
    border-radius: 9px;
    background: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.money-tab.active {
    background: rgba(217, 119, 87, 0.16);
    color: #f6c3ac;
}

/* ── Sort control — compact label + text toggles, deliberately UNLIKE the segmented
   period/tab rows above it (no filled pills → doesn't read as a third tab row) ── */
.money-sort {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 4px 12px;
    font-size: 12.5px;
}
.money-sort__lead {
    color: rgba(255, 255, 255, 0.38);
    font-weight: 600;
}
.money-sort__btn {
    border: none;
    background: none;
    padding: 2px 0;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.money-sort__btn.active {
    color: #f6c3ac;
    border-bottom-color: #d97757;
}

/* ── FOP group-2 income-limit gauge — built INTO the card as its footer strip.
   One per cluster (spans a joined Privat+Mono pair). ── */
.money-limit {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0 0 14px 14px;
    margin-top: -1px;                          /* overlap card border → seamless join */
    padding: 10px 16px 11px;
}
.money-limit__track {
    height: 4px;                               /* thin — a quiet indicator, not a hero bar */
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.11);     /* unfilled remainder — visible but muted */
    overflow: hidden;
}
.money-limit__fill {
    height: 100%;
    border-radius: 4px;
    opacity: 0.6;                              /* dim so the gauge never out-shouts name/balance */
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    background: linear-gradient(90deg, #34d399, #22c55e);
}
.money-limit--warn .money-limit__fill { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.money-limit--high .money-limit__fill { background: linear-gradient(90deg, #fb923c, #f97316); }
.money-limit--crit .money-limit__fill { background: linear-gradient(90deg, #f87171, #ef4444); }
.money-limit__meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 6px;
    font-size: 11px;
}
.money-limit__pct { font-weight: 700; color: var(--text-muted); }
.money-limit--warn .money-limit__pct { color: #f6cd8a; }
.money-limit--high .money-limit__pct { color: #f9b48a; }
.money-limit--crit .money-limit__pct { color: #f7a3a3; }
.money-limit__num { color: rgba(255, 255, 255, 0.4); font-variant-numeric: tabular-nums; }

/* ── FOP clusters + bank cards ── */
.money-cluster {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 0;                     /* card + its limit footer render as ONE unit */
    animation: moneyFadeIn 0.4s ease both;
    animation-delay: calc(var(--cluster-i) * 45ms);
}
/* the card directly above the limit footer → square its bottom so the footer rounds it */
.money-card:has(+ .money-limit) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
/* same-FOP pair: literally joined — first card squares its bottom, second squares its top */
.money-cluster--multi .money-card:first-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.money-cluster--multi .money-card + .money-card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* bank card — a tappable tile → account page. Privat = green-tinted (+ green border),
   Mono stays black. The grey limit footer below stays neutral (it spans mixed Privat+Mono pairs). */
.money-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 14px;
    border: 1px solid transparent;
    padding: 14px 34px 14px 16px;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.2s ease;
}
.money-card:active { transform: scale(0.99); }
.money-card--privat {
    background: rgba(52, 211, 153, 0.05);
    border-color: rgba(52, 211, 153, 0.24);
}
.money-card--mono {
    background: rgba(18, 18, 22, 0.75);
    border-color: rgba(255, 255, 255, 0.16);
}
.money-card--stale { opacity: 0.7; }
.money-card__left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    min-width: 0;
    flex: 1;
}
.money-card__name {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.2px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.money-card__bank {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    padding: 2px 7px;
    border-radius: 6px;
}
.money-card--privat .money-card__bank { color: #7fe3c0; background: rgba(52, 211, 153, 0.14); }
.money-card--mono .money-card__bank { color: #cfcfda; background: rgba(255, 255, 255, 0.09); }
.money-card__sub {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    max-width: 100%;
}
.money-card__note {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.money-card__stale { color: #F59E0B; text-transform: uppercase; flex-shrink: 0; }
.money-card__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.money-card__bal {
    font-size: 20px;
    font-weight: 800;
    white-space: nowrap;
    color: #fff;
}
.money-card__bal .uah-sym { color: rgba(255, 255, 255, 0.78); font-weight: 500; font-size: 0.65em; }
.money-card__inout {
    font-size: 12px;
    justify-content: flex-end;
}
.money-card__go {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    opacity: 0.55;
}

/* ── Account detail page ── */
.money-detail { animation: moneyFadeIn 0.28s ease both; }
.money-detail__head {
    padding: 0 2px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 14px;
}
/* top bar: back icon (left) + bank badge (right) share one compact row */
.money-detail__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.money-detail__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: -8px;
    border: none;
    border-radius: 10px;
    background: none;
    color: #c9c9d4;
    cursor: pointer;
    transition: background 0.12s ease;
}
.money-detail__back:active { background: rgba(255, 255, 255, 0.07); }
.money-detail__bank {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
}
.money-detail__bank--privat { color: #7fe3c0; background: rgba(52, 211, 153, 0.14); }
.money-detail__bank--mono { color: #cfcfda; background: rgba(255, 255, 255, 0.09); }
/* body: name/note (left) + balance/in-out (right) fill the width */
.money-detail__body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}
.money-detail__id { min-width: 0; flex: 1; }
.money-detail__figs {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    text-align: right;
}
.money-detail__name {
    font-size: 17px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
}
.money-detail__note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 5px 10px 5px 8px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #c9c9d4;
    font-size: 13px;
    cursor: pointer;
    max-width: 100%;
    transition: background 0.15s ease;
}
.money-detail__note:active { background: rgba(255, 255, 255, 0.09); }
.money-detail__note span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.money-detail__note svg { flex-shrink: 0; opacity: 0.7; }
.money-detail__note--empty { color: var(--money-accent); background: rgba(217, 119, 87, 0.1); }
.money-detail__bal {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
}
.money-detail__bal .uah-sym { color: rgba(255, 255, 255, 0.7); font-weight: 500; font-size: 0.6em; }
.money-detail__inout {
    margin-top: 6px;
    font-size: 13px;
    justify-content: flex-end;
}
.money-period--detail { margin-bottom: 16px; }

/* ── Transactions ── */
.money-tx-day { margin-bottom: 18px; }
.money-tx-day__label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 8px;
    padding-left: 2px;
}
.money-tx {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 11px;
    margin-bottom: 6px;
}
.money-tx__main { min-width: 0; flex: 1; }
.money-tx__desc {
    display: block;
    font-size: 12px;
    color: #eee;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.money-tx__owner {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.money-tx__amt {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.money-tx__amt--in { color: var(--money-in); }
.money-tx__amt--in .uah-sym { color: var(--money-in); opacity: 0.7; font-size: 13px; }
.money-tx__amt--out { color: var(--money-out); }
.money-tx__amt--out .uah-sym { color: var(--money-out); opacity: 0.7; font-size: 13px; }
.money-sync-note {
    font-size: 12px;
    color: var(--money-accent);
    text-align: center;
    padding: 6px;
    margin-bottom: 8px;
}

/* ── Loading / empty / error ── */
.money-loading, .money-empty, .money-error {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 14px;
}
.money-error { color: var(--money-hot); }
.money-loading--sm, .money-empty--sm, .money-error--sm { padding: 14px; font-size: 13px; }

/* ── Settings → AI Assistant link (AI tab retired from nav in v50) ── */
.settings-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 16px;
    border-radius: 10px;
    background: rgba(217, 119, 87, 0.12);
    border: 1px solid rgba(217, 119, 87, 0.28);
    color: #f6c3ac;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s ease;
}
.settings-link-btn:active { transform: scale(0.97); }

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

/* ═══════════════════════════════════════════════════════════════════════
   EA v2 SHELL — login screen, manager settings button, log out, store status
   ═══════════════════════════════════════════════════════════════════════ */

/* Login: the app chrome stays hidden until a token is accepted. */
body.ea-login .app-header,
body.ea-login #app-content,
body.ea-login .bottom-nav {
    display: none;
}

.login {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(24px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
}

.login.hidden {
    display: none;
}

/* A login link the running app could not use (refused / no connection): the current login stays. */
.ea-notice {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: 16px;
    right: 16px;
    z-index: 10000;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(15, 15, 22, 0.85);
    border: 1px solid rgba(244, 63, 94, 0.35);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    text-align: center;
}

.login__card {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.login__hero {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

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

.login__form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.login__input {
    width: 100%;
    padding: 13px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--text-main);
    font-size: 16px; /* no iOS zoom on focus */
    outline: none;
    transition: border-color 0.2s ease;
}

.login__input:focus {
    border-color: rgba(34, 211, 238, 0.6);
}

.login__btn {
    padding: 13px 14px;
    border-radius: 12px;
    border: 1px solid rgba(34, 211, 238, 0.45);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.28) 0%, rgba(6, 182, 212, 0.12) 100%);
    color: #A5F3FC;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease;
}

.login__btn:active {
    transform: scale(0.98);
}

.login__msg {
    min-height: 18px;
    font-size: 13px;
    color: #FB7185;
}

/* Manager (products-scope) tokens have no bottom nav: About opens from the Products menu and
   gets its own back button. */
.about-back-row {
    display: flex;
    padding: 12px 14px 0;
}

.settings-link-btn--logout {
    background: rgba(244, 63, 94, 0.1);
    border-color: rgba(244, 63, 94, 0.3);
    color: #FDA4AF;
}

/* Store status (Sales page): storefront check + store-DB sync, GET /api/<store>/storefront */
.store-status {
    margin: 4px 18px 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity 0.6s ease;
}

.store-status--failed {
    opacity: 0.55;
}

.store-status__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.store-status__title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.store-status__domain {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.store-status__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.store-status__tile {
    --ss-color: #34D399;
    min-width: 0;
    padding: 10px 11px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--ss-color) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--ss-color) 26%, transparent);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.store-status__tile--warn {
    --ss-color: #FBBF24;
}

.store-status__tile--down {
    --ss-color: #F43F5E;
}

.store-status__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
}

.store-status__dot {
    position: relative;
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ss-color);
}

.store-status__dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--ss-color);
    opacity: 0.6;
    animation: liveRipple 2.5s ease-out infinite;
}

.store-status__value {
    font-size: 17px;
    font-weight: 800;
    color: var(--ss-color);
}

.store-status__sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    overflow-wrap: anywhere;
}