:root {
    --bg-dark: #0a0a14;
    /* the header's height: 60 px + the status bar when the page draws under it (iPhone home-screen app,
       black-translucent; 0 on Android today). The page scrolls under the header, so #app-content starts this
       far down and sticky bars stick this far down */
    --hdr-h: calc(60px + env(safe-area-inset-top, 0px));
    --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. No browser tap flash anywhere (Sasha 15.10: Android Chrome painted
   a blue-ish box over every tapped clickable thing — over the whole «Географія» card, which is one big link);
   the buttons and cards keep their own :active press feedback. */
* {
    -webkit-tap-highlight-color: transparent;
    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 {
    /* frosted glass over the page (Sasha 09.10): the page scrolls under it, like under the bottom nav */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 15px 20px;
    padding-top: calc(15px + env(safe-area-inset-top, 0px));
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--hdr-h);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 100;
}

/* The glass sits on a layer BEHIND the header's content, not on the header itself: an element with
   backdrop-filter becomes the «backdrop root» of everything inside it, so the period menu (inside the header)
   could only blur the header's own empty box — its frosted glass vanished in 2.30 (Sasha 09.10) */
.app-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(10, 10, 20, 0.62);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
}

.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-top: var(--hdr-h);
    scroll-padding-top: var(--hdr-h);
    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(8px, env(safe-area-inset-bottom, 0px))
        max(12px, env(safe-area-inset-left, 12px));
    /* Bottom padding = the iPhone home bar's own inset, 8 px where a phone has none (Sasha 01.11: it was a 25 px floor); */
    /* 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;
}

/* ─── 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. */
/* Bestseller cards in the Магазини-card colours (Sasha 09.10: «mostly colors and tinting», layout as before):
   the category colour as a vivid tint at 12% → 3% top to bottom, a 28% border, no glow, no overlay; names white */
.bs-card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--card-color) 12%, transparent), color-mix(in srgb, var(--card-color) 3%, transparent));
    border: 1px solid color-mix(in srgb, var(--card-color) 28%, transparent);
    box-shadow: none;
}

.bs-card::before {
    display: none;
}

.bs-card:active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--card-color) 18%, transparent), color-mix(in srgb, var(--card-color) 5%, transparent));
    border-color: color-mix(in srgb, var(--card-color) 40%, transparent);
}

.bs-seller__name {
    color: rgba(255, 255, 255, 0.9);
}

.bs-seller__bar-wrap {
    background: rgba(255, 255, 255, 0.07);
}

/* the title says which orders are counted: a plainer line, the mode in white */
.bs-title {
    font-size: 11px;
    line-height: 1.45;
    padding-right: 20px;
}

.bs-title .bs-title__what {
    color: rgba(255, 255, 255, 0.85);
}

@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;
}

/* --- 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;
}

/* --- Інфо (Sasha 01.11: no black block, no card inside a card) ---
   The page sits on the page background: the hero with no box, one tinted block for this phone, tinted
   connection tiles (the GA live card recipe: a vivid hue at 8-10% → 2-3% with a 22% border), plain rows
   for the rest, the credit as a quiet footer. Built for 440 and 427. */
.about {
    padding: 0 16px 12px;
    color: var(--ea-ink);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

.about-sec {
    animation: eaRise 0.5s var(--ea-ease) both;
    animation-delay: calc(var(--i, 0) * 70ms);
}

.about-sec {
    margin-top: 30px;
}

.about-sec__t {
    margin: 0 2px 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(236, 236, 248, 0.46);
}

/* ── Hero ── */
.about-hero {
    text-align: center;
}

.about-hero-animation {
    margin: 0 -16px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

.about-hero-animation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(52% 58% at 50% 62%, rgba(34, 211, 238, 0.13), rgba(123, 58, 237, 0.08) 52%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.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;
}

/* Brand lockup: logo + «ANALYTICS» letters spread to the logo's width (the box is as wide as the logo) */
.about-brand {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 264px;
    margin: -14px auto 0;
}

.about-brand__logo {
    display: block;
    width: 100%;
    height: auto;
}

.about-brand__word {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding: 0 3px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: rgba(255, 255, 255, 0.72);
}

/* the title also heads the login screen */
.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-title--fit {
    white-space: nowrap;
    overflow: hidden;
    margin-top: -14px;
}

/* Developer credit, under the logo (Sasha 01.11: not a quiet footer) */
.about-dev-credit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 18px;
}

.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;
}

/* The version badge joined to «Журнал змін» */
.about-version-row {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

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

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

.about-changelog-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 7px 16px;
    border: 1px solid rgba(6, 182, 212, 0.25);
    border-left: none;
    border-radius: 0 10px 10px 0;
    background: rgba(6, 182, 212, 0.1);
    color: rgba(6, 182, 212, 0.9);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s ease;
}

.about-changelog-btn:active {
    background: rgba(6, 182, 212, 0.2);
}

/* ── This phone: one tinted block; what is inside it is rows, never another box ── */
.about-phone {
    padding: 14px 16px 2px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(6, 182, 212, 0.09), rgba(6, 182, 212, 0.02));
    border: 1px solid rgba(6, 182, 212, 0.22);
}

.about-phone__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.about-phone__lbl {
    font-size: 14px;
    font-weight: 600;
    color: var(--ea-ink);
}

/* Segmented control: language, and «Усі | Лише критичні» (.ab-seg + .nt-seg__btn in web/alerts.js) */
.ab-seg {
    display: flex;
    padding: 3px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.26);
}

.ab-seg--inline {
    flex-shrink: 0;
}

.lang-btn,
.nt-seg__btn {
    position: relative;
    flex: 1;
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ea-ink-3);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

/* 44 px hit area: up and down only */
.lang-btn::before,
.nt-seg__btn::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
}

.lang-btn.active,
.nt-seg__btn.active {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: var(--ea-ink);
}

/* ── Connections: tinted tiles ── */
.about-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.about-conn {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    align-content: start;
    min-width: 0;
    padding: 13px 14px 12px;
    border-radius: 18px;
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--c) 12%, transparent),
            color-mix(in srgb, var(--c) 3%, transparent));
    border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
}

/* an odd tile out takes the whole row, on one line: icon · name · status */
.about-conn:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 8px;
    padding-bottom: 13px;
}

.about-conn:last-child:nth-child(odd) .about-conn__name {
    grid-row: 1;
    grid-column: 2;
    margin-top: 0;
}

.about-conn:last-child:nth-child(odd) .about-conn__st {
    grid-row: 1;
    grid-column: 3;
}

.about-conn:last-child:nth-child(odd) .about-conn__sub {
    grid-column: 2 / -1;
}

.about-conn.is-off {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
    border-color: rgba(255, 255, 255, 0.08);
}

.about-conn.is-off .about-conn__ic {
    opacity: 0.45;
    filter: grayscale(1);
}

.about-conn__ic {
    display: flex;
    align-items: center;
    width: 28px;
    height: 26px;
    color: var(--ic);
}

.about-conn__st {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    color: #4ade80;
}

.about-conn__st i {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
}

.about-conn__st--off {
    color: var(--ea-ink-3);
}

.about-conn__name {
    grid-column: 1 / -1;
    margin-top: 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ea-ink);
}

.about-conn__sub {
    grid-column: 1 / -1;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--ea-ink-2);
    overflow-wrap: anywhere;
}

.about-conn__sub--q {
    margin-top: 0;
    color: var(--ea-ink-3);
}

/* ── App info: plain rows on the page ── */
.about-rows {
    border-top: 1px solid var(--ea-line);
}

.about-row {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 46px;
    padding: 0 2px;
    border-bottom: 1px solid var(--ea-line);
}

.about-row__ic {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    color: var(--ic);
}

.about-row__t {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--ea-ink-2);
}

.about-row__v {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--ea-ink-3);
}

.about-tech {
    border-bottom: 1px solid var(--ea-line);
}

.about-tech__sum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    padding: 0 2px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ea-ink-2);
    cursor: pointer;
    list-style: none;
}

.about-tech__sum::-webkit-details-marker {
    display: none;
}

.about-tech__sum svg {
    flex-shrink: 0;
    color: var(--ea-ink-3);
    transition: transform 0.3s var(--ea-ease);
}

.about-tech[open] .about-tech__sum svg {
    transform: rotate(180deg);
}

.about-tech__body {
    padding: 2px 2px 8px;
    animation: eaRise 0.35s var(--ea-ease) both;
}

.about-tech__grp {
    padding-bottom: 14px;
}

.about-tech__grp h3 {
    margin: 0 0 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ea-ink-3);
}

.about-tech__grp p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ea-ink-2);
}

.about-tech__grp b {
    font-weight: 600;
    color: var(--ea-ink);
}

/* ── The rescue action ── */
.clear-cache-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid rgba(244, 63, 94, 0.26);
    background: linear-gradient(180deg, rgba(244, 63, 94, 0.11), rgba(244, 63, 94, 0.03));
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    color: #fb7185;
    cursor: pointer;
    transition: transform 0.2s var(--ea-ease), opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.clear-cache-btn:active {
    transform: scale(0.985);
}

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

.clear-cache-status {
    margin-top: 8px;
    font-size: 12px;
    text-align: center;
    color: var(--ea-ink-3);
}

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

.about-rescue__hint {
    margin: 8px 0 0;
    font-size: 12px;
    text-align: center;
    color: var(--ea-ink-3);
}

/* ── The credit ── */
@media (prefers-reduced-motion: reduce) {
    .about-sec,
    .about-tech__body {
        animation: none;
    }

    .about-tech__sum svg,
    .clear-cache-btn {
        transition: 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);
}

/* Combined report: the offline bar split per pickup shop (one segment per shop, in shop order) */
.chart-bar--split {
    border-radius: 4px;
}

.chart-bar__segs {
    position: absolute;
    inset: 0;
    display: flex;
    border-radius: inherit;
    overflow: hidden;
}

.chart-bar__seg {
    flex-shrink: 0;
    height: 100%;
}

.chart-bar__seg + .chart-bar__seg {
    box-shadow: inset 1px 0 0 rgba(10, 10, 18, 0.55);
}

/* Each shop's sum under the split bar (shops with a sum on that row only): coloured initial + short sum */
.chart-offsplit {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    margin-top: 1px;
    font-size: 9.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}

.chart-offsplit__item b {
    margin-right: 3px;
    font-weight: 800;
    color: var(--seg-color);
}

/* Legend of the combined report (once, above the rows) */
.sales-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 2px 0 14px;
}

.sales-legend__item {
    --seg-color: #F59E0B;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.55);
}

.sales-legend__item::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--seg-color);
}

.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);
}

/* Today and yesterday are not summary cards (they live in the today card, Sasha 04.10). */

/* Pair 1: 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 2: 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;
}

/* Today card — Sales page, above the statistics title: today's live sales + the store state in
   one card (the old live intake card and the store status card, merged 04.10). Same look as the
   sales cards below: tinted cyan, white sums, small muted labels. */
.today-card {
    margin: 4px 18px 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(6, 182, 212, 0.04) 100%);
    border: 1px solid rgba(6, 182, 212, 0.26);
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.6s ease, background 0.6s ease;
}

/* The site is down: the whole card turns red so it can't be missed. */
.today-card--down {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.16) 0%, rgba(244, 63, 94, 0.04) 100%);
    border-color: rgba(244, 63, 94, 0.5);
    box-shadow: 0 4px 20px rgba(244, 63, 94, 0.12);
}

/* No live block (only the store state): a single line. */
.today-card--bare {
    padding: 10px 14px;
}

.today-card--bare .today-card__hero,
.today-card--bare .today-card__figs {
    display: none;
}

/* Old figures (failed poll / stalled mirror): dimmed, no clock text. */
.today-card__hero,
.today-card__figs {
    transition: opacity 0.6s ease;
}

.today-card--stale .today-card__day--today,
.today-card--stale .today-card__figs {
    opacity: 0.45;
}

.today-card__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.today-card__title {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}

.today-card__states {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 3px 10px;
    transition: opacity 0.6s ease;
}

.today-card__states:empty {
    display: none;
}

.today-card__states--failed {
    opacity: 0.4;
}

.today-card__state {
    --state-color: #34D399;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

.today-card__state--warn {
    --state-color: #FBBF24;
    color: #FBBF24;
}

.today-card__state--down {
    --state-color: #F43F5E;
    color: #FB7185;
    font-weight: 700;
}

.today-card__dot {
    position: relative;
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--state-color);
}

.today-card__state--down .today-card__dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--state-color);
    animation: liveRipple 2s ease-out infinite;
}

/* Hero (Sasha 09.10, «like before»): today | yesterday side by side, each a column: a small label, the
   big number, its % vs a usual same weekday (small, coloured, app.js _dayCmpHTML), orders · items, and
   yesterday's shop pickups. A tap on a day shows ITS figures below: a mint highlight slides to the chosen
   day and points down at the figures with a small notch; the other day softens. Today is chosen first. */
.today-card__hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 6px;
    align-items: stretch;
    margin: 0 -8px; /* same inset as the month | year card (Sasha 09.10) */
}

.today-card__selbg {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(50% - 3px);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(94, 234, 212, 0.09), rgba(94, 234, 212, 0.04));
    border: 1px solid rgba(94, 234, 212, 0.28);
    transition: transform 0.42s cubic-bezier(0.34, 1.25, 0.5, 1);
    pointer-events: none;
}

/* the notch under the chosen day, pointing at its figures: a small solid triangle */
.today-card__selbg::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(94, 234, 212, 0.45);
}

.today-card__hero.is-yday .today-card__selbg {
    transform: translateX(calc(100% + 6px));
}

/* no yesterday figures to switch to: no highlight at all */
.today-card__hero--solo .today-card__selbg {
    display: none;
}

.today-card__day {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 12px 13px 13px;
    border-radius: 16px;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.today-card__day--nosel {
    cursor: default;
}

.today-card__day:focus-visible {
    box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.5);
}

.today-card__day:active:not(.is-sel):not(.today-card__day--nosel) {
    transform: scale(0.985);
}

/* the day not chosen: its numbers soften (the «по днях» button stays bright) */
.today-card__day .today-card__value,
.today-card__day .today-card__cmp,
.today-card__day .today-card__sub {
    transition: opacity 0.35s ease;
}

.today-card__hero:not(.today-card__hero--solo) .today-card__day:not(.is-sel) .today-card__value,
.today-card__hero:not(.today-card__hero--solo) .today-card__day:not(.is-sel) .today-card__cmp,
.today-card__hero:not(.today-card__hero--solo) .today-card__day:not(.is-sel) .today-card__sub {
    opacity: 0.5;
}

/* the head is the label's height, as on the month | year card (Sasha 11.10); the «по днях» button sits in
   the box's top-right corner on its own */
.today-card__day-head {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 12px;
    margin-bottom: 4px;
}

.today-card__day-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.35s ease;
}

.today-card__day.is-sel .today-card__day-label {
    color: #5eead4;
}

.today-card__hero--solo .today-card__day.is-sel .today-card__day-label {
    color: rgba(255, 255, 255, 0.45);
}

/* yesterday → the daily report: a small pill, its tap area 44 px tall (transparent, up and down) */
/* «по днях» in the card's own cyan, close to the box's top-right corner (Sasha 11.10; was indigo) */
.today-card__daylink {
    position: absolute;
    top: 7px;
    right: 7px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border: 1px solid rgba(6, 182, 212, 0.4);
    border-radius: 999px;
    background: rgba(6, 182, 212, 0.14);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    color: #67e8f9;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.today-card__daylink::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -11px;
    bottom: -11px;
}

.today-card__daylink:active {
    background: rgba(129, 140, 248, 0.24);
}

@media (prefers-reduced-motion: reduce) {
    .today-card__selbg,
    .today-card__day .today-card__value,
    .today-card__day .today-card__cmp,
    .today-card__day .today-card__sub,
    .today-card__day-label {
        transition: none;
    }
}

.today-card__value {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    line-height: 1.05;
    white-space: nowrap;
}

/* a day of a million or more still fits its half at 384 px */
.today-card__value--long {
    font-size: 22px;
}

.today-card__cmp {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.3;
}

.today-card__cmp-pct {
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.today-card__cmp-pct--up {
    color: #4ADE80;
}

.today-card__cmp-pct--down {
    color: #FB7185;
}

/* thin baseline (under 5 orders on average) or 0%: grey */
.today-card__cmp-pct--flat {
    color: rgba(255, 255, 255, 0.45);
}

.today-card__cmp-cap {
    color: rgba(255, 255, 255, 0.5);
}

.today-card__sub {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

/* The order map's box (it held the small figures: pickup · pending · cancels · placed until 2.28) */
.today-card__figs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.today-card__figs:empty {
    display: none;
}

/* Day hand-over (_todayStripHandOver): the old figures fade out on top of the new ones, in the same box */
.today-card__figs,
.today-card__details {
    position: relative;
}

.today-card__ghost {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

/* the figures' ghost lies over the real hairline, its own made invisible */
.today-card__figs.today-card__ghost {
    top: -1px;
    border-top-color: transparent;
}

.today-card__resizing {
    overflow: hidden;
}

.today-card__fig {
    --fig-color: rgba(255, 255, 255, 0.35);
    min-width: 0;
}

.today-card__fig--pickup {
    --fig-color: #FBBF24;
}

.today-card__fig--pending {
    --fig-color: #A78BFA;
}

.today-card__fig--cancel {
    --fig-color: #F87171;
}

.today-card__fig-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    color: var(--text-muted);
}

.today-card__fig-label::before {
    content: '';
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--fig-color);
}

.today-card__fig-value {
    margin-top: 3px;
    font-size: 13.5px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
}

.today-card__fig-sub {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.42);
}

/* Placed = every order today incl. cancels and pending: a secondary figure */
.today-card__fig--intake .today-card__fig-label,
.today-card__fig--intake .today-card__fig-value,
.today-card__fig--intake .today-card__fig-sub {
    opacity: 0.6;
}

/* «Статуси замовлень»: opens the order groups */
.today-card__more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 8px 0 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: none;
    font: inherit;
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
}

.today-card__more svg {
    transition: transform 0.2s ease;
}

.today-card__more--open svg {
    transform: rotate(180deg);
}

.today-card__details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Order map (Sasha 09.10, «Шлях замовлень»): the «Оформлено» total and a money bar of every placed order in its group
   colour; «Статуси замовлень» opens the groups — sales stages in a green box (a stepper), then the other outcomes */
.tdc-map {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* The one split bar of the Продажі page (Sasha 01.11: Cloudflare bots, the order map and the shops had three
   heights and three corner shapes): 8 px, both ends fully round, 2 px between the parts. */
.ea-splitbar {
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
}

.tdc-map__bar {
    display: grid;
    column-gap: 2px;
}

.tdc-map__inl {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
}

.tdc-map {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tdc-map__inl {
    align-items: center;
}

/* «Відміни» under the bar opens that day's cancelled orders (web/orders.js): a dotted underline says it is a link */
.tdc-map__link {
    text-decoration: underline dotted rgba(255, 255, 255, 0.35);
    text-underline-offset: 3px;
}

/* opened groups: each row opens «Замовлення» on its group; «Усі замовлення ›» under them */
.today-card__details [data-orders] { cursor: pointer; }
.tdc-allorders {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    margin-top: 8px;
    padding: 8px 0;
    border: 1px solid rgba(34, 211, 238, 0.28);
    border-radius: 10px;
    background: rgba(34, 211, 238, 0.08);
    color: #22D3EE;
    font-size: 12.5px;
    font-weight: 700;
}

/* the open / close hint at the end of the inline row */
/* the open / close chevron: bigger and brighter, no circle (Sasha 11.10) */
.tdc-map__chev,
.pcc__chev {
    display: flex;
    flex: none;
    margin: -3px 0 -3px auto; /* the rows keep their height */
    color: rgba(255, 255, 255, 0.85);
}

.tdc-map__chev svg,
.pcc__chev svg {
    width: 20px;
    height: 20px;
}

.tdc-map__chev svg {
    transition: transform 0.2s ease;
}

.tdc-map--open .tdc-map__chev svg {
    transform: rotate(180deg);
}

.today-card__figs:has(.tdc-map) + .today-card__more.hidden + .today-card__details:not(.hidden) {
    margin-top: 2px;
}

.tdc-map__inl span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.tdc-map__inl i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.tdc-map__inl b {
    font-weight: 800;
    color: rgba(255, 255, 255, 0.88);
}

.today-card__figs:has(.tdc-map) {
    display: block;
}

.today-card__details:has(.tdc-grp) {
    gap: 10px;
    padding-bottom: 2px;
}

/* dot track · name · sum · count — one grid per box, so sums and counts sit in columns */
.tdc-grp {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto 84px;
    column-gap: 7px;
    align-items: center;
    padding: 4px 11px;
    border-radius: 11px;
}

.tdc-grp--sale {
    padding-top: 5px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.03) 100%);
    border: 1px solid rgba(16, 185, 129, 0.28);
}

/* «Оформлено» above the boxes: no box, but the same columns (padding = the boxes' 11 px + their 1 px border) */
.tdc-grp--all {
    padding: 0 12px;
}

.tdc-grp--all .tdc-grp__hd {
    color: var(--text-muted);
}

/* the shops' block, apart from the cancels: tinted in the shops' amber (their colour on the order bar), the same
   recipe as the green sales box (Sasha 10.10) */
.tdc-grp--shops {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.03) 100%);
    border: 1px solid rgba(245, 158, 11, 0.28);
}

.tdc-grp--rest {
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid transparent;
}

.tdc-grp__hd {
    grid-column: 1 / 3;
    display: flex;
    align-items: baseline;
    gap: 6px;
    height: 24px;
    line-height: 24px;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #6EE7B7;
}

.tdc-grp__hd span {
    text-transform: none;
    letter-spacing: 0;
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(110, 231, 183, 0.7);
}

.tdc-grp__hr {
    grid-column: 1 / -1;
    height: 1px;
    margin: 0 0 2px;
    background: rgba(52, 211, 153, 0.18);
}

.tdc-grp__tk {
    position: relative;
    align-self: stretch;
    height: 24px;
}

.tdc-grp__tk i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: var(--c);
}

.tdc-grp--sale .tdc-grp__tk i {
    z-index: 1;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent);
}

/* the stepper's connector: from this dot down to the next one (rows are 24 px, no gap) */
.tdc-grp__tk--line::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 100%;
    margin-left: -1px;
    border-radius: 1px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 60%, transparent), color-mix(in srgb, var(--n) 60%, transparent));
}

.tdc-grp__nm {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tdc-grp__sm {
    justify-self: end;
    font-size: 14px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.94);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tdc-grp__ct {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
}

/* ea-core response warnings[] (stale mirror, unclassified statuses) — amber note under the
   Products bestsellers title; the Sales ones live in #sales-alerts (web/alerts.js). */
.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;
}

/* «Продажі · 30 днів», direction B «+ Магазини» (Sasha 09.10): blue in the GA-card recipe; each day = online,
   the shops stacked on top in ONE amber (amber steps per shop read brown / busy at this size); weekends a
   paler shade of the same blue-violet (not pink); today = a dashed outline round the whole column. */
.sales-sparkline.s30 {
    --blue: #3B82F6;
    padding: 11px 14px 8px;
    border-radius: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 9%, transparent), color-mix(in srgb, var(--blue) 2%, transparent));
    border: 1px solid color-mix(in srgb, var(--blue) 24%, transparent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.sales-sparkline.s30:active {
    transform: scale(0.985);
}

.s30__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.s30__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.45);
}

.s30__total {
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap;
    color: #fff;
}

.s30__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 22px;
    margin-top: 3px;
}

.s30__cmp {
    min-width: 0;
    font-size: 11.5px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.5);
}

.s30__cmp b {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.85);
}

.s30__cmp .s30__up {
    color: #4ade80;
}

.s30__cmp .s30__down {
    color: #fb7185;
}

.s30__bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 42px;
    margin-top: 8px;
}

.s30__b {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transform-origin: bottom center;
}

.s30__b > i {
    display: block;
    flex: 0 0 auto;
}

.s30__b > i:first-child {
    border-radius: 2px 2px 0 0;
}

.s30__on {
    min-height: 2px;
    background: linear-gradient(180deg, #60A5FA, #8B5CF6);
}

.s30__b--we .s30__on {
    background: linear-gradient(180deg, color-mix(in srgb, #60A5FA 55%, #fff), color-mix(in srgb, #8B5CF6 60%, #fff));
}

.s30__sh {
    background: #F59E0B;
    box-shadow: inset 0 -1px 0 rgba(10, 10, 20, 0.5);
}

.s30__b--today {
    position: relative;
}

.s30__b--today > i {
    opacity: 0.6;
}

.s30__b--today::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--h);
    border: 1px dashed rgba(255, 255, 255, 0.6);
    border-bottom: 0;
    border-radius: 2px 2px 0 0;
}

.s30__legend {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 15px;
    margin-top: 5px;
    font-size: 11px;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.5);
}

.s30__legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.s30__legend i {
    width: 7px;
    height: 7px;
    border-radius: 2px;
}

.s30__legend b {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}

.s30__sw-on {
    background: linear-gradient(180deg, #60A5FA, #8B5CF6);
}

.s30__sw-sh {
    background: #F59E0B;
}

.s30--in .s30__b {
    animation: s30Up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--i) * 12ms);
}

.s30--in .s30__sh {
    animation: s30Fade 0.4s ease both;
    animation-delay: calc(420ms + var(--i) * 12ms);
}

@keyframes s30Up {
    from { transform: scaleY(0); }
    to { transform: none; }
}

@keyframes s30Fade {
    from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .s30--in .s30__b,
    .s30--in .s30__sh {
        animation: none;
    }

    .sales-sparkline.s30:active {
        transform: none;
    }
}

.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__value {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    word-break: break-all;
}

/* Pickup in shops on the month / year cards (Sasha 09.10): «Магазини 379 845 ₴» visible on its own line,
   then the shops as one colour bar and a row each (dot, name, amount), like the bot line under the GA card. */
.sales-card__offline {
    margin-top: 8px;
}

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

.sales-card__pick-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    font-size: 12px;
    line-height: 1.3;
}

.sales-card__pick-head span {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
}

.sales-card__pick-head b {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
    white-space: nowrap;
}

.sales-card__pick-bar {
    display: flex;
    gap: 2px;
    height: 5px;
    margin: 6px 0 6px;
    border-radius: 4px;
    overflow: hidden;
}

.sales-card__pick-bar i {
    display: block;
    height: 100%;
}

.sales-card__pick-rows {
    display: grid;
    grid-template-columns: 7px minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 6px;
    font-size: 11px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.6);
}

.sales-card__pick-rows i {
    width: 7px;
    height: 7px;
    border-radius: 2px;
}

.sales-card__pick-rows span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-card__pick-rows b {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    text-align: right;
    white-space: nowrap;
}

.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);
}

/* Narrow phones (S24, 384 px): icon only, so a short report title («Продажі по місяцях») is not cut.
   The word stays for screen readers. */
@media (max-width: 419px) {
    .sales-toggle-btn {
        padding: 7px 10px;
    }

    .sales-toggle-btn__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* 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;
    /* may shrink below its title, so the title gives way instead of the bar widening the page at
       384 px: the combined sales titles («… + Київ / Суми / Львів») end in an ellipsis, the product
       report title wraps (#pmeta-name, Brand-Model-Color beside «Таблиця») */
    min-width: 0;
}

.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;
}

/* Product report title: when it does not fit beside the Chart / Table button (Brand-Model-Color at
   384 px) it wraps to a second line instead of losing its last word («Колір») to the ellipsis. */
#pmeta-name {
    white-space: normal;
    line-height: 1.2;
}

/* 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;
}

.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;
    /* reserves the usual two rows + age before the data arrives; grows when a row wraps (384 px) */
    min-height: 60px;
    overflow: hidden;
    contain: layout;
}

/* 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;
}

/* All six cards grow their bars the same way, on every visit to the tab (a CSS animation restarts when its
   view comes back from display: none). Cloudflare + Search carry the same rule (Sasha 01.11: only those two
   replayed, the older four set their heights once from JS). */
.integration-card__spark .ga-spark-bar__fill,
.integration-card__spark .gsc-spark-bar__fill,
.integration-card__spark .gads-spark-bar__fill,
.integration-card__spark .meta-spark-bar__fill {
    transform-origin: bottom;
    transition: none;
    animation: eaGrowY 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--k, 0) * 18ms);
}

.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: baseline;
    gap: 5px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
}

/* The numbers after the period (app.js _cardStatRow): a number that does not fit goes to the next line,
   under the first number (S24 Ultra, 384 px), instead of being cut off. Each number carries its «·» in
   its left padding; the inner row is pulled 13 px left, so the «·» of a number that starts a line falls
   outside the clipping box. */
.integration-card__stat-vals {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.integration-card__stat-vals-in {
    display: flex;
    flex-wrap: wrap;
    row-gap: 2px;
    margin-left: -13px;
}

.integration-card__stat {
    position: relative;
    padding-left: 13px;
}

.integration-card__stat::before {
    content: '·';
    position: absolute;
    left: 5px;
    color: rgba(255, 255, 255, 0.2);
}

.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__cache-age {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 6px;
}

/* =============================================
   GA / GOOGLE ANALYTICS
   ============================================= */
@keyframes ga-spin {
    from {
        transform: rotate(0deg);
    }

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

.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 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--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__breakdowns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    margin-top: 4px;
}

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

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

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

.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;
}



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

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

/* =============================================
   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;
}

/* =============================================
   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-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;
}

/* =============================================
   GADS / GOOGLE ADS
   Green accent (#34A853 Google green).
   Reuses .ga-* layout primitives; only Ads-specific
   chrome, sparkline, and campaign cards live here.
   ============================================= */
.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-spark-total--roas {
    color: #10B981;
}

.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--roas {
    background: rgba(255, 255, 255, 0.3);
}

/* 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);
}

/* ROAS bar (shared with daily/monthly) */
.gads-bar-fill--roas {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* 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; /* #app-content scroll-padding-top already keeps it under the glass header */
    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-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-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; /* #app-content scroll-padding-top already keeps it under the glass header */
    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;
}

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

.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--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;
}



/* 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;
}

/* 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;
}

/* =============================================
   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 .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-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 12px 32px;
}

.mv-note {
    font-size: 11px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.4);
    padding: 4px 2px 8px;
}

/* Тренди rows = cards in the Продажі / Магазини card style (17.10, Sasha): tinted with the row's colour
   (12% → 3%, 28% border, no line on the left), rounded gradient bars, the forecast as the main page's
   striped amber block. --mv-accent = the brand / category colour. */
.mv-row {
    --mv-light: color-mix(in srgb, var(--mv-accent) 82%, white);
    --mv-deep: color-mix(in oklch, var(--mv-accent) 72%, black);
    /* brand colours are pastel: the deep end darker AND more saturated, so Carrello reads orange, not tan */
    --mv-deep: oklch(from var(--mv-accent) calc(l - 0.2) calc(c + 0.08) h);
    padding: 11px 9px 10px;
    margin-bottom: 10px;
    border-radius: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mv-accent) 12%, transparent), color-mix(in srgb, var(--mv-accent) 3%, transparent));
    border: 1px solid color-mix(in srgb, var(--mv-accent) 28%, transparent);
    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: 14px;
}

.mv-row--open {
    background: linear-gradient(180deg, color-mix(in srgb, var(--mv-accent) 16%, transparent), color-mix(in srgb, var(--mv-accent) 5%, transparent));
}

.mv-row__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.mv-row__name {
    font-size: 15px;
    font-weight: 800;
    color: var(--mv-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.mv-row__sum {
    flex-shrink: 0;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--mv-accent) 45%, white);
    background: color-mix(in srgb, var(--mv-accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--mv-accent) 32%, transparent);
}

.mv-row__sum small {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.75;
}

/* Per-row monthly chart: 12 complete months + the current one (actual + striped 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: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: rgba(255, 255, 255, 0.72);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-bottom: 2px;
}

.mv-mchart__col--cur .mv-mchart__val {
    color: #fff;
}

.mv-mchart__fcval {
    color: #fdba74;
}

.mv-mchart__plot {
    position: relative;
    height: 58px;
}

.mv-mchart__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 4px 4px 1px 1px;
    background: linear-gradient(180deg, var(--mv-light), var(--mv-deep));
}

.mv-mchart__col--cur .mv-mchart__bar {
    filter: brightness(1.15);
}

.mv-mchart__bar--cut {
    border-radius: 0 0 1px 1px;
}

.mv-mchart__fc {
    position: absolute;
    left: 0;
    right: 0;
    border: 1px dashed rgba(251, 146, 60, 0.75);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    background: repeating-linear-gradient(135deg, rgba(251, 146, 60, 0.26) 0 3px, rgba(251, 146, 60, 0.06) 3px 6px);
}

.mv-mchart__lbl {
    margin-top: 4px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
    color: rgba(255, 255, 255, 0.42);
    white-space: nowrap;
    overflow: hidden;
}

.mv-mchart__yr {
    height: 12px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.3);
    white-space: nowrap;
}

/* 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.88);
    border-radius: 1px;
    box-shadow: 0 0 0 1px rgba(10, 10, 20, 0.45);
}

.mv-mchart__col--cur .mv-mchart__lbl {
    color: #fdba74;
}

/* 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.16);
}

/* Under the chart: the current month + forecast | last year's month + change */
.mv-row__foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin-top: 6px;
    padding-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}

.mv-row__foot b {
    color: #fff;
    font-weight: 700;
}

.mv-row__foot i {
    font-style: normal;
    font-weight: 700;
    color: #fdba74;
}

.mv-row__foot b.mv-foot__up {
    color: #4ade80;
}

.mv-row__foot b.mv-foot__dn {
    color: #fb7185;
}

.mv-row__lykey {
    display: inline-block;
    width: 10px;
    height: 2px;
    margin-right: 4px;
    vertical-align: 3px;
    background: #fff;
    border-radius: 1px;
}

/* 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: 10px 12px 10px 11px;
    margin-bottom: 8px;
    /* tinted with the brand colour like the Тренди cards (17.10, Sasha: no colour line on the left — rule 3) */
    background: linear-gradient(180deg, color-mix(in srgb, var(--mv-accent) 11%, transparent), color-mix(in srgb, var(--mv-accent) 3%, transparent));
    border: 1px solid color-mix(in srgb, var(--mv-accent) 26%, transparent);
    border-radius: 14px;
    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 1 auto` keeps pmeta-name content-sized inside pmeta-left rather
   than letting it stretch and push the pill to the right. When the bar is too
   short (CR report at 384 px) the pill wraps under the words instead of
   widening the page; on a wide phone it all stays on one line. */
.pmeta-name--with-picker {
    flex: 0 1 auto;
    min-width: 0;
    /* Nothing to its right: it may run into the bar's right padding (20 px), as it always did, so the
       pill wraps only where the line would otherwise widen the page (CR at 384 px), not where it fits. */
    margin-right: -20px;
    overflow: visible;
    white-space: normal;
    line-height: 1.6; /* a little air between the words and a wrapped pill */
}

/* The gap sits after the words (not before the pill), so a wrapped pill starts flush left */
.pmeta-name--with-picker > span:first-child {
    margin-right: 8px;
}

.pmeta-name--with-picker .digest-mode-pill {
    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;
}

/* Pickup-shop pills: two per row, as many rows as the server lists shops; an odd last one spans the row */
.digest-filter__shops {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

.digest-filter__shops > .digest-filter__pill:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.digest-filter__pill--shop {
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.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;
}

/* S24 Ultra (384 px): beside the filter pills the total had ~100 px and a month's «7 894 014 ₴» ran
   under them; there the total takes the whole width and the pills go under it. */
@media (max-width: 419px) {
    .digest-summary {
        flex-wrap: wrap;
        row-gap: 12px;
    }

    .digest-summary__left,
    .digest-summary__filters {
        flex: 1 1 100%;
    }

    /* the total on the left, items + date on the right: the row stays one total high */
    .digest-summary__left {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 12px;
    }

    .digest-summary__revenue {
        grid-row: 1 / span 2;
        white-space: nowrap;
    }

    .digest-summary__meta,
    .digest-summary__date {
        text-align: right;
    }

    .digest-summary__meta {
        margin-top: 0;
    }

    .digest-summary__date {
        margin-top: 2px;
    }
}

.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;
    /* no text-transform: the strings carry their own capitals («Неділя, 4 жовтня 2026», «Жовтень 2026») */
}

.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-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);
}

/* =============================================
   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;
}

/* a day box opens that day's products; «товари ›» says so, «по днях» on Вчора stays its own tap */
.store-card .store-day__sub--go {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 15px;
    line-height: 15px;
}

/* the row above it the same height in a live and a closed box, so «товари ›» stays level */
.stores-list .store-day .store-day__profit,
.stores-list .store-day .store-day__value--live + .store-day__sub {
    min-height: 15px;
    margin: 2px 0 0;
    line-height: 15px;
    white-space: nowrap;
}

.store-day__go {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    font-weight: 600;
    color: var(--store-accent, #22d3ee);
}

.stores-list .store-card__hint-btn[data-store-action] {
    pointer-events: auto;
}

/* «Товари (1С)» under the store cards: their width, their tint recipe (Sasha 01.11: a grey menu button read as an
   afterthought) */
.stores-products {
    margin-top: 14px;
    margin-bottom: 8px;
}

.stores-products__btn {
    --t: #06b6d4;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 84px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--t) 28%, transparent);
    border-radius: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--t) 12%, transparent), color-mix(in srgb, var(--t) 3%, transparent));
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.stores-products__btn:active {
    transform: scale(0.985);
}

.stores-products__ic {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--t) 16%, transparent);
    color: #22d3ee;
}

.stores-products__t {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.stores-products__t b {
    font-size: 18px;
    font-weight: 800;
}

.stores-products__t small {
    font-size: 12.5px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.6);
}

.stores-products__go {
    flex-shrink: 0;
    color: #22d3ee;
}

.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;
}

.stores-warn--below {
    margin: 14px 0 0;
}

/* 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, 255, 255, 0.5); /* a plain fact («Чеків ще немає»), not an error: neutral grey */
    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;
}

/* the forecast beside the amount (Sasha 11.10, no progress bar): «прогноз» over a short amount; with no room
   beside the amount (a wide phone font) it wraps under it, never cutting the amount */
.store-period__main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    column-gap: 8px;
    row-gap: 2px;
    min-width: 0;
}

.store-period__main .store-period__value {
    flex: 0 0 auto;
}

.store-period__fc {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 3px;
    line-height: 1.1;
    white-space: nowrap;
}

.store-period__main--wrap .store-period__fc {
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
    margin: 0 0 2px;
}

.store-period__main--wrap .store-period__fc span:first-child {
    font-size: 11px;
}

.store-period__fc span:first-child {
    font-size: 10px;
    color: rgba(253, 186, 116, 0.6);
}

.store-period__fc b {
    font-size: 12.5px;
    font-weight: 700;
    color: #fdba74;
}

.store-period__fc b .uah-sym {
    font-size: 10px;
    font-weight: 400;
    color: rgba(253, 186, 116, 0.55);
}

/* "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: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.store-row--partial {
    opacity: 0.65;
}

.store-row__label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
}

/* the weekday under a day's date (Sasha 09.10 polish) */
.store-row__wd {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.38);
}

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

.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: 3px 8px 8px 3px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.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: 800; /* the row's total stands out (Sasha 09.10) */
    color: #fff;
}

.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);
}

/* «Разом»: the ФОП / ТОВ split as a thin two-colour line along the bottom of the bar (Sasha 09.10) — the
   store cards' line (.store-split__part colours); the bar itself stays whole. */
.store-row__splitline {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    display: flex;
    overflow: hidden;
    border-radius: 0 0 8px 3px;
    pointer-events: none;
}

/* Motion (app.js _storeRenderDetailBody): bars slide to new lengths; on open they grow in row by row. */
.store-row__bar,
.store-row__splitline {
    transition: width 0.38s cubic-bezier(0.22, 1, 0.36, 1), left 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.store-body--enter .store-row--anim .store-row__bar,
.store-body--enter .store-row--anim .store-row__splitline {
    transform-origin: left center;
    animation: storeBarGrow 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--i, 0) * 28ms);
}

.store-body--enter .store-row--anim .store-row__bar--forecast {
    animation-delay: calc(var(--i, 0) * 28ms + 320ms);
}

.store-body--enter .store-row--anim .store-row__values {
    animation: storeValuesIn 0.3s ease both;
    animation-delay: calc(var(--i, 0) * 28ms + 120ms);
}

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

@keyframes storeValuesIn {
    from { opacity: 0; transform: translateX(-4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .store-row__bar,
    .store-row__splitline {
        transition: none;
    }
}

/* 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%;
    /* projected, not booked (Sasha 09.10): amber diagonal stripes in a dashed amber outline */
    background: repeating-linear-gradient(135deg, rgba(251, 146, 60, 0.30) 0 5px, rgba(251, 146, 60, 0.08) 5px 10px);
    border: 1px dashed rgba(251, 146, 60, 0.65);
    border-left: 0;
    border-radius: 0 8px 8px 0;
    box-shadow: none;
}

.store-row__fcv {
    font-size: 11px;
    font-weight: 600;
    color: #fb923c;
    white-space: nowrap;
}
/* ═══════════════════════════════════════════════════════════════════════
   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;
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   Магазини redesign (Sasha 09.10): each store card in the style of the Продажі today card — a soft
   gradient tinted with the store's own colour (--store-accent: Міхновського violet, Чистяківська blue,
   Львів purple, Суми cyan, Інтернет emerald), no inner boxes, big day numbers, a hairline between the
   days and the month / year. Motion on the first load only: the parts rise in (stagger by card), the
   spark bars grow up, the ФОП/ТОВ and forecast bars grow from the left. The loading card has the same
   shape and line heights, so nothing shifts when the data lands.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
.stores-list .store-card {
    --tint: var(--store-accent, #818cf8);
    padding: 12px 14px 14px;
    border-radius: 14px;
    /* the GA live card's recipe one step stronger (Sasha 09.10: «GA looks nice, correct amount of tint»):
       a vivid 500 shade at 12% → 3% top to bottom, a 28% border, no glow */
    --mid: var(--store-mid, var(--store-accent, #6366f1));
    background: linear-gradient(180deg, color-mix(in srgb, var(--mid) 12%, transparent), color-mix(in srgb, var(--mid) 3%, transparent));
    border: 1px solid color-mix(in srgb, var(--mid) 28%, transparent);
    box-shadow: none;
}

/* fixed heights where content may vary (a badge, a pill): the loading card is exactly as tall */
.stores-list .store-card__header {
    min-height: 26px;
    margin-bottom: 8px;
}

.stores-list .store-card__title {
    min-width: 0;
}

/* the address stays white (Sasha 09.10: no store colour on the name; the card tint carries it).
   Three classes so it beats the old per-slug title colours (.store-card[data-slug=…] .store-card__title). */
.stores-list .store-card .store-card__title {
    color: rgba(255, 255, 255, 0.95);
}

.stores-list .store-card__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stores-list .store-card__meta {
    flex-shrink: 0;
    white-space: nowrap;
}

.stores-list .store-card__stale {
    white-space: nowrap;
    font-size: 9.5px;
    padding: 2px 6px;
}

/* days and periods sit on the card, not in boxes */
.stores-list .store-day,
.stores-list .store-period {
    background: none;
    border-radius: 10px;
    padding: 4px 2px;
    overflow: visible;
}

.stores-list .store-card__day-row {
    gap: 14px;
    margin-bottom: 0;
    padding-bottom: 10px;
}

.stores-list .store-card__period-row {
    gap: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.stores-list .store-day__label,
.stores-list .store-period__label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.stores-list .store-period__label {
    color: color-mix(in srgb, var(--tint) 75%, white);
}

.stores-list .store-day__value {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    color: #fff;
}

.stores-list .store-day__value .uah-sym,
.stores-list .store-period__value .uah-sym {
    font-size: 12px;
}

.stores-list .store-period__value {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    color: #fff;
}

.stores-list .store-day__profit,
.stores-list .store-period__profit {
    margin-top: 3px;
    font-size: 11px;
    white-space: nowrap;
}

.stores-list .store-day__sub {
    font-size: 11px;
    line-height: 1.35;
}

.stores-list .store-day__pending {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* the live marker inline in the «Сьогодні» label line */
.stores-list .store-day__label .store-live-pill {
    margin: 0 0 0 auto;
    padding: 1px 6px;
    font-size: 9.5px;
    letter-spacing: 0.02em;
    text-transform: none;
}

/* tap feedback without boxes */
.stores-list .store-day.store-card__zone:hover,
.stores-list .store-period.store-card__zone:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* ── the loading card: the same shape, soft shimmering placeholders ── */
.store-sk {
    display: inline-block;
    height: 0.8em;
    width: 70%;
    border-radius: 4px;
    vertical-align: middle;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.05));
    background-size: 200% 100%;
    animation: storeSkShimmer 1.4s ease-in-out infinite;
}

.store-sk--label { width: 46%; height: 9px; }
.store-sk--value { width: 62%; height: 20px; }
.store-sk--wide { width: 78%; }
.store-sk--line { width: 80%; height: 9px; }
.store-sk--short { width: 34%; height: 9px; }

.store-spark--sk {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
    background-size: 200% 100%;
    border-radius: 6px;
    animation: storeSkShimmer 1.4s ease-in-out infinite;
}

.store-card--loading .store-split__bar {
    background: rgba(255, 255, 255, 0.06);
}

@keyframes storeSkShimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ── first load: rise in, bars grow (transform / opacity only: no layout shift) ── */
.store-card--in .store-card__header,
.store-card--in .store-card__spark,
.store-card--in .store-card__day-row,
.store-card--in .store-card__period-row {
    animation: storeCardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.store-card--in .store-card__header { animation-delay: calc(var(--ci, 0) * 70ms); }
.store-card--in .store-card__spark { animation-delay: calc(var(--ci, 0) * 70ms + 40ms); }
.store-card--in .store-card__day-row { animation-delay: calc(var(--ci, 0) * 70ms + 90ms); }
.store-card--in .store-card__period-row { animation-delay: calc(var(--ci, 0) * 70ms + 140ms); }

.store-card--in .store-spark__bar {
    transform-origin: bottom center;
    animation: storeSparkUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--ci, 0) * 70ms + 80ms + var(--b, 0) * 12ms);
}

.store-card--in .store-split__bar {
    transform-origin: left center;
    animation: storeGrowX 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--ci, 0) * 70ms + 260ms);
}

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

@keyframes storeSparkUp {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

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

@media (prefers-reduced-motion: reduce) {
    .store-card--in *,
    .store-sk,
    .store-spark--sk {
        animation: none !important;
    }
}

/* Магазини, 09.10 (2): mini cards back (Sasha) — each day / period its own soft box tinted with the
   store colour (they also mark the tap areas); no hairline between the rows. The live day is a green
   mini card of the same shape. The live pill is just «LIVE», at the end of the label line. */
.stores-list .store-day,
.stores-list .store-period {
    background: color-mix(in srgb, var(--tint) 9%, rgba(255, 255, 255, 0.025));
    border: 1px solid color-mix(in srgb, var(--tint) 18%, transparent);
    border-radius: 12px;
    padding: 8px 11px 10px;
}

.stores-list .store-day.store-card__zone:hover,
.stores-list .store-period.store-card__zone:hover {
    background: color-mix(in srgb, var(--tint) 13%, rgba(255, 255, 255, 0.03));
}

.stores-list .store-day.store-day--live {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-color: rgba(16, 185, 129, 0.38);
    box-shadow: none;
}

.stores-list .store-card__day-row {
    gap: 8px;
    padding-bottom: 8px;
}

.stores-list .store-card__period-row {
    gap: 8px;
    padding-top: 0;
    border-top: 0;
}

/* the label line never wraps (it would make a card taller than its loading shape): a bit smaller,
   room kept for the corner pill, an ellipsis as the last resort */
.stores-list .store-day__label,
.stores-list .store-period__label {
    font-size: 10.5px;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stores-list .store-card__zone--has-hint .store-day__label,
.stores-list .store-card__zone--has-hint .store-period__label {
    padding-right: 62px;
}

.stores-list .store-card__zone--has-hint .store-period__label {
    padding-right: 74px;
}

.stores-list .store-day__label .store-live-pill {
    margin: 0 0 0 auto;
    padding: 2px 7px;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* the two mini cards share the row evenly and may shrink (a long label or value never pushes a mini card
   out of its store card) */
.stores-list .store-card__day-row,
.stores-list .store-card__period-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.stores-list .store-day,
.stores-list .store-period {
    min-width: 0;
}

.stores-list .store-day__value,
.stores-list .store-period__value {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* «LIVE» in the live day's top-right corner (where «по днях» sits on yesterday): it never competes with
   the date for the label line */
.stores-list .store-day {
    position: relative;
}

.stores-list .store-day__label .store-live-pill {
    position: absolute;
    top: 10px; /* centred on the «СЬОГОДНІ» line (Sasha 01.11) */
    right: 8px;
    margin: 0;
}

.stores-list .store-day--live .store-day__label {
    padding-right: 54px;
}

/* a live day is today by definition: its date gives way to «LIVE» */
.stores-list .store-day--live .store-day__date {
    display: none;
}

/* profit lines at the old cards' size, kept inside the mini card */
.stores-list .store-day__profit,
.stores-list .store-period__profit {
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* a little more room inside the mini cards at 384 px */
.stores-list .store-card {
    padding: 12px 11px 12px;
}

.stores-list .store-day,
.stores-list .store-period {
    padding: 8px 9px 10px;
}

.stores-list .store-card__zone--has-hint .store-day__label {
    padding-right: 58px;
}

.stores-list .store-card__zone--has-hint .store-period__label {
    padding-right: 70px;
}

/* mini cards: darker than the store card they sit on (Sasha 09.10: black at ~0.1, then «a little bit
   darker» → 0.16) — the store's colour shows through; a live day is marked by its «LIVE» pill only */
.stores-list .store-day,
.stores-list .store-period {
    background: rgba(0, 0, 0, 0.16);
    border: 1px solid transparent;
}

.stores-list .store-day.store-card__zone:hover,
.stores-list .store-period.store-card__zone:hover {
    background: rgba(0, 0, 0, 0.22);
}

.stores-list .store-day.store-day--live {
    background: rgba(0, 0, 0, 0.16);
    border-color: transparent;
}

/* «по днях / по місяцях / по роках» in the card's own colour (Sasha 09.10), not one indigo for every store */
.stores-list .store-card__hint-btn {
    background: color-mix(in srgb, var(--tint) 16%, transparent);
    border-color: color-mix(in srgb, var(--tint) 32%, transparent);
    color: color-mix(in srgb, var(--tint) 72%, white);
}

/* Weekend spark bars: a paler shade of the store's own colour (Sasha 09.10, option A) — visible, not loud;
   the old pink stays only on the store reports */
.stores-list .store-spark__bar--weekend {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--store-accent) 55%, #fff),
        color-mix(in srgb, var(--store-accent-deep) 60%, #fff));
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   «Географія» on Продажі: since 15.10 the Регіони top block itself (regions.js heroMarkup / heroPaint,
   styled in regions.css under #sales-geo). Only the failed-load dim lives here.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
@property --v {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

#sales-geo.geo-card--failed .rg-map {
    opacity: 0.55;
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   Website-problem alerts (web/alerts.js, Sasha 09.10: direction B — inside the cards they are about).
   Tints in the GA-card recipe (a vivid 500 at a few per cent, 180deg, no glow, no left stripe): critical
   red one step stronger, warning amber, info neutral, resolved green. The critical dot pulses 3 times.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
.al-bands {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Every warning of the page, in its own block between the GA card and the today card (Sasha 01.11) */
.sales-alerts {
    margin: 0 18px 14px;
}

.al-band {
    --c: 148 163 184;
    --t1: 0.065;
    --t2: 0.015;
    --bd: 0.12;
    --ink: #cbd5e1;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    column-gap: 8px;
    row-gap: 2px;
    align-items: center;
    padding: 9px 11px 10px;
    border-radius: 11px;
    background: linear-gradient(180deg, rgb(var(--c) / var(--t1)), rgb(var(--c) / var(--t2)));
    border: 1px solid rgb(var(--c) / var(--bd));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.al-band[data-sev="crit"] { --c: 239 68 68; --t1: 0.14; --t2: 0.03; --bd: 0.32; --ink: #f87171; }
.al-band[data-sev="warn"] { --c: 245 158 11; --t1: 0.1; --t2: 0.02; --bd: 0.24; --ink: #fbbf24; }
.al-band[data-sev="ok"] { --c: 34 197 94; --t1: 0.1; --t2: 0.02; --bd: 0.22; --ink: #4ade80; }

/* a fixed problem kept as history (an hour, with its green all-clear under it): same colour, much quieter */
.al-band.al-band--past[data-sev] { --t1: 0.05; --t2: 0.01; --bd: 0.13; }

.al-band.al-band--past[data-sev] .al-band__dot {
    opacity: 0.55;
    box-shadow: none;
    animation: none;
}

.al-band--past .al-band__t {
    color: rgba(255, 255, 255, 0.62);
}

.al-band--past .al-band__time {
    opacity: 0.7;
}

.al-band--past .al-band__b {
    color: rgba(255, 255, 255, 0.45);
}

.al-band:active {
    transform: scale(0.99);
}

.al-band--slim {
    padding: 7px 11px;
}

.al-band__dot {
    justify-self: center;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink);
    box-shadow: 0 0 0 3px rgb(var(--c) / 0.22);
}

.al-band[data-sev="crit"] .al-band__dot {
    animation: alPing 1.6s ease-out 3;
}

@keyframes alPing {
    from { box-shadow: 0 0 0 0 rgb(var(--c) / 0.55); }
    to { box-shadow: 0 0 0 9px rgb(var(--c) / 0); }
}

.al-band__ic {
    display: grid;
    place-items: center;
    color: var(--ink);
}

.al-band__t {
    min-width: 0;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}

.al-band--slim .al-band__t {
    font-size: 13px;
}

.al-band__time {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.al-band__b {
    grid-column: 2 / 4;
    font-size: 12px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.64);
}

/* the page's own warnings (a line of text, nowhere to go) */
.al-band--note {
    cursor: default;
}

.al-band--note .al-band__t {
    grid-column: 2 / 4;
    font-weight: 600;
}

/* a site band says more than the small «сайт OK» item: it steps aside while one is shown */
.today-card__states--quiet {
    display: none;
}

/* the bot-line row an open bot alert is about */
.sales-cf-bots__rows .is-hot {
    color: #fff;
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .al-band[data-sev="crit"] .al-band__dot {
        animation: none;
    }
}

/* ---------- «Сповіщення» on Інфо (this phone's push): inside .about-phone, rows only, no box of its own ---------- */
.nt-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    margin-bottom: 12px;
}

.nt-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(6, 182, 212, 0.14);
    color: #22D3EE;
}

.nt-head__t {
    flex: 1;
    min-width: 0;
}

.nt-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ea-ink);
}

.nt-state {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 16px;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ea-ink-2);
}

.nt-state i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
}

.nt-state--off i {
    background: rgba(255, 255, 255, 0.3);
}

.nt-btn {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 13px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #0a0a14;
    background: #22D3EE;
    border: 1px solid #22D3EE;
    cursor: pointer;
}

.nt-btn:last-child {
    margin-bottom: 14px;
}

.nt-btn--off {
    color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
    cursor: default;
}

.nt-grp {
    margin: 12px 0 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(236, 236, 248, 0.46);
}

.nt-hint {
    margin: 8px 0 14px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ea-ink-3);
}

.nt-note {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ea-ink-2);
}

.nt-note svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #22D3EE;
}

.nt-note b {
    color: #fff;
}

/* a row of the block: «Про що повідомляти» (opens the list), the test */
.nt-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    padding: 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    color: var(--ea-ink);
    cursor: pointer;
}

.nt-row__t {
    flex: 1;
    min-width: 0;
}

.nt-row__v {
    font-size: 13px;
    font-weight: 500;
    color: var(--ea-ink-3);
}

.nt-row svg {
    flex-shrink: 0;
    color: var(--ea-ink-3);
    transition: transform 0.3s var(--ea-ease);
}

.nt-row[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* the per-type list, shut by default: its switches would be most of the page */
.nt-more {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.35s var(--ea-ease), visibility 0.35s;
}

.nt-more.is-open {
    grid-template-rows: 1fr;
    visibility: visible;
}

.nt-more__in {
    min-height: 0;
    overflow: hidden;
}

.nt-more__in .nt-hint {
    margin: 10px 0 12px;
}

.nt-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nt-list {
    padding-bottom: 8px;
}

.nt-list .nt-item:last-child {
    border-bottom: 0;
}

.nt-item__t {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.3;
    color: var(--ea-ink);
}

.nt-item__t small {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    color: var(--ea-ink-3);
}

.nt-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    vertical-align: 1px;
    color: #f87171;
    background: rgba(239, 68, 68, 0.14);
}

.nt-sw {
    flex-shrink: 0;
    position: relative;
    width: 38px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.14);
    cursor: pointer;
    transition: background 0.2s ease;
}

/* 44 px hit area */
.nt-sw::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
}

.nt-sw::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    transition: left 0.2s ease, background 0.2s ease;
}

.nt-sw--on {
    background: rgba(34, 211, 238, 0.55);
}

.nt-sw--on::after {
    left: 19px;
    background: #fff;
}

.nt-msg {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--ea-ink-2);
}

@media (prefers-reduced-motion: reduce) {
    .nt-more,
    .nt-row svg {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   Month | year card (app.js _salesPeriodRender; Sasha 09.10 «let's try C»): one card in the today-card
   pattern, violet for the month, orange for the year (vivid 500 at 12% → 3%, 28% border, no glow), a
   sliding highlight with a notch on the chosen half; the forecast as a dashed amber outline with its number.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
.pcc {
    --c: #8B5CF6;
    --bar-a: #A78BFA;
    --bar-b: #7C3AED;
    --ink: #c4b5fd;
    margin: 4px 18px 14px;
    padding: 12px 14px 13px;
    border-radius: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, transparent), color-mix(in srgb, var(--c) 3%, transparent));
    border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
    transition: background 0.4s ease, border-color 0.4s ease;
}

.pcc:empty {
    min-height: 300px;
}

.pcc--year {
    --c: #F97316;
    --bar-a: #FDBA74;
    --bar-b: #EA580C;
    --ink: #fdba74;
}

.pcc__heads {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 6px;
    margin: 0 -8px;
}

.pcc__sel {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(50% - 3px);
    border-radius: 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, transparent), color-mix(in srgb, var(--c) 6%, transparent));
    border: 1px solid color-mix(in srgb, var(--c) 42%, transparent);
    transition: transform 0.42s cubic-bezier(0.34, 1.25, 0.5, 1), background 0.4s ease, border-color 0.4s ease;
    pointer-events: none;
}

.pcc__sel::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid color-mix(in srgb, var(--c) 55%, transparent);
}

.pcc--year .pcc__sel {
    transform: translateX(calc(100% + 6px));
}

.pcc__head {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 12px 13px 13px;
    border-radius: 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pcc__head--m {
    --hb-a: #A78BFA;
    --hb-b: #7C3AED;
}

.pcc__head--y {
    --hb-a: #FDBA74;
    --hb-b: #EA580C;
}

.pcc__lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.35s ease;
}

.pcc__head.is-sel .pcc__lbl {
    color: var(--ink);
}

.pcc__val {
    margin-top: 4px;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.pcc__val--long {
    font-size: 20px;
    line-height: 1.27;
}

.pcc__fcl {
    margin-top: 5px;
    font-size: 11.5px;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.5);
}

.pcc__fcl b {
    font-size: 13px;
    font-weight: 800;
    color: #fdba74;
}

.pcc__bar {
    position: relative;
    height: 6px;
    margin-top: 6px;
    border-radius: 99px;
}

.pcc__bar-rest {
    position: absolute;
    inset: 0;
    border-radius: 99px;
    border: 1px dashed rgba(251, 146, 60, 0.7);
    background: repeating-linear-gradient(135deg, rgba(251, 146, 60, 0.22) 0 4px, rgba(251, 146, 60, 0.05) 4px 8px);
}

.pcc__bar-done {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--hb-b), var(--hb-a));
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pcc__prog {
    margin-top: 4px;
    font-size: 11px;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.4);
}

.pcc__head:not(.is-sel) .pcc__val,
.pcc__head:not(.is-sel) .pcc__fcl,
.pcc__head:not(.is-sel) .pcc__prog,
.pcc__head:not(.is-sel) .pcc__bar {
    opacity: 0.55;
    transition: opacity 0.35s ease;
}

.pcc__body {
    position: relative;
    margin-top: 14px;
}

/* _slideSwap's ghost (the old lower part fading out on top) carries .pcc__body too: without this the rule
   above won over .today-card__ghost and put the ghost in the flow — the card doubled its height for the
   hand-over (Sasha 09.10) and the ghost sat 14 px low */
.pcc__body.today-card__ghost {
    position: absolute;
    margin-top: 0;
}

.pcc__graph {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 48px;
}

.pcc__graph--m {
    gap: 2px;
}

.pcc__graph--y {
    gap: 4px;
}

.pcc__slot {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.pcc__slot > i {
    display: block;
    width: 100%;
    min-height: 2px;
    border-radius: 2px 2px 0 0;
}

.pcc__slot > i.pcc__empty {
    height: 2px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.12);
}

.pcc__day {
    background: linear-gradient(180deg, var(--bar-a), var(--bar-b));
}

/* weekend: a paler shade of the same colour (as on the Магазини cards and the 30-day card, not pink) */
.pcc__we {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bar-a) 55%, #fff), color-mix(in srgb, var(--bar-b) 60%, #fff));
}

.pcc__now {
    opacity: 0.6;
}

.pcc__slot > i.pcc__flat {
    border-radius: 0;
}

.pcc__ext {
    border: 1px dashed rgba(251, 146, 60, 0.75);
    border-bottom: 0;
    background: repeating-linear-gradient(135deg, rgba(251, 146, 60, 0.26) 0 3px, rgba(251, 146, 60, 0.06) 3px 6px);
}

.pcc__band {
    position: absolute;
    right: 0;
    bottom: 0;
    border: 1px dashed rgba(251, 146, 60, 0.75);
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    background: repeating-linear-gradient(135deg, rgba(251, 146, 60, 0.2) 0 4px, rgba(251, 146, 60, 0.05) 4px 8px);
}

.pcc__bandlbl {
    position: absolute;
    right: 0;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    color: #fdba74;
}

.pcc__axis {
    position: relative;
    height: 13px;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.32);
}

.pcc__ax-l {
    position: absolute;
    left: 0;
}

.pcc__ax-r {
    position: absolute;
    right: 0;
}

/* year axis: the 12 labels on the 12 columns (4 px gaps), the current month in its colour */
.pcc__axis--y {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 4px;
    text-align: center;
}

.pcc__axis--y span {
    white-space: nowrap;
    overflow: visible;
}

.pcc__axis--y .is-now {
    color: var(--ink);
}

@media (max-width: 400px) {
    .pcc__axis--y .pcc__ax-minor {
        visibility: hidden;
    }
}

.pcc__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

/* the orders row opens the period's order groups (Sasha 11.10), as the order map on the today card */
.pcc__row--tap {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pcc__chev svg {
    transition: transform 0.2s ease;
}

.pcc__row--tap.is-open .pcc__chev svg {
    transform: rotate(180deg);
}

.pcc__grps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.pcc__sub {
    min-width: 0;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.5);
}

.pcc__sub b {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.62);
}

.pcc__head--m .pcc__link {
    --c: #8B5CF6;
    --ink: #c4b5fd;
}

.pcc__head--y .pcc__link {
    --c: #F97316;
    --ink: #fdba74;
}

/* in the box's top-right corner, as «по днях» on the today card (Sasha 11.10; was in the row under the graph) */
.pcc__head .pcc__link {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 1;
}

.pcc__link-ico {
    display: none;
}

.pcc__head--tight .pcc__link-txt {
    display: none;
}

.pcc__head--tight .pcc__link-ico {
    display: block;
}

.pcc__head--tight .pcc__link {
    gap: 1px;
    padding: 4px 6px 4px 8px;
}

.pcc__link {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 8px 3px 9px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
    background: color-mix(in srgb, var(--c) 14%, transparent);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--ink);
    cursor: pointer;
}

.pcc__shops {
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pcc__shops-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    font-size: 12px;
}

.pcc__shops-head span {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
}

.pcc__shops-head small {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
}

.pcc__shops-head b {
    font-weight: 700;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.92);
}

.pcc__shops-bar {
    display: flex;
    gap: 2px;
    margin: 6px 0;
}

.pcc__shops-bar i {
    display: block;
    height: 100%;
}

/* every shop in one row, name over amount (Sasha 10.10: Суми was cut off by a 3-column cap); the columns
   take their own width and spread out, so four long Kyiv names still fit at 384 */
.pcc__shops-cols {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.pcc__shops-cols > div {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

.pcc__shops-cols span {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pcc__shops-cols i {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 2px;
}

.pcc__shops-cols b {
    display: block;
    margin-top: 2px;
    padding-left: 12px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.88);
}

/* first numbers of the session: the card rises, bars grow, the forecast parts draw last */
.pcc--in {
    animation: pccIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pcc--in .pcc__up {
    transform-origin: bottom;
    animation: pccUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(120ms + var(--b, 0) * 14ms);
}

.pcc--in .pcc__fc,
.pcc--in .pcc__bar-rest {
    animation: pccFade 0.45s ease both;
    animation-delay: 600ms;
}

.pcc--in .pcc__bar-done,
.pcc--in .pcc__shops-bar {
    transform-origin: left;
    animation: pccX 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 260ms;
}

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

@keyframes pccUp {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

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

@keyframes pccFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .pcc,
    .pcc__sel,
    .pcc__bar-done {
        transition: none;
    }

    .pcc--in,
    .pcc--in * {
        animation: none;
    }
}

/* sales reports: online only | online + shops (Sasha 11.10), under the report's title. Restored 17.10: the 2.54 geo-card cleanup deleted it by mistake (the switch showed as bare browser buttons) */
.sales-shops-sw {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 3px;
    margin: 4px 16px 6px;
    padding: 3px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.sales-shops-sw.hidden {
    display: none;
}

.sales-shops-sw button {
    height: 30px;
    padding: 0 6px;
    border: 0;
    border-radius: 7px;
    background: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.sales-shops-sw button[aria-selected="true"] {
    background: rgba(34, 211, 238, 0.2);
    color: #fff;
}

.sales-shops-sw button[data-sales-shops="all"][aria-selected="true"],
.sales-shops-sw button[data-sales-shops="shops"][aria-selected="true"] {
    background: rgba(245, 158, 11, 0.22);
}


/* ─── Sales reports: rows (17.10, Sasha picked option B — docs/rework/sales-month-rows-AB.png) ───
   label | rounded bar (+ striped amber forecast block, + white tick = same month last year),
   amount + forecast + change pill, orders · average order under it. app.js _drawSalesRows. */
.sr-list {
    padding: 2px 16px 28px;
}

.sr-group {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 14px 0 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sr-group:first-child {
    margin-top: 8px;
}

.sr-group__k {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--sr-g);
    white-space: nowrap;
}

.sr-group__s {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
    text-align: right;
}

.sr-group__s b {
    color: #fff;
    font-weight: 700;
}

.sr-group__s i {
    font-style: normal;
    font-weight: 700;
    color: #fdba74;
}

.sr-row {
    /* two slim lines on FIXED columns (Sasha 17.10: «way too much vertical space for text», then «feels like
       everything is randomly positioned and jumps around»):
       label           | amount (one width per report) | orders · average order
       weekday / end   | bar (one scale, one width)    | ±N% (fixed column) */
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) 58px;
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
    padding: 6px 0;
}

.sr-lab {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
}

.sr-lab2 {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-row--now .sr-lab {
    color: #c4b5fd;
}

/* weekends keep their colour, softened (rule 5) */
.sr-row--we .sr-lab,
.sr-row--we .sr-lab2 {
    color: rgba(244, 114, 182, 0.9);
}

.sr-l1 {
    grid-column: 2 / 4;
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.sr-l1 .sr-amt {
    flex-shrink: 0;
    min-width: calc(var(--sr-amt-ch, 10) * 1ch + 1.1em);
}

.sr-pcol {
    text-align: right;
    white-space: nowrap;
}

.sr-ord {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.sr-ord .uah-sym {
    color: inherit;
}

.sr-l3 {
    grid-column: 2 / 4;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
}

.sr-note {
    margin: 8px 0 0;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.45);
}

.sr-dot {
    font-style: normal;
    color: rgba(255, 255, 255, 0.3);
}

.sr-track {
    position: relative;
    display: flex;
    height: 16px;
}

.sr-list--days .sr-track {
    height: 12px;
}

.sr-bar,
.sr-fc {
    width: 0;
    transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sr-bar {
    flex-shrink: 0;
    height: 100%;
    border-radius: 6px;
    min-width: 3px;
}

.sr-bar--cut {
    border-radius: 6px 0 0 6px;
}

.sr-fc {
    flex-shrink: 0;
    height: 100%;
    border: 1px dashed rgba(251, 146, 60, 0.75);
    border-left: 0;
    border-radius: 0 6px 6px 0;
    background: repeating-linear-gradient(135deg, rgba(251, 146, 60, 0.26) 0 3px, rgba(251, 146, 60, 0.06) 3px 6px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
}

.sr-fc > span {
    padding: 0 5px;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    color: #fdba74;
    text-shadow: 0 0 3px rgba(10, 10, 20, 0.9);
}

/* The last days of a month the block is too narrow for its number: the number takes its own line under the bar
   and covers nothing (app.js _srFitFc; Sasha 01.11: a chip over the bar hid the month's sales). */
.sr-fcline {
    display: none;
    grid-column: 2 / 4;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
}

.sr-fcline b {
    font-weight: 800;
    color: #fdba74;
}

.sr-row.is-fcout .sr-fcline {
    display: block;
}

.sr-row.is-fcout .sr-fc > span {
    display: none;
}

.sr-tick {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 0 0 1px rgba(10, 10, 20, 0.55);
}

.sr-amt {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sr-amt .uah-sym {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
}

.sr-pill {
    display: inline-block;
    padding: 1px 4px;
    letter-spacing: -0.02em;
    border-radius: 99px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}

.sr-pill em {
    font-style: normal;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}

.sr-pill--up {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.12);
}

.sr-pill--dn {
    color: #fb7185;
    background: rgba(251, 113, 133, 0.12);
}

.sr-sub__usd {
    white-space: nowrap;
}

.sr-sub__rate {
    color: rgba(255, 255, 255, 0.35);
}

/* «Інтернет + магазини» / «Магазини» (17.10): one bar split into its parts, a letter line under it, the legend on top */
.sr-bar--stack {
    display: flex;
    overflow: hidden;
}

.sr-bar--stack > span {
    height: 100%;
    flex-shrink: 0;
}

.sr-bar--stack > span + span {
    box-shadow: inset 1px 0 0 rgba(10, 10, 20, 0.55);
}

.sr-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 8px 0 2px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.sr-legend__i::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 5px;
    border-radius: 2px;
    background: var(--c);
    vertical-align: 0;
}

.sr-legend__i b,
.sr-split__i b {
    margin-right: 4px;
    font-weight: 800;
    color: var(--c);
}

.sr-split {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2px 9px;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    font-variant-numeric: tabular-nums;
}