/* UI token guide:
   1) Use semantic tokens (--color-*) in components.
   2) Keep primitive tokens (--primary-500, etc.) only in theme contract.
   3) Prefer --motion-* and --shadow-* over local hardcoded effects.
   4) Follow docs/UI_GOVERNANCE.md for PR checklist and anti-patterns.
   5) Brand & identity: see docs/VIMA_FLOW_UI.md
*/
/* CSS Variables — светлая тема Stripe по умолчанию (:root); тёмная — [data-theme="dark"] */
:root {
    /* Brand blue (primitive); buttons → --primary-500 → --color-accent-primary */
    --color-blue-500: lab(54.1736% 13.3369 -74.6839);
    /* Tailwind-compatible alpha channel name (for shadow recipes / tooling) */
    --tw-shadow-alpha: 1;
    /* Soft blue tint + optional alpha (Tailwind-style layered shadow base) */
    --color-blue-500-tint-20: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
    --shadow-brand-soft: color-mix(
        in oklab,
        var(--color-blue-500-tint-20) calc(var(--tw-shadow-alpha) * 100%),
        transparent
    );

    /* Primitive colors */
    --primary-500: var(--color-blue-500);
    --primary-600: color-mix(in oklab, var(--color-blue-500) 86%, black);
    /* Светлее/темнее бренда (бывш. ~blue-400 / ~blue-700 Tailwind) — для градиентов и текста */
    --primary-400: color-mix(in oklab, var(--color-blue-500) 52%, white);
    --primary-700: color-mix(in oklab, var(--color-blue-500) 62%, black);
    --success-500: #10b981;
    --danger-500: #fa7474;
    --warning-500: #f59e0b;
    --purple-400: #a78bfa;
    --cyan-400: #22d3ee;

    /* Semantic surfaces (Stripe-like, см. style-guide) */
    --color-bg-page: #f1f5f9;
    --color-bg-surface: #f8fafc;
    --color-bg-elevated: #f8fafc;
    --color-bg-inset: #e2e8f0;
    --color-border-default: #e3e8ee;
    --color-border-strong: #c9d2dc;

    /* Semantic text */
    --color-text-primary: #0a2540;
    --color-text-secondary: #425466;
    --color-text-muted: #697386;
    --color-text-dim: #8898aa;
    --lp-heading-color: #334155;

    /* Semantic interactive */
    --color-accent-primary: var(--primary-500);
    --color-accent-primary-hover: var(--primary-600);
    --color-accent-success: var(--success-500);
    --color-accent-success-hover: #059669;
    --color-accent-danger: var(--danger-500);
    --color-accent-danger-hover: #dc2626;
    --color-accent-warning: var(--warning-500);
    --color-focus-ring: color-mix(in oklab, var(--color-accent-primary) 22%, transparent);
    --color-overlay-backdrop: rgba(10, 37, 64, 0.45);
    --color-layer-primary-soft: color-mix(in oklab, var(--color-accent-primary) 10%, transparent);

    /* External channel accents (keep isolated from core brand) */
    --telegram-500: #0088cc;
    --telegram-400: #229ed9;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(50, 50, 93, 0.06);
    --shadow-md: 0 4px 12px rgba(50, 50, 93, 0.08);
    --shadow-lg: 0 13px 27px -5px rgba(50, 50, 93, 0.12);
    --shadow-hover: 0 6px 16px rgba(50, 50, 93, 0.1);
    --tui-surface-shadow: var(--tui-shadow-medium, 0px 6px 34px 0px rgba(50, 50, 93, 0.08));

    /* Motion */
    --motion-fast: 120ms;
    --motion-base: 180ms;
    --motion-slow: 220ms;

    /* Отступы */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    
    /* Радиусы (Stripe / style-guide: sm 6 · md 8 · lg 12) */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 12px;
    --radius-pill: 999px;
    
    /* Размеры шрифтов (+0.2rem к прежней шкале — общий сдвиг текста в интерфейсе) */
    --font-xs: 1.05rem;
    --font-sm: 1.15rem;
    --font-base: 1.2rem;
    --font-lg: 1.3rem;
    --font-xl: 1.5rem;
    --font-2xl: 2rem;
    --font-3xl: 3rem;

    /* Layout — readable column widths (settings / form-like pages) */
    --layout-settings-max-width: min(50%, 44rem);

    /* Brand compatibility */
    --accent-blue: var(--color-accent-primary);
    --accent-green: var(--color-accent-success);
    --accent-purple: var(--purple-400);
    --accent-orange: var(--color-accent-warning);
    --accent-red: var(--color-accent-danger);
    --accent-cyan: var(--cyan-400);
    --vima-primary: var(--color-accent-primary);
    --vima-secondary: var(--accent-purple);
    --vima-accent: var(--accent-cyan);
    --vima-success: var(--color-accent-success);
    --vima-warning: var(--color-accent-warning);
    --vima-danger: var(--color-accent-danger);

    /* Visual aliases used across legacy styles */
    --bg-body: var(--color-bg-page);
    --bg-secondary: var(--color-bg-surface);
    --glass-bg: var(--color-bg-elevated);
    --glass-border: var(--color-border-default);
    --gradient-bg: var(--color-bg-page);
    --gradient-accent: linear-gradient(135deg, var(--color-accent-primary) 0%, var(--primary-600) 100%);
    --text-secondary: var(--color-text-secondary);
    --text-tertiary: var(--color-text-muted);
    --text-dim: var(--color-text-dim);

    /* Совместимость со старыми переменными */
    --color-primary: var(--color-accent-primary);
    --color-success: var(--color-accent-success);
    --color-danger: var(--color-accent-danger);
    --color-warning: var(--color-accent-warning);
    --text-light: var(--color-text-dim);
    --text-white: #fff;
    --bg-white: var(--glass-bg);
    --bg-light: var(--bg-secondary);
    --border-light: var(--color-border-default);
    --spacing-xs: var(--space-xs);
    --spacing-sm: var(--space-sm);
    --spacing-md: var(--space-md);
    --spacing-lg: var(--space-lg);
    --spacing-xl: var(--space-xl);
    --radius-2xl: var(--radius-md);

    /* Landing economics title accent — emerald→cyan “profit/money”, not brand primary */
    --lp-accent-economics-start: #047857;
    --lp-accent-economics-mid: var(--color-accent-success);
    --lp-accent-economics-end: #0891b2;
    --lp-accent-economics-shimmer: #fbbf24;
}

/* Тёмная тема — явное переключение через data-theme="dark" */
[data-theme="dark"] {
    --color-bg-page: #0f172a;
    --color-bg-surface: #1e293b;
    --color-bg-elevated: rgba(30, 41, 59, 0.95);
    --color-bg-inset: #1e293b;
    --color-border-default: rgba(148, 163, 184, 0.24);
    --color-border-strong: rgba(148, 163, 184, 0.36);

    --color-text-primary: #f1f5f9;
    --color-text-secondary: #e2e8f0;
    --color-text-muted: #cbd5e1;
    --color-text-dim: #94a3b8;

    --color-focus-ring: color-mix(in oklab, var(--color-accent-primary) 28%, transparent);
    --color-overlay-backdrop: rgba(0, 0, 0, 0.5);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.16);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.22);
    --shadow-hover: 0 10px 22px rgba(0, 0, 0, 0.18);
    --tui-surface-shadow: var(--tui-shadow-medium, 0px 6px 34px 0px #0000001f);

    --bg-body: var(--color-bg-page);
    --bg-secondary: var(--color-bg-surface);
    --glass-bg: var(--color-bg-elevated);
    --glass-border: var(--color-border-default);
    --gradient-bg: linear-gradient(180deg, var(--color-bg-page) 0%, var(--color-bg-surface) 100%);
    --text-secondary: var(--color-text-secondary);
    --text-tertiary: var(--color-text-muted);
    --text-dim: var(--color-text-dim);
    --text-light: var(--color-text-dim);
    --bg-white: var(--glass-bg);
    --bg-light: var(--bg-secondary);
    --border-light: var(--color-border-default);

    --lp-accent-economics-start: #6ee7b7;
    --lp-accent-economics-mid: #34d399;
    --lp-accent-economics-end: #22d3ee;
    --lp-accent-economics-shimmer: #fde68a;
    --lp-heading-color: #dbe4ef;
}

/* Landing v3: clean + motion-lite */
.landing-main-shell--content {
    min-height: auto;
}

.lp-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-inline: clamp(1rem, 3.5vw, 2.5rem);
    box-sizing: border-box;
}

.lp-screen:not(.lp-screen--hero) .lp-container {
    max-width: 1240px;
    margin: 0 auto;
}

.lp-hero,
.lp-value,
.lp-steps,
.lp-pricing {
    padding: clamp(36px, 5vw, 64px) 0;
}

.lp-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(20px, 4vw, 40px);
    align-items: center;
}

.lp-hero__media {
    display: flex;
    justify-content: center;
}

.lp-eyebrow {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, 0.2);
    background: rgba(37, 99, 235, 0.06);
    color: var(--primary-700);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lp-title {
    margin: 14px 0 12px;
    font-family: "Golos Text", "Unbounded", "Onest", system-ui, sans-serif;
    font-size: clamp(1.7rem, 3.2vw, 2.75rem);
    line-height: 1.16;
    letter-spacing: -0.02em;
    color: var(--lp-heading-color);
}

.lp-lead {
    margin: 0;
    color: #475569;
    line-height: 1.6;
    font-size: 1.05rem;
    max-width: 54ch;
}

.lp-lead strong {
    font-weight: 600;
    color: var(--color-text-primary);
}

.lp-hero__actions {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Совпадает с фоном demo_table_animation.php — без тёмного кольца вокруг iframe */
.lp-video-shell {
    width: min(100%, 420px);
    aspect-ratio: 3 / 4;
    border-radius: 18px;
    border: none;
    background: #eceff3;
    box-shadow: none;
    overflow: hidden;
}

.lp-video-poster {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    padding: clamp(18px, 3vw, 28px);
    color: #0f172a;
    background:
        radial-gradient(circle at 90% 15%, color-mix(in oklab, var(--color-accent-primary) 12%, transparent), transparent 38%),
        linear-gradient(165deg, #f8fafc, #eceff3);
}

.lp-video-poster__title {
    margin: 0;
    font-weight: 800;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
}

.lp-video-poster__text {
    margin: 0;
    max-width: 42ch;
    color: #475569;
    line-height: 1.45;
    font-size: 0.92rem;
}

.lp-video-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #eceff3;
}

[data-theme="dark"] .lp-video-shell {
    background: #1e293b;
    border: 1px solid rgba(71, 85, 105, 0.45);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .lp-video-poster {
    color: #f1f5f9;
    background:
        radial-gradient(circle at 90% 15%, color-mix(in oklab, var(--color-accent-primary) 20%, transparent), transparent 38%),
        linear-gradient(165deg, #1e293b, #0f172a);
}

[data-theme="dark"] .lp-video-poster__text {
    color: #94a3b8;
}

[data-theme="dark"] .lp-video-frame {
    background: #1e293b;
}

.lp-value {
    padding-top: 10px;
}

.lp-value__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.lp-card {
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(255, 255, 255, 0.88);
    padding: 18px;
}

.lp-card h2 {
    margin: 0 0 8px;
    font-size: 1.02rem;
    color: var(--lp-heading-color);
}

.lp-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.5;
    font-size: 0.9rem;
}

.lp-section-title {
    margin: 0 0 16px;
    font-family: "Golos Text", "Unbounded", "Onest", system-ui, sans-serif;
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    color: var(--lp-heading-color);
}

.lp-steps__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.lp-steps__grid article {
    border-radius: 14px;
    background: rgba(241, 245, 249, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.2);
    padding: 16px;
}

.lp-steps__grid span {
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--primary-600);
}

.lp-steps__grid p {
    margin: 8px 0 0;
    color: #334155;
}

.lp-pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.lp-price-card {
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: #ffffff;
    padding: 18px;
}

.lp-price-card--featured {
    border-color: rgba(37, 99, 235, 0.42);
    box-shadow: 0 14px 38px rgba(37, 99, 235, 0.12);
}

.lp-price-card h3 {
    margin: 0;
    font-size: 1rem;
    color: #0f172a;
}

.lp-price-card p {
    margin: 8px 0 12px;
    color: #64748b;
    min-height: 2.7em;
}

.lp-price-card strong {
    color: var(--primary-700);
}

/* Лендинг: один тариф (фокус + якорь «кофе» + опциональное фото) */
.lp-pricing--single {
    padding-bottom: clamp(44px, 6vw, 72px);
}

.lp-price-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 380px);
    gap: clamp(24px, 4.5vw, 44px);
    align-items: start;
}

.lp-price-hero__intro .lp-section-title {
    margin-bottom: 12px;
}

.lp-price-hero__lead {
    margin: 0 0 18px;
    color: #475569;
    line-height: 1.55;
    max-width: 52ch;
    font-size: clamp(0.94rem, 1.1vw, 1.02rem);
}

.lp-price-hero__bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.lp-price-hero__bullets li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #334155;
    font-size: 0.94rem;
    line-height: 1.45;
}

.lp-price-hero__bullets .fa-check {
    margin-top: 3px;
    color: #16a34a;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.lp-price-hero__card {
    border-radius: 20px;
    border: 1px solid rgba(37, 99, 235, 0.32);
    background: linear-gradient(165deg, #ffffff 0%, #f1f5f9 55%, #ffffff 100%);
    box-shadow:
        0 4px 0 rgba(37, 99, 235, 0.06),
        0 22px 56px rgba(15, 23, 42, 0.08);
    padding: clamp(20px, 3vw, 28px);
    position: relative;
    overflow: hidden;
}

.lp-price-hero__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500), #6366f1, #8b5cf6);
    border-radius: 20px 20px 0 0;
}

.lp-price-hero__badge {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--primary-700);
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 999px;
    padding: 5px 11px;
    margin-bottom: 10px;
}

.lp-price-hero__name {
    margin: 0;
    font-family: "Unbounded", "Onest", system-ui, sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.lp-price-hero__price {
    margin: 14px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
}

.lp-price-hero__amount {
    font-family: "Unbounded", "Onest", system-ui, sans-serif;
    font-size: clamp(1.95rem, 4.2vw, 2.6rem);
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.03em;
    line-height: 1;
}

.lp-price-hero__period {
    font-size: 0.92rem;
    color: #64748b;
    font-weight: 600;
}

.lp-price-hero__anchor {
    margin: 14px 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #64748b;
    display: flex;
    gap: 9px;
    align-items: flex-start;
}

.lp-price-hero__anchor .fa-mug-hot {
    color: #c2410c;
    margin-top: 2px;
    flex-shrink: 0;
    opacity: 0.92;
}

.lp-price-hero__figure {
    margin: 16px 0 0;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(241, 245, 249, 0.6);
}

.lp-price-hero__photo {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.lp-price-hero__cta {
    margin-top: 18px;
}

.lp-price-hero__btn {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.lp-price-hero__note {
    margin: 12px 0 0;
    font-size: 0.7rem;
    line-height: 1.5;
    color: #94a3b8;
}

[data-theme="dark"] .lp-title,
[data-theme="dark"] .lp-section-title,
[data-theme="dark"] .lp-card h2,
[data-theme="dark"] .lp-price-card h3 {
    color: var(--lp-heading-color);
}

[data-theme="dark"] .lp-steps__grid p {
    color: #f1f5f9;
}
}

[data-theme="dark"] .lp-lead,
[data-theme="dark"] .lp-card p,
[data-theme="dark"] .lp-price-card p {
    color: #94a3b8;
}

[data-theme="dark"] .lp-card,
[data-theme="dark"] .lp-price-card,
[data-theme="dark"] .lp-steps__grid article {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(71, 85, 105, 0.45);
}

[data-theme="dark"] .lp-price-hero__lead,
[data-theme="dark"] .lp-price-hero__anchor,
[data-theme="dark"] .lp-price-hero__period {
    color: #94a3b8;
}

[data-theme="dark"] .lp-price-hero__bullets li {
    color: #cbd5e1;
}

[data-theme="dark"] .lp-price-hero__name,
[data-theme="dark"] .lp-price-hero__amount {
    color: #f8fafc;
}

[data-theme="dark"] .lp-price-hero__card {
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.88) 100%);
    border-color: color-mix(in oklab, var(--primary-400) 35%, transparent);
    box-shadow:
        0 4px 0 color-mix(in oklab, var(--color-accent-primary) 8%, transparent),
        0 22px 56px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .lp-price-hero__badge {
    color: #93c5fd;
    background: color-mix(in oklab, var(--color-accent-primary) 15%, transparent);
    border-color: color-mix(in oklab, var(--primary-400) 28%, transparent);
}

[data-theme="dark"] .lp-price-hero__figure {
    border-color: rgba(71, 85, 105, 0.55);
    background: rgba(15, 23, 42, 0.5);
}

[data-theme="dark"] .lp-price-hero__note {
    color: #64748b;
}

/* Landing v4: story screens + illustrations */
.landing-main-shell--story {
    scroll-snap-type: y proximity;
    overflow: visible;
}

.lp-screen {
    padding: clamp(64px, 10vh, 120px) 0;
    scroll-snap-align: start;
}

.lp-screen--hero {
    position: relative;
    z-index: 1;
    overflow: visible;
    padding-top: clamp(20px, 3.5vh, 40px);
    padding-bottom: 0;
}

.lp-screen .lp-illus-photo,
.lp-screen .lp-illus-turnovers__col,
.lp-screen .lp-illus-waterfall,
.lp-screen .lp-illus-parser__ritual,
.lp-screen .lp-illus-parser__compare,
.lp-screen .lp-illus-control,
.lp-screen .lp-illus-control__focus,
.lp-screen .lp-illus-trial {
    border: none;
    box-shadow: none;
}

[data-theme="dark"] .lp-screen .lp-illus-photo {
    box-shadow: none;
}

/* Data-wave: фон заголовков hero (h1 + h2) */
.lp-hero-wave {
    pointer-events: none;
}

.lp-hero-wave--copy {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
    opacity: 0.9;
}

.lp-hero-wave__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.lp-hero-wave__fibers {
    opacity: 1;
    transform-origin: 50% 50%;
    will-change: transform;
}

.lp-hero-wave__fiber {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    shape-rendering: geometricPrecision;
    vector-effect: non-scaling-stroke;
}

.lp-hero-wave__core .lp-hero-wave__fiber {
    stroke: #f8fafc;
}

.lp-hero-wave__fiber--glow {
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (prefers-reduced-motion: no-preference) {
    .lp-hero-wave__fibers {
        animation: lp-wave-drift 16s ease-in-out infinite alternate;
    }
}

@keyframes lp-wave-drift {
    from {
        transform: translate3d(0, 0, 0) scale(1, 1);
    }
    to {
        transform: translate3d(0, -1.2%, 0) scale(1.006, 1.018);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-hero-wave__fibers {
        animation: none;
    }
}

/* Hero: Keynote 2026 — tight copy, ambient stage, CTA after media */
.lp-hero-keynote {
    --lp-keynote-glow-a: color-mix(in oklab, var(--color-accent-primary) 22%, transparent);
    --lp-keynote-glow-b: color-mix(in oklab, var(--color-accent-success) 16%, transparent);
    --lp-keynote-fade: var(--color-bg-page);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
}

.lp-hero-keynote__copy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    width: 100%;
    max-width: none;
    margin-inline: auto;
    padding-bottom: clamp(0.75rem, 2vw, 1.25rem);
}

.lp-hero-keynote__eyebrow {
    align-self: center;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.lp-hero-keynote__titles {
    position: relative;
    isolation: isolate;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: clamp(0.85rem, 2.5vw, 1.5rem) 0 clamp(0.65rem, 1.8vw, 1rem);
    overflow: visible;
}

.lp-hero-keynote__titles::after {
    content: "";
    position: absolute;
    inset: 8% 0;
    z-index: 0;
    border-radius: 0;
    background: radial-gradient(
        ellipse 80% 68% at 50% 52%,
        color-mix(in oklab, var(--color-bg-page) 28%, transparent),
        transparent 72%
    );
    pointer-events: none;
}

.lp-hero-keynote__titles .lp-hero-keynote__headline,
.lp-hero-keynote__titles .lp-hero-keynote__title {
    position: relative;
    z-index: 1;
}

/* Глобальные h1/h2 { display:flex } из app-стилей ломают text-align на лендинге */
.lp-screen--hero h1.lp-hero-keynote__headline {
    display: block;
    width: 100%;
    margin: 0.45rem 0 0.35rem;
    padding: 0;
    text-align: center;
    color: var(--color-text-secondary);
    background: none;
    -webkit-text-fill-color: unset;
    font-family: "Golos Text", "Unbounded", "Onest", system-ui, sans-serif;
    font-size: clamp(1.05rem, 2.2vw, 1.45rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    gap: 0;
}

.lp-screen--hero h2.lp-hero-keynote__title {
    display: block;
    width: 100%;
    margin: 0 0 0.65rem;
    padding: 0;
    text-align: center;
    color: var(--lp-heading-color);
    background: none;
    -webkit-text-fill-color: unset;
    font-family: "Golos Text", "Unbounded", "Onest", system-ui, sans-serif;
    font-size: clamp(2rem, 4.6vw, 3.15rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.035em;
    gap: 0;
}

.lp-hero-keynote__title-rotator {
    --lp-hero-line-h: 1.14em;
    display: block;
    height: var(--lp-hero-line-h);
    overflow: hidden;
    margin-inline: auto;
    max-width: 100%;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.lp-hero-keynote__title-track {
    --lp-hero-index: 0;
    display: flex;
    flex-direction: column;
    transform: translate3d(0, calc(var(--lp-hero-index) * -1 * var(--lp-hero-line-h)), 0);
    transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.lp-hero-keynote__title-track.is-instant {
    transition: none;
}

.lp-hero-keynote__title-line {
    flex: 0 0 var(--lp-hero-line-h);
    display: block;
    height: var(--lp-hero-line-h);
    line-height: var(--lp-hero-line-h);
    padding-inline: 0.5rem;
    text-align: center;
    white-space: nowrap;
    color: var(--color-text-dim);
    opacity: 0.38;
    filter: blur(0.5px);
    transform: scale(0.98);
    transition:
        color 0.5s ease,
        opacity 0.5s ease,
        filter 0.5s ease,
        transform 0.5s ease;
}

.lp-hero-keynote__title-line.is-active {
    color: var(--lp-heading-color);
    opacity: 1;
    filter: none;
    transform: scale(1);
}

.lp-hero-keynote__accent {
    background: linear-gradient(
        120deg,
        var(--color-accent-primary) 0%,
        color-mix(in oklab, var(--cyan-400) 72%, var(--color-accent-primary)) 55%,
        var(--color-accent-success) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.lp-hero-keynote__title-line:not(.is-active) .lp-hero-keynote__accent {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: inherit;
    -webkit-text-fill-color: inherit;
}

.lp-hero-keynote__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.35rem 0;
    margin: 0.55rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-text-dim);
}

.lp-hero-keynote__trust-item {
    display: inline-flex;
    align-items: center;
}

.lp-hero-keynote__trust-item + .lp-hero-keynote__trust-item::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 0.55rem;
    border-radius: 50%;
    background: color-mix(in oklab, var(--color-text-dim) 55%, transparent);
    vertical-align: middle;
}

.lp-hero-keynote__showcase {
    position: relative;
    width: 80%;
    max-width: 80%;
    margin-inline: auto;
    padding-top: clamp(0.25rem, 1vw, 0.5rem);
}

.lp-hero-keynote__showcase::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 18%;
    bottom: -6%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 70% 55% at 50% 42%, var(--lp-keynote-glow-a), transparent 72%),
        radial-gradient(ellipse 55% 40% at 62% 58%, var(--lp-keynote-glow-b), transparent 68%);
    filter: blur(42px);
    opacity: 0.9;
    pointer-events: none;
    z-index: 0;
}

.lp-hero-keynote__showcase::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: clamp(3rem, 12vw, 6rem);
    background: linear-gradient(to bottom, transparent, var(--lp-keynote-fade));
    pointer-events: none;
    z-index: 2;
}

.lp-hero-keynote__stage {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    width: 100%;
    border: none;
    box-shadow: none;
    background: none;
    overflow: visible;
}

.lp-hero-keynote__img {
    display: block;
    width: 100%;
    height: auto;
    margin-inline: auto;
    border-radius: clamp(6px, 0.8vw, 10px);
    transform: translateZ(0);
}

.lp-hero-keynote__actions {
    position: relative;
    z-index: 3;
    margin-top: clamp(0.85rem, 2vw, 1.25rem);
    width: 100%;
    display: flex;
    justify-content: center;
}

.lp-hero-keynote__actions .lp-cta {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

[data-theme="dark"] .lp-hero-keynote {
    --lp-keynote-glow-a: color-mix(in oklab, var(--color-accent-primary) 28%, transparent);
    --lp-keynote-glow-b: color-mix(in oklab, var(--cyan-400) 18%, transparent);
    --lp-keynote-fade: var(--color-bg-page);
}

[data-theme="dark"] .lp-hero-keynote__eyebrow {
    color: var(--color-text-dim);
}

[data-theme="dark"] .lp-hero-wave--copy {
    opacity: 0.96;
}

[data-theme="dark"] .lp-hero-wave__core .lp-hero-wave__fiber {
    stroke: #ffffff;
}

[data-theme="dark"] .lp-hero-keynote__titles::after {
    background: radial-gradient(
        ellipse 72% 68% at 50% 52%,
        color-mix(in oklab, var(--color-bg-page) 38%, transparent),
        transparent 72%
    );
}

[data-theme="dark"] .lp-hero-keynote__title-line.is-active .lp-hero-keynote__accent {
    background: linear-gradient(
        120deg,
        color-mix(in oklab, var(--primary-400) 90%, white) 0%,
        var(--cyan-400) 48%,
        var(--color-accent-success) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .lp-hero-keynote__title-track {
        transition: none;
    }

    .lp-hero-keynote__title-line {
        transition: none;
    }
}

@media (max-width: 520px) {
    .lp-screen--hero h1.lp-hero-keynote__headline {
        font-size: clamp(0.95rem, 4vw, 1.15rem);
    }

    .lp-screen--hero h2.lp-hero-keynote__title {
        font-size: clamp(1.55rem, 5.8vw, 2rem);
    }

    .lp-hero-keynote__title-rotator {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .lp-hero-keynote__title-rotator::-webkit-scrollbar {
        display: none;
    }

    .lp-hero-keynote__showcase {
        width: 92%;
        max-width: 92%;
    }

    .lp-hero-keynote__trust {
        flex-direction: column;
        gap: 0.15rem;
        font-size: 0.74rem;
    }

    .lp-hero-keynote__trust-item + .lp-hero-keynote__trust-item::before {
        display: none;
    }
}

.lp-screen--compact {
    padding: clamp(32px, 5vh, 56px) 0;
}

/* ==========================================================================
   Bento Grid Layout (Qwen.ai Style)
   ========================================================================== */

.lp-bento {
    padding: clamp(64px, 10vh, 120px) 0;
}

.lp-bento__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: stretch;
}

.lp-bento-card {
    background: #f8fafc;
    border-radius: 32px;
    border: 1px solid #e2e8f0;
    padding: clamp(24px, 4vw, 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: transform var(--motion-base) ease, box-shadow var(--motion-base) ease;
}

.lp-bento-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.08);
}

.lp-bento-card--full {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(24px, 4vw, 40px);
}

.lp-bento-economics-block {
    grid-column: 1 / -1;
}

.lp-bento-card--economics {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: visible;
}

.lp-bento-card__column {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
}

.lp-bento-card--economics .lp-bento-card__title {
    margin-bottom: 16px;
}

.lp-bento-card--economics .lp-bento-card__lead {
    margin-bottom: clamp(20px, 3vw, 28px);
}

.lp-bento-card--economics .lp-bento-demo {
    width: 100%;
}

.lp-bento-card--economics .lp-bento-demo-sticky {
    background: transparent;
}

.lp-bento-card--economics .lp-bento-demo-viewport {
    border-radius: 16px;
    border-color: color-mix(in oklab, var(--color-border-default) 75%, transparent);
    box-shadow: none;
}

.lp-bento-card--economics .lp-bento-demo-sticky .lp-cta {
    margin-top: clamp(20px, 3vw, 28px);
}

@keyframes lp-economics-gradient-shift {
    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.lp-bento-card__title-gradient {
    background: linear-gradient(
        120deg,
        var(--lp-accent-economics-start) 0%,
        var(--lp-accent-economics-mid) 35%,
        var(--lp-accent-economics-end) 70%,
        var(--lp-accent-economics-shimmer) 100%
    );
    background-size: 220% 220%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: lp-economics-gradient-shift 9s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .lp-bento-card__title-gradient {
        animation: none;
        background-size: 100% 100%;
    }
}

/* Demo aggregated table — fixed viewport, page-scroll row reveal */
.lp-bento-demo {
    position: relative;
    width: 100%;
    margin: 0;
}

.lp-bento-demo-scroll {
    position: relative;
    width: 100%;
}

.lp-bento-demo-sticky {
    position: sticky;
    top: var(--lp-demo-sticky-top, 24px);
    z-index: 2;
    background: var(--color-bg-page, #ffffff);
}

.lp-bento-demo-viewport {
    position: relative;
    height: clamp(480px, 63vh, 660px);
    overflow: hidden;
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-elevated);
    box-shadow: var(--shadow-sm);
}

.lp-bento-demo-viewport::before,
.lp-bento-demo-viewport::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 28px;
    pointer-events: none;
    z-index: 3;
}

.lp-bento-demo-viewport::before {
    top: 0;
    background: linear-gradient(
        to bottom,
        var(--color-bg-elevated) 0%,
        color-mix(in oklab, var(--color-bg-elevated) 40%, transparent) 55%,
        transparent 100%
    );
}

.lp-bento-demo-viewport::after {
    bottom: 0;
    background: linear-gradient(
        to top,
        var(--color-bg-elevated) 0%,
        color-mix(in oklab, var(--color-bg-elevated) 40%, transparent) 55%,
        transparent 100%
    );
}

.lp-bento-demo-table-wrap.table-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 0;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.lp-bento-demo-head {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    background: var(--color-bg-elevated);
}

.lp-bento-demo-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.lp-bento-demo-track {
    will-change: transform;
}

.lp-bento-demo-table {
    table-layout: fixed;
    min-width: 1280px;
    margin: 0;
}

.lp-bento-demo-table thead th,
.lp-bento-demo-table tbody td {
    padding: 10px 10px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lp-bento-demo-table tbody tr {
    height: var(--lp-demo-table-row-height, 40px);
}

.lp-bento-demo-table thead th[data-column="posting"],
.lp-bento-demo-table tbody td[data-column="posting"] {
    width: 11%;
}

.lp-bento-demo-table thead th[data-column="offer_id"],
.lp-bento-demo-table tbody td[data-column="offer_id"] {
    width: 12%;
}

.lp-bento-demo-table thead th[data-column="sales"],
.lp-bento-demo-table tbody td[data-column="sales"],
.lp-bento-demo-table thead th[data-column="commission"],
.lp-bento-demo-table tbody td[data-column="commission"],
.lp-bento-demo-table thead th[data-column="acquiring"],
.lp-bento-demo-table tbody td[data-column="acquiring"],
.lp-bento-demo-table thead th[data-column="delivery"],
.lp-bento-demo-table tbody td[data-column="delivery"],
.lp-bento-demo-table thead th[data-column="agents"],
.lp-bento-demo-table tbody td[data-column="agents"],
.lp-bento-demo-table thead th[data-column="advertising"],
.lp-bento-demo-table tbody td[data-column="advertising"],
.lp-bento-demo-table thead th[data-column="other_charges"],
.lp-bento-demo-table tbody td[data-column="other_charges"],
.lp-bento-demo-table thead th[data-column="profit"],
.lp-bento-demo-table tbody td[data-column="profit"] {
    width: 6%;
    text-align: right;
}

.lp-bento-demo-table thead th[data-column="quantity"],
.lp-bento-demo-table tbody td[data-column="quantity"] {
    width: 4%;
    text-align: center;
}

.lp-bento-demo-table thead th[data-column="status"],
.lp-bento-demo-table tbody td[data-column="status"] {
    width: 9%;
}

.lp-bento-demo-table thead th[data-column="date"],
.lp-bento-demo-table tbody td[data-column="date"] {
    width: 9%;
}

.lp-bento-demo-table tbody tr:nth-child(even) {
    background: color-mix(in oklab, var(--color-bg-surface) 60%, transparent);
}

.lp-bento-demo-table tbody tr:hover {
    background: color-mix(in oklab, var(--primary-500) 6%, var(--color-bg-elevated));
}

@media (prefers-reduced-motion: reduce) {
    .lp-bento-demo-scroll {
        height: auto !important;
    }

    .lp-bento-demo-sticky {
        position: relative;
        top: auto;
    }

    .lp-bento-demo-track {
        transform: none !important;
        will-change: auto;
    }
}

.lp-bento-card__copy {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.lp-bento-card--full .lp-bento-card__copy {
    flex: 0 1 520px;
}

.lp-bento-card__title {
    font-family: "Golos Text", "Unbounded", "Onest", sans-serif;
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--lp-heading-color);
    margin: 0 0 16px;
}

.lp-bento-card__lead {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #475569;
    margin: 0;
}

.lp-bento-card__lead strong {
    font-weight: 600;
    color: var(--color-text-primary);
}

.lp-bento-card__visual {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.lp-bento-card__visual .lp-illus {
    width: 100%;
    max-width: 100%;
}

.lp-bento-card__visual .lp-illus-photo {
    width: 100%;
    margin: 0;
    box-shadow: var(--shadow-md);
}

/* Half cards — equal row height via grid stretch + reserved title zone */
.lp-bento-card--half {
    height: 100%;
}

.lp-bento-card--half .lp-bento-card__title {
    min-height: 2lh;
}

.lp-bento-card--half .lp-bento-card__visual {
    margin-top: auto;
    padding-top: 24px;
    margin-bottom: calc(clamp(24px, 4vw, 40px) * -1); /* bleed bottom */
    align-items: flex-end;
}

.lp-bento-card--full .lp-bento-card__visual {
    margin-right: calc(clamp(24px, 4vw, 40px) * -1); /* bleed right */
}

[data-theme="dark"] .lp-bento-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .lp-bento-card__title {
    color: var(--lp-heading-color);
}

[data-theme="dark"] .lp-bento-card__lead {
    color: #94a3b8;
}

[data-theme="dark"] .lp-bento-card:hover {
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .lp-bento-card--economics .lp-bento-demo-viewport {
    background: color-mix(in oklab, var(--color-bg-elevated) 88%, #0f172a);
    border-color: #334155;
}

@media (max-width: 960px) {
    .lp-bento__grid {
        grid-template-columns: 1fr;
    }
    .lp-bento-card--full {
        flex-direction: column;
        align-items: flex-start;
    }
    .lp-bento-card--full .lp-bento-card__copy {
        flex: 0 0 auto;
    }
    .lp-bento-card--full .lp-bento-card__visual {
        margin-right: 0;
        margin-bottom: calc(clamp(24px, 4vw, 40px) * -1);
        margin-top: 24px;
        width: 100%;
    }
}

.lp-screen--pricing {
    padding-bottom: clamp(56px, 8vh, 96px);
}

.lp-screen__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
}

.lp-screen__grid--reverse .lp-screen__copy {
    order: 2;
}

.lp-screen__grid--reverse .lp-screen__visual {
    order: 1;
    justify-content: flex-start;
}

.lp-screen__grid--center {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
}

.lp-screen__copy--center .lp-lead {
    margin-left: auto;
    margin-right: auto;
}

.lp-screen__visual {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 280px;
}

/* lp-screen 1–5: иллюстрации ~×2 */
.lp-screen:not(.lp-screen--hero):not(.lp-screen--pricing) .lp-screen__visual {
    min-height: 560px;
    display: none; /* We moved these to bento cards */
}

.lp-screen:not(.lp-screen--hero):not(.lp-screen--pricing) .lp-illus-photo {
    width: min(100%, 1040px);
}

.lp-screen:not(.lp-screen--hero):not(.lp-screen--pricing) .lp-illus {
    width: min(100%, 800px);
}

.lp-screen:not(.lp-screen--hero):not(.lp-screen--pricing) .lp-illus-waterfall {
    width: min(100%, 640px);
}

.lp-screen:not(.lp-screen--hero):not(.lp-screen--pricing) .lp-illus-parser {
    width: min(100%, 840px);
}

.lp-screen:not(.lp-screen--hero):not(.lp-screen--pricing) .lp-illus-control {
    width: min(100%, 720px);
    height: 440px;
}

.lp-screen:not(.lp-screen--hero):not(.lp-screen--pricing) .lp-illus-platforms {
    width: min(100%, 840px);
}

.lp-screen__login {
    margin-top: 8px;
}

.lp-tags {
    margin: 0 0 16px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: var(--color-text-muted);
}

.lp-micro {
    margin: -6px 0 14px;
    font-size: 0.82rem;
    color: var(--color-text-dim);
}

.lp-cta {
    margin-top: 18px;
}

.btn.btn-primary.lp-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: min(100%, 320px);
    min-height: 3.25rem;
    padding: 0.95rem 2.15rem;
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    background: linear-gradient(
        135deg,
        color-mix(in oklab, var(--color-accent-primary) 78%, var(--primary-600)) 0%,
        var(--color-accent-primary) 54%,
        var(--primary-600) 100%
    );
    box-shadow:
        0 4px 16px color-mix(in oklab, var(--color-accent-primary) 36%, transparent),
        0 1px 2px color-mix(in oklab, var(--primary-600) 22%, transparent);
}

.btn.btn-primary.lp-cta__btn:hover {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(
        135deg,
        color-mix(in oklab, var(--color-accent-primary) 84%, var(--primary-600)) 0%,
        color-mix(in oklab, var(--color-accent-primary) 96%, white) 52%,
        color-mix(in oklab, var(--primary-600) 94%, black) 100%
    );
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px color-mix(in oklab, var(--color-accent-primary) 44%, transparent),
        0 2px 8px color-mix(in oklab, var(--primary-600) 26%, transparent);
}

.btn.btn-primary.lp-cta__btn:active {
    transform: translateY(0);
}

.btn.btn-primary.lp-cta__btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px var(--color-focus-ring),
        0 4px 16px color-mix(in oklab, var(--color-accent-primary) 36%, transparent);
}

.lp-cta__micro {
    margin: 10px 0 0;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    opacity: 0.85;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lp-cta__micro::before {
    content: '\f3ed'; /* shield-alt icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.85rem;
    color: var(--color-accent-success);
    opacity: 0.8;
}

.lp-cta--pricing {
    margin-top: 20px;
}

.lp-screen__coffee {
    margin: 12px 0 0;
}

/* FAQ Section */
.lp-faq-title {
    text-align: center !important;
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
    width: 100%;
    display: block;
}

.lp-faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.lp-faq-item.info-block-v2 {
    margin-top: 0;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-md);
    transition: transform var(--motion-base) ease, box-shadow var(--motion-base) ease, border-color var(--motion-base) ease;
}

.lp-faq-item.info-block-v2:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent-primary);
}

.lp-faq-item__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0.75rem;
}

.lp-faq-item__icon {
    margin-top: 3px;
    color: var(--color-accent-primary);
    font-size: 1.1rem;
}

.lp-faq-item h3 {
    margin: 0;
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--color-text-primary);
    line-height: 1.4;
}

.lp-faq-item p {
    margin: 0 0 0 30px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    font-size: 1rem;
}

@media (max-width: 600px) {
    .lp-faq-item p {
        margin-left: 0;
        margin-top: 10px;
    }
}

/* Landing photos (AI illustrations) */
.lp-illus-photo {
    width: min(100%, 520px);
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-md);
}

.lp-illus-photo__img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}

[data-theme="dark"] .lp-illus-photo {
    border-color: var(--color-border-default);
    box-shadow: var(--shadow-lg);
}

/* Illustration: two turnovers (CSS fallback) */
.lp-illus {
    width: min(100%, 400px);
}

.lp-illus-turnovers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.lp-illus-turnovers__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: clamp(16px, 2.5vw, 22px);
    border-radius: 16px;
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-sm);
}

.lp-illus-turnovers__label,
.lp-illus-turnovers__hint {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-dim);
}

.lp-illus-turnovers__turnover {
    font-family: "Unbounded", "Onest", system-ui, sans-serif;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
}

.lp-illus-turnovers__result {
    font-family: "Unbounded", "Onest", system-ui, sans-serif;
    font-size: clamp(1.1rem, 2.2vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.lp-illus-turnovers__result--pos {
    color: var(--color-text-success, #16a34a);
}

.lp-illus-turnovers__result--neg {
    color: var(--color-text-danger, #dc2626);
}

/* Illustration: order waterfall */
.lp-illus-waterfall {
    width: min(100%, 320px);
    padding: 20px;
    border-radius: 18px;
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-md);
}

.lp-illus-waterfall__head {
    text-align: center;
    margin-bottom: 16px;
}

.lp-illus-waterfall__revenue {
    display: block;
    font-family: "Unbounded", "Onest", system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.lp-illus-waterfall__sub {
    font-size: 0.72rem;
    color: var(--color-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lp-illus-waterfall__cuts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lp-illus-waterfall__cut {
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    background: color-mix(in oklab, var(--color-accent-primary) 18%, var(--color-bg-elevated));
    transition: height 0.45s var(--motion-ease-out, ease-out);
}

.lp-illus-waterfall.is-animated .lp-illus-waterfall__cut[data-cut="commission"] {
    height: 28px;
    transition-delay: 0.1s;
}

.lp-illus-waterfall.is-animated .lp-illus-waterfall__cut[data-cut="logistics"] {
    height: 28px;
    transition-delay: 0.35s;
}

.lp-illus-waterfall.is-animated .lp-illus-waterfall__cut[data-cut="ads"] {
    height: 28px;
    transition-delay: 0.6s;
}

.lp-illus-waterfall.is-animated .lp-illus-waterfall__cut[data-cut="cost"] {
    height: 28px;
    transition-delay: 0.85s;
}

.lp-illus-waterfall__cut span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: lowercase;
    color: var(--color-text-secondary);
}

.lp-illus-waterfall__remain {
    margin-top: 14px;
    text-align: center;
    font-family: "Unbounded", "Onest", system-ui, sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    transition: opacity 0.35s ease;
}

.lp-illus-waterfall__remain--pos {
    color: var(--color-text-success, #16a34a);
}

.lp-illus-waterfall__remain--neg {
    color: var(--color-text-danger, #dc2626);
}

.lp-illus-waterfall__remain.hidden {
    display: none;
}

/* Illustration: price parser */
.lp-illus-parser {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 12px;
    width: min(100%, 420px);
}

.lp-illus-parser__ritual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 12px;
    border-radius: 16px;
    border: 1px dashed var(--color-border-strong);
    background: color-mix(in oklab, var(--color-accent-primary) 6%, var(--color-bg-surface));
}

.lp-illus-parser__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklab, var(--color-accent-primary) 14%, transparent);
    color: var(--color-accent-primary);
    font-size: 1.2rem;
}

.lp-illus-parser__step {
    font-family: "Unbounded", "Onest", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.lp-illus-parser__micro {
    font-size: 0.68rem;
    text-align: center;
    color: var(--color-text-dim);
    line-height: 1.35;
}

.lp-illus-parser__compare {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-sm);
}

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

.lp-illus-parser__who {
    font-size: 0.72rem;
    color: var(--color-text-dim);
    text-transform: lowercase;
}

.lp-illus-parser__price strong {
    font-family: "Unbounded", "Onest", system-ui, sans-serif;
    font-size: 1.1rem;
    color: var(--color-text-primary);
}

.lp-illus-parser__price--you strong {
    color: var(--color-accent-primary);
}

.lp-illus-parser__margin {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border-default);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.lp-illus-parser__margin strong {
    font-size: 1.2rem;
    color: var(--color-text-success, #16a34a);
}

/* Illustration: control dashboard ghost */
.lp-illus-control {
    position: relative;
    width: min(100%, 360px);
    height: 220px;
    border-radius: 18px;
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-elevated);
    overflow: hidden;
}

.lp-illus-control__ghost {
    position: absolute;
    inset: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    filter: blur(6px);
    opacity: 0.45;
    pointer-events: none;
}

.lp-illus-control__ghost span {
    border-radius: 10px;
    background: color-mix(in oklab, var(--color-text-muted) 25%, transparent);
    min-height: 72px;
}

.lp-illus-control__focus {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 16px 22px;
    border-radius: 14px;
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-lg);
}

.lp-illus-control__label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-dim);
    margin-bottom: 4px;
}

.lp-illus-control__focus strong {
    font-family: "Unbounded", "Onest", system-ui, sans-serif;
    font-size: 1.5rem;
    color: var(--color-text-success, #16a34a);
}

/* Illustration: platforms */
.lp-illus-platforms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 16px;
    width: min(100%, 420px);
}

.lp-illus-platforms__name {
    font-family: "Unbounded", "Onest", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}

.lp-illus-platforms__name--ozon {
    font-size: clamp(1.4rem, 3vw, 2rem);
}

.lp-illus-platforms__name--wb {
    font-size: clamp(0.95rem, 2vw, 1.25rem);
    color: var(--color-text-secondary);
}

.lp-illus-platforms__line {
    flex: 0 0 48px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent-primary), color-mix(in oklab, var(--color-accent-primary) 40%, transparent));
    border-radius: 2px;
}

.lp-illus-platforms__caption {
    flex: 0 0 100%;
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-text-dim);
    text-transform: lowercase;
    letter-spacing: 0.04em;
}

/* Illustration: trial + price */
.lp-illus-trial {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 24px;
    border-radius: 20px;
    border: 1px solid color-mix(in oklab, var(--color-accent-primary) 28%, var(--color-border-default));
    background: linear-gradient(
        165deg,
        var(--color-bg-surface),
        color-mix(in oklab, var(--color-accent-primary) 8%, var(--color-bg-elevated))
    );
    box-shadow: var(--shadow-md);
}

.lp-illus-trial__days {
    font-family: "Unbounded", "Onest", system-ui, sans-serif;
    font-size: clamp(3rem, 8vw, 4.5rem);
    font-weight: 800;
    line-height: 1;
    color: var(--color-accent-primary);
    letter-spacing: -0.04em;
}

.lp-illus-trial__label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

.lp-illus-trial__dots {
    display: flex;
    gap: 6px;
    margin: 10px 0 6px;
}

.lp-illus-trial__dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--color-text-dim) 55%, transparent);
}

.lp-illus-trial__price {
    font-family: "Unbounded", "Onest", system-ui, sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-top: 4px;
}

.lp-illus-trial__period {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

[data-theme="dark"] .lp-illus-turnovers__col,
[data-theme="dark"] .lp-illus-waterfall,
[data-theme="dark"] .lp-illus-parser__compare,
[data-theme="dark"] .lp-illus-control,
[data-theme="dark"] .lp-illus-control__focus,
[data-theme="dark"] .lp-illus-trial {
    background: var(--color-bg-surface);
    border-color: var(--color-border-default);
}

[data-theme="dark"] .lp-title,
[data-theme="dark"] .lp-section-title {
    color: var(--lp-heading-color);
}

[data-theme="dark"] .lp-lead,
[data-theme="dark"] .lp-tags,
[data-theme="dark"] .lp-micro {
    color: var(--color-text-secondary);
}

@media (max-width: 980px) {
    .lp-hero__grid,
    .lp-value__grid,
    .lp-steps__grid,
    .lp-pricing__grid,
    .lp-screen__grid {
        grid-template-columns: 1fr;
    }

    .lp-screen__grid--reverse .lp-screen__copy,
    .lp-screen__grid--reverse .lp-screen__visual {
        order: unset;
    }

    .lp-price-hero {
        grid-template-columns: 1fr;
    }

    .lp-screen__visual {
        min-height: 220px;
        justify-content: center;
    }

    .lp-screen:not(.lp-screen--hero):not(.lp-screen--pricing) .lp-screen__visual {
        min-height: min(440px, 85vw);
    }

    .lp-illus-parser {
        grid-template-columns: 1fr;
    }

    .landing-main-shell--story {
        scroll-snap-type: none;
    }
}

@media (max-width: 640px) {
    .lp-lead--hide-mobile {
        display: none;
    }
}

/* CSS Variables - Светлая тема (явный data-theme="light", совпадает с :root) */
[data-theme="light"] {
    /* Дублирует :root для явного переключателя; значения Stripe-like */
    --color-bg-page: #f1f5f9;
    --color-bg-surface: #f8fafc;
    --color-bg-elevated: #f8fafc;
    --color-bg-inset: #e2e8f0;
    --color-border-default: #e3e8ee;
    --color-border-strong: #c9d2dc;

    --color-text-primary: #0a2540;
    --color-text-secondary: #425466;
    --color-text-muted: #697386;
    --color-text-dim: #8898aa;

    --color-focus-ring: color-mix(in oklab, var(--color-accent-primary) 22%, transparent);

    --shadow-sm: 0 1px 2px rgba(50, 50, 93, 0.06);
    --shadow-md: 0 4px 12px rgba(50, 50, 93, 0.08);
    --shadow-lg: 0 13px 27px -5px rgba(50, 50, 93, 0.12);
    --shadow-hover: 0 6px 16px rgba(50, 50, 93, 0.1);
    --tui-surface-shadow: var(--tui-shadow-medium, 0px 6px 34px 0px rgba(50, 50, 93, 0.08));

    --bg-body: var(--color-bg-page);
    --bg-secondary: var(--color-bg-surface);
    --glass-bg: var(--color-bg-elevated);
    --glass-border: var(--color-border-default);
    --gradient-bg: var(--color-bg-page);
    --gradient-accent: linear-gradient(135deg, var(--color-accent-primary) 0%, var(--primary-600) 100%);
    --text-secondary: var(--color-text-secondary);
    --text-tertiary: var(--color-text-muted);
    --text-dim: var(--color-text-dim);

    --text-light: var(--color-text-dim);
    --text-white: #fff;
    --bg-white: var(--glass-bg);
    --bg-light: var(--bg-secondary);
    --border-light: var(--color-border-default);
    --color-primary: var(--color-accent-primary);
    --color-success: var(--color-accent-success);
    --color-danger: var(--color-accent-danger);
    --color-warning: var(--color-accent-warning);
    --spacing-xs: var(--space-xs);
    --spacing-sm: var(--space-sm);
    --spacing-md: var(--space-md);
    --spacing-lg: var(--space-lg);
    --spacing-xl: var(--space-xl);
    --radius-2xl: var(--radius-md);
}

/* Лендинг: свой фон — не наследовать app/page tokens */
body:has(.landing-wrapper) {
    background: #fefefe;
}

/* Приложение: гарантированный Stripe-фон на всю область контента */
.app-wrapper {
    background: var(--color-bg-page);
}

.app-wrapper .main-content {
    background: var(--color-bg-page);
    min-height: 100vh;
    --app-content-gutter-x: var(--space-xl);
}

.app-wrapper .main-content.container {
    padding: var(--app-content-gutter-x);
    padding-bottom: var(--space-md);
    border: none;
    box-shadow: none;
    background: transparent;
}

.app-wrapper .content-container,
.app-wrapper .content-container-sm,
.app-wrapper .content-container-lg {
    padding: 0;
    margin-left: auto;
    margin-right: auto;
}

/* App: шапка и карточные блоки на белых поверхностях */
.app-wrapper .app-main-header {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 var(--space-md);
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    box-shadow: none;
}

.app-wrapper .sidebar {
    background: var(--color-bg-elevated);
    border-right-color: var(--color-border-default);
    box-shadow: none;
}

.app-wrapper .metric-card-v2,
.app-wrapper .metric-card,
.app-wrapper .section-card,
.app-wrapper .glass-card,
.app-wrapper .table-container,
.app-wrapper .settings-page__section--panel,
.app-wrapper .settings-connection-card,
.app-wrapper .card,
.app-wrapper .stats-card {
    background: var(--color-bg-surface);
    border-color: var(--color-border-default);
}

.app-wrapper .metric-card-v2,
.app-wrapper .metric-card {
    box-shadow: none;
}

/* Контентные блоки — плоские (Stripe); тень только у overlay */
.app-wrapper .section-card,
.app-wrapper .section-card-inner:not(:has(.table-container)),
.app-wrapper .chart-card-v2,
.app-wrapper .glass-card,
.app-wrapper .table-container,
.app-wrapper .settings-page__section--panel,
.app-wrapper .settings-connection-card,
.app-wrapper .card,
.app-wrapper .stats-card,
.app-wrapper .cost-price-form,
.app-wrapper .cost-price-csv-block,
.app-wrapper .top-products-section,
.app-wrapper .ozon-metric-card,
.app-wrapper .sync-result-panel,
.app-wrapper .account-card.glass-card,
.app-wrapper .pca-premium-card,
.app-wrapper .section-card-inner .total-expenses-card,
.app-wrapper .oez-showcase-row.section-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    box-shadow: none;
}

.app-wrapper .table-container table thead th,
.app-wrapper .table thead {
    background: var(--color-bg-inset);
}

/* App: радиусы как в style-guide */
.app-wrapper .btn,
.app-wrapper .control-btn,
.app-wrapper .search-btn,
.app-wrapper .form-field input,
.app-wrapper .form-field textarea,
.app-wrapper .form-field select,
.app-wrapper .period-selector-button {
    border-radius: var(--radius-xs);
}

.app-wrapper .search-input {
    border-radius: var(--radius-xs);
}

.app-wrapper .tab-button {
    border-radius: var(--radius-sm);
}

.app-wrapper .info-block-v2,
.app-wrapper .sync-info-card,
.app-wrapper .settings-page__notice,
.app-wrapper .settings-page__alert {
    border-radius: var(--radius-sm);
}

.app-wrapper .metric-card-v2,
.app-wrapper .metric-card,
.app-wrapper .section-card,
.app-wrapper .section-card-inner,
.app-wrapper .glass-card,
.app-wrapper .table-container,
.app-wrapper .settings-page__section--panel,
.app-wrapper .settings-connection-card,
.app-wrapper .getting-started__card,
.app-wrapper .modal-dialog-sync,
.app-wrapper .period-dropdown,
.app-wrapper .toast {
    border-radius: var(--radius-md);
}

.app-wrapper .pagination a,
.app-wrapper .pagination span,
.app-wrapper .month-tab-compact {
    border-radius: var(--radius-xs);
}

/* Тёмная тема в app: сохраняем тёмные карточки при явном переключении */
[data-theme="dark"] .app-wrapper .metric-card-v2,
[data-theme="dark"] .app-wrapper .metric-card,
[data-theme="dark"] .app-wrapper .section-card,
[data-theme="dark"] .app-wrapper .glass-card,
[data-theme="dark"] .app-wrapper .table-container,
[data-theme="dark"] .app-wrapper .settings-page__section--panel,
[data-theme="dark"] .app-wrapper .settings-connection-card,
[data-theme="dark"] .app-wrapper .getting-started__card,
[data-theme="dark"] .app-wrapper .card,
[data-theme="dark"] .app-wrapper .stats-card {
    background: var(--color-bg-surface);
    border-color: var(--color-border-default);
    box-shadow: none;
}

[data-theme="dark"] .app-wrapper .sidebar-tab.active {
    background: var(--color-bg-surface);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border-default) 90%, transparent);
}

[data-theme="dark"] .app-wrapper .sidebar-tab-badge {
    background: color-mix(in srgb, var(--color-text-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-border-default) 70%, transparent);
}

[data-theme="dark"] .app-wrapper .sidebar {
    box-shadow: var(--shadow-sm);
}


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

body {
    font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--gradient-bg);
    color: var(--color-text-primary);
    font-size: var(--font-base);
    line-height: 1.6;
}

/* Tabler Icons базовые стили */
.ti {
    width: 1em;
    height: 1em;
    stroke-width: 2;
    vertical-align: middle;
    display: inline-block;
}

/* Анимация для spinner иконки */
.ti-spin {
    animation: spin 1s linear infinite;
}

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

/* Моноширинный шрифт для кодов, SKU, ID */
code, .mono, .sku, .order-id {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* App wrapper */
.app-wrapper {
    display: flex;
    min-height: 100vh;
    width: 100%;
    background: var(--color-bg-page);
}

/* Боковое меню (Sidebar) */
.sidebar-rail {
    position: sticky;
    top: 0;
    align-self: flex-start;
    flex-shrink: 0;
    z-index: 41;
}

.sidebar {
    width: 300px;
    min-height: 100vh;
    height: 100vh;
    background: var(--color-bg-elevated);
    border-right: 1px solid var(--color-border-default);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    overflow: visible;
    position: relative;
}

.sidebar.collapsed {
    width: 80px;
}

.sidebar-header {
    position: relative;
    z-index: 1;
    border-bottom: 1px solid var(--color-border-default);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-sm);
    min-height: 56px;
    padding: var(--space-md) var(--space-lg);
    flex-shrink: 0;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: var(--space-md) var(--space-sm);
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    color: var(--color-text-secondary);
    flex: 1;
    min-width: 0;
}


.sidebar-logo-text {
    font-size: var(--font-xl);
    font-weight: 700;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

.sidebar.collapsed .sidebar-logo-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

/* Логотип как на лендинге (mark + название + слоган) */
.sidebar-logo.landing-logo--header {
    gap: 12px;
    min-width: 0;
    border-radius: 12px;
    margin: -6px -8px;
    padding: 6px 8px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-logo.landing-logo--header:hover {
    background: color-mix(in oklab, var(--color-accent-primary) 6%, transparent);
}

.sidebar-logo.landing-logo--header:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

.sidebar-logo .landing-logo__mark {
    display: flex;
    flex-shrink: 0;
    line-height: 0;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.2);
}

.sidebar-logo .landing-logo__text {
    font-family: "Unbounded", "Onest", system-ui, sans-serif;
    font-size: clamp(0.95rem, 1.8vw, 1.12rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--color-text-primary);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
}

.sidebar-logo .landing-logo__tagline {
    display: block;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--color-text-secondary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 11rem;
}

.sidebar.collapsed .sidebar-logo .landing-logo__brand {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.sidebar.collapsed .sidebar-logo.landing-logo--header {
    justify-content: center;
    flex: 0 0 auto;
    margin: 0 auto;
}

.sidebar-toggle {
    position: absolute;
    top: 14px;
    right: -14px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-border-default);
    border-radius: 999px;
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
    z-index: 2;
    pointer-events: auto;
}

.sidebar-toggle:hover {
    background: var(--color-bg-elevated);
    border-color: color-mix(in srgb, var(--color-text-primary) 18%, var(--color-border-default));
    color: var(--color-text-primary);
    box-shadow: var(--shadow-md);
}

.sidebar-toggle:focus-visible {
    outline: 2px solid var(--color-accent-primary, var(--primary-500));
    outline-offset: 2px;
}

.sidebar-toggle i {
    display: block;
    transition: transform var(--motion-base) ease;
}

.sidebar.collapsed ~ .sidebar-toggle i {
    transform: rotate(180deg);
}

.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    margin-top: var(--space-md);
}

.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--color-border-default);
    border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--color-text-primary) 28%, var(--color-border-default));
}

.sidebar-tabs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-sm) var(--space-md);
}

.sidebar-tab {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 36px;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
    text-align: left;
    position: relative;
    font-family: inherit;
    font-size: var(--font-sm);
    font-weight: 500;
    line-height: 1.3;
    width: 100%;
    text-transform: none;
    text-decoration: none !important;
}

.sidebar-tab i {
    width: 22px;
    font-size: 1.25rem;
    flex-shrink: 0;
    text-align: center;
    opacity: 0.92;
    stroke-width: 2.35;
}

.sidebar-tab-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity var(--motion-base) ease;
}

.sidebar.collapsed .sidebar-tab {
    justify-content: center;
    padding-inline: var(--space-sm);
}

.sidebar.collapsed .sidebar-tab-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.sidebar-tab-badge {
    flex-shrink: 0;
    margin-left: auto;
    padding: 0.1rem 0.45rem;
    background: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
    color: var(--color-text-secondary);
    font-size: var(--font-xs);
    border-radius: 999px;
    font-weight: 600;
    line-height: 1.35;
    border: 1px solid color-mix(in srgb, var(--color-border-default) 80%, transparent);
    transition: opacity var(--motion-base) ease;
}

.sidebar.collapsed .sidebar-tab-badge {
    opacity: 0;
    width: 0;
    overflow: hidden;
    padding: 0;
    border: none;
}

.sidebar-tab:hover {
    background: color-mix(in srgb, var(--color-text-primary) 5%, transparent);
    color: var(--color-text-primary);
}

.sidebar-tab:focus-visible {
    outline: 2px solid var(--color-accent-primary, var(--primary-500));
    outline-offset: 1px;
}

.sidebar-tab.active {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border-default) 85%, transparent);
}

.sidebar-tab.active i {
    opacity: 1;
}

.sidebar-tab.active::before {
    display: none;
}

.sidebar-footer {
    flex-shrink: 0;
    padding: var(--space-sm) var(--space-md) var(--space-md);
    border-top: 1px solid var(--color-border-default);
    background: color-mix(in srgb, var(--color-bg-page) 35%, var(--color-bg-elevated));
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.sidebar-footer__group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-footer__group--utility {
    padding-top: var(--space-xs);
    border-top: 1px solid color-mix(in srgb, var(--color-border-default) 65%, transparent);
}

.sidebar-footer-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    min-height: 36px;
    padding: var(--space-sm) var(--space-md);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--font-sm);
    font-weight: 500;
    font-family: inherit;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
    text-align: left;
}

.sidebar-footer-item--button {
    appearance: none;
}

.sidebar-footer-item:hover {
    background: color-mix(in srgb, var(--color-text-primary) 5%, transparent);
    color: var(--color-text-primary);
    text-decoration: none;
}

.sidebar-footer-item:focus-visible {
    outline: 2px solid var(--color-accent-primary, var(--primary-500));
    outline-offset: 1px;
}

.sidebar-footer-item__icon {
    width: 18px;
    flex-shrink: 0;
    text-align: center;
    font-size: 1.05rem;
    opacity: 0.88;
}

.sidebar-footer-item__trail {
    margin-left: auto;
    font-size: 0.85rem;
    opacity: 0.4;
    flex-shrink: 0;
}

.sidebar-getting-started__text,
.sidebar-action-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity var(--motion-base) ease;
}

.sidebar-theme-status {
    flex-shrink: 0;
    margin-left: auto;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: var(--font-xs);
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-text-muted);
    background: color-mix(in srgb, var(--color-text-primary) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-border-default) 80%, transparent);
}

.sidebar.collapsed .sidebar-footer {
    padding: var(--space-sm) var(--space-xs) var(--space-md);
    align-items: stretch;
}

.sidebar.collapsed .sidebar-footer-item {
    justify-content: center;
    padding-inline: var(--space-sm);
}

.sidebar.collapsed .sidebar-getting-started__text,
.sidebar.collapsed .sidebar-action-text,
.sidebar.collapsed .sidebar-footer-item__trail,
.sidebar.collapsed .sidebar-theme-status {
    display: none;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-sm);
}

.sidebar-user i {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.sidebar-user-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.3s ease, width 0.3s ease;
}

.sidebar.collapsed .sidebar-user-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
    display: none;
}

.sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* Legacy action buttons (main.php и старые фрагменты) */
.sidebar-action-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease;
    font-size: var(--font-sm);
    font-family: 'Onest', sans-serif;
}

.sidebar-action-btn i {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-action-text {
    flex: 1;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

.sidebar.collapsed .sidebar-action-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.sidebar-action-btn:hover {
    background: color-mix(in srgb, var(--color-accent-primary) 10%, var(--color-bg-elevated));
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
}

/* Переключатель темы в footer — ghost row, без accent-hover */
.sidebar-footer .theme-toggle-btn:hover {
    background: color-mix(in srgb, var(--color-text-primary) 5%, transparent);
    border-color: transparent;
    color: var(--color-text-primary);
}

.sidebar-footer .theme-toggle-btn:hover i,
.sidebar-footer .theme-toggle-btn i {
    transform: none;
    color: inherit;
}

.theme-toggle-btn {
    cursor: pointer;
}

.theme-toggle-btn i {
    transition: transform 0.3s ease;
}

.theme-toggle-btn:hover i {
    transform: rotate(15deg);
}

/* Дополнительные стили для светлой темы */
[data-theme="light"] .sidebar {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .app-wrapper .sidebar {
    box-shadow: none;
}

[data-theme="light"] .sidebar-action-btn:hover {
    background: color-mix(in srgb, var(--color-accent-primary) 8%, var(--color-bg-elevated));
}

/* Адаптация для светлой темы - карточки, таблицы, формы */
[data-theme="light"] .card,
[data-theme="light"] .table-container,
[data-theme="light"] .stats-card,
[data-theme="light"] .metric-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
}

[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
    background: var(--color-bg-surface);
    border-color: var(--color-border-default);
    color: var(--color-text-secondary);
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

[data-theme="light"] .table {
    background: var(--color-bg-surface);
}

[data-theme="light"] .table thead {
    background: var(--color-bg-inset, var(--color-bg-page));
}

[data-theme="light"] .table tbody tr:hover {
    background: color-mix(in srgb, var(--color-accent-primary) 5%, var(--color-bg-surface));
}

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-overlay-backdrop);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

[data-theme="light"] .sidebar-overlay {
    background: color-mix(in srgb, var(--color-overlay-backdrop) 60%, transparent);
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* Основной контент с учетом sidebar */
.app-wrapper .main-content {
    flex: 1;
    min-width: 0;
    min-height: 100vh;
    background: var(--color-bg-page);
    transition: margin-left 0s;
    margin-left: 0;
}

/* Верх main-content: платформа, подписка, профиль
   Горизонтальные отступы = .content-container (секции дашборда и др.) */
.app-main-header {
    --app-header-inset: var(--space-xl);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-md) var(--space-lg);
    margin: 0 0 var(--space-md);
    padding: var(--space-md) var(--app-header-inset) var(--space-lg);
    border-bottom: 1px solid var(--color-border-default, var(--glass-border));
    position: sticky;
    top: 0;
    z-index: 30;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-bg-elevated, var(--glass-bg)) 100%, transparent) 0%,
        color-mix(in srgb, var(--color-bg-elevated, var(--glass-bg)) 88%, var(--color-bg-surface) 12%) 100%
    );
    box-shadow: 0 1px 0 color-mix(in srgb, var(--color-text-primary) 0.04, transparent);
}

/* Блок слева: иконка + лейбл + переключатель платформ */
.app-main-header__platform {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
    flex: 0 1 auto;
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.app-main-header__platform-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-left: var(--space-xs);
    border-radius: var(--radius-xs, 8px);
    color: var(--color-accent-primary);
    background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
    flex-shrink: 0;
}

.app-main-header__platform-icon i {
    font-size: 1.2rem;
}

.app-main-header__field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    flex: 1 1 8rem;
    padding: var(--space-xs) var(--space-sm) var(--space-xs) 0;
}

.app-main-header__label {
    font-size: 0.7rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-dim, var(--text-dim));
    font-weight: 600;
    margin: 0;
}

.app-main-header__platform-switch {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-xs);
    min-width: 0;
    width: max-content;
    max-width: 100%;
    padding: 0.2rem 0;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-bg-surface) 46%, transparent);
}

.app-main-header__platform-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.8rem;
    border: 0;
    border-radius: var(--radius-xs, 6px);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--font-sm);
    font-weight: 650;
    font-family: 'Onest', sans-serif;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color var(--motion-fast) ease,
        background-color var(--motion-fast) ease,
        box-shadow var(--motion-fast) ease;
}

.app-main-header__platform-wordmark {
    display: inline-block;
}

/* OZON — словесный знак: синий #005BFF, плотный капс */
.app-main-header__platform-option--ozon {
    font-weight: 800;
    font-size: 1.0125rem;
    letter-spacing: 0.06em;
}

.app-main-header__platform-option--ozon:hover:not(.is-active):not(:disabled) {
    color: #005bff;
    background: color-mix(in srgb, #005bff 11%, var(--color-bg-elevated));
}

.app-main-header__platform-option--ozon.is-active {
    color: #fff;
    background: linear-gradient(180deg, #1a6cff 0%, #005bff 55%, #0046cc 100%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #000 18%, transparent);
    cursor: default;
}

/* Wildberries — пурпурно-маджента; капс + размер как у OZON для баланса */
.app-main-header__platform-option--wb {
    font-weight: 750;
    font-size: 1.0125rem;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.app-main-header__platform-option--wb:hover:not(.is-active):not(:disabled) {
    color: #981e97;
    background: color-mix(in srgb, #cb11ab 9%, color-mix(in srgb, #981e97 6%, var(--color-bg-elevated)));
}

.app-main-header__platform-option--wb.is-active {
    color: #fff;
    background: linear-gradient(
        128deg,
        #5c1f6e 0%,
        #981e97 38%,
        #cb11ab 72%,
        #e91e8c 100%
    );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #000 22%, transparent);
    cursor: default;
}

.app-main-header__platform-option:disabled {
    opacity: 0.68;
    cursor: wait;
}

.app-main-header__platform-option:focus {
    outline: none;
}

.app-main-header__platform-option:focus-visible {
    box-shadow: 0 0 0 2px var(--color-bg-elevated), 0 0 0 4px var(--color-focus-ring);
}

.app-main-header__platform-option--ozon.is-active:focus-visible {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #000 18%, transparent),
        0 0 0 2px var(--color-bg-elevated),
        0 0 0 4px var(--color-focus-ring);
}

.app-main-header__platform-option--wb.is-active:focus-visible {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #000 22%, transparent),
        0 0 0 2px var(--color-bg-elevated),
        0 0 0 4px var(--color-focus-ring);
}

/* Правая зона: подписка | профиль */
.app-main-header__trailing {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm) var(--space-md);
    min-width: 0;
    flex: 0 0 auto;
    margin-left: auto;
}

.app-main-header__sep {
    display: block;
    width: 1px;
    min-height: 1.5rem;
    align-self: center;
    background: var(--color-border-default);
    opacity: 0.6;
    flex-shrink: 0;
}

.app-health-menu {
    position: relative;
    flex-shrink: 0;
}

.app-health-menu > summary {
    list-style: none;
}

.app-health-menu > summary::-webkit-details-marker {
    display: none;
}

.app-health-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-height: 2.5rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--color-border-default);
    border-radius: 999px;
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    cursor: pointer;
    font-family: 'Onest', sans-serif;
    font-size: var(--font-sm);
    font-weight: 600;
    line-height: 1.2;
    transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.app-health-trigger:hover,
.app-health-menu[open] .app-health-trigger {
    background: color-mix(in srgb, var(--color-bg-elevated) 84%, var(--color-accent-primary) 16%);
    border-color: color-mix(in srgb, var(--color-accent-primary) 40%, var(--color-border-default));
}

.app-health-trigger:focus {
    outline: none;
}

.app-health-trigger:focus-visible {
    box-shadow: 0 0 0 2px var(--color-bg-elevated), 0 0 0 4px var(--color-focus-ring);
}

.app-health-trigger--warning {
    border-color: color-mix(in srgb, var(--color-accent-warning) 42%, var(--color-border-default));
    background: color-mix(in srgb, var(--color-accent-warning) 10%, var(--color-bg-elevated));
}

.app-health-trigger--warning i {
    color: var(--color-accent-warning);
}

.app-health-trigger--danger {
    border-color: color-mix(in srgb, var(--color-accent-danger) 45%, var(--color-border-default));
    background: color-mix(in srgb, var(--color-accent-danger) 11%, var(--color-bg-elevated));
}

.app-health-trigger--danger i {
    color: var(--color-accent-danger);
}

.app-health-trigger__text {
    white-space: nowrap;
}

.app-health-trigger__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text-primary) 10%, transparent);
    color: var(--color-text-primary);
    font-size: var(--font-xs);
    font-weight: 700;
}

.app-health-panel {
    position: absolute;
    top: calc(100% + var(--space-sm));
    right: 0;
    z-index: 80;
    width: min(28rem, calc(100vw - 2rem));
    padding: var(--space-md);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    box-shadow: var(--shadow-lg);
}

.app-health-panel__head {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-default);
}

.app-health-panel__head strong {
    color: var(--color-text-primary);
    font-size: var(--font-sm);
}

.app-health-panel__head span {
    color: var(--color-text-muted);
    font-size: var(--font-xs);
}

.app-health-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-sm);
    align-items: start;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
}

.app-health-item + .app-health-item {
    margin-top: var(--space-xs);
}

.app-health-item--danger {
    background: color-mix(in srgb, var(--color-accent-danger) 9%, transparent);
}

.app-health-item--warning {
    background: color-mix(in srgb, var(--color-accent-warning) 9%, transparent);
}

.app-health-item--info {
    background: color-mix(in srgb, var(--color-accent-primary) 8%, transparent);
}

.app-health-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-bg-elevated) 70%, transparent);
    font-size: 1.05rem;
}

.app-health-item--danger .app-health-item__icon {
    color: var(--color-accent-danger);
}

.app-health-item--warning .app-health-item__icon {
    color: var(--color-accent-warning);
}

.app-health-item--info .app-health-item__icon {
    color: var(--color-accent-primary);
}

.app-health-item__body {
    min-width: 0;
}

.app-health-item__title {
    color: var(--color-text-primary);
    font-size: var(--font-sm);
    font-weight: 700;
    line-height: 1.3;
}

.app-health-item__text {
    margin-top: 0.12rem;
    color: var(--color-text-muted);
    font-size: var(--font-xs);
    line-height: 1.45;
}

.app-health-item__action {
    align-self: center;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--color-border-default);
    border-radius: 999px;
    color: var(--color-accent-primary);
    background: color-mix(in srgb, var(--color-accent-primary) 8%, transparent);
    font-size: var(--font-xs);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}

.app-health-item__action:hover,
.app-health-item__action:focus-visible {
    border-color: color-mix(in srgb, var(--color-accent-primary) 45%, var(--color-border-default));
    background: color-mix(in srgb, var(--color-accent-primary) 14%, transparent);
    outline: none;
}

.app-header-subscription {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-sm);
    line-height: 1.3;
    max-width: min(100%, 26rem);
    min-height: 2.5rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--color-border-default);
}

.app-header-subscription__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(100%, 24rem);
}

.app-header-subscription i {
    flex-shrink: 0;
    font-size: 1.1rem;
    opacity: 0.95;
}

.app-header-subscription--ok {
    color: var(--color-text-primary);
    border-color: color-mix(in srgb, var(--color-accent-success) 40%, var(--color-border-default));
    background: color-mix(in srgb, var(--color-accent-success) 11%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent-success) 8%, transparent);
}

.app-header-subscription--ok i {
    color: var(--color-accent-success);
}

.app-header-subscription--warn {
    color: var(--color-text-primary);
    border-color: color-mix(in srgb, var(--color-accent-warning) 45%, var(--color-border-default));
    background: color-mix(in srgb, var(--color-accent-warning) 10%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent-warning) 8%, transparent);
}

.app-header-subscription--warn i {
    color: var(--color-accent-warning);
}

.app-header-subscription--muted {
    color: var(--color-text-dim, var(--text-dim));
}

.app-header-user {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 2.5rem;
    padding: 0.2rem 0.45rem 0.2rem 0.35rem;
    border-radius: 999px;
    border: 1px solid var(--color-border-default);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-sm);
    font-weight: 600;
    max-width: min(100%, 16rem);
    flex-shrink: 0;
    transition: background-color var(--motion-base) ease, border-color var(--motion-base) ease, color var(--motion-base) ease, box-shadow var(--motion-base) ease;
}

.app-header-user:hover {
    border-color: color-mix(in srgb, var(--color-accent-primary) 40%, var(--color-border-default));
    color: var(--color-text-primary);
    background: color-mix(in srgb, var(--color-accent-primary) 7%, var(--color-bg-elevated));
    box-shadow: 0 1px 0 color-mix(in srgb, var(--color-text-primary) 0.04, transparent);
}

.app-header-user:focus {
    outline: none;
}

.app-header-user:focus-visible {
    box-shadow: 0 0 0 2px var(--color-bg-elevated), 0 0 0 4px var(--color-focus-ring);
    border-color: var(--color-accent-primary);
}

.app-header-user__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--color-accent-primary) 22%, transparent) 0%,
        color-mix(in srgb, var(--color-accent-primary) 8%, transparent) 100%
    );
    color: var(--color-accent-primary);
    flex-shrink: 0;
}

.app-header-user__avatar i {
    font-size: 1.1rem;
}

.app-header-user__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

.app-header-user__chev {
    font-size: 0.9rem;
    color: var(--color-text-dim, var(--text-dim));
    margin-right: 0.1rem;
    flex-shrink: 0;
    opacity: 0.7;
    transition: transform var(--motion-fast) ease, color var(--motion-fast) ease;
}

.app-header-user:hover .app-header-user__chev {
    color: var(--color-accent-primary);
    opacity: 0.9;
    transform: translateX(1px);
}

.app-header-logout {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.5rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--color-border-default);
    color: var(--color-text-secondary);
    background: color-mix(in srgb, var(--color-bg-elevated) 55%, transparent);
    text-decoration: none;
    font-size: var(--font-sm);
    font-weight: 600;
    flex-shrink: 0;
    transition: background-color var(--motion-base) ease, border-color var(--motion-base) ease, color var(--motion-base) ease;
}

.app-header-logout:hover {
    border-color: color-mix(in srgb, var(--color-accent-danger) 35%, var(--color-border-default));
    color: var(--color-text-primary);
    background: color-mix(in srgb, var(--color-accent-danger) 8%, var(--color-bg-elevated));
}

.app-header-logout:focus {
    outline: none;
}

.app-header-logout:focus-visible {
    box-shadow: 0 0 0 2px var(--color-bg-elevated), 0 0 0 4px var(--color-focus-ring);
}

.app-header-logout i {
    font-size: 1.05rem;
    opacity: 0.95;
}

.app-header-logout__text {
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .app-header-user:hover .app-header-user__chev {
        transform: none;
    }
}

@media (max-width: 640px) {
    .app-main-header {
        flex-direction: column;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .app-main-header__trailing {
        flex: 1 1 auto;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        margin-left: 0;
    }

    .app-health-menu {
        flex: 1 1 100%;
    }

    .app-health-trigger {
        width: 100%;
        justify-content: center;
    }

    .app-health-panel {
        left: 0;
        right: auto;
        width: 100%;
    }

    .app-header-user {
        max-width: none;
        flex: 0 1 auto;
    }

    .app-header-subscription {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }

    .app-main-header__platform {
        flex: 1 1 auto;
    }
}

@media (min-width: 641px) {
    .app-main-header__trailing {
        max-width: none;
    }

    .app-header-subscription {
        max-width: min(26rem, 38vw);
    }

    .app-header-subscription__text {
        max-width: min(22rem, 34vw);
    }

    .app-header-user {
        max-width: min(16rem, 22vw);
    }
}

/* Header приложения */
.app-header {
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
    position: sticky;
    top: 0;
    z-index: 100;
    position: relative;
    overflow: hidden;
}

/* Блок Telegram */
.telegram-promo {
    background: linear-gradient(135deg, color-mix(in srgb, var(--telegram-500) 12%, transparent) 0%, color-mix(in srgb, var(--telegram-400) 12%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--telegram-500) 24%, transparent);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    box-shadow: var(--shadow-sm);
}

.telegram-promo-content {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.telegram-promo-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--telegram-500) 0%, var(--telegram-400) 100%);
    color: white;
    font-size: 1.8rem;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--telegram-500) 35%, transparent);
}

.telegram-promo-text {
    flex: 1;
    min-width: 200px;
}

.telegram-promo-title {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
    line-height: 1.3;
}

.telegram-promo-subtitle {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.telegram-promo-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, var(--telegram-500) 0%, var(--telegram-400) 100%);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--font-base);
    transition: background-color var(--motion-base) ease, transform var(--motion-base) ease, box-shadow var(--motion-base) ease;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--telegram-500) 35%, transparent);
    flex-shrink: 0;
}

.telegram-promo-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--telegram-500) 45%, transparent);
    background: linear-gradient(135deg, var(--telegram-400) 0%, var(--telegram-500) 100%);
}

.telegram-promo-btn:active {
    transform: translateY(0);
}

.telegram-promo-btn i {
    font-size: 1.2rem;
}

/* Адаптивность для Telegram блока */
@media (max-width: 768px) {
    .telegram-promo {
        padding: var(--space-md);
        margin-bottom: var(--space-md);
    }
    
    .telegram-promo-content {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
    }
    
    .telegram-promo-icon {
        align-self: center;
    }
    
    .telegram-promo-text {
        text-align: center;
    }
    
    .telegram-promo-btn {
        width: 100%;
        justify-content: center;
    }
}

.header-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.6;
    z-index: 0;
}

.header-background::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, color-mix(in oklab, var(--primary-400) 15%, transparent) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 20s ease-in-out infinite;
}

.header-background::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 15s ease-in-out infinite reverse;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    50% {
        transform: translateY(-20px) translateX(10px);
    }
}

.header-content {
    position: relative;
    z-index: 1;
}

.header-content {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.page-title {
    margin: 0;
    font-size: var(--font-xl);
    font-weight: 600;
    color: var(--color-text-secondary);
    font-family: 'Onest', sans-serif;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.page-title i {
    color: var(--accent-blue);
    font-size: 1.2em;
}

.header-title {
    flex: 1;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding-bottom: 0;
    border-bottom: none;
    text-align: left;
}

.app-logo {
    margin-bottom: 0;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: var(--font-3xl);
    font-weight: 700;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    font-family: 'Onest', sans-serif;
}

.logo-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.app-description {
    display: none;
}

.page-title {
    margin: 0;
    font-size: var(--font-xl);
    font-weight: 600;
    color: var(--color-text-secondary);
    font-family: 'Onest', sans-serif;
}


/* Кнопка меню для мобильных */
.menu-toggle {
    display: flex;
    background: var(--glass-bg);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 1.2rem;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    width: 40px;
    height: 40px;
}

.menu-toggle:hover {
    background: var(--color-layer-primary-soft);
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
}

.header-title {
    flex: 1;
}

/* Toast уведомления - улучшенные */
.toast {
    position: fixed;
    bottom: -100px;
    right: var(--space-lg);
    background: var(--color-bg-elevated);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-md) var(--space-lg);
    min-width: 320px;
    max-width: 400px;
    z-index: 99999;
    transition: bottom var(--motion-slow) cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-left: 4px solid currentColor;
    border: 1px solid var(--color-border-default);
}

.toast.show {
    bottom: var(--space-lg);
}

.toast-content {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.toast-content i {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.toast-content span {
    flex: 1;
    font-size: var(--font-base);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.toast-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.toast-close:hover {
    background: color-mix(in srgb, var(--color-accent-primary) 8%, transparent);
    color: var(--color-text-secondary);
}

.toast-success {
    color: var(--color-accent-success);
}

.toast-error {
    color: var(--color-accent-danger);
}

.toast-warning {
    color: var(--color-accent-warning);
}

.toast-info {
    color: var(--color-accent-primary);
}

.toast-content a.toast-inline-link {
    color: var(--color-accent-primary);
    text-decoration: underline;
    font-weight: 600;
}

.toast-error .toast-content a.toast-inline-link {
    color: var(--color-accent-danger);
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    /* App wrapper на мобильных */
    .app-wrapper {
        position: relative;
    }
    
    /* Sidebar на мобильных */
    .sidebar-rail {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        height: 100vh;
    }

    .sidebar-rail:has(.sidebar.mobile-open) {
        transform: translateX(0);
    }

    .sidebar {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 300px;
        height: 100vh;
    }
    
    .sidebar.mobile-open {
        transform: none;
    }
    
    .sidebar.collapsed {
        width: 300px;
    }
    
    .sidebar.collapsed.mobile-open {
        width: 300px;
    }
    
    .app-wrapper .main-content {
        min-width: auto !important;
        width: 100%;
        margin-left: 0 !important;
    }
    
    .main-content {
        width: 100%;
        margin-left: 0 !important;
    }
    
    /* Уменьшенные отступы для мобильных */
    .container {
        padding: var(--space-sm);
    }

    /* Шапка и контент: один горизонтальный gutter */
    .app-wrapper .main-content {
        --app-content-gutter-x: var(--space-md);
    }

    .app-wrapper .main-content.container {
        padding-bottom: var(--space-sm);
    }

    .app-main-header {
        padding-top: var(--space-sm);
        padding-bottom: var(--space-md);
    }
    
    .app-header {
        padding: var(--space-sm) var(--space-md);
    }
    
    .metric-card {
        padding: var(--space-md);
    }
    
    .toast {
        left: var(--space-sm);
        right: var(--space-sm);
        min-width: auto;
        padding: var(--space-sm) var(--space-md);
    }
    
    .sidebar-header,
    .sidebar-footer {
        padding: 0;
    }
    
    .sidebar-tab {
        padding: var(--space-xs) var(--space-sm);
    }
}

/* Индикатор загрузки - улучшенный */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: fadeIn 0.2s ease;
}

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

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

.loader-content {
    background: var(--glass-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
    min-width: 320px;
    animation: slideUp 0.3s ease;
}

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

.spinner {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--space-md);
    border: 4px solid color-mix(in oklab, var(--primary-400) 10%, transparent);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.loader-content p {
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin: 0;
}

.loader-subtitle {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-xs);
}

.container {
    width: 100%;
    margin: 0 auto;
    background: var(--glass-bg);
    border: 1px solid var(--color-border-default);
    box-shadow: var(--shadow-sm);
    padding: var(--space-md);
}

h1 {
    margin-bottom: var(--space-sm);
    color: var(--color-accent-primary);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    font-size: var(--font-3xl);
    font-weight: 700;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Onest', sans-serif;
}

h1 i {
    color: var(--color-accent-primary);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    font-size: var(--font-3xl);
}

h2 {
    margin-top: var(--space-md);
    color: var(--color-accent-primary);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    font-size: var(--font-2xl);
    font-weight: 700;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Onest', sans-serif;
}

h2 i {
    font-size: var(--font-2xl);
    color: var(--accent-blue) !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    background: none !important;
    opacity: 0.9;
}

h3 {
    margin-bottom: var(--space-md);
    color: var(--color-text-secondary);
    font-size: var(--font-xl);
    font-weight: 600;
    font-family: 'Onest', sans-serif;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Подзаголовок */
.subtitle {
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
    line-height: 1.6;
}

/* Мелкий текст / детали */
.text-small, .text-dim {
    font-size: var(--font-xs);
    color: var(--text-dim);
}

.text-tertiary {
    font-size: var(--font-sm);
    color: var(--text-tertiary);
}

/* Стекломорфные карточки */
.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* Tabs */
.tabs {
    margin-bottom: 0;
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

/* Упрощенные Tab Buttons - чистый минималистичный стиль */
.tab-button {
    padding: 12px 20px;
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Onest', sans-serif;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-base) ease;
    box-shadow: var(--shadow-sm);
}

.tab-button:hover {
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
    background: color-mix(in srgb, var(--color-accent-primary) 6%, var(--color-bg-elevated));
    box-shadow: var(--shadow-sm);
}

.tab-button i {
    font-size: 1rem;
    transition: color 0.2s ease;
}

.tab-button.active {
    background: var(--color-accent-primary);
    color: white;
    border-color: var(--color-accent-primary);
    box-shadow: var(--shadow-sm);
}

.tab-button.active i {
    color: white;
}

.tab-button.active:hover {
    background: var(--color-accent-primary-hover);
    box-shadow: var(--shadow-hover);
}

.tab-content {
    display: none;
}

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

/* Контейнер выбора месяца с группировкой по годам - компактная версия */
/* Новый интерфейс выбора периода */
.period-selector-container {
    position: relative;
    width: 100%;
}

/* Для компьютеров - уменьшить до половины ширины */
@media (min-width: 768px) {

}

.period-selector-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-elevated);
    border: 2px solid var(--color-accent-primary);
    border-radius: var(--radius-xs);
    color: var(--color-text-secondary);
    font-size: var(--font-base);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, transform var(--motion-base) ease, box-shadow var(--motion-base) ease;
    width: fit-content;
    max-width: 100%;
    justify-content: flex-start;
    position: relative;
    z-index: 10;
    box-shadow: var(--shadow-sm);
}

.period-selector-button:hover {
    background: color-mix(in srgb, var(--color-text-secondary) 16%, var(--color-bg-elevated));
    border-color: var(--color-accent-primary);
    transform: translateY(-1px);
}

.period-selector-button:active {
    transform: translateY(0);
    box-shadow: 
        0 2px 4px -1px color-mix(in oklab, var(--color-accent-primary) 20%, transparent),
        0 1px 2px -1px color-mix(in oklab, var(--color-accent-primary) 15%, transparent);
}

.period-selector-button i.ti-calendar {
    color: var(--color-accent-primary);
    font-size: 1.1rem;
}

.period-label {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.period-value {
    flex: 0 1 auto;
    text-align: left;
}

.period-selector-button i.ti-chevron-down {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.period-selector-button:hover i.ti-chevron-down {
    transform: translateY(2px);
}

/* Выпадающий блок */
.period-dropdown {
    position: absolute;
    width: fit-content;
    top: calc(100% + var(--space-sm));
    left: 0;
    right: 0;
    background: var(--color-bg-elevated);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    box-shadow: 
        0 10px 25px -5px rgba(0, 0, 0, 0.3),
        0 4px 6px -2px rgba(0, 0, 0, 0.2),
        0 0 0 1px color-mix(in oklab, var(--color-accent-primary) 10%, transparent);
    z-index: 1000;
    margin-top: var(--space-xs);
    animation: slideDown var(--motion-base) ease-out;
}

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

.period-dropdown-content {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: var(--space-lg);
    padding: var(--space-xl);
    align-items: start;
}

.period-calendars-pair {
    display: contents;
}

.period-calendars-pair > .period-calendar-section:first-of-type .custom-calendar {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.period-calendars-pair > .period-calendar-section:last-of-type .custom-calendar {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.period-calendar-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.period-calendar-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

.period-calendar-label i {
    color: var(--color-accent-primary);
    font-size: 0.9rem;
}

.custom-calendar-wrapper {
    position: relative;
}

.period-date-input {
    display: none; /* Скрыть input, так как используем только календарь */
}

.period-date-input-from {
    border-left: 4px solid var(--primary-500);
}

.period-date-input-to {
    border-left: 4px solid #10b981;
}

/* Кастомный календарь в темной теме */
.custom-calendar {
    margin-top: 0;
    background: var(--color-bg-surface);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-md);
    box-shadow: none;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-xs);
    min-width: 280px;
}

.custom-calendar-header {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(2.25rem, auto) 1fr minmax(2.25rem, auto);
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-default);
}

.custom-calendar-nav-placeholder {
    display: block;
    min-width: 2.25rem;
    min-height: 2.25rem;
}

.custom-calendar-nav-btn {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    padding: var(--space-xs) var(--space-sm);
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease;
    font-size: var(--font-sm);
}

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

.custom-calendar-month-year {
    text-align: center;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: var(--font-base);
}

.custom-calendar-weekdays {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    margin-bottom: var(--space-xs);
}

.custom-calendar-weekday {
    text-align: center;
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    padding: calc(var(--space-xs) / 2);
}

.custom-calendar-days {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
}

.custom-calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: calc(var(--space-xs) / 2);
    box-sizing: border-box;
    background: var(--color-bg-elevated);
    border: none;
    border-radius: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-sm);
    cursor: pointer;
    font-weight: 500;
}

/* Fallback после var(--neutral-50) обязателен: иначе вся цепочка var() невалидна и фон не рисуется */
.custom-calendar-day:hover:not(.is-future) {
    background: var(--ods-day-in-range-color, var(--neutral-50, color-mix(in srgb, var(--color-text-secondary) 14%, var(--color-bg-elevated))));
    color: var(--color-text-secondary);
}

.custom-calendar-day.range-endpoint-start:hover:not(.is-future),
.custom-calendar-day.range-endpoint-end:hover:not(.is-future),
.custom-calendar-day.range-endpoint-singular:hover:not(.is-future) {
    background: var(--color-accent-primary-hover);
    color: #fff;
}

.custom-calendar-day.calendar-weekend:not(.range-endpoint-start):not(.range-endpoint-end):not(.range-endpoint-singular):not(.range-preview-endpoint-start):not(.range-preview-endpoint-end):not(.range-preview-endpoint-singular):not(.is-future) {
    color: #ef4444;
}

.custom-calendar-day.other-month {
    color: var(--color-text-muted);
    opacity: 0.5;
}

.custom-calendar-day.is-future {
    color: var(--color-text-muted);
    text-decoration: line-through;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.55;
}

.custom-calendar-day.today:not(.range-endpoint-start):not(.range-endpoint-end):not(.range-endpoint-singular):not(.range-preview-endpoint-start):not(.range-preview-endpoint-end):not(.range-preview-endpoint-singular):not(.range-preview-between) {
    background: color-mix(in oklab, var(--color-accent-primary) 20%, transparent);
    color: var(--color-accent-primary);
    font-weight: 700;
}

.custom-calendar-day.in-range:not(.range-endpoint-start):not(.range-endpoint-end):not(.range-endpoint-singular):not(.range-preview-between):not(.range-preview-endpoint-start):not(.range-preview-endpoint-end):not(.range-preview-endpoint-singular) {
    background: var(--ods-day-in-range-color, var(--neutral-50, color-mix(in srgb, var(--color-text-secondary) 14%, var(--color-bg-elevated))));
}

.custom-calendar-day.range-preview-between {
    background: var(--ods-day-in-range-color, var(--neutral-50, color-mix(in srgb, var(--color-text-secondary) 14%, var(--color-bg-elevated))));
    color: var(--color-text-secondary);
}

.custom-calendar-day.range-preview-between:hover:not(.is-future) {
    background: var(--ods-day-in-range-color, var(--neutral-50, color-mix(in srgb, var(--color-text-secondary) 14%, var(--color-bg-elevated))));
    color: var(--color-text-secondary);
}

.custom-calendar-day.range-preview-endpoint-start,
.custom-calendar-day.range-preview-endpoint-end,
.custom-calendar-day.range-preview-endpoint-singular {
    background: var(--color-accent-primary);
    color: #fff;
    font-weight: 700;
}

.custom-calendar-day.range-preview-endpoint-start {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}

.custom-calendar-day.range-preview-endpoint-end {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

.custom-calendar-day.range-preview-endpoint-singular {
    border-radius: var(--radius-sm);
}

.custom-calendar-day.range-preview-endpoint-start:hover:not(.is-future),
.custom-calendar-day.range-preview-endpoint-end:hover:not(.is-future),
.custom-calendar-day.range-preview-endpoint-singular:hover:not(.is-future) {
    background: var(--color-accent-primary-hover);
    color: #fff;
}

.custom-calendar-day.range-endpoint-start,
.custom-calendar-day.range-endpoint-end,
.custom-calendar-day.range-endpoint-singular {
    background: var(--color-accent-primary);
    color: #fff;
    font-weight: 700;
}

.custom-calendar-day.range-endpoint-start {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}

.custom-calendar-day.range-endpoint-end {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

.custom-calendar-day.range-endpoint-singular {
    border-radius: var(--radius-sm);
}

.custom-calendar-day.range-endpoint-start.calendar-weekend,
.custom-calendar-day.range-endpoint-end.calendar-weekend,
.custom-calendar-day.range-endpoint-singular.calendar-weekend,
.custom-calendar-day.range-preview-endpoint-start.calendar-weekend,
.custom-calendar-day.range-preview-endpoint-end.calendar-weekend,
.custom-calendar-day.range-preview-endpoint-singular.calendar-weekend {
    color: #fff;
}

.custom-calendar-day.today.range-preview-between,
.custom-calendar-day.today.in-range {
    font-weight: 700;
}

/* Секция быстрого выбора месяцев */
.period-quick-months-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.period-quick-months {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.period-month-btn {
    display: inline-block;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--color-accent-primary);
    font-size: var(--font-sm);
    font-weight: 400;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--motion-fast) ease;
}

.period-month-btn:hover {
    color: var(--color-accent-primary-hover);
    text-decoration: underline;
}

.period-month-btn:visited {
    color: var(--color-accent-primary);
}

.period-month-btn:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
    border-radius: 2px;
}


@media (max-width: 1024px) {
    .period-dropdown-content {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .period-calendars-pair > .period-calendar-section .custom-calendar {
        border-radius: var(--radius-md);
    }
}


/* Старые стили для обратной совместимости */
.month-selector-container {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    box-shadow: var(--shadow-sm);
}

.month-selector-header-compact {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-default);
}

.month-selector-label {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.month-selector-label i {
    color: var(--color-accent-primary);
    font-size: 0.9rem;
}

.month-selector-selected {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--color-accent-primary);
}

.month-tabs-wrapper-compact {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    max-height: 200px;
    overflow-y: auto;
    padding-right: var(--space-xs);
}

.month-tabs-wrapper-compact::-webkit-scrollbar {
    width: 6px;
}

.month-tabs-wrapper-compact::-webkit-scrollbar-track {
    background: var(--color-bg-surface);
    border-radius: 3px;
}

.month-tabs-wrapper-compact::-webkit-scrollbar-thumb {
    background: var(--color-accent-primary);
    border-radius: 3px;
}

.month-tabs-wrapper-compact::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-primary-hover);
}

.year-group-compact {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.year-label {
    font-size: var(--font-xs);
    font-weight: 700;
    color: var(--color-text-muted);
    padding: 2px 8px;
    background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.month-tabs-compact {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1;
}

/* Упрощенные Month Tabs - чистый минималистичный стиль */
.month-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px;
    border-radius: var(--radius-sm);
}

.month-tab {
    padding: 6px 12px;
    border: 2px solid transparent;
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Onest', sans-serif;
    transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    white-space: nowrap;
}

/* Компактные вкладки месяцев */
.month-tab-compact {
    padding: 4px 10px;
    border: 1px solid transparent;
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-xs);
    font-weight: 500;
    font-size: 0.8rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-family: 'Onest', sans-serif;
    transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
    white-space: nowrap;
}

.month-tab-compact:hover {
    background: color-mix(in srgb, var(--color-accent-primary) 8%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-primary) 24%, transparent);
    color: var(--color-accent-primary);
}

.month-tab-compact.active {
    background: var(--color-accent-primary);
    color: white;
    border-color: var(--color-accent-primary);
    font-weight: 600;
    box-shadow: 0 2px 4px color-mix(in oklab, var(--primary-400) 20%, transparent);
}

.month-tab-compact.active:hover {
    background: var(--color-accent-primary-hover);
    box-shadow: 0 2px 6px color-mix(in oklab, var(--primary-400) 30%, transparent);
}

.month-tab:hover {
    background: color-mix(in srgb, var(--color-accent-primary) 6%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-primary) 32%, transparent);
    color: var(--color-accent-primary);
    box-shadow: 0 2px 6px color-mix(in oklab, var(--primary-400) 8%, transparent);
}

.month-tab.active {
    background: var(--color-accent-primary);
    color: white;
    border-color: var(--color-accent-primary);
    box-shadow: 0 2px 8px color-mix(in oklab, var(--primary-400) 25%, transparent);
}

.month-tab.active:hover {
    background: var(--color-accent-primary-hover);
    box-shadow: 0 3px 10px color-mix(in oklab, var(--primary-400) 30%, transparent);
}

.month-tab i {
    font-size: 0.9rem;
}

/* Forms */
.filters {
    background: var(--bg-light);
    padding: var(--spacing-lg);
    border-radius: var(--radius-xl);
    margin-bottom: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    align-items: flex-end;
    box-shadow: var(--shadow-sm);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.filter-group label {
    font-size: 13px;
    color: var(--color-text-secondary);
    font-weight: 600;
    font-family: 'Onest', sans-serif;
}

.filter-group input, .filter-group select {
    padding: 10px 16px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    font-size: var(--font-base);
    font-family: 'Onest', sans-serif;
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.filter-group input:focus, .filter-group select:focus {
    outline: none;
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* Новая форма поиска */
.search-form {
    margin-bottom: var(--spacing-lg);
}

.search-container {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    flex-wrap: wrap;
}

.search-input-wrapper {
    position: relative;
    flex: 1;
    min-width: 300px;
}

.search-icon {
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: 1rem;
    pointer-events: none;
    z-index: 1;
}

.search-input {
    width: 100%;
    padding: 1.1rem 1.1rem 1.1rem 3rem;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-xs);
    font-size: 1rem;
    font-family: 'Onest', sans-serif;
    color: var(--color-text-secondary);
    transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease;
    box-shadow: var(--shadow-sm);
}

.search-input:focus {
    outline: none;
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

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

.search-btn {
    padding: 1.1rem 1.5rem;
    background: var(--color-accent-primary);
    color: white;
    border: none;
    border-radius: var(--radius-xs);
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Onest', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--motion-fast) ease, transform var(--motion-base) ease, box-shadow var(--motion-base) ease;
    white-space: nowrap;
}

.search-btn:hover {
    background: var(--color-accent-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.search-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px color-mix(in oklab, var(--primary-400) 20%, transparent);
}

.search-btn i {
    font-size: 0.9rem;
}

.chart-filter {
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid var(--color-border-default);
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
}

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

/* Buttons */
.btn, .control-btn {
    padding: 0.7rem 1.2rem;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-xs);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Onest', sans-serif;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease, transform var(--motion-base) ease, box-shadow var(--motion-base) ease;
}

.btn:hover, .control-btn:hover {
    background: color-mix(in srgb, var(--color-accent-primary) 8%, var(--color-bg-elevated));
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
}

.btn:focus-visible, .control-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

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

.btn-primary:hover, .control-btn.active:hover {
    background: var(--color-accent-primary-hover);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.btn-secondary {
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    border-color: var(--color-border-default);
}

.btn-secondary:hover {
    background: color-mix(in srgb, var(--color-accent-primary) 8%, var(--color-bg-elevated));
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
}

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

.btn-success:hover,
.btn-success:hover i {
    background: var(--color-accent-success-hover) !important;
    color: white !important;
    border-color: var(--color-accent-success-hover) !important;
}

.btn-danger {
    background: var(--accent-red) !important;
    color: white !important;
    border-color: var(--accent-red) !important;
}

.btn-danger i,
.btn-danger span {
    color: white !important;
}

.btn-danger:hover,
.btn-danger:hover i,
.btn-danger:hover span {
    background: var(--color-accent-danger-hover) !important;
    color: white !important;
    border-color: var(--color-accent-danger-hover) !important;
}

.actions {
    margin-bottom: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Sync Form */
.sync-form {
    display: none;
    background: var(--glass-bg);
    border: 1px solid var(--color-border-default);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    margin: var(--space-lg) 0;
    box-shadow: var(--shadow-sm);
}

.sync-info-text {
    margin-top: var(--spacing-sm);
    font-size: var(--font-xs);
    color: var(--color-text-secondary);
}

/* Sync Result Panel */
.sync-result-panel {
    background: var(--glass-bg);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    margin: var(--space-lg) 0;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.sync-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: color-mix(in oklab, var(--primary-400) 5%, transparent);
    border-bottom: 1px solid var(--color-border-default);
    cursor: pointer;
}

.sync-result-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.sync-result-header h3 i {
    color: var(--accent-blue);
}

.sync-result-toggle {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.sync-result-toggle:hover {
    background: color-mix(in oklab, var(--primary-400) 10%, transparent);
    color: var(--accent-blue);
}

.sync-result-content {
    padding: var(--space-lg);
    max-height: 600px;
    overflow-y: auto;
}

.sync-result-content.collapsed {
    display: none;
}

.sync-result-loading {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-secondary);
}

.sync-result-loading i {
    color: var(--accent-blue);
}

.sync-result-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.sync-result-stat {
    background: color-mix(in oklab, var(--primary-400) 5%, transparent);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-default);
    box-shadow: var(--shadow-sm);
}

.sync-result-stat-label {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
}

.sync-result-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-secondary);
}

.sync-result-periods {
    margin-top: var(--space-lg);
}

.sync-result-periods h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.sync-result-period-item {
    padding: var(--space-sm) var(--space-md);
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-xs);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
}

.sync-result-period-item.failed {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.sync-result-period-item.completed {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

/* Errors Tab Styles */
.monospace {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
}

.child-task-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: rgba(139, 92, 246, 0.1);
    color: var(--accent-purple);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.parent-task-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: color-mix(in oklab, var(--primary-400) 10%, transparent);
    color: var(--accent-blue);
    border: 1px solid color-mix(in oklab, var(--primary-400) 30%, transparent);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.error-row {
    background: rgba(239, 68, 68, 0.05) !important;
}

.success-row {
    background: rgba(16, 185, 129, 0.05) !important;
}

.status-badge.status-pending {
    background: rgba(245, 158, 11, 0.1);
    color: var(--accent-orange);
    border: 1px solid rgba(245, 158, 11, 0.3);
    box-shadow: var(--shadow-sm);
}

.status-badge.status-running {
    background: color-mix(in oklab, var(--primary-400) 10%, transparent);
    color: var(--accent-blue);
    border: 1px solid color-mix(in oklab, var(--primary-400) 30%, transparent);
    box-shadow: var(--shadow-sm);
}

.status-badge.status-completed {
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-green);
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: var(--shadow-sm);
}

.status-badge.status-failed {
    background: rgba(239, 68, 68, 0.1);
    color: var(--accent-red);
    border: 1px solid rgba(239, 68, 68, 0.3);
    box-shadow: var(--shadow-sm);
}

/* Tables - Карточный дизайн */
.table-container {
    position: relative;
    overflow-x: auto;
    max-height: 800px;
    overflow-y: auto;
    margin-bottom: var(--spacing-lg);
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
    border-radius: var(--radius-md);
    box-shadow: none;
}

/* Sticky header для таблиц */
.table-container table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-bg-elevated);
    box-shadow: var(--shadow-sm);
}

.table-container table thead th {
    background: var(--color-bg-elevated);
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Применить моноширинный шрифт ко всем элементам таблиц */
table td,
table th {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 13px;
}

thead {
    background: transparent;
}

thead th {
    padding: 0.5rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-border-default);
}

/* Зеленый заголовок для поступлений */
thead th.income {
    color: var(--accent-green);
}

/* Красный заголовок для расходов */
thead th.expense {
    color: var(--accent-red);
}

tbody tr {
    background: var(--color-bg-elevated);
    border: none;
    border-bottom: 1px solid var(--color-border-default);
    border-radius: 0;
}

/* Здесь линии задаются через td — иначе дублируется с border-bottom у tr */
.top-products-table tbody tr {
    border-bottom: none;
}

tbody tr:hover {
    background: color-mix(in srgb, var(--color-accent-primary) 8%, var(--color-bg-elevated));
}

tbody td {
    padding: 0.5rem 1rem;
    vertical-align: middle;
    font-size: 13px;
    color: var(--color-text-primary);
}

/* Зеленые ячейки с поступлениями */
tbody td.income {
    color: var(--accent-green);
    font-weight: 600;
}

/* Красные ячейки с расходами */
tbody td.expense {
    color: var(--accent-red);
    font-weight: 600;
}

/* Убрать красный цвет для total_commission */
tbody td[data-column="total_commission"] {
    color: var(--color-text-primary) !important;
}

/* Серые ячейки с нулевыми значениями */
tbody td.zero {
    color: var(--color-text-muted);
}

/* Компактные стили для числовых колонок */
tbody td.income,
tbody td.expense,
tbody td[data-column="revenue"],
tbody td[data-column="acquiring"],
tbody td[data-column="commission"],
tbody td[data-column="delivery"],
tbody td[data-column="total_commission"],
tbody td[data-column="partner"],
tbody td[data-column="other"],
tbody td[data-column="cost_price"],
tbody td[data-column="profit"] {
    padding: 0.5rem 0.75rem;
    font-size: 13px;
    font-weight: 400;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 90px;
    max-width: 120px;
}

/* Отдельное правило для sales с font-weight: 600 */
tbody td[data-column="sales"] {
    font-weight: 600;
}

/* Заголовки для числовых колонок */
thead th.income,
thead th.expense,
thead th[data-column="revenue"],
thead th[data-column="acquiring"],
thead th[data-column="commission"],
thead th[data-column="delivery"],
thead th[data-column="total_commission"],
thead th[data-column="partner"],
thead th[data-column="other"],
thead th[data-column="cost_price"],
thead th[data-column="profit"] {
    padding: 0.5rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-border-default);
}
tbody td[data-column="profit"] {
    background: rgba(52, 211, 153, 0.08) !important;
    border: 2px solid rgba(52, 211, 153, 0.3);
    font-size: 13px;
    padding: 0 2rem;
    border-right: 2px solid rgba(52, 211, 153, 0.3);
    position: relative;
    box-shadow: rgba(52, 211, 153, 0.498) 0px 3.97666px 15.9066px 0px;
    text-align: center;
}

.column-importance.high {
    background: var(--accent-green);
    box-shadow: 0 0 6px var(--accent-green);
}

.column-importance {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
}

/* Оранжевый бейдж статуса (по умолчанию - для остальных статусов) */
.status {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border-radius: 20px;
    background: color-mix(in srgb, var(--color-accent-warning) 14%, transparent);
    color: var(--color-accent-warning);
    border: 1px solid color-mix(in srgb, var(--color-accent-warning) 28%, transparent);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Синий номер заказа */
.order-number {
    color: var(--color-text-secondary);
    font-weight: 400;
    font-size: 0.75rem;
}

/* Даты - два уровня */
/* .date-cell - убрано display: flex для правильного отображения в таблице */

.date-cell .date-main {
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 0.75rem;
    display: block;
}

.date-cell .date-time {
    color: var(--color-text-dim);
    font-size: 0.65rem;
    display: block;
}

/* Дата в таблицах: слева «17 апр» и время, справа год водяным знаком (DateHelper::renderStackCell) */
.date-stack {
    position: relative;
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr) minmax(2.35rem, 2.75rem);
    align-items: center;
    gap: 0.15rem 0.35rem;
    vertical-align: middle;
    min-width: 5rem;
    min-height: 2.5rem;
    padding: 0.15rem 0.35rem;
    line-height: 1.2;
    overflow: visible;
}

.date-stack__content {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 0;
}

.date-stack__year {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    font-size: 2.05rem;
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1;
    color: color-mix(in srgb, var(--color-text-muted, var(--text-dim)) 18%, transparent);
    opacity: 0.38;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.date-stack__line {
    font-size: var(--font-sm, 1.0125rem);
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.date-stack__time {
    font-size: 0.65rem;
    line-height: 1.2;
    font-weight: 500;
    color: var(--color-text-muted, var(--text-dim));
    white-space: nowrap;
}

.date-stack--empty,
.date-stack--invalid {
    display: inline-block;
    padding: 0.15rem 0.25rem;
    min-height: auto;
    grid-template-columns: none;
}

.date-stack--empty {
    color: var(--color-text-muted);
    font-size: var(--font-sm);
}

.date-stack--invalid {
    color: var(--color-accent-warning);
    font-size: var(--font-xs);
}

/* Управление видимостью колонок */
.column-toggle {
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.column-toggle-btn {
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-default);
    padding: 0.7rem 1.2rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 200;
    font-family: 'Onest', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}

.column-toggle-btn i {
    color: var(--color-accent-primary);
}

.column-toggle-btn:hover {
    background: color-mix(in srgb, var(--color-accent-primary) 10%, var(--color-bg-elevated));
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
    box-shadow: var(--shadow-sm);
}

.column-toggle-btn:hover i {
    color: var(--color-accent-primary);
}

/* Кнопка экспорта Excel */
.export-excel-btn {
    background: linear-gradient(135deg, var(--color-accent-success) 0%, var(--color-accent-success-hover) 100%) !important;
    color: white !important;
    border: none !important;
    transition: all 0.3s ease;
}

.export-excel-btn:hover {
    background: linear-gradient(135deg, var(--color-accent-success-hover) 0%, #047857 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent-success) 35%, transparent);
}

.export-excel-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.export-excel-btn i {
    color: white !important;
}

.column-toggle-menu {
    display: none;
    position: absolute;
    background: var(--glass-bg);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 12px;
    margin-top: 8px;
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    min-width: 220px;
}

.column-toggle-menu.show {
    display: block;
}

.column-toggle-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 8px;
}

.column-toggle-item:hover {
    background: var(--bg-light);
}

.column-toggle-item input[type="checkbox"] {
    margin-right: 10px;
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.column-toggle-item label {
    cursor: pointer;
    flex: 1;
    font-size: 14px;
    font-family: 'Onest', sans-serif;
    font-weight: 500;
}

/* Скрытые колонки */
table th.hidden,
table td.hidden {
    display: none;
}

td[rowspan] {
    vertical-align: top;
}

/* Обновленные стили для amount-positive и amount-negative */
.amount-positive {
    color: #2ecc71;
    font-weight: 600;
}

.amount-negative {
    color: #e74c3c;
    font-weight: 600;
}

/* Pagination */
.pagination {
    margin-top: var(--spacing-lg);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.pagination a, .pagination span {
    padding: 10px 16px;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-xs);
    text-decoration: none;
    color: var(--color-primary);
    font-weight: 600;
    font-family: 'Onest', sans-serif;
    background: var(--glass-bg);
}

.pagination .current {
    background: var(--glass-bg);
    color: var(--accent-blue);
    border: 2px solid var(--accent-blue);
    box-shadow: var(--shadow-sm);
    font-weight: 700;
}

.pagination a:hover {
    background: var(--bg-light);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

/* Info Blocks */
.info {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
    padding: 0.5rem var(--space-md);
    border-left: 4px solid var(--color-accent-primary);
    background: color-mix(in srgb, var(--color-accent-primary) 8%, transparent);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.info.warning {
    border-left-color: var(--color-accent-warning);
    background: color-mix(in srgb, var(--color-accent-warning) 10%, transparent);
}

.info.success {
    border-left-color: var(--color-accent-success);
    background: color-mix(in srgb, var(--color-accent-success) 10%, transparent);
}

.info.danger {
    border-left-color: var(--color-accent-danger);
    background: color-mix(in srgb, var(--color-accent-danger) 10%, transparent);
}

.info strong {
    font-weight: 600;
}

/* Empty table cells */
.table-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-light);
}

/* Empty States - красивые пустые состояния */
.table-empty-state {
    text-align: center;
    padding: var(--space-xl) var(--space-lg);
}

.empty-state-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    max-width: 400px;
    margin: 0 auto;
}

.empty-state-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, 
        color-mix(in oklab, var(--primary-400) 8%, transparent) 0%, 
        rgba(139, 92, 246, 0.08) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--accent-blue);
    margin-bottom: var(--space-sm);
}

.empty-state-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-xs) 0;
}

.empty-state-description {
    font-size: var(--font-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--space-md) 0;
}

.empty-state-action {
    margin-top: var(--space-sm);
}

/* Skeleton Loading для таблиц */
.skeleton-table {
    padding: var(--space-lg);
}

.skeleton-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.skeleton-cell {
    height: 20px;
    background: linear-gradient(
        90deg,
        rgba(226, 232, 240, 0.4) 0%,
        rgba(226, 232, 240, 0.8) 50%,
        rgba(226, 232, 240, 0.4) 100%
    );
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: shimmer 1.5s infinite;
}

[data-theme="light"] .skeleton-cell {
    background: linear-gradient(
        90deg,
        rgba(148, 163, 184, 0.2) 0%,
        rgba(148, 163, 184, 0.4) 50%,
        rgba(148, 163, 184, 0.2) 100%
    );
}

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

.skeleton-cell:nth-child(1) { width: 80%; }
.skeleton-cell:nth-child(2) { width: 60%; }
.skeleton-cell:nth-child(3) { width: 90%; }
.skeleton-cell:nth-child(4) { width: 70%; }

/* Плавающая кнопка действий (FAB) */
.fab-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.fab-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 20px color-mix(in oklab, var(--primary-400) 40%, transparent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    z-index: 1001;
}

.fab-button:hover {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 6px 30px color-mix(in oklab, var(--primary-400) 60%, transparent);
}

.fab-button:active {
    transform: scale(0.95);
}

.fab-button.active {
    transform: rotate(45deg);
}

/* Меню FAB */
.fab-menu {
    position: absolute;
    bottom: 70px;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 12px;
    animation: fabMenuSlideUp 0.3s ease;
}

.fab-menu.show {
    display: flex;
}

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

.fab-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--glass-bg);
    border: none;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    font-family: 'Onest', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}

.fab-menu-item i {
    font-size: 1.2rem;
    color: var(--accent-blue);
}

.fab-menu-item:hover {
    transform: translateX(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    background: linear-gradient(90deg, var(--glass-bg) 0%, color-mix(in oklab, var(--primary-400) 5%, transparent) 100%);
}

.fab-menu-item-danger i {
    color: var(--accent-red);
}

.fab-menu-item-danger:hover {
    background: linear-gradient(90deg, var(--glass-bg) 0%, rgba(239, 68, 68, 0.05) 100%);
}

/* Модальное окно синхронизации */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-overlay-backdrop);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.modal-dialog-sync {
    background: var(--color-bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
    position: relative;
    z-index: 10001;
}

.modal-header {
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-border-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, 
        color-mix(in oklab, var(--primary-400) 5%, transparent) 0%, 
        rgba(139, 92, 246, 0.05) 100%
    );
}

.modal-header h3 {
    margin: 0;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-text-secondary);
}

.modal-close {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.modal-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-accent-danger);
}

.modal-body {
    padding: var(--space-lg);
    overflow-y: auto;
}

.sync-info-card {
    background: color-mix(in srgb, var(--color-accent-primary) 8%, transparent);
    border-left: 4px solid var(--color-accent-primary);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-lg);
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    box-shadow: var(--shadow-sm);
}

.sync-info-card i {
    color: var(--color-accent-primary);
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.sync-info-card__heading {
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--color-text-primary);
}

.sync-info-card__title {
    font-weight: 600;
}

.sync-info-card__text {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Нейтральные карточки (автосинхронизация) */
.sync-info-card--neutral {
    background: color-mix(in srgb, var(--color-text-muted) 10%, transparent);
    border-left-color: var(--color-border-strong);
}

.sync-info-card--neutral i {
    color: var(--color-text-muted);
}

/* Информационные подсказки (серый, не акцентный синий) */
.sync-info-card--muted {
    background: color-mix(in srgb, var(--color-text-dim) 12%, transparent);
    border-left-color: var(--color-border-strong);
}

.sync-info-card--muted i {
    color: var(--color-text-muted);
}

.sync-info-card--message-success {
    background: color-mix(in srgb, var(--color-accent-success) 12%, transparent);
    border-left-color: var(--color-accent-success);
}

.sync-info-card--message-success i {
    color: var(--color-accent-success);
}

.sync-info-card--message-success .sync-info-card__title {
    color: var(--color-accent-success);
}

.sync-info-card--message-danger {
    background: color-mix(in srgb, var(--color-accent-danger) 12%, transparent);
    border-left-color: var(--color-accent-danger);
}

.sync-info-card--message-danger i {
    color: var(--color-accent-danger);
}

.sync-info-card--message-danger .sync-info-card__title {
    color: var(--color-accent-danger);
}

.sync-info-card--status-success {
    background: color-mix(in srgb, var(--color-accent-success) 14%, transparent);
    border-left-color: var(--color-accent-success);
}

.sync-info-card--status-success i {
    color: var(--color-accent-success);
}

.sync-info-card--status-success .sync-info-card__heading {
    color: var(--color-accent-success);
}

.sync-info-card--status-danger {
    background: color-mix(in srgb, var(--color-accent-danger) 12%, transparent);
    border-left-color: var(--color-accent-danger);
}

.sync-info-card--status-danger i {
    color: var(--color-accent-danger);
}

.sync-info-card--status-danger .sync-info-card__heading {
    color: var(--color-accent-danger);
}

.sync-info-card--security {
    background: color-mix(in srgb, var(--color-accent-success) 10%, transparent);
    border-left-color: var(--color-accent-success);
    margin-top: var(--space-xl);
}

.sync-info-card--security i {
    color: var(--color-accent-success);
}

.settings-text-danger {
    color: var(--color-accent-danger);
}


/* ——— Страница «Подключение» (Ozon / WB) ——— */
.content-container.settings-page.settings-api-keys-stack,
.settings-page.settings-api-keys-stack,
.settings-api-keys-stack.settings-page {
    --settings-inset: 0;
    --settings-width: var(--layout-settings-max-width);
    --settings-text-2xs: 0.75rem;
    --settings-text-xs: 0.8125rem;
    --settings-text-sm: 0.875rem;
    --settings-text-base: 0.9375rem;
    --settings-text-md: 1.0625rem;
    --settings-text-lg: 1.1875rem;
    --settings-text-xl: 1.5625rem;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--settings-width);
    margin: 0;
    margin-right: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.settings-page .content-section {
    margin-bottom: var(--space-xl);
}

.settings-page .content-section:last-child {
    margin-bottom: 0;
}

.settings-hero {
    padding: var(--space-xl);
}

.settings-hero__head {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
}

.settings-hero__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
}

.settings-access-notice {
    margin-bottom: 0;
}

.settings-page__section.section-card {
    padding: var(--space-xl);
}

.settings-page__masthead {
    margin: 0;
    padding: 0 0 var(--space-md);
    border-bottom: 1px solid var(--color-border-default);
}

.settings-page__title {
    margin: 0 0 var(--space-xs);
    font-size: var(--settings-text-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}

.settings-page__lead {
    margin: 0;
    max-width: 40rem;
    font-size: var(--settings-text-base);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.settings-page__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-md);
}

.settings-page__nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: var(--settings-text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-bg-elevated, var(--color-bg-surface));
    border: 1px solid var(--color-border-default);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.settings-page__nav-link:hover {
    color: var(--color-text-primary);
    border-color: var(--color-border-strong, var(--color-border-default));
}

.settings-page__nav-link:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.settings-page__nav-link.is-active {
    color: var(--accent-blue, var(--primary-600));
    background: color-mix(in oklab, var(--accent-blue, var(--primary-500)) 10%, var(--color-bg-surface));
    border-color: color-mix(in oklab, var(--accent-blue, var(--primary-500)) 35%, var(--color-border-default));
}

.settings-page__alert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--color-accent-danger) 35%, transparent);
    background: color-mix(in srgb, var(--color-accent-danger) 8%, var(--color-bg-surface));
    color: var(--color-accent-danger);
}

.settings-page__alert-text {
    margin: 0;
    flex: 1;
    min-width: 12rem;
    font-size: var(--settings-text-base);
    line-height: 1.45;
}

.settings-page__alerts {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.settings-page__notice {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--settings-text-base);
    line-height: 1.45;
    border: 1px solid var(--color-border-default);
}

.settings-page__notice--success {
    color: var(--color-accent-success);
    background: color-mix(in srgb, var(--color-accent-success) 10%, var(--color-bg-surface));
    border-color: color-mix(in srgb, var(--color-accent-success) 30%, transparent);
}

.settings-page__notice--danger {
    color: var(--color-accent-danger);
    background: color-mix(in srgb, var(--color-accent-danger) 8%, var(--color-bg-surface));
    border-color: color-mix(in srgb, var(--color-accent-danger) 28%, transparent);
}

.settings-page__section {
    scroll-margin-top: 5rem;
}

.settings-page__section--panel {
    padding: var(--space-lg);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
}

.settings-connection-card.is-required-missing {
    border-color: color-mix(in srgb, var(--color-accent-warning, #f59e0b) 45%, var(--color-border-default));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent-warning, #f59e0b) 20%, transparent);
}

.settings-page__section-head {
    margin: 0 0 var(--space-md);
}

.settings-page__section-title {
    margin: 0 0 var(--space-xs);
    font-size: var(--settings-text-lg);
    font-weight: 700;
    color: var(--color-text-primary);
}

.settings-page__section-desc {
    margin: 0;
    font-size: var(--settings-text-sm);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.settings-page__block + .settings-page__block {
    margin-top: var(--space-lg);
}

.settings-page__block--divider {
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border-default);
}

.settings-page__block-title {
    margin: 0 0 var(--space-xs);
    font-size: var(--settings-text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.settings-page__block-desc {
    margin: 0 0 var(--space-md);
    font-size: var(--settings-text-sm);
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.settings-connection-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.settings-connection-card {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: var(--space-md) var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-elevated, var(--color-bg-page));
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
}

.settings-connection-card__logo {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2px;
}

.settings-connection-card__img {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
}

.settings-connection-card__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.settings-connection-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
}

.settings-connection-card__intro {
    min-width: 0;
}

.settings-connection-card__label {
    display: block;
    margin: 0 0 0.2rem;
    font-size: var(--settings-text-2xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.settings-connection-card__label--required {
    color: var(--color-text-muted);
}

.settings-connection-card__title {
    margin: 0;
    font-size: var(--settings-text-md);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-primary);
}

.settings-connection-card__desc {
    margin: 0.25rem 0 0;
    font-size: var(--settings-text-sm);
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.settings-connection-card__status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: var(--settings-text-2xs);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.settings-connection-card__status--ok {
    color: var(--color-accent-success);
    background: color-mix(in srgb, var(--color-accent-success) 12%, var(--color-bg-surface));
    border: 1px solid color-mix(in srgb, var(--color-accent-success) 28%, transparent);
}

.settings-connection-card__status--bad {
    color: var(--color-accent-danger);
    background: color-mix(in srgb, var(--color-accent-danger) 10%, var(--color-bg-surface));
    border: 1px solid color-mix(in srgb, var(--color-accent-danger) 26%, transparent);
}

.settings-connection-card__status--neutral {
    color: var(--color-text-secondary);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
}

.settings-connection-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid color-mix(in oklab, var(--color-border-default) 70%, transparent);
}

.settings-connection-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

.settings-connection-card__facts li {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.settings-connection-card__fact-label {
    font-size: var(--settings-text-2xs);
    color: var(--color-text-muted);
}

.settings-connection-card__fact-value {
    font-size: var(--settings-text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.settings-connection-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    margin-left: auto;
}

.settings-sync-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.settings-sync-row {
    border-bottom: 1px solid var(--color-border-default);
    background: var(--color-bg-elevated, var(--color-bg-page));
}

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

.settings-sync-row__head {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: var(--space-sm) var(--space-md);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--settings-text-base);
}

.settings-sync-row__head::-webkit-details-marker {
    display: none;
}

.settings-sync-row__name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    min-width: 0;
}

.settings-sync-row__name i {
    color: var(--color-text-muted);
    font-size: 1.1rem;
}

.settings-sync-row__status {
    font-size: var(--settings-text-2xs);
    font-weight: 700;
    white-space: nowrap;
}

.settings-sync-row__status--success { color: var(--color-accent-success); }
.settings-sync-row__status--danger { color: var(--color-accent-danger); }
.settings-sync-row__status--warning { color: var(--color-accent-warning, #d97706); }
.settings-sync-row__status--neutral { color: var(--color-text-muted); }

.settings-sync-row__date {
    font-size: var(--settings-text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.settings-sync-row__toggle {
    color: var(--color-text-muted);
    font-size: 1rem;
    transition: transform 0.15s ease;
}

.settings-sync-row[open] .settings-sync-row__toggle {
    transform: rotate(180deg);
}

.settings-sync-row__body {
    padding: 0 var(--space-md) var(--space-sm);
    border-top: 1px solid color-mix(in oklab, var(--color-border-default) 60%, transparent);
    background: var(--color-bg-surface);
}

.settings-sync-row__body p {
    margin: 0 0 var(--space-xs);
    font-size: var(--settings-text-sm);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.settings-sync-row__body p:last-child {
    margin-bottom: var(--space-sm);
}

.settings-sync-row__link-wrap {
    margin-top: 0.35rem;
}

.settings-sync-row__link {
    color: var(--color-accent-primary, #2563eb);
    font-size: var(--settings-text-sm);
    text-decoration: none;
}

.settings-sync-row__link:hover {
    text-decoration: underline;
}

.settings-connection-sync-log__empty {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--settings-text-base);
}

.settings-connection-sync-log {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.settings-connection-sync-log__item {
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    background: var(--color-surface, #fff);
}

.settings-connection-sync-log__item--ok {
    border-left: 3px solid var(--color-accent-success, #16a34a);
}

.settings-connection-sync-log__item--bad {
    border-left: 3px solid var(--color-accent-danger, #dc2626);
}

.settings-connection-sync-log__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
}

.settings-connection-sync-log__title {
    font-weight: 600;
    font-size: var(--settings-text-base);
}

.settings-connection-sync-log__time {
    font-size: var(--settings-text-xs);
    color: var(--color-text-muted);
}

.settings-connection-sync-log__message {
    margin: 0.35rem 0 0;
    font-size: var(--settings-text-sm);
    color: var(--color-text-secondary, #4b5563);
}

.settings-journal-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.settings-page__footnote {
    margin: 0;
    padding: var(--space-xl);
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: var(--settings-text-sm);
    line-height: 1.5;
    color: var(--color-text-muted);
}

.settings-page__footnote.section-card {
    border-top: none;
}

.settings-page__footnote i {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--color-accent-success);
}

.settings-extension-steps {
    margin: 0 0 var(--space-md);
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.settings-extension-steps__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: var(--settings-text-base);
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.settings-extension-steps__num {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: var(--settings-text-2xs);
    font-weight: 700;
    color: var(--color-text-primary);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-default);
}

@media (max-width: 720px) {
    .settings-page.settings-api-keys-stack,
    .settings-api-keys-stack.settings-page {
        --settings-inset: var(--space-md);
        --settings-width: 100%;
        padding-top: var(--space-sm);
    }

    .settings-connection-card {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .settings-connection-card__logo {
        display: none;
    }

    .settings-connection-card__header {
        flex-direction: column;
        align-items: stretch;
    }

    .settings-connection-card__status {
        align-self: flex-start;
    }

    .settings-connection-card__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .settings-connection-card__actions {
        margin-left: 0;
        width: 100%;
    }

    .settings-connection-card__actions .btn {
        flex: 1 1 auto;
    }

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

    .settings-sync-row__date,
    .settings-sync-row__toggle {
        grid-column: 2;
    }
}


/* Модалки ключей на странице настроек */
.settings-api-keys-modal__dialog {
    max-width: 36rem;
}

.settings-api-keys-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.settings-api-modal-help {
    margin-bottom: 0;
}

.settings-api-modal-help .sync-info-card__text {
    margin-bottom: 0;
}

.settings-api-keys-modal__form .form-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.settings-api-keys-modal__form .form-field label {
    font-size: var(--font-sm);
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-secondary);
}

.settings-api-keys-modal__form .form-field input,
.settings-api-keys-modal__form .form-field textarea {
    width: 100%;
    min-width: 0;
}

.settings-api-keys-modal__form .settings-textarea-api {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--font-sm);
    line-height: 1.45;
    resize: vertical;
    min-height: 6.5rem;
}

.settings-api-keys-modal__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border-default);
    margin-top: var(--space-xs);
}

.settings-api-keys-modal__actions--ext {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.settings-ext-card-spaced {
    margin-top: 0;
}

.settings-ext-key-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.settings-ext-key-field__label {
    margin: 0;
    font-size: var(--settings-text-sm, 0.8125rem);
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.settings-ext-key-field__row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-sm);
}

.settings-api-keys-modal .settings-ext-key-field__input {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    min-height: 5.5rem;
    padding: 0.75rem 1rem;
    font-size: var(--settings-text-sm, 0.8125rem);
    line-height: 1.45;
    resize: none;
    border-radius: var(--radius-sm, 6px);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
}

.settings-ext-key-field__copy {
    flex-shrink: 0;
    align-self: flex-end;
}

@media (min-width: 520px) {
    .settings-ext-key-field__row {
        flex-wrap: nowrap;
    }

    .settings-api-keys-modal .settings-ext-key-field__input {
        flex: 1 1 auto;
    }

    .settings-ext-key-field__copy {
        align-self: stretch;
    }
}

.settings-api-modal-extra-meta {
    margin: 0;
    text-align: left;
}

/* Секция: форма слева, справка справа */
.logs-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.logs-page-header__settings-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
}

.logs-page-header__settings-link:hover {
    color: var(--color-primary);
}

.settings-api-keys-info .settings-section-title {
    margin-top: 0;
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--color-text-primary);
}

.settings-api-keys-info--footer {
    margin-bottom: 0;
}

/* Аккордеон подсказок на странице настроек API */
.sync-info-card.settings-info-accordion {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.sync-info-card.settings-info-accordion > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    width: 100%;
}

.sync-info-card.settings-info-accordion > summary::-webkit-details-marker {
    display: none;
}

.settings-info-accordion__chevron {
    flex-shrink: 0;
    width: 1.25rem;
    display: flex;
    justify-content: center;
    margin-top: 2px;
    color: var(--color-text-muted);
    transition: transform var(--motion-fast) ease;
}

.sync-info-card.settings-info-accordion[open] .settings-info-accordion__chevron {
    transform: rotate(180deg);
}

.settings-info-accordion__panel {
    margin-top: var(--space-sm);
    padding-left: calc(1.25rem + var(--space-md) + 1.2rem + var(--space-md));
}

.settings-info-accordion__panel .sync-info-card__text {
    margin-bottom: 0;
}

.sync-info-card.settings-info-accordion .sync-info-card__heading {
    margin-bottom: 0;
}

.settings-api-keys-info .sync-info-card__heading {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Карточка только с формой сохранения ключей (не внутри общего cost-price-form с инфо) */
.settings-keys-panel--card {
    width: 100%;
    max-width: none;
    margin-bottom: 0;
    background: var(--color-bg-surface);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-default);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.settings-keys-panel--card.settings-keys-panel--state-ok {
    background: linear-gradient(
        145deg,
        color-mix(in oklab, var(--color-accent-success, #16a34a) 12%, var(--color-bg-surface)) 0%,
        var(--color-bg-surface) 55%,
        var(--color-bg-surface) 100%
    );
    border-color: color-mix(in oklab, var(--color-accent-success, #16a34a) 28%, var(--color-border-default));
}

.settings-keys-panel--card.settings-keys-panel--state-bad {
    background: linear-gradient(
        145deg,
        color-mix(in oklab, var(--color-accent-danger, #dc2626) 10%, var(--color-bg-surface)) 0%,
        var(--color-bg-surface) 55%,
        var(--color-bg-surface) 100%
    );
    border-color: color-mix(in oklab, var(--color-accent-danger, #dc2626) 25%, var(--color-border-default));
}

.settings-keys-panel--card .form-field {
    display: grid;
    grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr);
    gap: var(--space-md);
    align-items: center;
    margin-bottom: var(--space-md);
}

.settings-keys-panel--card .form-field--textarea {
    align-items: start;
}

.settings-keys-panel--card .form-field--textarea > label {
    padding-top: 0.65rem;
}

.settings-keys-panel--card .form-field label {
    font-size: var(--font-lg);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    display: block;
    line-height: 1.25;
    margin: 0;
}

.settings-keys-panel--card .form-field label.settings-label-wb-token {
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: var(--font-lg);
}

.settings-keys-panel--card .form-field input,
.settings-keys-panel--card .form-field textarea {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.settings-keys-panel--card .settings-textarea-api {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--font-sm);
    line-height: 1.45;
    resize: vertical;
    min-height: 5rem;
}

/* Заголовок подблока формы — как .cost-price-csv-block h3 (UI governance) */
.settings-keys-panel__title {
    margin: 0 0 var(--space-md) 0;
    font-size: var(--font-lg);
    font-weight: 900;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.settings-keys-panel__meta {
    margin: var(--space-sm) 0 0;
    font-size: var(--font-sm, 1.0125rem);
    color: var(--color-text-muted);
}

.settings-keys-panel__meta--secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    align-items: baseline;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.45;
}

.settings-wb-linkage__item {
    white-space: normal;
}

.settings-keys-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid color-mix(in oklab, var(--color-border-default) 80%, transparent);
}

.settings-keys-footer__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.settings-keys-footer__status {
    font-size: var(--font-sm, 1.0125rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.settings-keys-footer__status--ok {
    color: var(--color-accent-success, #16a34a);
}

.settings-keys-footer__status--bad {
    color: var(--color-accent-danger, #dc2626);
}

.settings-inline-form {
    display: inline-flex;
    margin: 0;
}

.settings-keys-panel__title i {
    color: var(--color-text-muted);
    font-size: 1.2em;
}

.settings-input-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.settings-hint {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--font-sm);
    line-height: 1.45;
}

.settings-hint--success {
    color: var(--color-accent-success);
}

.settings-hint--danger {
    color: var(--color-accent-danger);
}

.settings-hint--muted {
    display: block;
    margin-top: var(--space-sm);
    font-size: var(--font-sm);
    line-height: 1.45;
    color: var(--color-text-muted);
}

.settings-keys-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field label {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-field input,
.form-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-xs);
    font-size: var(--font-base);
    font-family: 'Onest', sans-serif;
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.form-field textarea {
    min-height: 4.5rem;
    resize: vertical;
    line-height: 1.45;
}

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

/* Строка: чекбокс + подпись (логин и т.п.) */
.form-field--row {
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.form-field--row label,
.form-field--row .form-field--row-label {
    font-weight: 500;
    margin: 0;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: var(--font-sm);
}

.sync-period-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: var(--space-lg);
}

.period-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(6, 182, 212, 0.1);
    border-radius: var(--radius-sm);
    color: var(--accent-cyan);
    font-weight: 600;
    font-size: var(--font-sm);
    align-self: flex-start;
}

.period-warning {
    font-size: var(--font-sm);
    font-weight: 600;
}

.modal-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: flex-end;
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border-default);
}

/* Модальное окно предупреждения (очистка БД) */
.modal-dialog-warning {
    background: var(--color-bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
    position: relative;
    z-index: 10001;
}

.modal-header-danger {
    background: linear-gradient(135deg, 
        rgba(239, 68, 68, 0.1) 0%, 
        rgba(220, 38, 38, 0.05) 100%
    );
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
}

.modal-header-danger h3 {
    color: var(--color-accent-danger);
}

.warning-card {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: rgba(239, 68, 68, 0.05);
    border-radius: var(--radius-md);
    border: 2px solid rgba(239, 68, 68, 0.2);
}

.warning-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-accent-danger) 0%, var(--color-accent-danger-hover) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent-danger) 35%, transparent);
}

.warning-content h4 {
    margin: 0 0 12px 0;
    font-size: 1.1rem;
    color: var(--color-text-secondary);
}

.warning-content p {
    margin: 0 0 16px 0;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.warning-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: var(--color-bg-elevated);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-accent-danger);
    box-shadow: var(--shadow-sm);
}

.warning-note i {
    color: var(--color-accent-danger);
    margin-top: 2px;
    flex-shrink: 0;
}

.warning-note span {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
}

.btn-danger {
    background: linear-gradient(135deg, var(--color-accent-danger) 0%, var(--color-accent-danger-hover) 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-accent-danger) 35%, transparent);
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-accent-danger) 45%, transparent);
    background: linear-gradient(135deg, var(--color-accent-danger-hover) 0%, #b91c1c 100%);
}

.btn-danger:active {
    transform: translateY(0);
}

.btn-outline {
    background: var(--glass-bg);
    color: var(--color-text-secondary);
    border: 2px solid var(--color-border-default);
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--motion-base) ease, border-color var(--motion-base) ease, color var(--motion-base) ease, transform var(--motion-base) ease, box-shadow var(--motion-base) ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-sm);
}

.btn-outline:hover {
    background: var(--glass-bg);
    border-color: var(--color-text-primary);
    color: var(--color-text-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Адаптивность для FAB и модального окна */
@media (max-width: 768px) {
    .fab-container {
        bottom: 20px;
        right: 20px;
    }
    
    .fab-button {
        width: 56px;
        height: 56px;
        font-size: 1.3rem;
    }
    
    .fab-menu-item span {
        display: none;
    }
    
    .modal-overlay {
        padding: 0;
    }
    
    .modal-dialog-sync,
    .modal-dialog-warning {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
        animation: slideUp 0.3s ease;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .modal-actions {
        flex-direction: column;
    }
    
    .modal-actions .btn {
        width: 100%;
    }
    
    .warning-card {
        flex-direction: column;
        text-align: center;
    }
    
    .warning-icon {
        margin: 0 auto;
    }
    
    .fab-menu-item {
        width: 48px;
        height: 48px;
        padding: 0;
        justify-content: center;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .modal-actions {
        flex-direction: column-reverse;
    }
    
    .modal-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Карточка-обёртка для форм (настройки ключей, логин и т.д. — вне section-card) */
.cost-price-form {
    background: var(--color-bg-surface);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-default);
}

.cost-price-form > h3 {
    margin: 0 0 var(--space-md) 0;
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Вложенная карточка формы на странице себестоимости (внутри section-card-inner) */
.section-card-inner .cost-price-form {
    background: var(--color-bg-elevated);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    margin-top: 0;
    margin-bottom: var(--space-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-default);
}

.section-card-inner .cost-price-form > h3 {
    margin: 0 0 var(--space-md) 0;
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Подписи полей — обычный вес, иерархия ниже заголовка блока */
.section-card-inner .cost-price-form .form-field label {
    font-weight: 400;
    color: var(--color-text-secondary);
}

/* Одна строка полей на широком экране (auto-fit), не глобальный .form-grid в 2 колонки */
.cost-price-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.cost-price-page-toolbar {
    padding: 0 var(--space-lg);
    margin-bottom: 0;
}

.cost-price-form-csv-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    align-items: stretch;
    margin-bottom: var(--space-lg);
}

.cost-price-form-csv-row--csv-only > .cost-price-csv-block {
    flex: 1 1 100%;
    max-width: 720px;
}

.cost-price-workflow-hint {
    line-height: 1.5;
}

.cost-price-form-csv-row > .cost-price-form,
.cost-price-form-csv-row > .cost-price-csv-block {
    flex: 1 1 280px;
    min-width: 0;
}

.section-card-inner .cost-price-form-csv-row > .cost-price-form,
.section-card-inner .cost-price-form-csv-row > .cost-price-csv-block {
    margin-top: 0;
    margin-bottom: 0;
}

.cost-price-form-csv-row > .cost-price-csv-block {
    margin-top: 0;
}

.cost-price-form-csv-row .cost-price-form {
    display: flex;
    flex-direction: column;
}

.cost-price-form-csv-row .cost-price-form > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.cost-price-form-csv-row .cost-price-form-grid {
    grid-template-columns: 1fr;
}

.cost-price-th-sortable {
    padding: 0 !important;
    vertical-align: bottom;
}

.section-card-inner .table-container thead th.cost-price-th-sortable a.cost-price-sort-toggle,
.section-card-inner .table-container thead th.cost-price-th-sortable a.cost-price-sort-toggle:link,
.section-card-inner .table-container thead th.cost-price-th-sortable a.cost-price-sort-toggle:visited {
    text-decoration: none;
    color: inherit;
}

.cost-price-sort-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-xs);
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    margin: 0;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease, color 0.15s ease;
}

.cost-price-sort-toggle:hover {
    background: color-mix(in oklab, var(--color-text-primary) 8%, transparent);
}

.section-card-inner:has(.table-container) > .cost-price-page-toolbar {
    padding-top: var(--space-md);
}

.section-card-inner:has(.table-container) > .pagination {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.cost-price-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}

/* Импорт / экспорт CSV на странице себестоимости */
.cost-price-csv-block {
    margin-top: var(--space-lg);
    padding: var(--space-lg);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.cost-price-csv-block h3 {
    margin: 0 0 var(--space-sm) 0;
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.cost-price-csv-hint {
    margin: 0 0 var(--space-md) 0;
    font-size: var(--font-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.cost-price-csv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
}

.cost-price-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cost-price-file-label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
}

.cost-price-import-status {
    margin-top: var(--space-md);
    font-size: var(--font-sm);
    line-height: 1.45;
}

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

.btn-danger:hover {
    box-shadow: var(--shadow-sm);
}

.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

/* Metric Cards */
.metric-card {
    background: var(--glass-bg);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: currentColor;
    opacity: 1;
    transition: opacity 0.3s ease;
}

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

/* Цветовое кодирование метрик */
.metric-card.metric-income {
    color: var(--accent-green);
}

.metric-card.metric-expense {
    color: var(--accent-red);
}

.metric-card.metric-neutral {
    color: var(--accent-blue);
}

.metric-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: color-mix(in oklab, var(--primary-400) 10%, transparent);
    border: 1px solid color-mix(in oklab, var(--primary-400) 20%, transparent);
    color: var(--accent-blue);
}

.metric-value {
    font-size: var(--font-3xl);
    font-weight: 800;
    color: var(--color-text-secondary);
    line-height: 1;
    margin-bottom: var(--space-xs);
}

.metric-label {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    font-weight: 600;
    margin-bottom: var(--space-xs);
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-label i {
    font-size: 0.9rem;
    opacity: 0.7;
}

.metric-change {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 0.7rem;
    border-radius: 20px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-green);
}

.metric-change.negative {
    background: rgba(239, 68, 68, 0.1);
    color: var(--accent-red);
}

/* Status Badges */
.status-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: var(--font-xs);
    font-weight: 500;
    display: inline-block;
    box-shadow: var(--shadow-sm);
}

/* Статусы заказов (агрегаты Ozon/WB): приглушённые зелёный / красный / фиолетовый */
.status-delivered {
    background: rgba(22, 163, 74, 0.11);
    color: #15803d;
    border: 1px solid rgba(22, 163, 74, 0.24);
    box-shadow: var(--shadow-sm);
}

/* Оранжевый — прочие UI (не заказы); заказы «прочие» см. .status-other */
.status-pending {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
    box-shadow: var(--shadow-sm);
}

.status-cancelled {
    background: rgba(220, 38, 38, 0.09);
    color: #b91c1c;
    border: 1px solid rgba(220, 38, 38, 0.22);
    box-shadow: var(--shadow-sm);
}

/* Все статусы кроме доставлен/получено и отмены */
.status-other {
    background: rgba(91, 33, 182, 0.09);
    color: #6d28d9;
    border: 1px solid rgba(91, 33, 182, 0.22);
    box-shadow: var(--shadow-sm);
}

/* Синий — legacy / прочие экраны */
.status-delivering {
    background: color-mix(in oklab, var(--color-accent-primary) 10%, transparent);
    color: var(--primary-500);
    border: 1px solid color-mix(in oklab, var(--color-accent-primary) 20%, transparent);
    box-shadow: var(--shadow-sm);
}

.status-pickup {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.2);
    box-shadow: var(--shadow-sm);
}

.status-unknown {
    background: rgba(100, 116, 139, 0.1);
    color: var(--color-text-secondary);
    border: 1px solid rgba(100, 116, 139, 0.2);
}

/* Section Dividers */
.section-divider {
    height: 1px;
    background: var(--border-light);
    margin: var(--spacing-xl) 0;
    border: none;
}


/* Отзывчивые сетки для метрик */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

/* Блок общего расхода */
.total-expenses-section {
    width: 100%;
    margin: 0;
}

.section-card .total-expenses-section {
    margin: 0;
}

.total-expenses-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
    border-left: none;
}

.section-card-inner .total-expenses-card {
    background: var(--glass-bg);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--accent-red);
}

.total-expenses-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-red);
    opacity: 1;
}

.total-expenses-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.total-expenses-label {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--color-text-secondary);
    flex: 1;
    min-width: 200px;
}

.total-expenses-label i {
    color: var(--accent-red);
    font-size: 1.5rem;
}

.period-indicator {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    font-weight: 400;
    margin-left: var(--space-sm);
}

.total-expenses-value {
    font-size: var(--font-4xl);
    font-weight: 800;
    color: var(--accent-red);
    line-height: 1;
    text-align: right;
}


@media (max-width: 768px) {
    .total-expenses-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .total-expenses-value {
        font-size: var(--font-3xl);
        text-align: left;
        width: 100%;
    }
    
    .total-expenses-label {
        width: 100%;
    }
}

.transactions-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

/* Боковая панель для больших экранов (опционально) */
@media (min-width: 1200px) {
    .menu-toggle{
        display: none;
    }
    .app-layout {
        display: flex;
        gap: var(--space-lg);
        max-width: 1600px;
        margin: 0 auto;
        padding: 0 var(--space-md);
    }
    
    .sidebar {
        width: 250px;
        flex-shrink: 0;
        background: var(--glass-bg);
        padding: var(--space-lg);
        box-shadow: var(--shadow-sm);
        position: sticky;
        align-self: flex-start;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
    
    .sidebar .tabs {
        flex-direction: column;
        gap: var(--space-xs);
    }
    
    .sidebar .tab-button {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
    }
    
    .main-content {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 1199px) {
    .menu-toggle {
        display: flex;
    }
    
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--glass-bg);
        border-bottom: 1px solid var(--color-border-default);
        box-shadow: var(--shadow-sm);
        padding: var(--space-md);
        z-index: 999;
    }
    
    .main-nav.mobile-open {
        display: block;
    }
    
    .main-nav .tabs {
        flex-direction: column;
        gap: var(--space-xs);
    }
    
    .main-nav .tab-button {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Адаптивность */
@media (max-width: 1100px) {
    .metrics-grid,
    .transactions-metrics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .app-header {
        padding: var(--space-md) var(--space-sm);
    }
    
    .app-logo {
        font-size: 2.2rem;
    }
    
    .app-logo i {
        font-size: 2.2rem;
    }
    
    .app-description {
        font-size: var(--font-sm);
    }
    
    .header-content {
        flex-direction: column;
        gap: var(--space-md);
        align-items: flex-start;
    }
    
    .logo-section {
        width: 100%;
        justify-content: space-between;
    }
    
    .tabs {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    
    .container {
        padding: var(--space-sm);
    }
    
    .metrics-grid,
    .transactions-metrics {
        grid-template-columns: 1fr;
    }
    
    .metric-value {
        font-size: 2.2rem;
    }
    
    table th,
    table td {
        padding: var(--space-sm);
    }
    
    .filters {
        flex-wrap: wrap;
    }
    
    .chart-filter {
        flex-wrap: wrap;
    }
    
    .search-container {
        flex-direction: column;
    }
    
    .search-input-wrapper {
        min-width: 100%;
    }
    
    .search-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Отзывчивые сетки для метрик */
.metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.transactions-metrics {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ozon-style-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.tx-active-filter {
    margin-bottom: 20px;
    padding: 15px;
    background: linear-gradient(135deg, color-mix(in oklab, var(--color-accent-primary) 10%, transparent) 0%, color-mix(in oklab, var(--color-accent-primary) 5%, transparent) 100%);
    border: 1px solid color-mix(in oklab, var(--color-accent-primary) 20%, transparent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.tx-active-filter-text {
    min-width: 0;
}

.tx-active-filter-label {
    color: var(--color-accent-primary);
}

.tx-active-filter-value {
    color: var(--color-text-primary);
}

.tx-active-filter-reset-btn {
    padding: 8px 16px;
    background: var(--color-accent-danger);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s ease;
}

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

@media (max-width: 768px) {
    .tx-active-filter {
        flex-direction: column;
        align-items: flex-start;
    }

    .tx-active-filter-reset-btn {
        width: 100%;
    }
}

.ozon-metric-card {
    padding: 24px;
    border-radius: 12px;
    background: var(--glass-bg);
    border: 1px solid var(--color-border-default);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.ozon-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    border-color: var(--accent-blue);
}

.ozon-metric-main {
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ozon-metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    background: color-mix(in oklab, var(--primary-400) 10%, transparent);
    border: 1px solid color-mix(in oklab, var(--primary-400) 20%, transparent);
    color: var(--accent-blue);
}

.ozon-metric-icon i {
    font-size: 1.4rem;
    line-height: 1;
    color: inherit;
    display: block;
}

.ozon-metric-card:has(.income-value) .ozon-metric-icon {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
    color: var(--accent-green);
}

.ozon-metric-card:has(.expense-value) .ozon-metric-icon {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: var(--accent-red);
}

.ozon-metric-content {
    flex: 1;
    min-width: 0;
}

.ozon-metric-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ozon-metric-label i {
    font-size: 0.9rem;
    opacity: 0.7;
}

.ozon-metric-value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

.income-value {
    color: var(--accent-green);
}

.expense-value {
    color: var(--accent-red);
}

.income-text {
    color: var(--accent-green);
}

.ozon-metric-details {
    border-top: 1px solid var(--color-border-default);
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ozon-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

/* Убрать подчеркивание у всех detail-item */
.ozon-detail-item .ozon-detail-label {
    text-decoration: none !important;
}

/* Цвета для каждого detail-item */
.ozon-detail-item:nth-child(1) .ozon-detail-label {
    color: var(--primary-500) !important; /* Синий - Вознаграждение Ozon */
}

.ozon-detail-item:nth-child(2) .ozon-detail-label {
    color: #a78bfa !important; /* Фиолетовый - Услуги доставки */
}

.ozon-detail-item:nth-child(3) .ozon-detail-label {
    color: #34d399 !important; /* Зеленый - Услуги агентов */
}

.ozon-detail-item:nth-child(4) .ozon-detail-label {
    color: #fbbf24 !important; /* Светло-оранжевый - Другие услуги */
}

.ozon-detail-item:nth-child(5) .ozon-detail-label {
    color: #c084fc !important; /* Сиреневый - Продвижение и реклама */
}

.ozon-detail-item:nth-child(6) .ozon-detail-label {
    color: #fb7185 !important; /* Светло-алый - Компенсации и декомпенсации */
}

.ozon-detail-item:nth-child(7) .ozon-detail-label {
    color: var(--primary-500) !important; /* Синий - Услуги FBO */
}

.ozon-detail-item:nth-child(8) .ozon-detail-label {
    color: var(--primary-500) !important; /* Синий - Прочие начисления */
}

.ozon-detail-item:nth-child(9) .ozon-detail-label {
    color: var(--color-text-secondary) !important; /* Займы и факторинг */
}

.ozon-detail-label {
    color: var(--color-text-secondary);
    font-weight: 400;
}

.ozon-detail-value {
    color: var(--color-text-secondary);
    font-weight: 600;
}

/* ============================================
   КОНТЕЙНЕРЫ И СТРУКТУРА
   ============================================ */

/* Основной контейнер контента */
.content-container {
    margin: 0 auto;
    padding: var(--space-xl);
}

.content-container-sm {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-xl);
}

.content-container-lg {
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--space-xl);
}

/* Базовый класс для секций */
.content-section {
    margin-bottom: var(--space-xl);
}

/* Карточка секции - белый фон, тени, отступы */
.section-card {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-default);
    transition: box-shadow var(--motion-base) ease, border-color var(--motion-base) ease;
}

.section-card-header {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border-default);
}

.section-card-header h2 {
    margin: 0;
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Цветные иконки в заголовках секций */
.section-card-header h2 i[data-icon-theme="analytics"],
.section-card-header h2 i[data-icon-theme="analytics"] {
    color: var(--accent-blue);
}

.section-card-header h2 i[data-icon-theme="expenses"],
.section-card-header h2 i[data-icon-theme="expenses"] {
    color: var(--accent-red);
}

.section-card-header h2 i[data-icon-theme="charts"],
.section-card-header h2 i[data-icon-theme="charts"] {
    color: var(--accent-green);
}

.section-card-header h2 i[data-icon-theme="forecast"],
.section-card-header h2 i[data-icon-theme="forecast"] {
    color: var(--accent-purple);
}

.section-card-header h2 i[data-icon-theme="orders"],
.section-card-header h2 i[data-icon-theme="orders"] {
    color: var(--accent-orange);
}

/* Цветная иконка переключения темы */
.theme-toggle-btn i {
    color: var(--accent-orange);
    transition: color 0.3s ease, transform 0.3s ease;
}

.theme-toggle-btn:hover i {
    color: var(--accent-blue);
    transform: rotate(15deg);
}

[data-theme="dark"] .theme-toggle-btn i {
    color: var(--accent-cyan);
}

[data-theme="dark"] .theme-toggle-btn:hover i {
    color: var(--accent-blue);
}

.section-card-header .subtitle {
    margin-top: var(--space-sm);
    color: var(--text-tertiary);
    font-size: var(--font-base);
}

/* Вложенные карточки внутри секций */
.section-card-inner {
    background: var(--color-bg-elevated);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    border: 1px solid var(--color-border-default);
    box-shadow: var(--shadow-sm);
}

/* Убираем border и тень для section-card-inner с таблицей */
.section-card-inner .table-container {
    border: none;
    box-shadow: none;
}

.section-card-inner:has(.table-container) {
    border: none;
    box-shadow: none;
    padding: 0;
    background: transparent;
}

/* Убираем backdrop-filter в светлой теме */
[data-theme="light"] * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ============================================
   ДАШБОРД И МЕТРИКИ
   ============================================ */

/* Fintech component system v1 (T-Bank inspired):
   - metric-card-v2: KPI container with strict visual hierarchy
   - kpi-value / kpi-delta: numeric blocks with readable financial rhythm
   - info-block-v2: unified informational note block
*/
.metrics-grid-v2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
}

.metric-card-v2 {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.metric-card-v2:hover {
    border-color: color-mix(in srgb, var(--color-accent-primary) 38%, var(--color-border-default));
    box-shadow: var(--shadow-hover);
}

.metric-card-v2 .kpi-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.metric-card-v2 .kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}

.info-block-v2 {
    margin-top: var(--space-sm);
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-default);
    background: color-mix(in srgb, var(--color-accent-primary) 6%, transparent);
    color: var(--color-text-muted);
}

.info-block-v2 i {
    color: var(--color-accent-primary);
}

.info-block-v2--success {
    background: color-mix(in srgb, var(--color-accent-success) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-success) 28%, transparent);
}

.info-block-v2--warning {
    background: color-mix(in srgb, var(--color-accent-warning) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-warning) 28%, transparent);
}

.info-block-v2--danger {
    background: color-mix(in srgb, var(--color-accent-danger) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-danger) 28%, transparent);
}

/* Прогресс подгрузки цен СПП в KPI-карточке */
.metric-spp-progress {
    margin-top: 0;
    margin-bottom: var(--space-sm);
    padding: 0.55rem 0.7rem;
}

.metric-spp-progress[hidden] {
    display: none !important;
}

.metric-spp-progress__head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
    min-width: 0;
}

.metric-spp-progress__spinner {
    flex-shrink: 0;
    font-size: 0.9rem;
    color: var(--color-accent-primary);
}

.metric-card.metric-spp-revenue.is-spp-syncing .metric-spp-progress__spinner {
    color: var(--color-accent-warning);
}

.metric-spp-progress__label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--color-text-secondary);
}

.metric-spp-progress__pct {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}

.metric-spp-progress__track {
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent-warning) 12%, var(--color-bg-elevated));
    border: 1px solid color-mix(in srgb, var(--color-accent-warning) 22%, transparent);
    overflow: hidden;
}

.metric-spp-progress__bar {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--color-accent-warning) 75%, var(--color-accent-primary)),
        var(--color-accent-primary)
    );
    transition: width 0.45s ease;
}

.metric-card.metric-spp-revenue.is-spp-syncing .metric-spp-progress__bar {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--color-accent-warning) 80%, transparent),
        color-mix(in srgb, var(--color-accent-primary) 90%, transparent)
    );
}

/* Аналитика: KPI (3 в ряд) + блок заказов с donut */
.analytics-dashboard-layout {
    display: grid;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
    align-items: start;
}

.analytics-dashboard-layout__kpis {
    min-width: 0;
}

.analytics-dashboard-layout .metrics-grid.analytics-kpi-grid-three {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 0;
}

.metric-roas-suffix {
    font-size: 0.55em;
    margin-left: 0.1em;
    color: var(--color-text-muted);
    font-weight: 700;
    vertical-align: 0.15em;
}

.analytics-dashboard-layout__orders {
    min-width: 0;
}

.metric-card.metric-card-v2.analytics-orders-combined {
    border-radius: var(--radius-md);
    height: 100%;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
}

.metric-card.analytics-orders-combined {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
}

.analytics-orders-combined__total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.65rem;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-default);
}

.analytics-orders-combined__total-label {
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.analytics-orders-combined__total-label i {
    color: var(--color-text-muted);
    font-size: 1.1rem;
}

.analytics-orders-combined__total-value {
    font-size: 1.65rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    color: var(--color-text-primary);
}

.analytics-orders-combined__total-unit {
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--color-text-muted);
}

.analytics-orders-combined__total-delta {
    font-size: 0.78rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    width: 100%;
    flex-basis: 100%;
    margin-top: 0.15rem;
}

.analytics-orders-combined__total-delta.is-positive {
    color: var(--color-accent-success);
}

.analytics-orders-combined__total-delta.is-negative {
    color: var(--color-accent-danger);
}

.analytics-orders-combined__breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border-default);
}

.analytics-orders-breakdown-row {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    --breakdown-accent: var(--color-text-secondary);
}

.analytics-orders-breakdown-row--transit {
    --breakdown-accent: color-mix(in srgb, var(--color-accent-primary) 72%, var(--color-border-default));
}

.analytics-orders-breakdown-row--delivered {
    --breakdown-accent: var(--color-accent-success);
}

.analytics-orders-breakdown-row--cancelled {
    --breakdown-accent: var(--color-accent-danger);
}

.analytics-orders-breakdown-row__main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
}

.analytics-orders-breakdown-row__name {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--breakdown-accent);
}

.analytics-orders-breakdown-row__name i {
    font-size: 0.95rem;
    opacity: 0.92;
}

.analytics-orders-breakdown-row__value {
    font-size: 0.92rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--breakdown-accent);
}

.analytics-orders-breakdown-row__delta {
    font-size: 0.68rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    color: color-mix(in srgb, var(--breakdown-accent) 82%, var(--color-text-muted));
}

a.analytics-orders-breakdown-row--clickable {
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.45rem;
    margin: -0.35rem -0.45rem;
    transition: background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

a.analytics-orders-breakdown-row--clickable:hover {
    background: color-mix(in srgb, var(--breakdown-accent) 10%, transparent);
}

a.analytics-orders-breakdown-row--clickable.is-active {
    background: color-mix(in srgb, var(--breakdown-accent) 14%, var(--color-bg-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--breakdown-accent) 35%, var(--color-border-default));
}

a.analytics-orders-breakdown-row--clickable:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
}

/* Фильтр «Только завершённые» — в ряд с column-toggle-btn */
.aggregated-completed-toggle {
    cursor: pointer;
    user-select: none;
    font-weight: 200;
    margin: 0;
}

.aggregated-completed-toggle__label {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.2;
    white-space: nowrap;
}

.aggregated-completed-toggle__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.aggregated-completed-toggle__track {
    flex-shrink: 0;
    width: 2.125rem;
    height: 1.2rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text-secondary) 22%, var(--color-bg-surface));
    border: 1px solid var(--color-border-default);
    position: relative;
    transition:
        background-color var(--motion-fast) ease,
        border-color var(--motion-fast) ease;
}

.aggregated-completed-toggle__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: var(--color-bg-elevated);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 12%, transparent);
    transition: transform var(--motion-fast) ease;
}

.aggregated-completed-toggle__input:checked + .aggregated-completed-toggle__track {
    background: color-mix(in srgb, var(--color-accent-primary) 88%, var(--color-bg-surface));
    border-color: var(--color-accent-primary);
}

.aggregated-completed-toggle__input:checked + .aggregated-completed-toggle__track::after {
    transform: translateX(0.9rem);
}

.aggregated-completed-toggle__input:focus-visible + .aggregated-completed-toggle__track {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
}

.aggregated-completed-toggle:hover {
    background: color-mix(in srgb, var(--color-accent-primary) 10%, var(--color-bg-elevated));
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
}

.aggregated-completed-toggle:hover .aggregated-completed-toggle__label {
    color: var(--color-accent-primary);
}

.aggregated-completed-toggle:has(.aggregated-completed-toggle__input:checked) {
    border-color: color-mix(in srgb, var(--color-accent-primary) 45%, var(--color-border-default));
    background: color-mix(in srgb, var(--color-accent-primary) 6%, var(--color-bg-elevated));
}

.aggregated-completed-toggle:has(.aggregated-completed-toggle__input:checked) .aggregated-completed-toggle__label {
    color: var(--color-text-primary);
}

.analytics-orders-combined__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    flex: 1;
}

.analytics-orders-donut {
    position: relative;
    width: min(100%, 240px);
    aspect-ratio: 1;
    margin: 0 auto;
}

.analytics-orders-donut__svg {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--color-text-primary) 6%, transparent));
}

.analytics-orders-donut__ring--transit {
    stroke: color-mix(in srgb, var(--color-accent-primary) 72%, var(--color-border-default));
}

.analytics-orders-donut__ring--delivered {
    stroke: var(--color-accent-success);
}

.analytics-orders-donut__ring--cancelled {
    stroke: var(--color-accent-danger);
}

.analytics-orders-donut__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 22%;
    pointer-events: none;
}

.analytics-orders-donut__center-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    line-height: 1.2;
}

.analytics-orders-donut__center-value {
    font-size: clamp(1rem, 2.8vw, 1.35rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    color: var(--color-text-primary);
    line-height: 1.15;
    margin-top: 0.2rem;
}

.analytics-orders-donut__legend-note {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--color-text-muted);
    text-align: center;
    max-width: 20rem;
}

@media (min-width: 1024px) {
    .analytics-dashboard-layout {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
        align-items: stretch;
        gap: var(--space-xl);
        margin-top: var(--space-xl);
        padding-top: var(--space-lg);
        border-top: 1px solid var(--color-border-default);
    }

    .analytics-dashboard-layout__orders {
        padding-left: var(--space-lg);
        border-left: 1px solid var(--color-border-default);
    }
}

@media (max-width: 1023px) {
    .analytics-dashboard-layout {
        grid-template-columns: 1fr;
    }

    .analytics-dashboard-layout .metrics-grid.analytics-kpi-grid-three {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .analytics-dashboard-layout__orders {
        padding-left: 0;
        border-left: none;
        padding-top: var(--space-lg);
        border-top: 1px solid var(--color-border-default);
    }

    .metric-card.analytics-orders-combined {
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Section header/actions v2 */
.section-head-v2 {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-default);
}
.section-head-v2 h2 {
    margin: 0;
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Карточные заголовки: `section-card-header section-head-v2` — капс, --font-2xl, без иконок в h2 (см. docs/VIMA_FLOW_UI.md) */
.section-card-header.section-head-v2 h2 {
    font-size: var(--font-2xl);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-primary);
    gap: var(--space-sm);
}

.section-card-header.section-head-v2 h2 .ti,
.section-card-header.section-head-v2 h2 i[class*="ti-"] {
    display: none !important;
}

.section-actions-v2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

/* Pills */
.filter-pill,
.status-pill {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    line-height: 1;
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    box-shadow: var(--shadow-sm);
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-base) ease;
}
.filter-pill:hover {
    background: color-mix(in srgb, var(--color-accent-primary) 6%, var(--color-bg-surface));
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
}
.status-pill--success {
    background: color-mix(in srgb, var(--color-accent-success) 10%, transparent);
    color: var(--color-accent-success);
    border-color: color-mix(in srgb, var(--color-accent-success) 28%, transparent);
}
.status-pill--warning {
    background: color-mix(in srgb, var(--color-accent-warning) 10%, transparent);
    color: var(--color-accent-warning);
    border-color: color-mix(in srgb, var(--color-accent-warning) 28%, transparent);
}
.status-pill--danger {
    background: color-mix(in srgb, var(--color-accent-danger) 10%, transparent);
    color: var(--color-accent-danger);
    border-color: color-mix(in srgb, var(--color-accent-danger) 28%, transparent);
}
.status-pill--info {
    background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
    color: var(--color-accent-primary);
    border-color: color-mix(in srgb, var(--color-accent-primary) 28%, transparent);
}

/* Заказы: .status-pill идёт после базовых .status-* и перетирает цвет — усиливаем специфичность */
.status-pill.status-delivered,
.status.status-pill.status-delivered {
    background: rgba(22, 163, 74, 0.11);
    color: #15803d;
    border-color: rgba(22, 163, 74, 0.24);
}
.status-pill.status-cancelled,
.status.status-pill.status-cancelled {
    background: rgba(220, 38, 38, 0.09);
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.22);
}
.status-pill.status-other,
.status.status-pill.status-other {
    background: rgba(91, 33, 182, 0.09);
    color: #6d28d9;
    border-color: rgba(91, 33, 182, 0.22);
}

/* Chart card v2 */
.chart-card-v2 {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
}

.dashboard-section {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: none;
}

/* Сетка метрик */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

/* Карточка метрики */
.metric-card {
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--motion-base) ease, border-color var(--motion-base) ease, transform var(--motion-base) ease;
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: currentColor;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Убираем ::before для metric-expenses и metric-profit с border-left */
.metric-card.metric-expenses.has-border-left::before,
.metric-card.metric-profit.has-border-left::before {
    display: none;
}

.metric-card.analytics-orders-combined {
    overflow: visible;
}

.metric-card.analytics-orders-combined::before {
    display: none;
}

/* Стили для border-left */
.metric-card.has-border-left {
    border-left: 3px solid currentColor;
    padding-left: calc(var(--space-lg) - 3px);
}

.metric-card.metric-expenses.has-border-left {
    border-left-color: var(--accent-red);
}

.metric-card.metric-profit.has-border-left.border-green {
    border-left-color: var(--accent-green);
}

.metric-card.metric-profit.has-border-left.border-red {
    border-left-color: var(--accent-red);
}

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

/* Цветовые схемы для карточек метрик */
.metric-card.metric-revenue {
    color: var(--accent-green);
}

.metric-card.metric-profit {
    color: var(--accent-blue);
}

.metric-card.metric-margin {
    color: var(--accent-purple);
}

.metric-card.metric-orders {
    color: var(--accent-cyan);
}

.metric-card.metric-aov {
    color: var(--accent-orange);
}

.metric-card.metric-cost {
    color: var(--accent-orange);
}

.metric-card.metric-missing-cost {
    grid-column: 1 / -1;
    cursor: pointer;
    min-height: 0;
}

.metric-card.metric-missing-cost .metric-header {
    align-items: center;
    gap: var(--space-md);
}

.metric-card.metric-missing-cost .kpi-value {
    line-height: 1.3;
}

.metric-card.metric-missing-cost .kpi-value.positive {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.metric-card.metric-missing-cost:not(.metric-card-v2) .metric-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
}

.metric-card.metric-missing-cost:focus-visible {
    outline: 2px solid var(--color-accent-warning);
    outline-offset: 3px;
}

.metric-card.metric-tax {
    color: var(--color-accent-danger);
}

.metric-card.metric-tax .metric-header {
    align-items: flex-start;
}

.metric-card.metric-tax .metric-tax__main {
    flex: 1;
    min-width: 0;
}

.metric-card.metric-tax .metric-tax-form {
    margin: var(--space-sm) 0;
}

.metric-card.metric-tax .metric-tax-field {
    margin: 0;
    gap: 6px;
}

.metric-card.metric-tax .metric-tax-field label {
    font-size: var(--font-sm);
}

.metric-card.metric-tax .metric-tax-input-wrap {
    position: relative;
    min-width: 0;
    flex: none;
}

.metric-card.metric-tax .metric-tax-input-suffix {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--color-text-muted);
    pointer-events: none;
}

.metric-card.metric-tax .metric-tax-input {
    padding: 0.75rem 2.25rem 0.75rem 1rem;
    font-size: var(--font-base);
}

.metric-card.metric-tax .metric-tax-hint {
    margin: 0;
    font-size: var(--font-xs, 0.8125rem);
    line-height: 1.45;
    color: var(--color-text-muted);
}

.metric-card.metric-tax .metric-value.kpi-value {
    margin-top: var(--space-xs);
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
}

.metric-card.metric-advertising {
    color: var(--accent-purple);
}

.metric-card.metric-cancelled {
    color: var(--accent-red);
}

.metric-card.metric-expenses {
    color: var(--accent-red);
}

/* Классы для динамических цветов значений */
.metric-value.expense {
    color: var(--accent-red);
}

.metric-value.positive {
    color: var(--accent-green);
}

.metric-value.negative {
    color: var(--accent-red);
}

.metric-value.neutral {
    color: var(--accent-blue);
}

.metric-subvalue {
    margin-top: 0.25rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.info-block-v2 a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Классы для динамических цветов маржинальности */
.metric-value.margin-high {
    color: var(--accent-green);
}

.metric-value.margin-medium {
    color: var(--accent-orange);
}

.metric-value.margin-low {
    color: var(--accent-red);
}

/* Класс для компенсаций */
.metric-compensation {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-sm);
    font-weight: 400;
    padding: 4px 10px;
    border-radius: 20px;
    margin-top: var(--space-xs);
    min-height: 24px;
}

.metric-compensation.positive {
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-green);
}

.metric-compensation.negative {
    background: rgba(239, 68, 68, 0.1);
    color: var(--accent-red);
}

.metric-compensation i {
    font-size: 0.85rem;
}

/* Доля метрики от общей выручки (KPI) */
.metric-revenue-share {
    margin-top: 0.55rem;
    padding: 0.5rem 0.6rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--color-border-default) 85%, transparent);
    background: color-mix(in srgb, var(--color-accent-primary) 5%, var(--color-bg-surface));
}

.metric-revenue-share__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.metric-revenue-share__pct {
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}

.metric-revenue-share--expense .metric-revenue-share__pct {
    color: var(--accent-red);
}

.metric-revenue-share--profit .metric-revenue-share__pct {
    color: var(--accent-green);
}

.metric-revenue-share--neutral .metric-revenue-share__pct {
    color: var(--color-text-primary);
}

.metric-revenue-share__label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.metric-revenue-share__track {
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-border-default) 70%, transparent);
    overflow: hidden;
}

.metric-revenue-share__bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--color-accent-primary) 75%, #60a5fa),
        color-mix(in srgb, var(--color-accent-primary) 45%, transparent)
    );
}

.metric-revenue-share--expense .metric-revenue-share__bar {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--accent-red) 80%, #f87171),
        color-mix(in srgb, var(--accent-red) 35%, transparent)
    );
}

.metric-revenue-share--profit .metric-revenue-share__bar {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--accent-green) 80%, #34d399),
        color-mix(in srgb, var(--accent-green) 35%, transparent)
    );
}

/* ============================================
   APP KPI — Stripe flat (контраст: серый фон / белая карточка / типографика)
   ============================================ */
.app-wrapper .metric-card-v2,
.app-wrapper .metric-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    box-shadow: none;
    color: var(--color-text-primary);
    transform: none;
    overflow: visible;
}

.app-wrapper .metric-card-v2:hover,
.app-wrapper .metric-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--color-border-strong);
}

.app-wrapper .metric-card::before {
    display: none !important;
}

.app-wrapper .metric-card.has-border-left,
.app-wrapper .metric-card.metric-expenses.has-border-left,
.app-wrapper .metric-card.metric-profit.has-border-left.border-green,
.app-wrapper .metric-card.metric-profit.has-border-left.border-red {
    border-left: 1px solid var(--color-border-default);
    padding-left: var(--space-lg);
}

.app-wrapper .metric-card.metric-revenue,
.app-wrapper .metric-card.metric-profit,
.app-wrapper .metric-card.metric-margin,
.app-wrapper .metric-card.metric-orders,
.app-wrapper .metric-card.metric-aov,
.app-wrapper .metric-card.metric-cost,
.app-wrapper .metric-card.metric-advertising,
.app-wrapper .metric-card.metric-expenses,
.app-wrapper .metric-card.metric-cancelled,
.app-wrapper .metric-card.metric-tax {
    color: var(--color-text-primary);
}

.app-wrapper .metric-header {
    margin-bottom: var(--space-md);
    gap: var(--space-md);
    min-height: 80px;
    align-items: flex-start;
}

.app-wrapper .metric-value,
.app-wrapper .metric-card .kpi-value,
.app-wrapper .metric-value.kpi-value {
    font-size: var(--font-2xl);
    font-weight: 800;
    line-height: 1.2;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    margin-top: var(--space-xs);
    margin-bottom: var(--space-xs);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.app-wrapper .metric-value.expense,
.app-wrapper .kpi-value.expense {
    color: var(--color-accent-danger);
}

.app-wrapper .metric-value.positive,
.app-wrapper .kpi-value.positive {
    color: var(--accent-green);
}

.app-wrapper .metric-value.negative,
.app-wrapper .kpi-value.negative {
    color: var(--accent-red);
}

.app-wrapper .metric-value.neutral,
.app-wrapper .kpi-value.neutral {
    color: var(--color-text-primary);
}

.app-wrapper .metric-value.margin-high {
    color: var(--accent-green);
}

.app-wrapper .metric-value.margin-medium {
    color: var(--color-accent-warning);
}

.app-wrapper .metric-value.margin-low {
    color: var(--color-accent-danger);
}

.app-wrapper .metric-change,
.app-wrapper .kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.1rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 500;
    min-height: 0;
    color: #1a7f4e;
    font-variant-numeric: tabular-nums;
}

.app-wrapper .metric-change.negative,
.app-wrapper .kpi-delta.negative {
    background: transparent;
    color: var(--color-accent-danger);
}

.app-wrapper .metric-change.neutral,
.app-wrapper .kpi-delta.neutral {
    background: transparent;
    color: var(--color-text-muted);
}

.app-wrapper .metric-change i,
.app-wrapper .kpi-delta i {
    font-size: 0.875rem;
}

.app-wrapper .metric-compensation {
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    min-height: 0;
    margin-top: 0.15rem;
}

.app-wrapper .metric-compensation.positive {
    color: #1a7f4e;
}

.app-wrapper .metric-compensation.negative {
    color: var(--color-accent-danger);
}

.app-wrapper .metric-subvalue {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.app-wrapper .metric-revenue-share {
    margin-top: 0.65rem;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
}

.app-wrapper .metric-revenue-share__row {
    margin-bottom: 0.35rem;
}

.app-wrapper .metric-revenue-share__pct {
    font-size: 0.8125rem;
    font-weight: 600;
}

.app-wrapper .metric-revenue-share__label {
    text-transform: none;
    font-weight: 400;
    font-size: 0.8125rem;
    letter-spacing: 0;
}

.app-wrapper .metric-revenue-share__track {
    height: 4px;
    background: var(--color-border-default);
}

.app-wrapper .metric-revenue-share__bar {
    background: var(--color-accent-primary);
}

.app-wrapper .metric-revenue-share--expense .metric-revenue-share__bar {
    background: var(--color-accent-danger);
}

.app-wrapper .metric-revenue-share--profit .metric-revenue-share__bar {
    background: #1a7f4e;
}

.app-wrapper .info-block-v2 {
    margin-top: var(--space-sm);
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-inset);
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

.app-wrapper .info-block-v2 i {
    color: var(--color-text-muted);
}

.app-wrapper .metrics-grid-v2,
.app-wrapper .metrics-grid {
    gap: var(--space-md);
}

/* KPI «Товары без себестоимости» — Stripe callout, иконки заметные */
.app-wrapper .metric-card.metric-missing-cost {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
    cursor: pointer;
    color: var(--color-text-primary);
    border-radius: var(--radius-md);
    transition:
        border-color var(--motion-fast) ease,
        background-color var(--motion-fast) ease;
}

.app-wrapper .metric-card.metric-missing-cost:has(.kpi-value.negative) {
    border-left-width: 3px;
    border-left-color: var(--color-accent-warning);
    padding-left: calc(var(--space-lg) - 2px);
    background: color-mix(in srgb, var(--color-accent-warning) 5%, var(--color-bg-surface));
}

.app-wrapper .metric-card.metric-missing-cost.is-active,
.app-wrapper .metric-card.metric-missing-cost:has(.kpi-value.negative):hover {
    border-color: color-mix(in srgb, var(--color-accent-warning) 42%, var(--color-border-default));
    border-left-color: var(--color-accent-warning);
}

.app-wrapper .metric-card.metric-missing-cost:has(.kpi-value.positive) {
    border-left-width: 1px;
    padding-left: var(--space-lg);
}

.app-wrapper .metric-card.metric-missing-cost.is-active:has(.kpi-value.positive) {
    border-color: color-mix(in srgb, #1a7f4e 35%, var(--color-border-default));
}

.app-wrapper .metric-card.metric-missing-cost .metric-header {
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-bottom: 0;
    min-height: 0;
}

.app-wrapper .metric-card.metric-missing-cost .metric-header > div:first-child {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.app-wrapper .metric-card.metric-missing-cost .metric-label {
    text-transform: none;
    letter-spacing: -0.01em;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
}

.app-wrapper .metric-card.metric-missing-cost .metric-label i {
    opacity: 1;
    font-size: 1.05rem;
    color: var(--color-accent-warning);
}

.app-wrapper .metric-card.metric-missing-cost:has(.kpi-value.positive) .metric-label i {
    color: #1a7f4e;
}

.app-wrapper .metric-card.metric-missing-cost .metric-value.kpi-value,
.app-wrapper .metric-card.metric-missing-cost .kpi-value {
    display: block;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0.2rem;
    font-size: clamp(1.0625rem, 1.8vw, 1.3125rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
    text-align: left;
}

.app-wrapper .metric-card.metric-missing-cost .kpi-value.negative {
    color: #b45309;
}

.app-wrapper .metric-card.metric-missing-cost .kpi-value.positive {
    color: #1a7f4e;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.app-wrapper .metric-card.metric-missing-cost .metric-subvalue {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-align: left;
}

.app-wrapper .metric-card.metric-missing-cost .metric-icon {
    width: 3.25rem;
    height: 3.25rem;
    min-width: 3.25rem;
    min-height: 3.25rem;
    margin-inline-start: auto;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    font-size: 1.55rem;
    background: color-mix(in srgb, var(--color-accent-warning) 14%, var(--color-bg-surface));
    border: 1px solid color-mix(in srgb, var(--color-accent-warning) 32%, transparent);
    color: #d97706;
    box-shadow: none;
}

.app-wrapper .metric-card.metric-missing-cost:has(.kpi-value.negative) .metric-icon {
    background: color-mix(in srgb, var(--color-accent-warning) 18%, var(--color-bg-surface));
    border-color: color-mix(in srgb, var(--color-accent-warning) 40%, transparent);
    color: #b45309;
}

.app-wrapper .metric-card.metric-missing-cost:has(.kpi-value.positive) .metric-icon {
    background: color-mix(in srgb, #1a7f4e 12%, var(--color-bg-surface));
    border-color: color-mix(in srgb, #1a7f4e 28%, transparent);
    color: #1a7f4e;
}

.app-wrapper .metric-card.metric-missing-cost .info-badge.info-block-v2 {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-top: 0;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-inset);
    font-size: 0.8125rem;
    line-height: 1.5;
    font-weight: 400;
    text-align: left;
}

.app-wrapper .metric-card.metric-missing-cost .info-badge.info-block-v2 i {
    flex-shrink: 0;
    margin-top: 0.1rem;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

.app-wrapper .metric-card.metric-missing-cost .info-block-v2--warning {
    background: color-mix(in srgb, var(--color-accent-warning) 7%, var(--color-bg-inset));
    border-color: color-mix(in srgb, var(--color-accent-warning) 24%, var(--color-border-default));
}

.app-wrapper .metric-card.metric-missing-cost .info-block-v2--warning i {
    color: #d97706;
}

.app-wrapper .metric-card.metric-missing-cost:focus-visible {
    outline: 2px solid var(--color-accent-warning);
    outline-offset: 2px;
}

.app-wrapper .metric-card.analytics-orders-combined {
    box-shadow: none;
}

.app-wrapper .metric-card.analytics-orders-combined::before {
    display: none !important;
}

/* ============================================
   APP STRIPE — все вкладки
   ============================================ */
.app-wrapper .metric-card,
.app-wrapper .metric-card-v2 {
    background: var(--color-bg-surface);
}

.app-wrapper .metric-card:hover,
.app-wrapper .metric-card-v2:hover,
.app-wrapper .ozon-metric-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--color-border-strong);
}

.app-wrapper .top-products-section {
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    overflow: visible;
}

.app-wrapper .top-products-section::before {
    display: none !important;
}

.app-wrapper .section-card-inner .total-expenses-card {
    border-left: 1px solid var(--color-border-default);
    padding: var(--space-xl);
}

.app-wrapper .section-card-inner .total-expenses-card::before {
    display: none !important;
}

.app-wrapper .section-card-inner:has(.table-container) {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.app-wrapper .chart-card-v2 {
    padding: var(--space-lg);
}

.app-wrapper .page-title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}

.app-wrapper .page-title i {
    color: var(--color-text-muted);
    opacity: 0.85;
}

.app-wrapper .section-card-header {
    border-bottom-color: var(--color-border-default);
}

.app-wrapper .section-card-header.section-head-v2 h2,
.app-wrapper .section-card-header h2 {
    color: var(--color-text-muted);
    font-weight: 600;
}

.app-wrapper .settings-page__masthead {
    margin-bottom: var(--space-lg);
}

.app-wrapper .settings-page__title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.app-wrapper .settings-page__nav-link {
    border-radius: var(--radius-xs);
    font-size: var(--settings-text-sm);
    font-weight: 500;
}

.app-wrapper .settings-page__nav-link.is-active {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    color: var(--color-text-primary);
    box-shadow: none;
}

.app-wrapper .settings-sync-table {
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    overflow: hidden;
}

.app-wrapper .settings-sync-row {
    border-bottom: 1px solid var(--color-border-default);
}

.app-wrapper .settings-sync-row:last-child {
    border-bottom: none;
}

.app-wrapper .sidebar-nav {
    padding: 0;
}

.app-wrapper .sidebar-tabs {
    padding: var(--space-sm) var(--space-md);
}

.app-wrapper .sidebar-tab {
    font-size: 0.9375rem;
}

.app-wrapper .sidebar-tab:hover {
    background: color-mix(in srgb, var(--color-text-primary) 5%, transparent);
    color: var(--color-text-primary);
}

.app-wrapper .sidebar-tab.active {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border-default) 85%, transparent);
}

.app-wrapper .sidebar-tab.active::before {
    display: none;
}

.app-wrapper .sidebar-tab-badge {
    font-size: 0.6875rem;
    padding: 0.1rem 0.4rem;
}

.app-wrapper .logs-page-header {
    margin-bottom: var(--space-lg);
}

.app-wrapper .account-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.app-wrapper .account-status-pill {
    border-radius: var(--radius-pill);
    font-weight: 500;
}

.app-wrapper .pca-premium-card {
    background: var(--color-bg-surface);
    border-color: var(--color-border-default);
}

.app-wrapper .pca-portfolio-accordion__summary.section-head-v2 {
    border-bottom-color: var(--color-border-default);
}

.app-wrapper .sales-geo-table-container {
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    box-shadow: none;
    overflow: hidden;
}

.app-wrapper .calculator-container .glass-card,
.app-wrapper .calculator-container .section-card {
    box-shadow: none;
}

.app-wrapper .sync-result-header {
    background: var(--color-bg-inset);
}

.app-wrapper .empty-state-icon {
    background: var(--color-bg-inset);
    color: var(--color-text-muted);
}

.app-wrapper .modal-dialog-sync,
.app-wrapper .period-dropdown,
.app-wrapper .toast {
    box-shadow: var(--shadow-lg);
}

/* Заголовок метрики */
.metric-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    gap: var(--space-md);
    min-height: 80px;
}

.metric-header > div:first-child {
    flex: 1;
    min-width: 0;
}

/* Иконка метрики */
.metric-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    background: color-mix(in oklab, var(--primary-400) 10%, transparent);
    border: 1px solid color-mix(in oklab, var(--primary-400) 20%, transparent);
    color: var(--accent-blue);
}

.metric-card.metric-revenue .metric-icon {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
    color: var(--accent-green);
}

.metric-card.metric-profit .metric-icon {
    background: color-mix(in oklab, var(--primary-400) 10%, transparent);
    border-color: color-mix(in oklab, var(--primary-400) 20%, transparent);
    color: var(--accent-blue);
}

.metric-card.metric-margin .metric-icon {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.2);
    color: var(--accent-purple);
}

.metric-card.metric-orders .metric-icon {
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.2);
    color: var(--accent-cyan);
}

.metric-card.metric-aov .metric-icon {
    background: rgba(249, 115, 22, 0.1);
    border-color: rgba(249, 115, 22, 0.2);
    color: var(--accent-orange);
}

.metric-card.metric-cost .metric-icon {
    background: rgba(249, 115, 22, 0.1);
    border-color: rgba(249, 115, 22, 0.2);
    color: var(--accent-orange);
}

.metric-card.metric-advertising .metric-icon {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.2);
    color: var(--accent-purple);
}

.metric-card.metric-expenses .metric-icon {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: var(--accent-red);
}

.metric-card.metric-cancelled .metric-icon {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: var(--accent-red);
}

.metric-card.metric-fbo {
    color: var(--accent-cyan);
}

.metric-card.metric-fbo .metric-icon {
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.2);
    color: var(--accent-cyan);
}

.metric-card.metric-agents {
    color: var(--accent-orange);
}

.metric-card.metric-agents .metric-icon {
    background: rgba(249, 115, 22, 0.1);
    border-color: rgba(249, 115, 22, 0.2);
    color: var(--accent-orange);
}

/* Лейбл метрики */
.metric-label {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xs);
    display: flex;
    align-items: center;
    gap: 6px;
}

.metric-label i {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Значение метрики */
.metric-value {
    font-size: var(--font-2xl);
    font-weight: 800;
    color: var(--color-text-secondary);
    line-height: 1.2;
    margin-bottom: var(--space-xs);
    margin-top: var(--space-xs);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
}

/* Изменение метрики */
.metric-change {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-sm);
    font-weight: 400;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-green);
    margin-top: var(--space-xs);
    min-height: 24px;
}

.metric-change.negative {
    background: rgba(239, 68, 68, 0.1);
    color: var(--accent-red);
}

.metric-change.neutral {
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-tertiary);
}

.metric-change i {
    font-size: 0.85rem;
}

/* Информационный бейдж */
.info-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: color-mix(in oklab, var(--primary-400) 10%, transparent);
    border-radius: 20px;
    font-size: calc(var(--space-md) + 0.2rem);
    color: var(--text-tertiary);
    font-weight: 300;
    margin-top: var(--space-xs);
}

.info-badge i {
    font-size: 0.85rem;
}

/* Пояснения под KPI (аналитика): в app-wrapper — inset-блок (см. metric-missing-cost) */
.metric-card.metric-missing-cost:not(.metric-card-v2) .info-badge.info-block-v2 {
    padding: 0.35rem 0 0;
}

.info-badge.info-block-v2 {
    display: block;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0.35rem 0 0;
    margin-top: var(--space-xs);
    gap: 0;
    border-radius: 0;
    color: var(--color-text-muted, var(--text-tertiary));
}

.info-badge.info-block-v2.info-block-v2--success,
.info-badge.info-block-v2.info-block-v2--warning,
.info-badge.info-block-v2.info-block-v2--danger {
    background: transparent;
    border: none;
    border-color: transparent;
}

.info-badge.info-block-v2 > i {
    display: none;
}

/* Адаптивность для метрик */
@media (max-width: 1100px) {
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .metric-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .metric-icon {
        align-self: flex-end;
    }
    
    .metric-value {
        font-size: var(--font-2xl);
    }
}

/* Графики и дополнительная аналитика */
.dashboard-charts-section {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
    gap: var(--space-xl);
    align-items: start;
}

.section-card .dashboard-charts-section {
    margin: 0;
}

.chart-container {
    background: var(--glass-bg);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.chart-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--accent-green) 0%, var(--accent-blue) 100%);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.chart-container h3 {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-xl);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.chart-period-selector {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.chart-period-btn {
    padding: 8px 16px;
    border: 2px solid var(--color-border-default);
    background: var(--glass-bg);
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    font-family: 'Onest', sans-serif;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.chart-period-btn:hover {
    background: color-mix(in oklab, var(--primary-400) 5%, transparent);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    box-shadow: 0 2px 6px color-mix(in oklab, var(--primary-400) 10%, transparent);
}

.chart-period-btn.active {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
    box-shadow: 0 2px 8px color-mix(in oklab, var(--primary-400) 25%, transparent);
}

.chart-period-btn.active:hover {
    background: var(--primary-600);
    box-shadow: 0 3px 10px color-mix(in oklab, var(--primary-400) 30%, transparent);
}

.chart-container h3 i {
    color: var(--accent-blue);
}

.chart-date-label {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding-left: 8px;
}

.chart-date-icon {
    font-size: 0.875rem;
}

.revenue-profit-chart {
    min-height: 340px;
}

.chart-container,
.forecast-card {
    min-width: 0;
    margin: 0;
}

/* Override ApexCharts generated flex-end alignment and bold legend text */
#revenueProfitChart .apexcharts-legend.apexcharts-align-right.apx-legend-position-top {
    justify-content: flex-start !important;
}

#revenueProfitChart .apexcharts-legend-text {
    font-weight: normal !important;
}

/* Flex для топ-товаров (3 в ряд) */
.top-products-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
    width: 100%;
    box-sizing: border-box;
}

/* Для ABC-анализа - колонка вместо сетки */
#abc-analysis-page .top-products-grid {
    flex-direction: column;
}

/* Секции топ-товаров */
.top-products-section {
    background: var(--glass-bg);
    display: flex;
    flex-direction: column;
    flex: 1 1 calc(50% - var(--space-lg));
    min-width: 300px;
    max-width: calc(50% - var(--space-lg));
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* Для ABC-анализа - полная ширина */
#abc-analysis-page .top-products-grid {
    flex-direction: column;
}

#abc-analysis-page .top-products-section {
    flex: 1 1 100%;
    min-width: 100%;
    max-width: 100%;
    padding: var(--space-lg);
}

/* Убрать боковую линию для ABC-анализа и Unit-экономики */
#abc-analysis-page .top-products-section::before,
#unit-economics-page .top-products-section::before {
    display: none;
}

/* Для Unit-экономики - полная ширина */
#unit-economics-page .top-products-grid {
    flex-direction: column;
}

#unit-economics-page .top-products-section {
    flex: 1 1 100%;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    padding: var(--space-lg);
}

/* Убрать цвет у заголовков и ячеек "Выручка" и "Доля" в ABC-анализе */
#abc-analysis-page .top-products-table thead th {
    color: var(--color-text-secondary);
}

#abc-analysis-page .top-products-table tbody td {
    color: var(--color-text-primary);
    font-weight: normal;
}

/* Оставить цвет только для колонки «Маржа, %» — цвет задаётся через inline style */
#abc-analysis-page .top-products-table tbody td[style*="color"] {
    font-weight: 600;
}

.top-products-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-blue);
    opacity: 1;
}

.top-products-section h3 {
    margin-bottom: var(--space-xs);
    color: var(--color-text-secondary);
    font-size: var(--font-lg);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Заголовок секции ABC — лёгкий акцент */
#abc-analysis-page .top-products-section h3 {
    background: linear-gradient(135deg, color-mix(in oklab, var(--primary-400) 10%, transparent) 0%, color-mix(in oklab, var(--primary-400) 5%, transparent) 100%);
    padding: var(--space-md) var(--space-lg);
    margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)) var(--space-md) calc(-1 * var(--space-lg));
    border-radius: var(--radius-md);
    border-left: 4px solid var(--accent-blue);
    position: relative;
}

/* Unit-экономика: нейтральный заголовок без цветных градиентов */
#unit-economics-page .top-products-section h3 {
    background: transparent;
    padding: 0 0 var(--space-md) 0;
    margin: 0 0 var(--space-md) 0;
    border: none;
    border-bottom: 1px solid var(--color-border-default);
    border-radius: 0;
    color: var(--color-text-primary);
}

#unit-economics-page .top-products-section h3 i {
    color: var(--color-text-secondary);
}

#abc-analysis-page .abc-badge {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}

#abc-analysis-page .abc-badge-a {
    background: #22c55e;
    color: #fff;
}

#abc-analysis-page .abc-badge-b {
    background: #fde047;
    color: #111;
}

#abc-analysis-page .abc-badge-c {
    background: #f97316;
    color: #fff;
}

#abc-analysis-page .abc-badge-d {
    background: #ef4444;
    color: #fff;
}

/* Иконки категории ABC перед Offer ID / артикулом */
#abc-analysis-page .offer-id-cell {
    padding-left: var(--space-sm, 10px);
    gap: 0.35rem;
}

#abc-analysis-page .abc-offer-tier-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.38rem;
    height: 1.38rem;
    font-size: 1.08rem;
    line-height: 1;
    opacity: 0.94;
}

#abc-analysis-page .abc-offer-tier-icon i {
    display: block;
}

#abc-analysis-page .abc-offer-tier-icon--a {
    color: #ca8a04;
}

#abc-analysis-page .abc-offer-tier-icon--b {
    color: #2563eb;
}

#abc-analysis-page .abc-offer-tier-icon--c {
    color: var(--color-text-tertiary, #64748b);
}

[data-theme="dark"] #abc-analysis-page .abc-offer-tier-icon--a {
    color: #fbbf24;
}

[data-theme="dark"] #abc-analysis-page .abc-offer-tier-icon--b {
    color: #60a5fa;
}

[data-theme="dark"] #abc-analysis-page .abc-offer-tier-icon--c {
    color: var(--color-text-secondary);
}

/* Категория A - золотой */
#abc-analysis-page .top-products-section:has(.abc-badge-a) h3 {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
    border-left-color: #22c55e;
}

/* Категория B - лимонно-желтый */
#abc-analysis-page .top-products-section:has(.abc-badge-b) h3 {
    background: linear-gradient(135deg, rgba(253, 224, 71, 0.22) 0%, rgba(253, 224, 71, 0.08) 100%);
    border-left-color: #fde047;
}

/* Категория C - оранжевый */
#abc-analysis-page .top-products-section:has(.abc-badge-c) h3 {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(249, 115, 22, 0.05) 100%);
    border-left-color: #f97316;
}

.top-products-description {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
    font-style: italic;
}

.top-products-section h3 i {
    color: var(--accent-blue);
}

.top-products-section .table-container {
    flex: 1;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 400px;
    -webkit-overflow-scrolling: touch;
}

/* Убрать ограничение высоты для unit-экономики - показывать все товары */
#unit-economics-page .top-products-section .table-container {
    max-height: none;
    overflow-y: visible;
}

.top-products-table {
    width: 100%;
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: var(--font-sm);
}

.top-products-table thead th {
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--color-border-default);
    background: color-mix(in srgb, var(--color-bg-surface) 82%, transparent);
    white-space: nowrap;
}

.top-products-table thead th.income {
    color: var(--accent-green);
    text-align: right;
}

.top-products-table thead th.expense {
    color: var(--accent-red);
    text-align: right;
}

.top-products-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border-default);
    vertical-align: middle;
    font-size: 13px;
    color: var(--color-text-primary);
}

.top-products-table tbody tr:hover {
    background: color-mix(in oklab, var(--primary-400) 10%, transparent);
}

.top-products-table tbody td.income {
    color: var(--accent-green);
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.top-products-table tbody td.expense {
    color: var(--accent-red);
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.top-products-table tbody td.mono {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 13px;
}

/* Ячейка с Offer ID и кнопкой копирования */
.offer-id-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    flex-wrap: nowrap;
    padding-left: var(--space-xl);
    max-width: 100%;
}

.offer-id-cell .mono {
    flex: 0 1 auto;
    min-width: 0;
}

.copy-btn {
    background: transparent;
    border: 0;
    border-radius: var(--radius-xs, 6px);
    padding: 2px;
    cursor: pointer;
    color: var(--text-tertiary);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease;
    flex-shrink: 0;
    width: 1.65rem;
    height: 1.65rem;
}

.copy-btn:hover {
    background: color-mix(in srgb, var(--color-text-primary) 8%, var(--color-bg-surface));
    color: var(--color-text-secondary);
}

.copy-btn:active {
    transform: scale(0.98);
}

.copy-btn i {
    font-size: 1rem;
    line-height: 1;
    color: inherit;
    display: block;
}

/* ABC: миниатюра из себестоимости (ширина 44px, соотношение сторон 3:4) */
.abc-analysis-thumb-cell {
    width: auto;
    vertical-align: middle;
}

.abc-product-thumb {
    display: block;
    width: 44px;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius-xs, 6px);
    border: 1px solid color-mix(in srgb, var(--color-border-default) 85%, transparent);
    background: color-mix(in srgb, var(--color-bg-surface) 70%, transparent);
}

.abc-product-thumb-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: auto;
    aspect-ratio: 3 / 4;
    box-sizing: border-box;
    border-radius: var(--radius-xs, 6px);
    border: 1px dashed color-mix(in srgb, var(--color-border-default) 75%, transparent);
    color: var(--color-text-dim, var(--text-dim));
    opacity: 0.65;
}

.abc-product-thumb-placeholder i {
    font-size: 1.1rem;
}

/* Product Card Analytics */
.pca-controls {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    background: var(--color-bg-elevated);
}

.pca-controls--compact {
    margin-top: 8px;
}

.pca-controls-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.pca-controls-row:last-child {
    margin-bottom: 0;
}

.pca-control {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
}

.pca-cooldown {
    font-size: 13px;
    color: var(--text-secondary);
    padding-bottom: 6px;
}

.pca-table th,
.pca-table td {
    white-space: nowrap;
}

.pca-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pca-metric-value {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
    font-weight: 600;
    line-height: 1.25;
}

.pca-delta {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.pca-delta-up {
    color: var(--color-accent-success);
}

.pca-delta-down {
    color: var(--color-accent-danger);
}

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

.pca-verdict {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-xs, 8px);
    font-size: 12px;
    font-weight: 400;
    white-space: normal;
    max-width: 220px;
    line-height: 1.3;
}

.pca-verdict--red {
    background: color-mix(in srgb, var(--color-accent-danger) 18%, transparent);
    color: var(--color-accent-danger);
}

.pca-verdict--yellow {
    background: color-mix(in srgb, var(--color-accent-warning, #d4a017) 22%, transparent);
    color: var(--color-accent-warning, #a67c00);
}

.pca-verdict--green {
    background: color-mix(in srgb, var(--color-accent-success) 18%, transparent);
    color: var(--color-accent-success);
}

.pca-verdict--neutral {
    background: var(--glass-bg, rgba(128, 128, 128, 0.12));
    color: var(--color-text-secondary);
}

/* Вердикт «мало данных»: нет рекомендаций, серый текст и фон */
.pca-verdict--sparse {
    background: color-mix(in srgb, var(--color-text-dim) 14%, var(--color-bg-surface, transparent));
    color: var(--color-text-dim);
    border: 1px solid color-mix(in srgb, var(--color-text-dim) 22%, transparent);
}

.pca-diagnosis-funnel-health {
    margin-top: var(--space-sm, 8px);
}

.pca-diagnosis-funnel-lead {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--color-text-primary);
}

.pca-diagnosis-top-issue {
    margin: var(--space-sm, 8px) 0 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--color-text-primary);
}

.pca-sales-lead {
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
}

.pca-sales-lead-kicker {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

.pca-sales-lead-line {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--color-text-primary);
}

.pca-sales-lead--ok {
    background: color-mix(in srgb, var(--color-accent-success) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-success) 35%, transparent);
}

.pca-sales-lead--warn {
    background: color-mix(in srgb, var(--color-accent-warning, #d4a017) 14%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-warning, #d4a017) 40%, transparent);
}

.pca-sales-lead--bad {
    background: color-mix(in srgb, var(--color-accent-danger) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-danger) 35%, transparent);
}

.pca-sales-lead--neutral {
    background: var(--glass-bg, rgba(128, 128, 128, 0.08));
}

.pca-funnel-viz {
    margin-top: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
}

.pca-funnel-viz__title {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.pca-funnel-viz__bottleneck {
    margin: 0 0 12px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-primary);
}

.pca-funnel-viz__bottleneck-hint {
    color: var(--color-text-secondary);
    font-size: 0.88rem;
}

.pca-funnel-viz__row {
    margin-bottom: 10px;
}

.pca-funnel-viz__row:last-of-type {
    margin-bottom: 0;
}

.pca-funnel-viz__row-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.pca-funnel-viz__row-label {
    color: var(--color-text-secondary);
}

.pca-funnel-viz__row-count {
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.pca-funnel-viz__bar-outer {
    height: 10px;
    border-radius: var(--radius-xs, 8px);
    background: color-mix(in srgb, var(--color-text-dim) 12%, transparent);
    overflow: hidden;
}

.pca-funnel-viz__bar {
    height: 100%;
    min-width: 2px;
    border-radius: inherit;
    background: color-mix(in srgb, var(--color-accent-primary) 45%, var(--color-bg-surface));
    transition: width 0.2s ease;
}

.pca-funnel-viz__note {
    margin: 10px 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
}

.pca-insight-hero {
    padding: 18px;
    border: 1px solid var(--color-border-default);
    border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent-primary) 12%, transparent), var(--color-bg-surface));
    margin-bottom: 14px;
}

.pca-insight-hero--good {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent-success) 16%, transparent), var(--color-bg-surface));
}

.pca-insight-hero--bad {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent-danger) 14%, transparent), var(--color-bg-surface));
}

.pca-insight-hero--watch {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent-warning, #d4a017) 16%, transparent), var(--color-bg-surface));
}

.pca-insight-hero__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.pca-insight-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
    color: var(--color-text-primary);
}

.pca-insight-status--good {
    background: color-mix(in srgb, var(--color-accent-success) 18%, transparent);
    color: var(--color-accent-success);
}

.pca-insight-status--bad {
    background: color-mix(in srgb, var(--color-accent-danger) 16%, transparent);
    color: var(--color-accent-danger);
}

.pca-insight-status--watch {
    background: color-mix(in srgb, var(--color-accent-warning, #d4a017) 18%, transparent);
    color: var(--color-accent-warning, #a67c00);
}

.pca-insight-meta {
    color: var(--color-text-secondary);
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
}

.pca-insight-hero h4 {
    margin: 0 0 8px;
    font-size: 1.12rem;
    line-height: 1.35;
    color: var(--color-text-primary);
}

.pca-insight-hero p {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.65;
}

.pca-insight-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.pca-insight-kpi {
    padding: 12px;
    border: 1px solid var(--color-border-default);
    border-radius: 14px;
    background: var(--color-bg-surface);
}

.pca-insight-kpi--good {
    border-color: color-mix(in srgb, var(--color-accent-success) 35%, var(--color-border-default));
}

.pca-insight-kpi--bad {
    border-color: color-mix(in srgb, var(--color-accent-danger) 35%, var(--color-border-default));
}

.pca-insight-kpi--watch {
    border-color: color-mix(in srgb, var(--color-accent-warning, #d4a017) 40%, var(--color-border-default));
}

.pca-insight-kpi__label {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
}

.pca-insight-kpi__value {
    margin-top: 4px;
    color: var(--color-text-primary);
    font-size: 1.35rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.pca-insight-kpi__delta,
.pca-insight-kpi__caption {
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.pca-insight-panel {
    padding: 14px;
    border: 1px solid var(--color-border-default);
    border-radius: 16px;
    background: var(--color-bg-surface);
    margin-bottom: 12px;
}

.pca-insight-panel h4 {
    margin: 0 0 8px;
    color: var(--color-text-primary);
    font-size: 0.98rem;
}

.pca-insight-panel__head p {
    margin: 0 0 12px;
    color: var(--color-text-secondary);
    line-height: 1.55;
}

.pca-insight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pca-insight-panel--good {
    border-color: color-mix(in srgb, var(--color-accent-success) 28%, var(--color-border-default));
}

.pca-insight-panel--bad {
    border-color: color-mix(in srgb, var(--color-accent-danger) 28%, var(--color-border-default));
}

.pca-insight-panel--watch {
    border-color: color-mix(in srgb, var(--color-accent-warning, #d4a017) 32%, var(--color-border-default));
}

.pca-insight-panel--action {
    border-color: color-mix(in srgb, var(--color-accent-primary) 35%, var(--color-border-default));
}

.pca-insight-list {
    margin: 0;
    padding-left: 18px;
    color: var(--color-text-secondary);
    line-height: 1.55;
}

.pca-insight-list li {
    margin-bottom: 7px;
}

.pca-insight-list li:last-child {
    margin-bottom: 0;
}

.pca-funnel-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.pca-funnel-step {
    position: relative;
    min-height: 116px;
    padding: 12px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--color-accent-primary) 8%, var(--color-bg-elevated));
    overflow: hidden;
}

.pca-funnel-step__num {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent-primary) 22%, transparent);
    color: var(--color-text-primary);
    font-size: 0.78rem;
    font-weight: 800;
}

.pca-funnel-step__label {
    margin-top: 10px;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
}

.pca-funnel-step__value {
    margin-top: 4px;
    color: var(--color-text-primary);
    font-size: 1.12rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.pca-funnel-step__bar {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    height: 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text-dim) 14%, transparent);
    overflow: hidden;
}

.pca-funnel-step__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: color-mix(in srgb, var(--color-accent-primary) 60%, var(--color-accent-success));
}

.pca-funnel-chart {
    min-height: 230px;
}

.pca-hypothesis-list {
    display: grid;
    gap: 10px;
}

.pca-hypothesis-card {
    padding: 12px;
    border-radius: 14px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-default);
}

.pca-hypothesis-card__head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--color-text-primary);
}

.pca-hypothesis-card__head span {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.pca-hypothesis-card p {
    margin: 8px 0;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.pca-hypothesis-card ul {
    margin: 0;
    padding-left: 18px;
    color: var(--color-text-secondary);
}

.pca-insight-note {
    padding: 12px 14px;
    border-radius: 14px;
    color: var(--color-text-muted);
    background: color-mix(in srgb, var(--color-text-dim) 9%, transparent);
    line-height: 1.55;
    font-size: 0.88rem;
}

.pca-portfolio {
    overflow: hidden;
}

.pca-premium-card {
    padding: var(--space-lg) var(--space-xl);
    border-color: color-mix(in srgb, var(--color-accent-warning, #d4a017) 22%, var(--color-border-default));
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-accent-warning, #d4a017) 6%, var(--color-bg-surface)),
        var(--color-bg-surface)
    );
}

.pca-premium-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.pca-premium-notice__icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, 12px);
    font-size: 1.35rem;
    color: color-mix(in srgb, var(--color-accent-warning, #d4a017) 85%, var(--color-text-primary));
    background: color-mix(in srgb, var(--color-accent-warning, #d4a017) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent-warning, #d4a017) 28%, transparent);
}

.pca-premium-notice__body {
    flex: 1;
    min-width: 0;
}

.pca-premium-notice__head {
    margin-bottom: var(--space-sm);
}

.pca-premium-notice__eyebrow {
    display: block;
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.pca-premium-notice__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text-primary);
}

.pca-premium-notice__lead {
    margin: 0;
    line-height: 1.55;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

@media (max-width: 520px) {
    .pca-premium-notice {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .pca-premium-notice__head {
        text-align: center;
    }
}

.pca-portfolio-accordion {
    margin: 0;
}

.pca-portfolio-accordion__summary {
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

.pca-portfolio-accordion__summary:focus {
    outline: none;
}

.pca-portfolio-accordion__summary:focus-visible {
    outline: 2px solid var(--color-accent-primary, var(--accent-blue));
    outline-offset: 2px;
    border-radius: var(--radius-sm, 6px);
}

.pca-portfolio-accordion__summary::-webkit-details-marker {
    display: none;
}

.pca-portfolio-accordion__chevron {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    min-height: 1.75rem;
    margin-top: 0.15rem;
    color: var(--color-text-muted);
    transition: transform var(--motion-fast, 0.2s) ease;
}

.pca-portfolio-accordion[open] .pca-portfolio-accordion__chevron {
    transform: rotate(180deg);
}

.pca-portfolio-accordion__summary-text {
    flex: 1;
    min-width: 0;
}

.pca-portfolio-accordion__summary-text h2 {
    margin: 0;
}

.pca-portfolio-accordion__teaser {
    margin: 6px 0 0;
    font-size: 0.88rem;
    color: var(--color-text-muted);
    line-height: 1.45;
    font-weight: 500;
}

.pca-portfolio-accordion__teaser-hint {
    font-weight: 400;
    opacity: 0.92;
}

.pca-portfolio-accordion__body {
    margin-top: 2px;
}

.pca-portfolio-accordion__summary.section-head-v2 {
    margin-bottom: 0;
    padding-bottom: var(--space-md);
}

.pca-portfolio-accordion[open] .pca-portfolio-accordion__summary.section-head-v2 {
    margin-bottom: var(--space-md);
}

.pca-portfolio-hero {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--color-accent-primary) 28%, var(--color-border-default));
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent-primary) 14%, transparent), var(--color-bg-surface));
    margin-bottom: 14px;
}

.pca-portfolio-hero p {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 650;
}

.pca-portfolio-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.pca-portfolio-summary__item {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-surface);
}

.pca-portfolio-summary__item span {
    display: block;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    margin-bottom: 4px;
}

.pca-portfolio-summary__item strong {
    color: var(--color-text-primary);
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
}

.pca-portfolio-summary__item--good {
    border-color: color-mix(in srgb, var(--color-accent-success) 32%, var(--color-border-default));
}

.pca-portfolio-summary__item--warn {
    border-color: color-mix(in srgb, var(--color-accent-warning, #d4a017) 34%, var(--color-border-default));
}

.pca-portfolio-summary__item--bad {
    border-color: color-mix(in srgb, var(--color-accent-danger) 32%, var(--color-border-default));
}

.pca-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pca-portfolio-card {
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-surface);
}

.pca-portfolio-card--ready_to_scale {
    border-color: color-mix(in srgb, var(--color-accent-success) 34%, var(--color-border-default));
}

.pca-portfolio-card--repair_first,
.pca-portfolio-card--degrading {
    border-color: color-mix(in srgb, var(--color-accent-warning, #d4a017) 34%, var(--color-border-default));
}

.pca-portfolio-card--ad_life_support {
    border-color: color-mix(in srgb, var(--color-accent-danger) 34%, var(--color-border-default));
}

.pca-portfolio-card__head h3 {
    margin: 0 0 6px;
    color: var(--color-text-primary);
    font-size: 1rem;
}

.pca-portfolio-card__head p {
    margin: 0 0 12px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    font-size: 0.88rem;
}

.pca-portfolio-empty {
    padding: 12px;
    border-radius: 12px;
    color: var(--color-text-muted);
    background: color-mix(in srgb, var(--color-text-dim) 8%, transparent);
}

.pca-portfolio-list {
    display: grid;
    gap: 10px;
}

.pca-portfolio-item {
    padding: 12px;
    border-radius: 14px;
    background: var(--color-bg-elevated);
    border: 1px solid color-mix(in srgb, var(--color-border-default) 80%, transparent);
}

.pca-portfolio-item__top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.pca-portfolio-item__top strong {
    display: block;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.pca-portfolio-item__top span {
    display: block;
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.pca-portfolio-item__top em {
    flex: 0 0 auto;
    font-style: normal;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--color-text-primary);
    background: color-mix(in srgb, var(--color-accent-primary) 12%, transparent);
    font-size: 0.78rem;
    font-weight: 750;
}

.pca-portfolio-item p {
    margin: 9px 0 6px;
    color: var(--color-text-primary);
    line-height: 1.45;
    font-size: 0.9rem;
}

.pca-portfolio-item__metrics,
.pca-portfolio-item__money {
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    line-height: 1.45;
}

.pca-portfolio-item__money {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

@media (max-width: 900px) {
    .pca-insight-kpis,
    .pca-insight-grid,
    .pca-funnel-strip,
    .pca-portfolio-summary,
    .pca-portfolio-grid {
        grid-template-columns: 1fr;
    }
}

.pca-observation-block {
    margin-top: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
}

.pca-observation__block-title {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.pca-observation__card {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-xs, 8px);
    border: 1px solid var(--glass-border, var(--color-border-default));
    background: var(--glass-bg, rgba(128, 128, 128, 0.06));
}

.pca-observation__card:first-of-type,
.pca-observation__card--primary {
    margin-top: 0;
}

.pca-observation__card--primary {
    border-color: color-mix(in srgb, var(--color-accent-primary) 35%, var(--color-border-default));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
}

.pca-observation__card--red {
    border-color: color-mix(in srgb, var(--color-accent-danger) 40%, var(--color-border-default));
    background: color-mix(in srgb, var(--color-accent-danger) 8%, transparent);
}

.pca-observation__card--yellow {
    border-color: color-mix(in srgb, var(--color-accent-warning, #c9a21a) 40%, var(--color-border-default));
    background: color-mix(in srgb, var(--color-accent-warning, #c9a21a) 6%, transparent);
}

.pca-observation__card--nested {
    font-size: 0.95em;
}

.pca-observation__head {
    margin-bottom: 6px;
}

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

.pca-observation__facts {
    margin: 0 0 8px;
    padding-left: 1.1em;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--color-text-primary);
}

.pca-observation__facts li {
    margin-bottom: 4px;
}

.pca-observation__facts li:last-child {
    margin-bottom: 0;
}

.pca-observation__k {
    font-weight: 600;
    color: var(--color-text-secondary);
}

.pca-observation__advice,
.pca-observation__hyp {
    font-size: 0.86rem;
    line-height: 1.45;
    margin: 0 0 6px;
}

.pca-observation__hyp:last-child,
.pca-observation__advice:last-child {
    margin-bottom: 0;
}

.pca-observation-more {
    margin-top: 10px;
    border: 1px dashed var(--color-border-default);
    border-radius: var(--radius-xs, 8px);
    padding: 6px 8px 10px;
}

.pca-observation-more__summary {
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-accent-primary);
    list-style-position: outside;
}

.pca-observation-more[open] .pca-observation-more__summary {
    margin-bottom: 6px;
}

.pca-observation-more .pca-observation__card--nested {
    margin-top: 8px;
}

.pca-observation-more .pca-observation__card--nested:first-of-type {
    margin-top: 0;
}

.pca-diagnosis-verdict-label {
    margin: 0 0 8px;
    font-size: 0.95rem;
}

.pca-diagnosis-formula-hint {
    font-size: 0.82rem;
    margin: 0 0 10px;
}

.pca-controls .search-input:focus-visible,
.pca-controls .search-btn:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.pca-marketing-sync-form {
    margin-top: 10px;
}

.pca-period-analyze {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 20px;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--glass-border, var(--color-border-default));
}

.pca-period-wh-sync {
    margin-top: 0;
}

.pca-status-line {
    margin: 0 0 var(--space-md);
    font-size: var(--font-sm);
    line-height: 1.45;
    color: var(--color-text-muted);
}

.pca-status-line--warning {
    color: var(--color-accent-warning, #b45309);
}

.pca-day-coverage {
    --pca-cov-border: var(--color-border-default);
    --pca-cov-inset: var(--color-bg-inset);
    --pca-cov-muted: var(--color-text-muted);
    margin-top: var(--space-md);
}

.pca-day-coverage__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.45rem;
}

.pca-day-coverage__overline {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pca-cov-muted);
}

.pca-day-coverage__legend {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--pca-cov-muted);
}

.pca-day-coverage__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.pca-day-coverage__sw {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.pca-day-coverage__sw--yes {
    background: color-mix(in oklab, var(--color-accent-success, #30b566) 85%, #ffffff);
}

.pca-day-coverage__sw--no {
    background: color-mix(in oklab, var(--pca-cov-border) 90%, var(--pca-cov-muted));
}

.pca-day-coverage__sheet {
    border: 1px solid var(--pca-cov-border);
    border-radius: var(--radius-sm);
    background: var(--pca-cov-inset);
    overflow: hidden;
}

.pca-day-coverage__block {
    padding: 0.45rem 0.65rem;
    border-bottom: 1px solid var(--pca-cov-border);
}

.pca-day-coverage__block:last-child {
    border-bottom: none;
}

.pca-day-coverage__row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
    min-width: 0;
}

.pca-day-coverage__label {
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pca-day-coverage__summary {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--pca-cov-muted);
}

.pca-day-coverage__strip-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.pca-day-coverage__strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 1px;
    min-height: 8px;
    align-items: stretch;
}

.pca-day-coverage__cell {
    flex: 1 1 0;
    min-width: 3px;
    max-width: 8px;
    height: 8px;
    border-radius: 1px;
    cursor: default;
}

.pca-day-coverage__cell--yes {
    background: color-mix(in oklab, var(--color-accent-success, #30b566) 78%, #ffffff);
}

.pca-day-coverage__cell--no {
    background: color-mix(in oklab, var(--pca-cov-border) 88%, var(--pca-cov-muted));
    opacity: 0.7;
}

.pca-period-analyze-btn--secondary {
    border: 1px dashed var(--glass-border, var(--color-border-default));
}

.pca-period-analyze-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.pca-period-analyze-btn .ti {
    font-size: 1.05rem;
}

/* Панель над таблицей PCA: колонки слева, строки/стр. справа */
.pca-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: var(--spacing-md);
}

.table-container + .pca-table-toolbar {
    margin-top: var(--space-md);
}

.pca-table-toolbar .column-toggle {
    margin-bottom: 0;
}

.pca-table-toolbar__columns {
    flex: 1 1 auto;
    min-width: min(100%, 200px);
}

.pca-per-page-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    flex: 0 0 auto;
    margin: 0;
}

.pca-per-page-inline__label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-family: 'Onest', sans-serif;
    white-space: nowrap;
}

.pca-per-page-inline__select.search-input {
    min-width: 72px;
    max-width: 100px;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-elevated);
    box-shadow: var(--shadow-sm);
}

.pca-th-sortable {
    padding: 0 !important;
    vertical-align: bottom;
}

.pca-table thead a.pca-sort-toggle,
.pca-table thead a.pca-sort-toggle:link,
.pca-table thead a.pca-sort-toggle:visited {
    text-decoration: none !important;
    color: inherit;
}

.pca-sort-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
    min-height: 100%;
    padding: 10px 12px;
    margin: 0;
    text-decoration: none !important;
    color: inherit;
    font-weight: 600;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

.pca-sort-toggle:hover,
.pca-sort-toggle:active {
    background: var(--color-layer-primary-soft, rgba(128, 128, 128, 0.12));
    color: var(--color-accent-primary);
    text-decoration: none !important;
}

.pca-table thead a.pca-sort-toggle:visited {
    color: inherit;
}

.pca-sort-toggle--active:visited {
    color: var(--color-accent-primary);
}

.pca-sort-toggle--active {
    color: var(--color-accent-primary);
}

.pca-sort-toggle--active .pca-sort-toggle__icon {
    color: var(--color-accent-primary);
}

.pca-sort-toggle__label {
    flex: 1 1 auto;
    text-align: right;
    line-height: 1.25;
}

.pca-sort-toggle__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 1rem;
    opacity: 0.85;
}

.pca-sort-toggle--active .pca-sort-toggle__icon {
    opacity: 1;
}

.pca-controls .search-btn-secondary {
    background: var(--color-layer-primary-soft);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-default);
}

.pca-controls .search-btn-secondary:hover:not(:disabled) {
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
}

.pca-ms-cell {
    vertical-align: top;
    max-width: 200px;
}

.pca-ms-compact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    font-size: 0.85rem;
    line-height: 1.35;
}

.pca-ms-date {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.pca-ms-price {
    font-weight: 600;
    color: var(--color-text-primary);
}

.pca-ms-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    background: var(--color-layer-primary-soft);
    color: var(--color-text-secondary);
}

.pca-ms-actions {
    font-size: 0.8rem;
    color: var(--color-accent-primary);
}

/* --- PCA: матрица снимков цен (закрепление SKU, артикула, средней) --- */
.pca-snap-matrix-intro {
    margin-bottom: var(--space-md);
}

.pca-snap-matrix-toolbar {
    margin-bottom: var(--space-md);
}

.pca-snap-per-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.pca-snap-per-form__label {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
}

.pca-snap-per-form__select.search-input {
    width: auto;
    min-width: 5rem;
}

.pca-snap-per-form__btn {
    margin-left: var(--space-xs);
}

.pca-snap-matrix-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    background: var(--color-bg-surface);
}

.pca-snap-matrix {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: 0.85rem;
}

.pca-snap-matrix th,
.pca-snap-matrix td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border-subtle);
    vertical-align: middle;
    background: var(--color-bg-surface);
}

.pca-snap-matrix tbody tr:hover td {
    background: var(--color-layer-primary-soft);
}

.pca-snap-matrix tbody tr:hover td.pca-snap-sticky {
    background: var(--color-layer-primary-soft);
}

.pca-snap-matrix thead th {
    font-weight: 600;
    white-space: nowrap;
    background: var(--color-layer-primary-soft);
    position: sticky;
    top: 0;
    z-index: 4;
}

.pca-snap-col-period {
    text-align: right;
    min-width: 3.25rem;
}

.pca-snap-cell-num {
    text-align: right;
    white-space: nowrap;
    color: var(--color-text-primary);
}

.pca-snap-cell-avg {
    font-variant-numeric: tabular-nums;
}

.pca-snap-sticky-left.pca-snap-col-offer {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 120px;
    max-width: 200px;
    box-shadow: 6px 0 12px -8px rgba(15, 23, 42, 0.18);
}

.pca-snap-sticky-right.pca-snap-col-avg {
    position: sticky;
    right: 0;
    z-index: 2;
    min-width: 108px;
    text-align: right;
    box-shadow: -6px 0 12px -8px rgba(15, 23, 42, 0.18);
    background: var(--color-layer-primary-soft);
}

.pca-snap-matrix thead .pca-snap-sticky-left,
.pca-snap-matrix thead .pca-snap-sticky-right {
    z-index: 5;
    background: var(--color-layer-primary-soft);
}

.pca-snap-matrix thead .pca-snap-sticky-right {
    box-shadow: -6px 0 12px -8px rgba(15, 23, 42, 0.15);
}

.pca-snap-matrix thead .pca-snap-sticky-left.pca-snap-col-offer {
    box-shadow: 6px 0 12px -8px rgba(15, 23, 42, 0.15);
}

[data-theme="dark"] .pca-snap-sticky-left.pca-snap-col-offer {
    box-shadow: 6px 0 12px -8px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .pca-snap-sticky-right.pca-snap-col-avg {
    box-shadow: -6px 0 12px -8px rgba(0, 0, 0, 0.45);
}

.pca-diagnosis-marketing h4 {
    margin-top: 0;
}

.pca-analyze-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: border-color var(--motion-normal), color var(--motion-normal), background var(--motion-normal);
}

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

.pca-analyze-btn:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.pca-modal-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    background: var(--color-overlay-backdrop);
    backdrop-filter: blur(3px);
    padding: 20px;
}

.pca-modal-content {
    width: min(900px, 96vw);
    max-height: 88vh;
    overflow: auto;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}

.pca-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border-default);
}

.pca-modal-header h3,
.pca-modal-header .pca-modal-title {
    margin: 0;
    font-size: 18px;
    color: var(--color-text-primary);
}

.pca-modal-close {
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.pca-modal-close:hover {
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
}

.pca-modal-body {
    padding: 16px 18px 18px;
}

.pca-modal-content--diagnosis .pca-modal-header--stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 16px 10px;
}

.pca-modal-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    flex-wrap: wrap;
}

.pca-modal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    flex: 1 1 auto;
    min-width: 0;
}

.pca-modal-header__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pca-view-toggle--header {
    margin-bottom: 0;
}

.pca-view-toggle--header .pca-view-btn {
    padding: 5px 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.pca-modal-body--diagnosis {
    padding-top: 12px;
}

.pca-diag-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 0;
    padding: 8px 0 4px;
}

.pca-diag-pill {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid var(--color-border-default);
    flex-shrink: 0;
}

.pca-diag-pill--red {
    color: var(--color-accent-danger);
    border-color: color-mix(in srgb, var(--color-accent-danger) 40%, var(--color-border-default));
    background: color-mix(in srgb, var(--color-accent-danger) 10%, transparent);
}

.pca-diag-pill--yellow {
    color: var(--color-accent-warning, #a67c00);
    border-color: color-mix(in srgb, var(--color-accent-warning, #a67c00) 40%, var(--color-border-default));
    background: color-mix(in srgb, var(--color-accent-warning, #a67c00) 10%, transparent);
}

.pca-diag-pill--green {
    color: var(--color-accent-success);
    border-color: color-mix(in srgb, var(--color-accent-success) 40%, var(--color-border-default));
    background: color-mix(in srgb, var(--color-accent-success) 10%, transparent);
}

.pca-diag-pill--neutral {
    color: var(--color-text-secondary);
    background: var(--glass-bg, rgba(128, 128, 128, 0.08));
}

.pca-diag-meta__verdict {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.35;
}

.pca-diag-meta__period,
.pca-diag-price-inline {
    margin: 0 0 6px;
    font-size: 0.86rem;
}

.pca-executive-brief {
    margin: 10px 0 14px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-accent-warning, #c9a21a);
    background: var(--color-bg-elevated, var(--color-bg-surface));
}

.pca-executive-brief__lead {
    margin: 0 0 8px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text-primary);
}

.pca-executive-brief__subh {
    margin-top: 10px;
}

.pca-executive-brief__risk {
    margin: 8px 0 0;
    font-size: 0.86rem;
    line-height: 1.45;
}

.pca-executive-brief__act li {
    line-height: 1.45;
    margin-bottom: 4px;
}

.pca-funnel-instrument {
    margin-top: 10px;
    margin-bottom: 4px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-elevated, var(--color-bg-surface));
}

.pca-funnel-instrument__k {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

.pca-funnel-instrument__title {
    margin: 0 0 8px;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
}

.pca-funnel-instrument__line {
    margin: 0 0 8px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text-primary);
}

.pca-funnel-instrument__sub {
    margin: 0 0 8px;
    font-size: 0.86rem;
    line-height: 1.4;
}

.pca-funnel-instrument__checks {
    margin: 0;
    padding-left: 1.15em;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--color-text-primary);
}

.pca-funnel-instrument__checks li {
    margin-bottom: 4px;
}

.pca-funnel-instrument--ok {
    border-color: color-mix(in srgb, var(--color-accent-success) 35%, var(--color-border-default));
}

.pca-funnel-instrument--warn {
    border-color: color-mix(in srgb, var(--color-accent-warning, #c9a21a) 30%, var(--color-border-default));
}

.pca-funnel-instrument--bad {
    border-color: color-mix(in srgb, var(--color-accent-danger) 40%, var(--color-border-default));
    background: color-mix(in srgb, var(--color-accent-danger) 6%, var(--color-bg-elevated, var(--color-bg-surface)));
}

.pca-funnel-instrument--neutral {
    background: var(--glass-bg, rgba(128, 128, 128, 0.08));
}

.pca-diag-aux {
    font-size: 0.88rem;
    line-height: 1.45;
}

.pca-diag-aux__label {
    display: inline-block;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-right: 4px;
}

.pca-snapshot-legend {
    font-size: 0.78em;
    font-weight: 500;
    margin-left: 4px;
}

.pca-funnel-brief {
    margin: 10px 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-accent-primary) 6%, var(--color-bg-surface));
}

.pca-funnel-brief__title {
    margin: 0 0 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.pca-funnel-brief__k,
.pca-funnel-brief__gtitle {
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.pca-funnel-brief__problem,
.pca-funnel-brief__hyp {
    margin: 0 0 8px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--color-text-primary);
}

.pca-funnel-brief__gtitle {
    margin: 4px 0 4px;
}

.pca-funnel-brief__growth {
    margin: 0 0 0 1.1em;
    padding: 0;
    font-size: 0.88rem;
    line-height: 1.45;
}

.pca-funnel-brief__growth li {
    margin-bottom: 4px;
}

.pca-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-surface);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 12px;
}

.pca-view-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.pca-view-btn.active {
    background: var(--color-layer-primary-soft);
    color: var(--color-accent-primary);
}

.pca-diagnosis-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.pca-diagnosis-period {
    margin: 0 0 12px;
    font-size: 0.9rem;
}

.pca-diagnosis-insight {
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--color-accent-primary) 35%, var(--color-border-default));
    background: color-mix(in srgb, var(--color-accent-primary) 8%, var(--color-bg-elevated));
}

.pca-diagnosis-regime-pill {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-accent-primary);
    background: color-mix(in srgb, var(--color-accent-primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent-primary) 40%, transparent);
}

.pca-diagnosis-insight-title {
    margin: 0 0 8px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.pca-diagnosis-insight-lead {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--color-text-primary);
}

.pca-diagnosis-insight-sub {
    margin: 0 0 10px;
    font-size: 0.92rem;
    line-height: 1.5;
}

.pca-diagnosis-insight-zones {
    margin: 0;
    padding-left: 18px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.pca-diagnosis-insight-zones li {
    margin-bottom: 6px;
}

.pca-diagnosis-lever {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--color-accent-primary);
    background: var(--color-layer-primary-soft);
}

.pca-diagnosis-lever-heading {
    margin: 0 0 6px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.pca-diagnosis-lever-title {
    margin: 0 0 8px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.pca-diagnosis-lever-hint {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
}

.pca-diagnosis-strategy,
.pca-diagnosis-second {
    margin-bottom: 12px;
}

.pca-diagnosis-strategy h4,
.pca-diagnosis-second h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.pca-diagnosis-block {
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    background: var(--color-bg-elevated);
}

.pca-diagnosis-block h4 {
    margin: 0 0 8px;
    color: var(--color-text-primary);
}

.pca-diagnosis-list {
    margin: 0;
    padding-left: 18px;
}

.pca-diagnosis-list li {
    margin: 4px 0;
    color: var(--color-text-secondary);
}

.pca-diagnosis-list li strong {
    margin-left: 8px;
    color: var(--color-text-primary);
}

.pca-impact-high {
    color: var(--color-accent-danger) !important;
}

.pca-impact-medium {
    color: var(--color-accent-warning) !important;
}

.pca-impact-low {
    color: var(--color-accent-success) !important;
}

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

/* Секция прогнозирования */
.forecast-section {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    position: relative;
    overflow: visible;
    margin: 0;
}

.section-card .forecast-section {
    margin: 0;
}

.section-card-inner .forecast-section {
    background: var(--glass-bg);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
}

.forecast-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-purple);
    opacity: 1;
}

.forecast-section h3 {
    margin-bottom: var(--space-md);
    color: var(--color-text-secondary);
    font-size: var(--font-xl);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.forecast-section h3 i {
    color: var(--accent-purple);
}

.forecast-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, color-mix(in oklab, var(--primary-400) 5%, transparent) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin: 0;
    box-shadow: var(--shadow-sm);
}

.forecast-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-md);
}

.forecast-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.forecast-item.forecast-main {
    grid-column: 1 / -1;
    padding-top: var(--space-md);
    border-top: 2px solid rgba(139, 92, 246, 0.3);
}

.forecast-label {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.forecast-value {
    font-size: var(--font-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.forecast-value-positive {
    color: var(--accent-green);
}

.forecast-value-negative {
    color: var(--accent-red);
}

/* Адаптивность для графиков и таблиц */
@media (max-width: 1200px) {
    .dashboard-charts-section {
        grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
        gap: var(--space-lg);
    }
    
    .revenue-profit-chart {
        min-height: 320px;
    }
}

@media (max-width: 900px) {
    .dashboard-charts-section {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .revenue-profit-chart {
        min-height: 280px;
    }
    
    .chart-date-label {
        padding-left: 6px;
    }
    
    .top-products-section {
        flex: 1 1 100%;
        min-width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .dashboard-charts-section {
        gap: var(--space-lg);
    }
    
    .chart-container,
    .top-products-section,
    .forecast-section {
        padding: var(--space-md);
    }
    
    .top-products-section {
        flex: 1 1 100%;
        min-width: 100%;
    }
    
    .month-selector-header-compact {
        flex-wrap: wrap;
    }
    
    .month-tabs-wrapper-compact {
        max-height: 150px;
    }
    
    .year-group-compact {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .year-label {
        font-size: 0.7rem;
        padding: 2px 6px;
    }
    
    .month-tab-compact {
        padding: 3px 8px;
        font-size: 0.75rem;
    }
    
    .forecast-content {
        grid-template-columns: 1fr;
    }
    
    .forecast-item.forecast-main {
        grid-column: 1;
    }
    
    .top-products-table {
        font-size: 0.85rem;
    }
    
    .top-products-table thead th,
    .top-products-table tbody td {
        padding: 8px 10px;
    }
    
    .top-products-section h3 {
        font-size: var(--font-base);
    }
}

/* ============================================
   СТИЛИ ДЛЯ ИЗОБРАЖЕНИЙ ТОВАРОВ В ТАБЛИЦЕ СЕБЕСТОИМОСТИ
   ============================================ */

.product-image-cell {
    width: 72px;
    text-align: center;
    padding: 0.5rem !important;
    vertical-align: middle;
}

.product-thumbnail {
    width: 54px;
    height: 74px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-default);
    display: block;
    margin: 0 auto;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.product-thumbnail:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.no-image {
    color: var(--text-tertiary);
    font-size: 0.875rem;
    display: inline-block;
}

.cost-price-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-xs, 0.25rem);
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.cost-price-icon-btn {
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.45rem;
    line-height: 1;
}

.cost-price-icon-btn .ti {
    margin: 0;
}

.editable-cost-price .cost-price-value,
.editable-cost-price-wb .cost-price-value {
    font-weight: 600;
    font-size: 14px;
}

/* ============================================
   INLINE EDITING ДЛЯ СЕБЕСТОИМОСТИ
   ============================================ */

.editable-cost-price,
.editable-cost-price-wb {
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s ease;
}

.editable-cost-price:hover,
.editable-cost-price-wb:hover {
    background-color: rgba(76, 175, 80, 0.1) !important;
}

.editable-cost-price .inline-cost-price-input,
.editable-cost-price-wb .inline-cost-price-input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: 2.75rem;
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: inherit;
    line-height: 1.35;
    text-align: right;
    font-weight: 400;
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    box-shadow: none;
    outline: none;
    -moz-appearance: textfield;
}

.editable-cost-price .inline-cost-price-input:focus,
.editable-cost-price-wb .inline-cost-price-input:focus,
.editable-cost-price .inline-cost-price-input:focus-visible,
.editable-cost-price-wb .inline-cost-price-input:focus-visible {
    outline: none;
    box-shadow: none;
    border-bottom-color: #4caf50;
}

/* Светлая тема: сброс глобального input:focus (кольцо + border-color) */
[data-theme="light"] .editable-cost-price .inline-cost-price-input,
[data-theme="light"] .editable-cost-price-wb .inline-cost-price-input {
    border: 0;
    border-bottom: 2px solid transparent;
    box-shadow: none;
}

[data-theme="light"] .editable-cost-price .inline-cost-price-input:focus,
[data-theme="light"] .editable-cost-price-wb .inline-cost-price-input:focus,
[data-theme="light"] .editable-cost-price .inline-cost-price-input:focus-visible,
[data-theme="light"] .editable-cost-price-wb .inline-cost-price-input:focus-visible {
    box-shadow: none;
    border-bottom-color: #4caf50;
}

/* Темная тема для input */
[data-theme="dark"] .editable-cost-price .inline-cost-price-input,
[data-theme="dark"] .editable-cost-price-wb .inline-cost-price-input {
    background: var(--bg-secondary);
    color: var(--color-text-primary);
}

[data-theme="dark"] .editable-cost-price .inline-cost-price-input:focus,
[data-theme="dark"] .editable-cost-price-wb .inline-cost-price-input:focus,
[data-theme="dark"] .editable-cost-price .inline-cost-price-input:focus-visible,
[data-theme="dark"] .editable-cost-price-wb .inline-cost-price-input:focus-visible {
    box-shadow: none;
    border-bottom-color: #66bb6a;
}

.editable-cost-price .inline-cost-price-input::-webkit-outer-spin-button,
.editable-cost-price .inline-cost-price-input::-webkit-inner-spin-button,
.editable-cost-price-wb .inline-cost-price-input::-webkit-outer-spin-button,
.editable-cost-price-wb .inline-cost-price-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ============================================
   WELCOME BLOCK СТИЛИ
   ============================================ */

/* Информационный блок с мишкой */
.welcome-block {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
    position: relative;
    overflow: visible;
}

.section-card .welcome-block {
    margin: 0;
}

.welcome-content {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    padding: 0;
}

.welcome-image {
    flex-shrink: 0;
    width: 200px;
    height: 200px;
}

.welcome-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.welcome-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.welcome-title {
    font-size: var(--font-2xl);
    font-weight: 700;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.3;
}

.typing-text {
    font-size: var(--font-lg);
    line-height: 1.6;
    color: var(--color-text-secondary);
    min-height: 80px;
}

.typing-text::after {
    content: '|';
    animation: blink 1s infinite;
    color: var(--accent-blue);
    margin-left: 2px;
}

.typing-text.typing-complete::after {
    display: none;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.welcome-sync-btn {
    align-self: flex-start;
    padding: var(--space-md) var(--space-xl);
    font-size: var(--font-lg);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

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

.welcome-sync-btn .fa-spinner {
    animation: spin 1s linear infinite;
}

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

@media (max-width: 768px) {
    .welcome-content {
        flex-direction: column;
        text-align: center;
    }
    
    .welcome-image {
        width: 150px;
        height: 150px;
    }
    
    .welcome-sync-btn {
        align-self: center;
        width: 100%;
        justify-content: center;
    }
    
    .welcome-title {
        font-size: var(--font-xl);
    }
    
    .typing-text {
        font-size: var(--font-base);
        min-height: 100px;
    }
}

/* ============================================
   APEXCHARTS TOOLTIP СТИЛИ
   ============================================ */

/* Позиционирование tooltip выше маркера */
.apexcharts-tooltip {
    transform: translateY(calc(-100% - 15px)) !important;
}

/* ============================================
   COLUMN RESIZE HANDLE
   ============================================ */

/* Контейнер для заголовков с возможностью изменения ширины */
/* table-layout: auto; - автоматическая ширина столбцов по содержимому (по умолчанию) */

#aggregatedTable thead th {
    position: relative;
    user-select: none;
    border-right: 1px solid rgba(148, 163, 184, 0.3);
}

#aggregatedTable thead th:last-child {
    border-right: none;
}

/* Фиксированная раскладка таблицы для корректного изменения ширины столбцов */
#aggregatedTable {
    table-layout: fixed;
    width: 100%;
}

/* Компактные строки: высота задаётся самой «высокой» ячейкой, не фото */
#aggregatedTable tbody td {
    overflow: hidden;
    vertical-align: middle;
    padding: 0.3rem 0.5rem;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Числовые и короткие колонки — одна строка */
#aggregatedTable tbody td[data-column="sales"],
#aggregatedTable tbody td[data-column="total_commission"],
#aggregatedTable tbody td[data-column="profit"],
#aggregatedTable tbody td[data-column="cost"],
#aggregatedTable tbody td[data-column="quantity"],
#aggregatedTable tbody td[data-column="commission"],
#aggregatedTable tbody td[data-column="acquiring"],
#aggregatedTable tbody td[data-column="delivery"],
#aggregatedTable tbody td[data-column="returns"],
#aggregatedTable tbody td[data-column="agents"],
#aggregatedTable tbody td[data-column="fbo"],
#aggregatedTable tbody td[data-column="advertising"],
#aggregatedTable tbody td[data-column="other_services"],
#aggregatedTable tbody td[data-column="other_charges"],
#aggregatedTable tbody td[data-column="compensations"] {
    white-space: nowrap;
}

/* Длинный текст (название, SKU, артикул) — без переноса на несколько строк */
#aggregatedTable tbody td[data-column="product"],
#aggregatedTable tbody td[data-column="sku"],
#aggregatedTable tbody td[data-column="offer_id"],
#aggregatedTable tbody td[data-column="posting"],
#aggregatedTable tbody td[data-column="operation_id"],
#aggregatedTable tbody td[data-column="type_of_service"] {
    max-width: 0;
}

#aggregatedTable .offer-id-cell {
    display: flex;
    padding-left: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

#aggregatedTable .offer-id-cell .mono {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

#aggregatedTable .offer-id-cell .copy-btn {
    flex: 0 0 auto;
}

#aggregatedTable .date-stack {
    min-height: 0;
    min-width: 0;
    padding: 0.05rem 0.15rem;
    gap: 0.05rem 0.2rem;
    grid-template-columns: minmax(0, 1fr) minmax(1.35rem, 1.65rem);
}

#aggregatedTable .date-stack__year {
    font-size: 1.2rem;
}

#aggregatedTable .date-stack__line {
    font-size: 0.75rem;
}

#aggregatedTable .date-stack__time {
    font-size: 0.6rem;
}

#aggregatedTable td[data-column="status"] .status.status-pill {
    padding: 2px 6px;
    font-size: 0.65rem;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Фото в агрегированной таблице — компактнее, чем на вкладке «Себестоимость» */
#aggregatedTable thead th.aggregated-th-image {
    width: 3rem;
    min-width: 3rem;
}

#aggregatedTable .product-image-cell {
    width: 3rem;
    min-width: 3rem;
    max-width: 3rem;
    padding: 0.2rem 0.25rem !important;
    line-height: 1;
    vertical-align: middle;
}

#aggregatedTable .product-thumbnail {
    width: 2.25rem;
    height: 3rem;
    margin: 0 auto;
    cursor: default;
}

#aggregatedTable .product-thumbnail:hover {
    transform: none;
    box-shadow: none;
}

#aggregatedTable .product-image-cell .no-image {
    font-size: 0.75rem;
    line-height: 1;
}

#wbAggregatedTable thead th.aggregated-th-image {
    width: 3rem;
    min-width: 3rem;
}

#wbAggregatedTable .product-image-cell {
    width: 3rem;
    min-width: 3rem;
    max-width: 3rem;
    padding: 0.2rem 0.25rem !important;
    line-height: 1;
    vertical-align: middle;
}

#wbAggregatedTable .product-thumbnail {
    width: 2.25rem;
    height: 3rem;
    margin: 0 auto;
    cursor: default;
}

#wbAggregatedTable .product-thumbnail:hover {
    transform: none;
    box-shadow: none;
}

#wbAggregatedTable .product-image-cell .no-image {
    font-size: 0.75rem;
    line-height: 1;
}

#wbAggregatedTable .date-stack {
    min-height: 0;
    min-width: 0;
    padding: 0.05rem 0.15rem;
    gap: 0.05rem 0.2rem;
    grid-template-columns: minmax(0, 1fr) minmax(1.35rem, 1.65rem);
}

#wbAggregatedTable .date-stack__year {
    font-size: 1.2rem;
}

#wbAggregatedTable .date-stack__line {
    font-size: 0.75rem;
}

#wbAggregatedTable .date-stack__time {
    font-size: 0.6rem;
}

#wbAggregatedTable tbody td[data-column="order_dt"] {
    overflow: visible;
    white-space: nowrap;
    vertical-align: middle;
}

/* Handle для изменения ширины столбца */
#aggregatedTable thead th::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    z-index: 10;
    transition: background-color 0.2s;
}

#aggregatedTable thead th:hover::after {
    background: color-mix(in oklab, var(--color-accent-primary) 30%, transparent);
}

#aggregatedTable thead th.resizing::after {
    background: color-mix(in oklab, var(--color-accent-primary) 60%, transparent);
}

/* Визуальный индикатор при перетаскивании */
#aggregatedTable thead th.resizing {
    background-color: color-mix(in oklab, var(--color-accent-primary) 10%, transparent);
}

/* Предотвращаем выделение текста при перетаскивании */
#aggregatedTable thead th.resizing,
#aggregatedTable.resizing {
    user-select: none;
    cursor: col-resize;
}

/* Вертикальная линия при перетаскивании */
#aggregatedTable.resizing {
    position: relative;
}

#aggregatedTable.resizing::after {
    content: '';
    position: fixed;
    top: 0;
    left: var(--resize-line-x, 0);
    width: 2px;
    height: 100vh;
    background: var(--primary-500);
    pointer-events: none;
    z-index: 10000;
    opacity: 0.8;
}

/* ============================================
   ФИЛЬТР СТАТУСОВ ДЛЯ AGGREGATED TABLE
   ============================================ */

.status-filter-btn {
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
}

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

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

.status-filter-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--glass-bg);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-top: 4px;
    min-width: 220px;
    box-shadow: var(--shadow-sm);
    z-index: 1000;
}

.status-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-default);
}

.status-filter-clear {
    background: transparent;
    border: none;
    color: var(--accent-blue);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 4px 8px;
    transition: opacity 0.2s ease;
}

.status-filter-clear:hover {
    opacity: 0.7;
}

.status-filter-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.status-filter-option {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.status-filter-option:hover {
    background: color-mix(in oklab, var(--primary-400) 10%, transparent);
}

.status-filter-option input[type="checkbox"] {
    cursor: pointer;
    margin: 0;
}

.th-status {
    position: relative;
}

.status-filter-trigger-row {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}

.status-filter-title {
    font-weight: 600;
    font-size: 0.9rem;
}

.status-pill-grow {
    flex: 1;
}

.column-toggle-relative {
    position: relative;
}

.order-row-clickable {
    cursor: pointer;
}

.modal-state {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary);
}

.modal-state--danger {
    color: var(--color-accent-danger);
}

.modal-state-icon {
    font-size: 2rem;
}

.modal-state-icon--loading {
    color: var(--color-accent-primary);
}

.modal-state-text {
    margin-top: 12px;
}

.tx-op-code {
    font-size: 11px;
}

.tx-date-cell {
    white-space: nowrap;
    font-size: 12px;
}

.tx-op-name {
    max-width: 200px;
    word-break: break-word;
    font-size: 12px;
}

.tx-type-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--color-accent-primary) 12%, transparent);
    color: var(--color-accent-primary);
}

.tx-amount-strong {
    font-weight: 600;
}

.tx-items-cell {
    font-size: 11px;
    max-width: 200px;
}

.tx-item-line {
    margin-bottom: 2px;
}

.tx-total-label {
    text-align: right;
}

.dash-muted {
    color: #999;
}

.info-spaced {
    margin-bottom: var(--space-lg);
}

#aggregated-orders .info.info-spaced {
    font-size: var(--font-xs);
}

.pagination-spaced {
    margin-top: var(--space-lg);
}

.mr-6 {
    margin-right: 6px;
}

.cursor-pointer {
    cursor: pointer;
}

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

.text-primary { color: var(--color-accent-primary); }
.text-success { color: var(--color-accent-success); }
.text-warning { color: var(--color-accent-warning); }
.text-danger  { color: var(--color-accent-danger); }
.text-purple  { color: var(--accent-purple); }
.text-info    { color: var(--accent-cyan); }
.text-dim     { color: var(--color-text-dim); }

/* Лёгкие подзаголовки и описания (единый тон для раздела «Конкуренты» и утилита класса) */
.subtitle-dim {
    font-weight: 300;
    line-height: 1.15;
    color: var(--color-text-dim);
}

/* Общие стили для заголовков страниц Ozon Extension */
.oez-page-head {
    margin-bottom: 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.oez-page-title {
    margin: 0 0 1.5rem;
    font-size: clamp(1.875rem, 4.5vw, 3.75rem);
    line-height: 1;
    color: var(--color-slate-900, #0f172a);
    letter-spacing: -0.025em;
    font-weight: 800;
    display: block;
    text-wrap: balance;
    max-width: 100%;
}
[data-theme="dark"] .oez-page-title {
    color: var(--color-text-primary);
}
.oez-page-lead {
    margin: 0 0 0.85rem;
    max-width: 42rem;
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -0.02em;
    color: var(--color-text-secondary);
    margin-inline: auto;
}

/* Детали партии */
.oex-captures .oex-crumb { margin: 0 0 0.65rem; font-size: 0.875rem; }
.oex-captures .oec-meta-dl { display: grid; grid-template-columns: 10rem 1fr; gap: 0.35rem 1rem; margin: 0; font-size: 0.875rem; }
.oex-captures .oec-meta-dl dt { margin: 0; color: var(--color-text-muted); font-weight: 500; }
.oex-captures .oec-meta-dl dd { margin: 0; word-break: break-word; }
.oex-captures .oec-td-thumb { width: 52px; vertical-align: middle; }
.oex-captures .oec-detail-thumb {
    width: 45px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-xs);
    display: block;
    box-shadow: inset 0 0 0 1px var(--color-border-muted);
}
.oex-captures .oec-detail-thumb-ph {
    display: block;
    width: 45px;
    height: 60px;
    border-radius: var(--radius-xs);
    background: var(--color-bg-inset);
}
.oec-archive-card { padding: 1rem 1.1rem 1.15rem; }
.oec-archive-card__head { margin-bottom: 0.85rem; }
.oec-archive-card__title { margin: 0 0 0.35rem; font-size: 1.05rem; }
.oec-archive-card__lead { margin: 0; max-width: 42rem; }
.oec-archive-meta { margin: 0 0 0.75rem; }
.oec-archive-empty {
    padding: 1.25rem 1rem;
    text-align: center;
    border-radius: var(--radius-md);
    border: 1px dashed var(--color-border-muted);
    background: var(--color-bg-inset);
}
.oec-archive-empty__text {
    margin: 0 auto;
    max-width: 26rem;
}
.oec-table-scroller {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-muted);
}
.oex-captures .oec-table--archive { margin: 0; }
.oex-captures .oec-table--archive th {
    background: var(--color-bg-inset);
    white-space: nowrap;
}
.oex-captures .oec-table--archive td { vertical-align: top; }
.oec-td-id { font-weight: 600; color: var(--color-text-secondary); }
.oec-td-n { font-variant-numeric: tabular-nums; font-weight: 600; }
.oec-td-action { white-space: nowrap; vertical-align: middle; }
/* Стили для формы добавления связки */
.oex-captures .oec-nb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}
.oex-captures .oec-nb-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-md);
    border-top: 1px solid var(--color-border-muted);
    padding-top: var(--space-lg);
}
.oex-captures .oec-comp-slot-row {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    align-items: center;
}
.oex-captures .oec-comp-slot-row input[type="text"],
.oex-captures .oec-saved-rival__sku,
.oex-captures .oec-saved-mine__sku {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-xs);
    font-size: var(--font-base);
    font-family: 'Onest', sans-serif;
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.oex-captures .oec-comp-slot-row input[type="text"].mono,
.oex-captures .oec-saved-rival__sku.mono,
.oex-captures .oec-saved-mine__sku.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
}
.oex-captures .oec-comp-slot-row input[type="text"]:focus,
.oex-captures .oec-saved-rival__sku:focus,
.oex-captures .oec-saved-mine__sku:focus {
    outline: none;
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.oex-captures .oec-add-comp {
    width: 100%;
    justify-content: center;
    margin-top: var(--space-xs);
}

.oex-captures .oec-page-lead__link {
    font-weight: 600;
}
.oex-captures .oec-archive-back {
    margin: 0 0 0.85rem;
    font-size: 0.875rem;
}
.oex-captures .oec-parse-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.5rem;
    margin: 0;
    padding: 0.45rem 0.65rem;
    font-size: 0.8125rem;
    border-top: 1px solid var(--color-border-muted);
    padding-top: 0.85rem;
    margin-top: 0.1rem;
    width: 100%;
    max-width: 42rem;
    margin-inline: auto;
}
.oex-captures .oec-parse-summary .ti {
    font-size: 1rem;
    opacity: 0.75;
}
.oex-captures .oec-parse-summary__inline {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-variant-numeric: tabular-nums;
}
.oex-captures .oec-pool-toggle {
    display: flex;
    justify-content: center;
    margin: 0.65rem auto 0;
    max-width: 42rem;
}
.oex-captures .oec-pool-toggle__control {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    margin: 0;
    user-select: none;
}
.oex-captures .oec-pool-toggle__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.oex-captures .oec-pool-toggle__track {
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--color-border-strong);
    position: relative;
    transition: background var(--motion-fast) ease;
}
.oex-captures .oec-pool-toggle__track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform var(--motion-fast) ease;
}
.oex-captures .oec-pool-toggle__input:checked + .oec-pool-toggle__track {
    background: var(--color-accent-primary);
}
.oex-captures .oec-pool-toggle__input:checked + .oec-pool-toggle__track::after {
    transform: translateX(1.25rem);
}
.oex-captures .oec-pool-toggle__input:focus-visible + .oec-pool-toggle__track {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
}
.oex-captures .oec-pool-toggle__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    white-space: nowrap;
}
.oex-captures .oec-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.oex-captures .oec-table th,
.oex-captures .oec-table td { padding: 0.5rem 0.65rem; text-align: left; border-bottom: 1px solid var(--color-border-muted); vertical-align: top; }
.oex-captures .oec-table th { font-weight: 600; font-size: 0.8125rem; color: var(--color-text-muted); }
.oex-captures .oec-muted { color: var(--color-text-secondary); white-space: nowrap; }
.oex-captures .oec-title { font-weight: 500; margin-bottom: 0.2rem; max-width: 28rem; }
.oex-captures .oec-url { font-size: 0.8125rem; word-break: break-all; display: inline-block; max-width: 28rem; }
.oex-captures .oec-pager { display: flex; align-items: center; gap: 0.65rem; margin-top: 0.85rem; flex-wrap: wrap; }
.oex-captures .oec-pager-meta { font-size: 0.8125rem; color: var(--color-text-muted); }
.oex-inline-link { text-decoration: underline; color: var(--color-primary); }
.oec-muted-box { font-size: 0.8125rem; color: var(--color-text-muted); margin: 0 0 0.75rem; }
.oec-comp-rows { margin: 0.5rem 0 0; }
.oec-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    margin-bottom: 0.35rem;
}
.oex-captures .oez-page-lead.oec-page-lead,
.oex-captures .oec-parse-summary,
.oex-captures .oec-archive-card__lead,
.oex-captures .oec-archive-meta,
.oex-captures .oec-nb-card__sub,
.oex-captures .oec-empty-hint,
.oex-captures .oec-archive-empty__text {
    font-weight: 300;
    line-height: 1.15;
    color: var(--color-text-dim);
}
.oex-captures .oec-nb-card__sub {
    font-size: 0.9375rem;
}
.oex-captures .oec-nb-submit-sub {
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0.01em;
    text-align: right;
    align-self: flex-end;
    max-width: 22rem;
    margin: 0;
    padding: 0;
    color: var(--color-text-dim);
}
.oex-captures .oec-nb-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}
.oex-captures .oec-empty-hint,
.oex-captures .oec-archive-empty__text {
    font-size: 0.875rem;
}
.oex-captures .oec-archive-card__lead {
    font-size: 0.8125rem;
}
.oex-captures .oec-archive-meta {
    font-size: 0.8125rem;
}

/* Сохранённые связки (сравнение цен) */
.oex-captures .oec-compare-bundles-heading {
    margin: 2rem 0 1rem;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--color-text-primary);
}

.oex-captures .oec-saved-bundle {
    width: 100%;
    margin: 0 0 1.25rem;
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-default);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: border-color var(--motion-base) ease, box-shadow var(--motion-base) ease;
}

.oex-captures .oec-saved-bundle:hover {
    border-color: color-mix(in srgb, var(--color-accent-primary) 28%, var(--color-border-default));
    box-shadow: var(--shadow-hover);
}

.oex-captures .oec-saved-bundle__form {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.oex-captures .oec-saved-bundle__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-border-default);
    background: var(--color-bg-surface);
}

.oex-captures .oec-saved-bundle__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}

.oex-captures .oec-saved-bundle__meta {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--color-text-dim);
}

.oex-captures .oec-saved-bundle__del {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}

.oex-captures .oec-saved-bundle__del .ti {
    font-size: 1.15rem;
}

.oex-captures .oec-saved-bundle__del:hover {
    background: color-mix(in srgb, var(--color-accent-danger) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-danger) 22%, transparent);
    color: var(--color-accent-danger);
}

.oex-captures .oec-saved-bundle__del:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
}

.oex-captures .oec-saved-bundle__body {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.oex-captures .oec-saved-bundle__split {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    min-height: 11rem;
}

.oex-captures .oec-saved-mine {
    display: flex;
    flex: 0 0 300px;
    width: 300px;
    max-width: 36%;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border-radius: 0;
    background: var(--color-bg-surface);
    border: none;
    border-right: 1px solid var(--color-border-default);
    border-left: 3px solid var(--color-border-strong);
    box-sizing: border-box;
    align-items: flex-start;
}

.oex-captures .oec-saved-rivals {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1rem 1.1rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-elevated);
}

.oex-captures .oec-saved-mine--below {
    border-left-color: var(--color-accent-success);
}

.oex-captures .oec-saved-mine--above {
    border-left-color: var(--color-accent-danger);
}

.oex-captures .oec-saved-mine--tie {
    border-left-color: var(--color-text-muted);
}

.oex-captures .oec-saved-mine--na {
    border-left-color: var(--color-border-strong);
}

.oex-captures .oec-saved-mine__thumb {
    flex: 0 0 80px;
    width: 80px;
    height: 106px;
    border-radius: var(--radius-xs);
    overflow: hidden;
    background: color-mix(in srgb, var(--color-text-muted) 12%, var(--color-bg-elevated));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text-primary) 6%, transparent);
}

.oex-captures .oec-saved-mine__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.oex-captures .oec-saved-mine__thumb-ph {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-text-muted) 18%, var(--color-bg-elevated)) 0%,
        color-mix(in srgb, var(--color-bg-elevated) 92%, var(--color-bg-surface)) 100%
    );
}

.oex-captures .oec-saved-mine__col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.oex-captures .oec-saved-mine__kicker {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.oex-captures .oec-saved-mine__sku {
    width: 100%;
    max-width: none;
    padding: 0.4rem 0.55rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text-primary);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-xs);
    box-sizing: border-box;
    transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.oex-captures .oec-saved-mine__sku:focus {
    outline: none;
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.oex-captures .oec-saved-mine__name {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.oex-captures .oec-saved-mine__price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.65rem;
    margin-top: 0.15rem;
}

.oex-captures .oec-saved-mine__price {
    font-size: 1.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    color: var(--color-text-primary);
}

.oex-captures .oec-saved-mine__rub {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.55;
    margin-left: 0.1rem;
}

.oex-captures .oec-saved-mine__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.15rem;
}

.oex-captures .oec-saved-rivals__label {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.oex-captures .oec-saved-rival-list {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

.oex-captures .oec-saved-rival {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 0.8rem 0.95rem;
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-left-width: 3px;
    border-left-color: var(--color-border-strong);
    box-sizing: border-box;
}

.oex-captures .oec-saved-rival--cheaper {
    border-left-color: var(--color-accent-success);
}

.oex-captures .oec-saved-rival--dearer {
    border-left-color: var(--color-accent-danger);
}

.oex-captures .oec-saved-rival--tie {
    border-left-color: var(--color-text-muted);
}

.oex-captures .oec-saved-rival--na {
    border-left-color: var(--color-border-default);
}

.oex-captures .oec-saved-rival__thumb {
    flex: 0 0 44px;
    width: 44px;
    height: 58px;
    border-radius: 6px;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-text-muted) 12%, var(--color-bg-elevated));
}

.oex-captures .oec-saved-rival__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.oex-captures .oec-saved-rival__thumb-ph {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-text-muted) 16%, var(--color-bg-elevated)) 0%,
        var(--color-bg-elevated) 100%
    );
}

.oex-captures .oec-saved-rival__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.05rem 0;
}

.oex-captures .oec-saved-rival__sku-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
}

.oex-captures .oec-saved-rival__sku-label {
    flex: 0 0 auto;
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    cursor: pointer;
}

.oex-captures .oec-saved-rival__sku {
    width: auto;
    min-width: 9ch;
    max-width: 18ch;
    field-sizing: content;
    padding: 0.4rem 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text-primary);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-xs);
    box-sizing: border-box;
}

.oex-captures .oec-saved-rival__sku:focus {
    outline: none;
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.oex-captures .oec-saved-rival__name {
    flex: 1 1 8rem;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oex-captures .oec-saved-rival__name--empty {
    color: var(--color-text-dim);
}

.oex-captures .oec-saved-rival__price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
}

.oex-captures .oec-saved-rival__price {
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.oex-captures .oec-saved-rival__rub {
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.55;
    margin-left: 0.08rem;
}

.oex-captures .oec-saved-rival__tools {
    flex: 0 0 auto;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    align-self: center;
    gap: 0.45rem;
    padding-left: 0.15rem;
}

.oex-captures .oec-saved-rival__tools .oex-inline-link {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.oex-captures .oec-saved-rival .status-pill {
    border-radius: var(--radius-xs);
    font-size: 0.75rem;
    padding: 0.35rem 0.55rem;
}

.oex-captures .oec-saved-rival__rm {
    flex-shrink: 0;
    width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    min-width: 2.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    border: 1px solid color-mix(in srgb, var(--color-accent-danger) 40%, transparent);
    background: color-mix(in srgb, var(--color-accent-danger) 14%, transparent);
    color: var(--color-accent-danger);
    box-shadow: none;
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.oex-captures .oec-saved-rival__rm .ti {
    font-size: 1.35rem;
    line-height: 1;
}

.oex-captures .oec-saved-rival__rm:hover {
    background: color-mix(in srgb, var(--color-accent-danger) 24%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-danger) 55%, transparent);
    color: var(--color-accent-danger-hover, var(--color-accent-danger));
}

.oex-captures .oec-saved-rival__rm:focus-visible {
    outline: 2px solid var(--color-accent-danger);
    outline-offset: 2px;
}

.oex-captures .oec-saved-rivals__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    border-radius: var(--radius-xs);
    border: 1px solid color-mix(in srgb, var(--color-accent-primary) 28%, var(--color-border-default));
    background: color-mix(in srgb, var(--color-accent-primary) 8%, transparent);
    color: var(--color-accent-primary);
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}

.oex-captures .oec-saved-rivals__add:hover {
    background: color-mix(in srgb, var(--color-accent-primary) 14%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-primary) 40%, var(--color-border-default));
}

.oex-captures .oec-saved-bundle__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-border-default);
    background: var(--color-bg-surface);
}

.oex-captures .oec-saved-bundle__save-hint {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-dim);
}

@media (max-width: 900px) {
    .oex-captures .oec-saved-bundle__split {
        flex-direction: column;
    }

    .oex-captures .oec-saved-mine {
        flex: none;
        width: 100%;
        max-width: none;
        border-right: none;
        border-bottom: 1px solid var(--color-border-default);
    }
}

@media (max-width: 720px) {
    .oex-captures .oec-saved-rival {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .oex-captures .oec-saved-rival__tools {
        flex: 1 1 100%;
        margin-left: 0;
        padding-left: calc(44px + 0.75rem);
        justify-content: flex-end;
    }

    .oex-captures .oec-saved-rival__sku-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .oex-captures .oec-saved-rival__name {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

.ml-sm { margin-left: var(--space-sm); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-lg { margin-bottom: var(--space-lg); }
.mt-xs { margin-top: var(--space-xs); }

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

/* Soft background surfaces by semantic roles */
.bg-soft-primary {
    background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}
.bg-soft-success {
    background: color-mix(in srgb, var(--color-accent-success) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent-success) 30%, transparent);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}
.bg-soft-warning {
    background: color-mix(in srgb, var(--color-accent-warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent-warning) 30%, transparent);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}
.bg-soft-danger {
    background: color-mix(in srgb, var(--color-accent-danger) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent-danger) 30%, transparent);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}
.bg-soft-purple {
    background: color-mix(in srgb, var(--accent-purple) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-purple) 30%, transparent);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}
.bg-soft-info {
    background: color-mix(in srgb, var(--accent-cyan) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-cyan) 30%, transparent);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}
.bg-soft-dim {
    background: color-mix(in srgb, var(--color-text-dim) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text-dim) 30%, transparent);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

/* Progress */
.progress-card {
    border-radius: var(--radius-md);
    padding: var(--space-md);
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-elevated);
}
.progress-card__header {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-sm);
}
.progress-card__icon {
    color: var(--color-accent-primary);
    font-size: 1.25rem;
}
.progress-card--primary {
    background: color-mix(in srgb, var(--color-accent-primary) 8%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-primary) 28%, transparent);
}
.progress {
    width: 100%;
    height: 8px;
    background: color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.progress__bar {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
}
.progress__bar--primary {
    background: var(--color-accent-primary);
}

/* Visibility */
.hidden { display: none; }

.w-full { width: 100%; }
.min-w-full { min-width: 100%; }
.table-scroll-x { overflow-x: auto; width: 100%; }
.pagination-centered {
    margin-top: var(--space-lg);
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
}
.pagination-meta {
    display: flex;
    align-items: center;
    padding: 0 var(--space-md);
}
.wb-total-pay { grid-column: 1 / -1; }
.toast-link-white { color: #fff; text-decoration: underline; }

.nowrap { white-space: nowrap; }
.pos-relative { position: relative; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.fw-500 { font-weight: 500; }
.fw-700 { font-weight: 700; }
.m-0 { margin: 0; }

.code-11 { font-size: 11px; }
.badge-xs { font-size: 10px; }
.icon-success-lg {
    font-size: 48px;
    color: var(--color-accent-success);
    margin-bottom: 16px;
}

.ol-compact {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.json-preview-box {
    background: var(--color-bg-surface);
    padding: 10px;
    border-radius: 4px;
    margin-top: 10px;
    overflow-x: auto;
    font-size: 11px;
    max-height: 400px;
    overflow-y: auto;
}

.json-debug-box {
    background: #1e293b;
    color: #e2e8f0;
    padding: 20px;
    border-radius: 12px;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.6;
    max-height: 800px;
    overflow-y: auto;
    font-family: 'Courier New', Courier, monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.progress-inline-box {
    margin-top: 10px;
    padding: 10px;
    background: #e7f3ff;
    border-radius: 4px;
}

/* Generic utility/layout for view cleanup */
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.min-w-150 { min-width: 150px; }
.min-w-200 { min-width: 200px; }
.d-flex { display: flex; }
.gap-10 { gap: 10px; }
.fs-13 { font-size: 13px; }

/* Form controls */
.label-v2 {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--color-text-secondary);
}
.input-v2 {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-border-default);
    border-radius: 6px;
    font-size: 14px;
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
}

/* Logs page */
.logs-filters-v2 {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 20px;
}
.logs-stats-v2 {
    margin-bottom: 15px;
    padding: 10px;
    background: var(--color-bg-surface);
    border-radius: 6px;
    font-size: 13px;
    color: var(--color-text-secondary);
}
.th-time, .th-level, .th-message, .th-context {
    text-align: left;
    padding: 12px;
    border-bottom: 2px solid var(--color-border-default);
}
.th-time { width: 160px; }
.th-level { width: 100px; }
.th-context { width: 80px; text-align: center; }
.table-empty-v2 {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary);
}
.logs-pagination-v2 {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-top: 1px solid var(--color-border-default);
}
.context-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-overlay-backdrop);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
.context-modal-card {
    background: var(--color-bg-surface);
    border-radius: 8px;
    padding: 20px;
    max-width: 600px;
    max-height: 80vh;
    overflow: auto;
    box-shadow: var(--shadow-lg);
}
.context-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.context-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--color-text-secondary);
}
.context-modal-pre {
    background: var(--color-bg-surface);
    padding: 15px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 12px;
    margin: 0;
}
.log-row { border-bottom: 1px solid var(--color-border-default); }
.log-cell { padding: 12px; }
.log-cell-time {
    padding: 12px;
    font-size: 13px;
    color: var(--color-text-secondary);
}
.log-cell-message {
    padding: 12px;
    font-size: 14px;
}
.log-cell-center {
    padding: 12px;
    text-align: center;
}
.log-level-badge-v2 {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}
.btn-xs {
    padding: 4px 8px;
    font-size: 12px;
}

/* Extended utility set for legacy view cleanup */
.fw-600 { font-weight: 600; }
.text-sm { font-size: var(--font-sm); }
.text-base { font-size: var(--font-base); }
.text-lg { font-size: var(--font-lg); }
.mr-xs { margin-right: var(--space-xs); }
.mr-4 { margin-right: 4px; }
.ml-6 { margin-left: 6px; }
.mt-4 { margin-top: 4px; }
.mt-md { margin-top: var(--space-md); }
.mt-xl { margin-top: var(--space-xl); }
.mb-md { margin-bottom: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-12 { padding: 12px; }
.w-100 { width: 100px; }
.w-160 { width: 160px; }
.h-40 { height: 40px; }
.h-52 { height: 52px; }
.max-w-400 { max-width: 400px; }
.max-w-800 { max-width: 800px; }
.max-h-300 { max-height: 300px; }
.max-h-400 { max-height: 400px; }
.overflow-y-auto { overflow-y: auto; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.align-center { align-items: center; }
.align-baseline { align-items: baseline; }
.wrap { flex-wrap: wrap; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.text-left { text-align: left; }
.text-right { text-align: right; }
.border { border: 1px solid var(--color-border-default); }
.border-bottom { border-bottom: 1px solid var(--color-border-default); }
.border-bottom-2 { border-bottom: 2px solid var(--color-border-default); }
.border-top-2 { border-top: 2px solid var(--color-border-default); }
.rounded-sm { border-radius: var(--radius-sm); }
.bg-light { background: var(--color-bg-surface); }
.centered { text-align: center; }
.no-select { user-select: none; }

.textarea-v2 {
    padding: 12px 16px;
    border: 2px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    font-size: var(--font-base);
    font-family: 'Onest', sans-serif;
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    width: 100%;
    resize: vertical;
}

.list-box-v2 {
    border: 2px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
}

.input-sm {
    padding: 8px 12px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
}
.expenses-detail-block {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border-default);
}

.expenses-detail-title {
    font-weight: 600;
    margin-bottom: var(--space-md);
    color: var(--color-text-primary);
}

.expenses-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
}

.expenses-detail-item {
    padding: var(--space-md);
    background: color-mix(in srgb, var(--color-accent-danger) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent-danger) 20%, transparent);
    border-radius: var(--radius-md);
}

.expenses-detail-item-label,
.expenses-detail-item-meta,
.expenses-summary-label {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
}

.expenses-detail-item-label,
.expenses-summary-label {
    margin-bottom: var(--space-xs);
}

.expenses-detail-item-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-accent-danger);
    margin-bottom: var(--space-xs);
}

.expenses-summary-card {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: color-mix(in srgb, var(--color-accent-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent-primary) 22%, transparent);
    border-radius: var(--radius-md);
}

.expenses-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.expenses-summary-right {
    text-align: right;
}

.expenses-summary-value-primary,
.expenses-summary-value-success {
    font-size: 1.1rem;
    font-weight: 600;
}

.expenses-summary-value-primary {
    color: var(--color-accent-primary);
}

.expenses-summary-value-success {
    color: var(--color-accent-success);
}

/* ABC analysis helpers */
.abc-section-meta {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-text-secondary);
    margin-left: var(--space-sm);
}
.abc-margin-high { color: var(--color-accent-success); }
.abc-margin-mid  { color: var(--color-accent-warning); }
.abc-margin-low  { color: var(--color-accent-danger); }

.col-span-all { grid-column: 1 / -1; }

/* Unit-экономика: нейтральная таблица, tabular nums, зебра; акцент только на отрицательной прибыли */
#unit-economics-page .top-products-table thead th.ue-num,
#unit-economics-page .top-products-table tbody td.ue-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

#unit-economics-page .top-products-table tbody td.ue-num {
    color: var(--color-text-primary);
    font-weight: 500;
}

#unit-economics-page .top-products-table thead th.ue-num {
    color: var(--color-text-secondary);
}

#unit-economics-page .top-products-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--color-text-primary) 2.5%, transparent);
}

#unit-economics-page .top-products-table tbody tr:hover {
    background: color-mix(in srgb, var(--color-text-primary) 6%, transparent);
}

#unit-economics-page .ue-profit-pos {
    color: var(--color-text-primary);
    font-weight: 600;
}

#unit-economics-page .ue-profit-neg {
    color: color-mix(in srgb, var(--color-accent-danger) 72%, var(--color-text-primary));
    font-weight: 600;
}

/* UI test: borderless main surfaces with medium shadow */
.section-card,
.metric-card,
.ozon-metric-card,
.chart-container,
.top-products-section,
.forecast-card,
.glass-card {
    box-shadow: var(--tui-surface-shadow) !important;
}

.section-card-inner {
    box-shadow: none !important;
}

.section-card-header {
    border-bottom: none;
}

/* Заголовок секции с кнопками справа (WB транзакции и др.) */
.section-card-header--with-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border-default);
}
.section-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

/* Страницы входа и регистрации (токены для светлой и тёмной темы) */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(var(--space-xl), 5vw, calc(var(--space-xl) * 1.75));
    background: linear-gradient(135deg, var(--color-bg-page) 0%, var(--color-bg-surface) 100%);
}

.auth-card {
    max-width: 520px;
    width: 100%;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    padding: calc(var(--space-xl) + var(--space-md));
    box-shadow: var(--shadow-md);
    color: var(--color-text-primary);
}

.auth-card__header {
    text-align: center;
    margin-bottom: calc(var(--space-xl) + var(--space-sm));
}

.auth-card__logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.auth-card__brand {
    margin: 0;
    font-size: var(--font-2xl);
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-accent-primary) 0%, var(--accent-purple) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-card__brand--inline {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-accent-primary) 0%, var(--accent-purple) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-card__title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}

.auth-card__subtitle {
    color: var(--color-text-secondary);
    font-size: var(--font-base);
}

.auth-intro-card {
    margin-bottom: calc(var(--space-xl) + var(--space-sm));
    text-align: center;
    justify-content: center;
}

/* Алерты в карточке (ошибка/успех) — отступ до следующего блока */
.auth-card > .sync-info-card--message-danger,
.auth-card > .sync-info-card--message-success {
    margin-bottom: calc(var(--space-xl) + var(--space-sm));
}

/* Чтобы не суммировались отступ алерта и margin-top формы */
.auth-card > .sync-info-card--message-danger + .auth-form,
.auth-card > .sync-info-card + .register-form {
    margin-top: 0;
}

.auth-intro-card .sync-info-card__heading {
    font-weight: 600;
    margin-bottom: var(--space-xs);
    font-size: var(--font-lg);
    color: var(--color-text-primary);
}

.auth-form-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 calc(var(--space-xl) + var(--space-sm)) 0;
}

/* Форма: вертикальный ритм между полями (токены вместо margin на каждом .form-field) */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-lg) + var(--space-sm));
    margin-top: 0;
}

.register-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-lg) + var(--space-sm));
    margin-top: calc(var(--space-xl) + var(--space-sm));
}

.auth-card .form-field {
    margin-bottom: 0;
    gap: var(--space-md);
}

.auth-card .form-field--row {
    gap: var(--space-md);
    align-items: center;
    margin-top: 0;
}

.auth-card .form-field--row input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    accent-color: var(--color-accent-primary);
    cursor: pointer;
}

.auth-footer-note {
    text-align: center;
    margin-top: calc(var(--space-xl) + var(--space-md));
    color: var(--color-text-secondary);
    font-size: var(--font-sm);
}

.auth-footer-note a {
    color: var(--color-accent-primary);
    font-weight: 600;
    text-decoration: none;
}

.auth-footer-note a:hover {
    text-decoration: underline;
}

.auth-footer-note--bordered {
    margin-top: calc(var(--space-xl) + var(--space-sm));
    padding-top: calc(var(--space-xl) + var(--space-sm));
    border-top: 1px solid var(--color-border-default);
}

.register-form .form-field input.error {
    border-color: var(--color-accent-danger);
}

.auth-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: 0;
    padding-top: var(--space-xs);
}

.auth-checkbox input[type="checkbox"] {
    width: auto;
    margin-top: 4px;
}

.auth-checkbox label {
    font-weight: 500;
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.auth-checkbox a {
    color: var(--color-accent-primary);
    font-weight: 600;
}

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-xs);
}

.auth-actions .btn {
    width: 100%;
    padding: calc(var(--space-md) + 2px) var(--space-lg);
    font-size: var(--font-base);
    font-weight: 600;
}

.register-form .form-field {
    margin-bottom: 0;
}

.register-form .error-message {
    color: var(--color-accent-danger);
    font-size: var(--font-sm);
    margin-top: var(--space-xs);
    display: none;
}

.register-form .form-field input.error ~ .error-message {
    display: block;
}

.honeypot-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

/* Ozon Performance — раскрытие групп фактов рекламы */
/* Личный кабинет (/account.php) */
.account-page {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.account-page .content-section {
    margin-bottom: var(--space-xl);
}

.account-page .content-section:last-child {
    margin-bottom: 0;
}

.account-hero {
    padding: var(--space-xl);
}

.account-hero__head {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
}

.account-hero__status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
}

.account-hero__cta {
    margin-top: var(--space-sm);
    text-decoration: none;
}

.account-card-head--row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
}

.account-card-head--row.section-card-header {
    margin-bottom: var(--space-lg);
}

.account-connections-lead {
    margin-bottom: var(--space-lg);
}

.account-connections-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--color-border-subtle, var(--glass-border));
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    background: var(--color-bg-subtle, rgba(0, 0, 0, 0.02));
}

.account-connections-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--color-border-subtle, var(--glass-border));
}

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

.account-connections-item__label {
    font-size: var(--font-sm);
    color: var(--color-text-primary, var(--text-primary));
}

.account-conn-pill {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: var(--font-xs);
    font-weight: 600;
    border: 1px solid var(--color-border-default, var(--glass-border));
    white-space: nowrap;
}

.account-conn-pill--success {
    background: color-mix(in srgb, var(--color-accent-success, #22c55e) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-success, #22c55e) 35%, var(--color-border-default));
    color: var(--color-accent-success, #16a34a);
}

.account-conn-pill--danger {
    background: color-mix(in srgb, var(--color-accent-danger, #ef4444) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-danger, #ef4444) 35%, var(--color-border-default));
    color: var(--color-accent-danger, #dc2626);
}

.account-conn-pill--info {
    background: color-mix(in srgb, var(--color-accent-primary, var(--primary-400)) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-primary, var(--primary-400)) 35%, var(--color-border-default));
    color: var(--color-accent-primary, var(--primary-600));
}

.account-conn-pill--neutral {
    background: var(--color-bg-elevated, var(--glass-bg));
    color: var(--color-text-secondary, var(--text-secondary));
}

.account-conn-pill__when {
    font-weight: 500;
    opacity: 0.85;
}

.account-plan-badge {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: color-mix(in srgb, var(--color-accent-primary, var(--primary-400)) 14%, transparent);
    color: var(--color-accent-primary, var(--primary-600));
    border: 1px solid color-mix(in srgb, var(--color-accent-primary, var(--primary-400)) 35%, var(--color-border-default));
}

.account-plan-select-btn {
    align-self: flex-start;
    margin-top: auto;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-default, var(--glass-border));
    background: var(--color-bg-elevated, var(--glass-bg));
    color: var(--color-text-primary, var(--text-primary));
    font-size: var(--font-sm);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--motion-fast, 0.15s) ease, background-color var(--motion-fast, 0.15s) ease;
}

.account-plan-select-btn:hover {
    border-color: var(--color-accent-primary, var(--primary-400));
    background: color-mix(in srgb, var(--color-accent-primary, var(--primary-400)) 8%, var(--color-bg-elevated, transparent));
}

.account-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-xl);
    margin-bottom: 0;
}

.account-page-title {
    font-size: var(--font-xl, 1.7rem);
    font-weight: 700;
    margin: 0 0 var(--space-sm);
    color: var(--color-text-primary, var(--text-primary));
}

.account-page-subtitle {
    margin: 0;
    color: var(--color-text-secondary, var(--text-secondary));
    font-size: var(--font-sm);
}

.account-status-pill {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-md);
    border-radius: 999px;
    font-size: var(--font-sm);
    font-weight: 600;
    border: 1px solid var(--color-border-default, var(--glass-border));
    white-space: nowrap;
}

.account-status-pill--success {
    background: color-mix(in srgb, var(--color-accent-success, #22c55e) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-success, #22c55e) 35%, var(--color-border-default));
    color: var(--color-accent-success, #16a34a);
}

.account-status-pill--info {
    background: color-mix(in srgb, var(--color-accent-primary, var(--primary-400)) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-primary, var(--primary-400)) 35%, var(--color-border-default));
    color: var(--color-accent-primary, var(--primary-600));
}

.account-status-pill--warning {
    background: color-mix(in srgb, var(--color-accent-warning, #f59e0b) 14%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-warning, #f59e0b) 40%, var(--color-border-default));
    color: var(--color-accent-warning, #d97706);
}

.account-status-pill--danger {
    background: color-mix(in srgb, var(--color-accent-danger, #ef4444) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-danger, #ef4444) 35%, var(--color-border-default));
    color: var(--color-accent-danger, #dc2626);
}

.account-status-pill--neutral {
    background: var(--color-bg-elevated, var(--glass-bg));
    color: var(--color-text-secondary, var(--text-secondary));
}

.account-access-detail {
    margin: 0;
    color: var(--color-text-secondary, var(--text-secondary));
    font-size: var(--font-sm);
    line-height: 1.55;
}

.account-alert {
    margin-bottom: 0;
}

/* Алерты на странице кабинета — больше воздуха, без лишнего внешнего margin (ритм задаёт .account-page gap) */
.account-page .sync-info-card {
    margin-bottom: 0;
    padding: var(--space-xl);
    gap: var(--space-xl);
}

.account-page .sync-info-card i {
    margin-top: 0.15rem;
}

.account-alert-text {
    font-size: var(--font-sm);
    margin-top: var(--space-sm);
    line-height: 1.55;
    color: var(--color-text-secondary, var(--text-secondary));
}

.account-inline-link {
    color: var(--color-accent-primary, var(--accent-blue));
    text-decoration: underline;
}

.account-inline-code,
.inline-code {
    display: inline-block;
    margin: 0 0.15em;
    padding: 0.15em 0.45em;
    font-size: 0.9em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.06));
    border-radius: 4px;
}

.account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
    margin-bottom: 0;
}

.account-card {
    padding: 0;
    border-radius: 0;
}

.account-card-head {
    margin-bottom: var(--space-xl);
}

.account-card-head--row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
}

.account-card-title {
    margin: 0;
    font-size: var(--font-base);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    color: var(--color-text-primary, var(--text-primary));
}

.account-card-title .ti {
    opacity: 0.85;
}

.account-dl {
    margin: 0;
}

.account-dl--compact .account-dl-row {
    padding: var(--space-md) 0;
}

.account-dl-row {
    display: grid;
    grid-template-columns: minmax(120px, 38%) 1fr;
    gap: var(--space-lg);
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--color-border-subtle, var(--glass-border));
}

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

.account-dl dt {
    margin: 0;
    font-size: var(--font-sm);
    color: var(--color-text-secondary, var(--text-secondary));
}

.account-dl dd {
    margin: 0;
    font-size: var(--font-sm);
    color: var(--color-text-primary, var(--text-primary));
}

.account-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9em;
}

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

.account-paragraph {
    margin: 0;
    line-height: 1.6;
}

.account-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: var(--space-md);
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    font-weight: 500;
    vertical-align: middle;
}

.account-chip--ok {
    background: color-mix(in srgb, var(--color-accent-success, #22c55e) 15%, transparent);
    color: var(--color-accent-success, #15803d);
}

.account-chip--warn {
    background: color-mix(in srgb, var(--color-accent-warning, #f59e0b) 18%, transparent);
    color: var(--color-accent-warning, #b45309);
}

.account-billing-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.account-billing-flag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    font-weight: 500;
    border: 1px solid var(--color-border-default, var(--glass-border));
}

.account-billing-flag.is-on {
    border-color: color-mix(in srgb, var(--color-accent-success, #22c55e) 45%, var(--color-border-default));
    color: var(--color-accent-success, #15803d);
}

.account-billing-flag.is-off {
    opacity: 0.85;
    color: var(--color-text-secondary, var(--text-secondary));
}

.account-hint {
    margin-bottom: 0;
}

.account-hint-text {
    font-size: var(--font-sm);
    margin-top: var(--space-xs);
    line-height: 1.5;
    color: var(--color-text-secondary, var(--text-secondary));
}

.account-warn-text {
    color: var(--color-accent-warning, #d97706);
    font-weight: 500;
}

.account-plans-section {
    margin-bottom: 0;
}

.account-plans-note {
    font-size: var(--font-xs);
}

.account-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-xl);
}

.account-plan-card {
    padding: var(--space-xl);
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--color-border-default, var(--glass-border));
    background: var(--color-bg-subtle, rgba(0, 0, 0, 0.02));
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.account-plan-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-bottom: var(--space-lg);
    margin-bottom: 0;
    border-bottom: 1px solid var(--color-border-subtle, var(--glass-border));
}

.account-plan-card.is-current {
    border-color: var(--color-accent-primary, var(--primary-400));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent-primary, var(--primary-400)) 35%, transparent);
}

.account-plan-name {
    margin: 0;
    font-size: var(--font-base);
    font-weight: 600;
}

.account-plan-price {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--color-text-primary, var(--text-primary));
}

.account-plan-interval {
    font-size: var(--font-sm);
    font-weight: 400;
    color: var(--color-text-secondary, var(--text-secondary));
    margin-left: var(--space-xs);
}

.account-plan-trial {
    font-size: var(--font-xs);
    color: var(--color-text-secondary, var(--text-secondary));
}

.account-plan-desc {
    margin: 0;
    font-size: var(--font-sm);
    color: var(--color-text-secondary, var(--text-secondary));
    line-height: 1.55;
}

.account-plan-features {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-sm);
}

.account-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: 0.45rem 0;
    color: var(--color-text-primary, var(--text-primary));
}

.account-plan-features .ti {
    color: var(--color-accent-success, #22c55e);
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.account-table-wrap {
    overflow-x: auto;
    margin: var(--space-sm) calc(-1 * var(--space-md)) 0;
    padding: 0 var(--space-md);
}

.account-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-sm);
}

.account-table th,
.account-table td {
    text-align: left;
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--color-border-subtle, var(--glass-border));
}

.account-table th {
    font-weight: 600;
    color: var(--color-text-secondary, var(--text-secondary));
    white-space: nowrap;
}

.account-quick-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: 0;
    margin-top: 0;
}

.account-quick-link {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-xl);
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--color-border-default, var(--glass-border));
    text-decoration: none;
    color: inherit;
    transition: background-color var(--motion-fast, 0.15s) ease, border-color var(--motion-fast, 0.15s) ease;
}

.account-quick-link:hover {
    background: color-mix(in srgb, var(--color-accent-primary, var(--primary-400)) 8%, var(--color-bg-elevated, transparent));
    border-color: var(--color-accent-primary, var(--primary-400));
}

.account-quick-link .ti-chevron-right {
    margin-left: auto;
    opacity: 0.5;
}

.account-quick-link-title {
    display: block;
    font-weight: 600;
    font-size: var(--font-sm);
}

.account-quick-link-desc {
    display: block;
    font-size: var(--font-xs);
    color: var(--color-text-secondary, var(--text-secondary));
    margin-top: 0.4rem;
}

.sidebar-user-link {
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-sm);
    transition: background-color var(--motion-fast, 0.15s) ease, color var(--motion-fast, 0.15s) ease;
}

.sidebar-user-link:hover {
    background: color-mix(in srgb, var(--color-accent-primary, var(--primary-400)) 10%, var(--color-bg-elevated, transparent));
    color: var(--color-accent-primary, var(--primary-400));
}

.sidebar-user-chevron {
    font-size: 0.75rem;
    opacity: 0.45;
    flex-shrink: 0;
}

.sidebar.collapsed .sidebar-user-chevron {
    display: none;
}

.account-checkout-section {
    margin-bottom: 0;
}

.account-checkout-form {
    margin-top: calc(var(--space-lg) + var(--space-xs));
}

.account-checkout-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: calc(var(--space-lg) + var(--space-xs));
}

.account-field label {
    display: block;
    font-size: var(--font-sm);
    font-weight: 500;
    margin-bottom: var(--space-sm);
    color: var(--color-text-secondary, var(--text-secondary));
}

.account-select {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-default, var(--glass-border));
    background: var(--color-bg-elevated, var(--glass-bg));
    color: var(--color-text-primary, var(--text-primary));
    font-size: var(--font-sm);
    font-family: inherit;
}

.account-checkout-total {
    margin: calc(var(--space-lg) + var(--space-xs)) 0;
    font-size: var(--font-sm);
    color: var(--color-text-secondary, var(--text-secondary));
}

.account-checkout-total strong {
    color: var(--color-text-primary, var(--text-primary));
    font-size: var(--font-lg);
}

.account-pay-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
    padding: var(--space-md) calc(var(--space-xl) + var(--space-xs));
    border-radius: var(--radius-md, 12px);
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--font-sm);
    font-family: inherit;
    background: var(--color-accent-primary, var(--primary-400));
    color: #fff;
    transition: opacity var(--motion-fast, 0.15s) ease, transform var(--motion-fast, 0.15s) ease;
}

.account-pay-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.account-webhook-hint {
    margin-top: var(--space-md);
    font-size: var(--font-xs);
}

.account-code {
    display: inline;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
    font-size: 0.85em;
    word-break: break-all;
}

.opd-fact-toggle {
    padding: 0.5rem 0.65rem;
    min-width: 2.5rem;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
}


/* Moved from app/Views/landing/index.php */
/* Лендинг стили */
        .landing-wrapper {
            min-height: 100vh;
            background: #fefefe;
            position: relative;
            overflow-x: hidden;
            font-family: "Golos Text", "Onest", sans-serif;
        }

        .landing-wrapper--minimal {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .landing-main-shell {
            flex: 1 0 auto;
            position: relative;
            z-index: 1;
            min-height: 48px;
        }

        /* Минимальный лендинг: шапка (UI) */
        .landing-header--minimal {
            padding: 0;
            border-bottom: 1px solid rgba(148, 163, 184, 0.16);
            background: rgba(255, 255, 255, 0.78);
            backdrop-filter: blur(14px) saturate(160%);
            -webkit-backdrop-filter: blur(14px) saturate(160%);
        }

        .landing-header--minimal.scrolled {
            background: rgba(255, 255, 255, 0.92);
            box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 12px 40px rgba(15, 23, 42, 0.06);
        }

        .landing-wrapper--minimal .landing-header-content {
            max-width: none;
            width: 100%;
            padding: 12px clamp(1rem, 3.5vw, 2.5rem);
            min-height: 64px;
            gap: 16px;
            flex-wrap: wrap;
        }

        .landing-logo--header {
            gap: 12px;
            min-width: 0;
            border-radius: 12px;
            margin: -6px -8px;
            padding: 6px 8px;
            transition: background-color 0.2s ease, box-shadow 0.2s ease;
        }

        .landing-logo--header:hover {
            background: color-mix(in oklab, var(--color-accent-primary) 6%, transparent);
        }

        .landing-logo--header:focus-visible {
            outline: 2px solid var(--primary-500);
            outline-offset: 2px;
        }

        .landing-logo__mark {
            display: flex;
            flex-shrink: 0;
            line-height: 0;
            border-radius: 12px;
            box-shadow: 0 4px 14px rgba(37, 99, 235, 0.2);
        }

        .landing-logo__brand {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
            text-align: left;
        }

        .landing-wrapper--minimal .landing-logo__text {
            font-family: 'Unbounded', 'Onest', system-ui, sans-serif;
            font-size: clamp(1.05rem, 2.5vw, 1.2rem);
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.15;
            color: #0f172a;
        }

        .landing-logo__tagline {
            display: block;
            font-size: 0.68rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            text-transform: none;
            color: #64748b;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 220px;
        }

        .landing-header-login-pill {
            display: inline-flex;
            align-items: center;
            padding: 4px;
            border-radius: 999px;
            background: rgba(241, 245, 249, 0.95);
            border: 1px solid rgba(148, 163, 184, 0.2);
        }

        .landing-wrapper--minimal .landing-header-actions {
            flex-wrap: wrap;
            justify-content: flex-end;
            align-items: center;
            gap: 14px;
        }

        .landing-theme-toggle--header {
            width: 2.5rem;
            height: 2.5rem;
            flex-shrink: 0;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.22);
            background: rgba(255, 255, 255, 0.92);
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
        }

        .landing-theme-toggle--header:hover {
            background: #ffffff;
            color: #0f172a;
        }

        .landing-wrapper--minimal .landing-auth-btn--login {
            border: none;
            background: transparent;
            color: #334155;
            padding: 8px 14px;
            min-height: 40px;
        }

        .landing-wrapper--minimal .landing-auth-btn--login:hover {
            background: rgba(255, 255, 255, 0.85);
            color: #0f172a;
        }

        .landing-wrapper--minimal .landing-auth-btn--start {
            box-shadow: 0 4px 16px rgba(37, 99, 235, 0.28);
            padding: 10px 18px;
            min-height: 44px;
        }

        .landing-wrapper--minimal .landing-auth-btn--start:hover {
            box-shadow: 0 6px 22px rgba(37, 99, 235, 0.34);
            transform: translateY(-1px);
        }

        .landing-wrapper--minimal .landing-auth-btn--start:active {
            transform: translateY(0);
        }

        [data-theme="dark"] .landing-header--minimal {
            background: rgba(15, 23, 42, 0.82);
            border-bottom-color: rgba(51, 65, 85, 0.55);
        }

        [data-theme="dark"] .landing-header--minimal.scrolled {
            background: rgba(15, 23, 42, 0.94);
            box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 12px 40px rgba(0, 0, 0, 0.25);
        }

        [data-theme="dark"] .landing-wrapper--minimal .landing-logo__text {
            color: var(--color-text-primary, #f1f5f9);
        }

        [data-theme="dark"] .landing-logo__tagline {
            color: var(--color-text-secondary, #94a3b8);
        }

        [data-theme="dark"] .landing-logo--header:hover {
            background: color-mix(in oklab, var(--color-accent-primary) 12%, transparent);
        }

        [data-theme="dark"] .landing-header-login-pill {
            background: rgba(30, 41, 59, 0.85);
            border-color: rgba(71, 85, 105, 0.45);
        }

        [data-theme="dark"] .landing-theme-toggle--header {
            background: rgba(51, 65, 85, 0.95);
            border-color: rgba(71, 85, 105, 0.5);
            color: var(--color-text-secondary, #cbd5e1);
            box-shadow: none;
        }

        [data-theme="dark"] .landing-theme-toggle--header:hover {
            background: rgba(71, 85, 105, 0.98);
            color: var(--color-text-primary, #f8fafc);
        }

        [data-theme="dark"] .landing-wrapper--minimal .landing-auth-btn--login {
            color: var(--color-text-secondary, #cbd5e1);
        }

        [data-theme="dark"] .landing-wrapper--minimal .landing-auth-btn--login:hover {
            background: rgba(51, 65, 85, 0.6);
            color: var(--color-text-primary, #f8fafc);
        }

        @media (max-width: 560px) {
            /* Поверх устаревших .landing-logo span / .landing-header .btn для минимального лендинга */
            .landing-logo--header .landing-logo__mark,
            .landing-logo--header .landing-logo__brand {
                display: flex !important;
            }

            .landing-logo__tagline {
                display: none;
            }

            .landing-header--minimal.landing-header .btn {
                font-size: 0.82rem !important;
                min-width: auto !important;
            }

            .landing-header--minimal.landing-header .btn i {
                font-size: 0.9rem !important;
            }

            .landing-wrapper--minimal .landing-header-actions {
                width: 100%;
                justify-content: space-between;
            }

            .landing-wrapper--minimal .landing-auth-btn--start span {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border: 0;
            }

            .landing-wrapper--minimal .landing-auth-btn--start {
                position: relative;
                padding: 10px 14px;
                gap: 0;
            }
        }
        
        /* Фоновые декоративные элементы (poster / legacy landing) */
        .landing-wrapper:not(.landing-wrapper--minimal)::before {
            content: '';
            position: absolute;
            top: -200px;
            right: -200px;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, color-mix(in oklab, var(--primary-400) 15%, transparent) 0%, transparent 70%);
            border-radius: 50%;
            z-index: 0;
        }

        .landing-wrapper:not(.landing-wrapper--minimal)::after {
            content: '';
            position: absolute;
            bottom: -150px;
            left: -150px;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(167, 139, 250, 0.12) 0%, transparent 70%);
            border-radius: 50%;
            z-index: 0;
        }

        /* Minimal landing: Spotlight (style-guide: lp-bg--spotlight) */
        .landing-wrapper--minimal::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: min(78vw, 980px);
            height: min(88vh, 780px);
            z-index: 0;
            pointer-events: none;
            border-radius: 0;
            background: radial-gradient(
                ellipse 78% 72% at 100% 16%,
                color-mix(in oklab, var(--primary-500) 16%, transparent) 0%,
                transparent 62%
            );
        }

        .landing-wrapper--minimal::after {
            display: none;
        }
        
        .landing-header {
            background: rgba(255, 255, 255, 0.97);
            border-bottom: 1px solid rgba(148, 163, 184, 0.2);
            padding: var(--space-lg) 0;
            position: sticky;
            top: 0;
            z-index: 100;
            transition: box-shadow 0.3s ease, background-color 0.3s ease;
        }
        
        .landing-header.scrolled {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
            background: rgba(255, 255, 255, 0.95);
        }
        
        .landing-header-content > div {
            animation: fadeInUp 0.6s ease 0.2s both;
        }
        
        .landing-header-content > div > *:nth-child(2) {
            animation-delay: 0.3s;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .landing-header-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--space-xl);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .landing-logo {
            display: flex;
            align-items: center;
            gap: var(--space-md);
            text-decoration: none;
            color: #0f172a;
        }
        
        .landing-hero {
            text-align: center;
            padding: var(--space-xl) var(--space-xl) calc(var(--space-xl) * 2);
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }
        
        /* Удалена анимация ::before - она нагружает сайт */
        
        .landing-hero-title {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: var(--space-lg);
            line-height: 1.2;
            position: relative;
            z-index: 1;
            color: #0f172a !important;
            display: block;
            background: none !important;
            -webkit-background-clip: unset !important;
            -webkit-text-fill-color: unset !important;
            background-clip: unset !important;
        }
        
        .landing-hero-title .highlight-blue {
            color: #1e40af !important;
            font-weight: 900;
            background: none !important;
            -webkit-background-clip: unset !important;
            -webkit-text-fill-color: unset !important;
            background-clip: unset !important;
            position: relative;
        }
        
        .landing-hero-title .highlight-blue::after {
            display: none;
        }
        
        .landing-hero p {
            font-size: 1.2rem;
            color: #475569;
            margin-bottom: var(--space-xl);
            line-height: 1.6;
        }
        
        .landing-cta {
            display: inline-flex;
            gap: var(--space-md);
            flex-wrap: wrap;
            justify-content: center;
            position: relative;
            z-index: 1;
        }
        
        .landing-cta .btn-primary {
            background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 100%);
            border: none;
            box-shadow: 0 8px 24px color-mix(in oklab, var(--primary-400) 40%, transparent), 0 4px 12px color-mix(in oklab, var(--primary-400) 30%, transparent);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        
        .landing-cta .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s ease;
        }
        
        .landing-cta .btn-primary:hover::before {
            left: 100%;
        }
        
        .landing-cta .btn-primary:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 12px 32px color-mix(in oklab, var(--primary-400) 50%, transparent), 0 6px 16px color-mix(in oklab, var(--primary-400) 40%, transparent);
        }
        
        .landing-cta .btn-primary:active {
            transform: translateY(-1px) scale(1.02);
        }
        
        .landing-cta .btn-outline {
            border: 2px solid color-mix(in oklab, var(--primary-400) 50%, transparent);
            background: rgba(255, 255, 255, 0.97);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
        }
        
        .landing-cta .btn-outline:hover {
            transform: translateY(-3px);
            border-color: var(--primary-400);
            box-shadow: 0 8px 20px color-mix(in oklab, var(--primary-400) 30%, transparent);
            background: rgba(255, 255, 255, 1);
        }
        
        /* Обертка для изображения с градиентными тенями */
        .landing-hero-image-wrapper {
            position: relative;
            margin-top: calc(var(--space-xl) * 2);
            width: 100%;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            padding: 0 var(--space-xl);
        }
        
        /* Изображение */
        .landing-hero-image {
            width: 100%;
            height: auto;
            display: block;
            border-radius: var(--radius-lg);
            position: relative;
            z-index: 1;
        }
        
        .landing-tabs {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--space-xl) var(--space-xl);
            position: relative;
            z-index: 1;
        }
        
        /* Демо-блок: плоская карточка по токенам UI (без neumorphism / «псевдо-3D») */
        .landing-tabs-wrapper {
            background: var(--color-bg-surface);
            border: 1px solid var(--color-border-default);
            border-radius: var(--radius-lg);
            padding: var(--space-xl);
            position: relative;
            margin-top: var(--space-lg);
            box-shadow: var(--shadow-md);
        }
        
        .landing-tabs-nav {
            display: flex;
            flex-wrap: nowrap;
            align-items: stretch;
            gap: var(--space-xs);
            margin-bottom: var(--space-lg);
            overflow-x: auto;
            padding: var(--space-xs);
            background: var(--color-bg-page);
            border: 1px solid var(--color-border-default);
            border-radius: var(--radius-md);
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        
        .landing-tabs-nav::-webkit-scrollbar {
            display: none;
        }
        
        .landing-tab-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-sm);
            padding: var(--space-md) var(--space-lg);
            background: transparent;
            border: 1px solid transparent;
            border-radius: var(--radius-sm);
            color: var(--color-text-secondary);
            font-size: var(--font-sm);
            font-weight: 600;
            cursor: pointer;
            transition:
                background-color var(--motion-base) ease,
                color var(--motion-base) ease,
                border-color var(--motion-base) ease,
                box-shadow var(--motion-base) ease;
            white-space: nowrap;
            flex: 0 0 auto;
        }
        
        .landing-tab-btn:hover {
            color: var(--color-text-primary);
            background: color-mix(in srgb, var(--color-accent-primary) 10%, var(--color-bg-surface));
        }
        
        .landing-tab-btn.active {
            color: var(--color-accent-primary);
            background: var(--color-bg-surface);
            border-color: var(--color-border-default);
            box-shadow: var(--shadow-sm);
        }
        
        .landing-tab-btn:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px var(--color-focus-ring);
        }
        
        .landing-tab-btn.active:focus-visible {
            box-shadow: var(--shadow-sm), 0 0 0 3px var(--color-focus-ring);
        }
        
        .landing-tab-content {
            display: none;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        
        .landing-tab-content.active {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .landing-tabs-wrapper .landing-tab-content {
            background: transparent;
        }
        
        .landing-tab-content > div {
            background: var(--color-bg-page);
            border-radius: var(--radius-md);
            padding: var(--space-xl);
            overflow-x: auto;
            overflow-y: visible;
            border: 1px solid var(--color-border-default);
        }
        
        .landing-section {
            padding: calc(var(--space-xl) * 3) var(--space-xl);
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .landing-section-title {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: var(--space-xl);
            color: #0f172a;
        }
        
        /* Секция ценности: сетка «медиа слева — текст справа» */
        .landing-value-section {
            padding: calc(var(--space-xl) * 2.5) var(--space-xl);
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .landing-value-intro {
            text-align: center;
            max-width: 42rem;
            margin: 0 auto var(--space-xl);
        }
        
        .landing-value-intro__title {
            font-size: clamp(1.65rem, 4vw, 2.15rem);
            font-weight: 800;
            line-height: 1.25;
            color: #0f172a;
            margin-bottom: var(--space-md);
            letter-spacing: -0.02em;
        }
        
        .landing-value-intro__lead {
            font-size: var(--font-lg);
            font-weight: 600;
            line-height: 1.55;
            color: var(--color-text-secondary);
        }
        
        .landing-split {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
            gap: clamp(var(--space-lg), 4vw, var(--space-xl) * 1.25);
            align-items: center;
            padding: var(--space-xl) 0;
            border-bottom: 1px solid var(--color-border-default);
        }
        
        .landing-split:last-of-type {
            border-bottom: none;
            padding-bottom: 0;
        }
        
        .landing-split:first-of-type {
            padding-top: 0;
        }
        
        .landing-split__media {
            min-width: 0;
        }
        
        .landing-split__figure {
            margin: 0;
            border-radius: var(--radius-lg);
            overflow: hidden;
            aspect-ratio: 4 / 3;
            box-shadow: var(--shadow-md);
            border: 1px solid var(--color-border-default);
            background: var(--color-bg-page);
        }
        
        .landing-split__img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }
        
        .landing-split__img--pos-tl { object-position: 50% 15%; }
        .landing-split__img--pos-c { object-position: 50% 50%; }
        .landing-split__img--pos-br { object-position: 60% 70%; }
        .landing-split__img--pos-tr { object-position: 50% 25%; }
        
        .landing-split__body {
            min-width: 0;
        }
        
        .landing-split__title {
            font-size: clamp(1.2rem, 2.5vw, 1.45rem);
            font-weight: 700;
            line-height: 1.3;
            color: #0f172a;
            margin-bottom: var(--space-sm);
            letter-spacing: -0.02em;
        }
        
        .landing-split__lead {
            font-size: var(--font-lg);
            font-weight: 600;
            line-height: 1.5;
            color: var(--color-text-primary);
            margin-bottom: var(--space-md);
        }
        
        .landing-split__text {
            font-size: var(--font-base);
            font-weight: 400;
            line-height: 1.75;
            color: var(--color-text-secondary);
            margin: 0;
        }
        
        .landing-chart-container {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
            border: 1px solid rgba(148, 163, 184, 0.3);
            border-radius: var(--radius-lg);
            padding: var(--space-xl);
            box-shadow: 
                0 10px 30px rgba(0, 0, 0, 0.1),
                0 4px 12px rgba(0, 0, 0, 0.08),
                0 0 0 1px color-mix(in oklab, var(--primary-400) 10%, transparent);
            margin-bottom: var(--space-xl);
            position: relative;
            overflow: hidden;
        }
        
        .landing-chart-container::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, color-mix(in oklab, var(--primary-400) 10%, transparent) 0%, transparent 70%);
            border-radius: 50%;
            z-index: 0;
        }
        
        .landing-chart-container > * {
            position: relative;
            z-index: 1;
        }
        
        .landing-features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: var(--space-xl);
            margin-top: var(--space-xl);
        }
        
        .landing-feature-card {
            background: rgba(255, 255, 255, 0.95);
            border: 2px solid transparent;
            border-radius: var(--radius-lg);
            padding: var(--space-xl);
            box-shadow: 
                0 4px 12px rgba(0, 0, 0, 0.08),
                0 2px 4px rgba(0, 0, 0, 0.04);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        
        .landing-feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, color-mix(in oklab, var(--primary-400) 5%, transparent) 0%, rgba(167, 139, 250, 0.05) 100%);
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: 0;
        }
        
        .landing-feature-card:hover::before {
            opacity: 1;
        }
        
        .landing-feature-card:hover {
            transform: translateY(-8px) scale(1.02);
            border-color: color-mix(in oklab, var(--primary-400) 40%, transparent);
            box-shadow: 
                0 12px 32px color-mix(in oklab, var(--primary-400) 20%, transparent),
                0 6px 16px rgba(0, 0, 0, 0.12),
                0 0 0 1px color-mix(in oklab, var(--primary-400) 10%, transparent);
        }
        
        .landing-feature-card > * {
            position: relative;
            z-index: 1;
        }
        
        .landing-feature-icon {
            width: 70px;
            height: 70px;
            border-radius: var(--radius-md);
            background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 50%, #a78bfa 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: white;
            margin-bottom: var(--space-lg);
            box-shadow: 
                0 8px 20px color-mix(in oklab, var(--primary-400) 30%, transparent),
                0 4px 10px color-mix(in oklab, var(--primary-400) 20%, transparent);
            transition: all 0.3s ease;
        }
        
        .landing-feature-card:hover .landing-feature-icon {
            transform: scale(1.1) rotate(5deg);
            box-shadow: 
                0 12px 28px color-mix(in oklab, var(--primary-400) 40%, transparent),
                0 6px 14px color-mix(in oklab, var(--primary-400) 30%, transparent);
        }
        
        .landing-feature-card .landing-feature-title {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: var(--space-md);
            color: #0f172a;
        }
        
        .landing-feature-card .landing-feature-text {
            color: #475569;
            line-height: 1.6;
        }
        
        .landing-pricing {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--space-xl);
            margin-top: var(--space-xl);
        }
        
        .landing-pricing-card {
            background: rgba(255, 255, 255, 0.95);
            border: 2px solid rgba(148, 163, 184, 0.3);
            border-radius: var(--radius-lg);
            padding: var(--space-xl);
            text-align: center;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            box-shadow: 
                0 4px 12px rgba(0, 0, 0, 0.08),
                0 2px 4px rgba(0, 0, 0, 0.04);
        }
        
        .landing-pricing-card.featured {
            border: 2px solid transparent;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
            transform: scale(1.08);
            box-shadow: 
                0 20px 60px color-mix(in oklab, var(--primary-400) 30%, transparent),
                0 10px 30px color-mix(in oklab, var(--primary-400) 20%, transparent),
                0 0 0 1px color-mix(in oklab, var(--primary-400) 20%, transparent),
                inset 0 0 60px color-mix(in oklab, var(--primary-400) 5%, transparent);
            position: relative;
            z-index: 2;
        }
        
        .landing-pricing-card.featured::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(135deg, var(--primary-400), var(--primary-500), #a78bfa);
            border-radius: var(--radius-lg);
            z-index: -1;
            opacity: 0.3;
            animation: pulseGlow 3s ease-in-out infinite;
        }
        
        @keyframes pulseGlow {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.5; }
        }
        
        .landing-pricing-card:hover {
            transform: translateY(-8px);
            box-shadow: 
                0 12px 32px rgba(0, 0, 0, 0.15),
                0 6px 16px rgba(0, 0, 0, 0.1);
        }
        
        .landing-pricing-card.featured:hover {
            transform: scale(1.08) translateY(-8px);
            box-shadow: 
                0 24px 64px color-mix(in oklab, var(--primary-400) 40%, transparent),
                0 12px 32px color-mix(in oklab, var(--primary-400) 30%, transparent),
                0 0 0 1px color-mix(in oklab, var(--primary-400) 30%, transparent);
        }
        
        .landing-pricing-badge {
            position: absolute;
            top: -15px;
            right: 20px;
            background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 100%);
            color: white;
            padding: var(--space-xs) var(--space-md);
            border-radius: var(--radius-sm);
            font-size: var(--font-sm);
            font-weight: 600;
            box-shadow: 0 4px 12px color-mix(in oklab, var(--primary-400) 40%, transparent);
            z-index: 3;
        }
        
        .landing-pricing-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: var(--space-md);
            color: #0f172a;
        }
        
        .landing-pricing-price {
            font-size: 3rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin: var(--space-lg) 0;
            position: relative;
        }
        
        .landing-pricing-card.featured .landing-pricing-price {
            background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 50%, #a78bfa 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .landing-pricing-price span {
            font-size: 1.2rem;
            color: #475569;
        }
        
        .landing-pricing-features {
            list-style: none;
            text-align: left;
            margin: var(--space-xl) 0;
        }
        
        .landing-pricing-features li {
            padding: var(--space-sm) 0;
            color: #475569;
        }
        
        .landing-pricing-features li i {
            color: #34d399;
            margin-right: var(--space-sm);
        }
        
        .landing-footer {
            background: rgba(255, 255, 255, 0.95);
            border-top: 1px solid rgba(148, 163, 184, 0.3);
            padding: var(--space-xl);
            text-align: center;
            color: #475569;
            margin-top: calc(var(--space-xl) * 2);
        }

        .landing-footer--minimal {
            margin-top: auto;
            padding: 0;
            text-align: left;
            background: rgba(248, 250, 252, 0.88);
            border-top: 1px solid rgba(148, 163, 184, 0.14);
            position: relative;
            z-index: 1;
        }

        .landing-footer__inner {
            max-width: none;
            width: 100%;
            margin: 0;
            padding: clamp(28px, 5vw, 48px) clamp(1rem, 3.5vw, 2.5rem) clamp(22px, 4vw, 36px);
            box-sizing: border-box;
        }

        .landing-footer__top {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: space-between;
            gap: 28px 48px;
        }

        .landing-footer__brand {
            max-width: 28rem;
            min-width: 0;
        }

        .landing-footer__name {
            display: block;
            font-family: 'Unbounded', 'Onest', system-ui, sans-serif;
            font-size: 1.05rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            color: #0f172a;
            margin-bottom: 8px;
        }

        .landing-footer__pitch {
            margin: 0;
            font-size: 0.9rem;
            line-height: 1.55;
            color: #64748b;
            font-weight: 500;
        }

        .landing-footer__nav {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px 22px;
        }

        .landing-footer__link {
            font-size: 0.9rem;
            font-weight: 600;
            color: #475569;
            text-decoration: none;
            border-radius: 8px;
            padding: 6px 2px;
            transition: color 0.2s ease;
        }

        .landing-footer__link:hover {
            color: var(--primary-600);
        }

        .landing-footer__link:focus-visible {
            outline: 2px solid var(--primary-500);
            outline-offset: 2px;
        }

        .landing-footer__link--btn {
            border: none;
            background: none;
            cursor: pointer;
            font: inherit;
            font-weight: 600;
            text-align: left;
        }

        .landing-footer__bottom {
            margin-top: clamp(22px, 4vw, 32px);
            padding-top: 20px;
            border-top: 1px solid rgba(148, 163, 184, 0.12);
        }

        .landing-footer__legal {
            margin: 0;
            font-size: 0.8rem;
            color: #94a3b8;
            letter-spacing: 0.01em;
        }

        .landing-footer__legal-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 12px 20px;
        }

        .landing-footer__legal-links {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px 10px;
        }

        .landing-footer__legal-sep {
            color: #cbd5e1;
            user-select: none;
        }

        .landing-footer__link--legal {
            font-size: 0.8rem;
            font-weight: 600;
            color: #64748b;
            padding: 4px 0;
        }

        .landing-footer__link--legal:hover {
            color: var(--primary-600);
        }

        [data-theme="dark"] .landing-footer__link--legal {
            color: #94a3b8;
        }

        [data-theme="dark"] .landing-footer__link--legal:hover {
            color: #93c5fd;
        }

        [data-theme="dark"] .landing-footer__legal-sep {
            color: #475569;
        }

        /* Юридические модалки (самозанятый) */
        .landing-legal-overlay {
            padding: 20px;
            background:
                radial-gradient(circle at 20% 0%, color-mix(in oklab, var(--primary-400) 12%, transparent), transparent 40%),
                rgba(2, 6, 23, 0.65);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .landing-legal-modal {
            position: relative;
            width: min(92vw, 680px);
            max-height: min(88vh, 900px);
            display: flex;
            flex-direction: column;
            margin: auto;
            border-radius: 22px;
            background: #ffffff;
            border: 1px solid rgba(148, 163, 184, 0.22);
            box-shadow: 0 28px 80px rgba(2, 6, 23, 0.35);
            overflow: hidden;
            transform: scale(0.96) translateY(12px);
            transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        }

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

        .landing-legal-modal__close {
            position: absolute;
            top: 14px;
            right: 14px;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 999px;
            background: rgba(241, 245, 249, 0.95);
            color: #475569;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
        }

        .landing-legal-modal__close:hover {
            background: #e2e8f0;
            color: #0f172a;
        }

        .landing-legal-modal__close:focus-visible {
            outline: 2px solid var(--primary-500);
            outline-offset: 2px;
        }

        .landing-legal-modal__body {
            flex: 1;
            overflow-y: auto;
            padding: 28px clamp(18px, 4vw, 32px) 32px;
            color: #334155;
            font-size: 0.9rem;
            line-height: 1.6;
        }

        .landing-legal-modal__title {
            margin: 0 0 8px;
            padding-right: 44px;
            font-family: 'Unbounded', 'Onest', system-ui, sans-serif;
            font-size: clamp(1.15rem, 3vw, 1.45rem);
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.25;
            color: #0f172a;
        }

        .landing-legal-modal__meta {
            margin: 0 0 24px;
            font-size: 0.8rem;
            color: #64748b;
        }

        .landing-legal-section {
            margin-bottom: 22px;
        }

        .landing-legal-section:last-child {
            margin-bottom: 0;
        }

        .landing-legal-section h3 {
            margin: 0 0 10px;
            font-size: 0.95rem;
            font-weight: 800;
            color: #0f172a;
            letter-spacing: -0.01em;
        }

        .landing-legal-section p {
            margin: 0 0 10px;
        }

        .landing-legal-section p:last-child {
            margin-bottom: 0;
        }

        .landing-legal-section ul {
            margin: 8px 0 0;
            padding-left: 1.15rem;
        }

        .landing-legal-section li {
            margin-bottom: 6px;
        }

        .landing-legal-section li:last-child {
            margin-bottom: 0;
        }

        .landing-legal-section a {
            color: var(--primary-600);
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        .landing-legal-section a:hover {
            color: var(--primary-700);
        }

        .landing-legal-inline-btn {
            margin: 0;
            padding: 0;
            border: none;
            background: none;
            color: var(--primary-600);
            font: inherit;
            font-weight: 600;
            text-decoration: underline;
            text-underline-offset: 2px;
            cursor: pointer;
        }

        .landing-legal-inline-btn:hover {
            color: var(--primary-700);
        }

        [data-theme="dark"] .landing-legal-modal {
            background: rgba(30, 41, 59, 0.98);
            border-color: rgba(71, 85, 105, 0.5);
        }

        [data-theme="dark"] .landing-legal-modal__close {
            background: rgba(51, 65, 85, 0.9);
            color: #cbd5e1;
        }

        [data-theme="dark"] .landing-legal-modal__close:hover {
            background: rgba(71, 85, 105, 0.95);
            color: #f8fafc;
        }

        [data-theme="dark"] .landing-legal-modal__body {
            color: #cbd5e1;
        }

        [data-theme="dark"] .landing-legal-modal__title,
        [data-theme="dark"] .landing-legal-section h3 {
            color: #f1f5f9;
        }

        [data-theme="dark"] .landing-legal-modal__meta {
            color: #94a3b8;
        }

        [data-theme="dark"] .landing-legal-section a,
        [data-theme="dark"] .landing-legal-inline-btn {
            color: #93c5fd;
        }

        [data-theme="dark"] .landing-legal-section a:hover,
        [data-theme="dark"] .landing-legal-inline-btn:hover {
            color: #bfdbfe;
        }

        [data-theme="dark"] .landing-footer--minimal {
            background: rgba(15, 23, 42, 0.78);
            border-top-color: rgba(51, 65, 85, 0.55);
        }

        [data-theme="dark"] .landing-footer__name {
            color: var(--color-text-primary, #f1f5f9);
        }

        [data-theme="dark"] .landing-footer__pitch,
        [data-theme="dark"] .landing-footer__legal {
            color: var(--color-text-secondary, #94a3b8);
        }

        [data-theme="dark"] .landing-footer__link {
            color: var(--color-text-secondary, #cbd5e1);
        }

        [data-theme="dark"] .landing-footer__link:hover {
            color: #93c5fd;
        }

        [data-theme="dark"] .landing-footer__bottom {
            border-top-color: rgba(71, 85, 105, 0.45);
        }
        
        .landing-demo-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: var(--space-lg);
        }
        
        .landing-demo-table th,
        .landing-demo-table td {
            padding: var(--space-md);
            text-align: left;
            border-bottom: 1px solid rgba(148, 163, 184, 0.2);
        }
        
        /* Клейморфизм стиль для заголовков таблицы */
        .landing-demo-table th {
            background: linear-gradient(135deg, color-mix(in oklab, var(--primary-400) 12%, transparent) 0%, color-mix(in oklab, var(--primary-400) 8%, transparent) 100%);
            font-weight: 600;
            color: #0f172a;
            position: sticky;
            top: 0;
            z-index: 10;
            /* Клейморфизм эффект */
            box-shadow: 
                inset 2px 2px 4px color-mix(in oklab, var(--primary-400) 10%, transparent),
                inset -2px -2px 4px rgba(255, 255, 255, 0.8);
            border-bottom: 2px solid color-mix(in oklab, var(--primary-400) 20%, transparent);
        }
        
        .landing-demo-table tbody tr {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 8px;
        }
        
        .landing-demo-table tbody tr:nth-child(even) {
            background: linear-gradient(135deg, rgba(241, 245, 249, 0.4) 0%, rgba(255, 255, 255, 0.6) 100%);
        }
        
        .landing-demo-table tbody tr:nth-child(odd) {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
        }
        
        .landing-demo-table tbody tr:hover {
            background: linear-gradient(135deg, color-mix(in oklab, var(--primary-400) 8%, transparent) 0%, color-mix(in oklab, var(--primary-400) 4%, transparent) 100%) !important;
            transform: translateX(4px);
            /* Клейморфизм эффект при наведении */
            box-shadow: 
                inset 2px 2px 4px color-mix(in oklab, var(--primary-400) 10%, transparent),
                inset -2px -2px 4px rgba(255, 255, 255, 0.9),
                0 4px 12px color-mix(in oklab, var(--primary-400) 15%, transparent);
        }
        
        .landing-demo-table td {
            color: #475569;
        }
        
        .landing-demo-table .expense-value {
            color: #ef4444;
            font-weight: 600;
        }
        
        /* Клейморфизм стиль для статусных бейджей */
        .landing-demo-table .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 12px;
            font-size: 0.85rem;
            font-weight: 500;
            border: 1px solid rgba(148, 163, 184, 0.2);
            /* Клейморфизм эффект */
            box-shadow: 
                inset 2px 2px 4px rgba(0, 0, 0, 0.05),
                inset -2px -2px 4px rgba(255, 255, 255, 0.8);
        }
        
        .landing-demo-table .status-badge.delivered {
            background: linear-gradient(135deg, rgba(52, 211, 153, 0.15) 0%, rgba(52, 211, 153, 0.1) 100%);
            color: #10b981;
            border-color: rgba(16, 185, 129, 0.3);
        }
        
        .landing-demo-table .status-badge.cancelled {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.1) 100%);
            color: #ef4444;
            border-color: rgba(239, 68, 68, 0.3);
        }
        
        .landing-demo-table .status-badge.waiting {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
            color: #f59e0b;
            border-color: rgba(245, 158, 11, 0.3);
        }
        
        .landing-demo-table .status-badge i {
            font-size: 0.75rem;
        }
        
        .landing-demo-metrics {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--space-lg);
            margin-top: var(--space-lg);
        }
        
        .landing-demo-metric {
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(148, 163, 184, 0.3);
            border-radius: var(--radius-md);
            padding: var(--space-lg);
            text-align: center;
        }
        
        .landing-demo-metric-label {
            font-size: var(--font-sm);
            color: #475569;
            margin-bottom: var(--space-sm);
        }
        
        .landing-demo-metric-value {
            font-size: 1.8rem;
            font-weight: 700;
            color: #0f172a;
        }
        
        /* Стили для метрик в стиле app.php */
        .landing-tab-content .ozon-style-metrics {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 0;
        }
        
        /* Клейморфизм стиль для карточек метрик */
        .landing-tab-content .ozon-metric-card {
            padding: 24px;
            border-radius: 20px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
            border: 1px solid rgba(148, 163, 184, 0.2);
            /* Клейморфизм эффект */
            box-shadow: 
                inset 3px 3px 6px rgba(0, 0, 0, 0.06),
                inset -3px -3px 6px rgba(255, 255, 255, 0.9),
                0 4px 12px rgba(0, 0, 0, 0.04);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .landing-tab-content .ozon-metric-card:hover {
            transform: translateY(-4px);
            box-shadow: 
                inset 3px 3px 6px rgba(0, 0, 0, 0.08),
                inset -3px -3px 6px rgba(255, 255, 255, 1),
                0 8px 24px rgba(0, 0, 0, 0.08);
        }
        
        .landing-tab-content .ozon-metric-main {
            margin-bottom: 16px;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }
        
        .landing-tab-content .ozon-metric-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            flex-shrink: 0;
            background: color-mix(in oklab, var(--primary-400) 10%, transparent);
            border: 1px solid color-mix(in oklab, var(--primary-400) 20%, transparent);
            color: var(--primary-400);
        }
        
        .landing-tab-content .ozon-metric-card:has(.income-value) .ozon-metric-icon {
            background: rgba(16, 185, 129, 0.1);
            border-color: rgba(16, 185, 129, 0.2);
            color: #10b981;
        }
        
        .landing-tab-content .ozon-metric-card:has(.expense-value) .ozon-metric-icon {
            background: rgba(239, 68, 68, 0.1);
            border-color: rgba(239, 68, 68, 0.2);
            color: #ef4444;
        }
        
        .landing-tab-content .ozon-metric-content {
            flex: 1;
            min-width: 0;
        }
        
        .landing-tab-content .ozon-metric-label {
            font-size: 14px;
            font-weight: 500;
            color: #475569;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .landing-tab-content .ozon-metric-label i {
            font-size: 0.9rem;
            opacity: 0.7;
        }
        
        .landing-tab-content .ozon-metric-value {
            font-size: 32px;
            font-weight: 700;
            line-height: 1.2;
        }
        
        .landing-tab-content .ozon-metric-details {
            border-top: 1px solid rgba(148, 163, 184, 0.3);
            padding-top: 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .landing-tab-content .ozon-detail-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
        }
        
        .landing-tab-content .ozon-detail-label {
            color: #475569;
            font-weight: 400;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .landing-tab-content .ozon-detail-value {
            color: #475569;
            font-weight: 600;
        }
        
        .landing-abc-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: var(--space-lg);
            margin-top: var(--space-lg);
        }
        
        /* Клейморфизм стиль для ABC блоков */
        .landing-abc-block {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
            border: 1px solid rgba(148, 163, 184, 0.2);
            border-radius: 20px;
            padding: var(--space-lg);
            /* Клейморфизм эффект */
            box-shadow: 
                inset 3px 3px 6px rgba(0, 0, 0, 0.06),
                inset -3px -3px 6px rgba(255, 255, 255, 0.9);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .landing-abc-block:hover {
            transform: translateY(-2px);
            box-shadow: 
                inset 3px 3px 6px rgba(0, 0, 0, 0.08),
                inset -3px -3px 6px rgba(255, 255, 255, 1),
                0 4px 12px rgba(0, 0, 0, 0.06);
        }
        
        .landing-abc-title {
            font-weight: 700;
            margin-bottom: var(--space-md);
            color: #0f172a;
        }
        
        .landing-abc-title i {
            margin-right: var(--space-sm);
        }
        
        .landing-abc-list {
            list-style: none;
        }
        
        .landing-abc-list li {
            padding: var(--space-sm) 0;
            border-bottom: 1px solid rgba(148, 163, 184, 0.3);
            color: #475569;
        }
        
        .landing-abc-list li:last-child {
            border-bottom: none;
        }

        .landing-proof {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--space-xl) calc(var(--space-xl) * 1.8);
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: var(--space-lg);
            position: relative;
            z-index: 1;
        }

        .landing-proof-card {
            background: rgba(255, 255, 255, 0.96);
            border: 1px solid rgba(148, 163, 184, 0.28);
            border-radius: 18px;
            padding: calc(var(--space-lg) + var(--space-xs));
            box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
        }

        .landing-proof-card span,
        .landing-card-kicker,
        .landing-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: var(--font-sm);
            font-weight: 700;
            color: var(--primary-600);
            letter-spacing: 0.02em;
        }

        .landing-proof-card strong {
            display: block;
            margin: 10px 0 6px;
            color: #0f172a;
            font-size: clamp(1.5rem, 3vw, 2.1rem);
            line-height: 1.1;
        }

        .landing-proof-card small {
            color: #64748b;
            line-height: 1.45;
        }

        .landing-proof-card--alert span,
        .landing-proof-card--alert strong {
            color: #dc2626;
        }

        .landing-section-head {
            max-width: 980px;
            margin: 0 auto calc(var(--space-xl) * 1.5);
            text-align: center;
        }

        .landing-section-head h2 {
            color: #0f172a;
            font-size: clamp(2rem, 5vw, 3.1rem);
            line-height: 1.08;
            letter-spacing: -0.045em;
            margin: var(--space-sm) 0 var(--space-md);
        }

        .landing-section-head p {
            color: #475569;
            font-size: var(--font-lg);
            line-height: 1.55;
            max-width: 760px;
            margin: 0 auto;
        }

        .landing-analytics-shell {
            background: #0f172a;
            border-radius: 28px;
            padding: clamp(var(--space-lg), 4vw, calc(var(--space-xl) * 1.4));
            box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
            overflow: hidden;
            position: relative;
        }

        .landing-analytics-shell::before {
            content: '';
            position: absolute;
            inset: -120px -80px auto auto;
            width: 320px;
            height: 320px;
            background: radial-gradient(circle, color-mix(in oklab, var(--color-accent-primary) 42%, transparent), transparent 68%);
            pointer-events: none;
        }

        .landing-analytics-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
            gap: var(--space-xl);
            position: relative;
            z-index: 1;
        }

        .landing-product-frame,
        .landing-insight-panel,
        .landing-decision-card,
        .landing-compare-card,
        .landing-step-card,
        .landing-final-cta {
            background: rgba(255, 255, 255, 0.98);
            border: 1px solid rgba(148, 163, 184, 0.24);
            border-radius: 22px;
            box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
        }

        .landing-product-frame {
            padding: calc(var(--space-lg) + var(--space-sm));
        }

        .landing-frame-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-md);
            margin-bottom: var(--space-lg);
        }

        .landing-frame-title {
            color: #0f172a;
            font-size: var(--font-lg);
            font-weight: 800;
        }

        .landing-frame-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border-radius: 999px;
            padding: 8px 12px;
            background: rgba(16, 185, 129, 0.12);
            color: #047857;
            font-size: var(--font-sm);
            font-weight: 700;
            white-space: nowrap;
        }

        .landing-image-placeholder {
            min-height: 340px;
            border: 1px dashed rgba(37, 99, 235, 0.45);
            border-radius: 18px;
            background:
                linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(14, 165, 233, 0.04)),
                repeating-linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0, rgba(37, 99, 235, 0.08) 1px, transparent 1px, transparent 14px);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--primary-600);
            font-weight: 800;
            padding: var(--space-xl);
        }

        .landing-image-placeholder small {
            display: block;
            margin-top: 8px;
            color: #64748b;
            font-weight: 600;
            line-height: 1.45;
        }

        .landing-insight-panel {
            padding: calc(var(--space-lg) + var(--space-xs));
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
        }

        .landing-insight-card {
            border: 1px solid rgba(148, 163, 184, 0.24);
            border-radius: 16px;
            padding: var(--space-md);
            background: #f8fafc;
        }

        .landing-insight-card strong {
            display: block;
            color: #0f172a;
            margin-bottom: 6px;
        }

        .landing-insight-card p {
            color: #64748b;
            line-height: 1.55;
            margin: 0;
        }

        .landing-insight-card--danger {
            background: rgba(254, 242, 242, 0.86);
            border-color: rgba(239, 68, 68, 0.22);
        }

        .landing-insight-card--danger strong {
            color: #b91c1c;
        }

        .landing-decision-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: var(--space-xl);
        }

        .landing-decision-card {
            padding: calc(var(--space-lg) + var(--space-xs));
            min-height: 100%;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }

        .landing-decision-card:hover {
            transform: translateY(-4px);
            border-color: rgba(37, 99, 235, 0.38);
            box-shadow: 0 22px 60px rgba(37, 99, 235, 0.14);
        }

        .landing-decision-icon {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: var(--space-md);
            background: rgba(37, 99, 235, 0.1);
            color: var(--primary-600);
            font-size: 1.1rem;
        }

        .landing-decision-card h3,
        .landing-compare-card h3,
        .landing-step-card h3 {
            color: #0f172a;
            font-size: 1.15rem;
            line-height: 1.28;
            margin: 0 0 var(--space-sm);
        }

        .landing-decision-card p,
        .landing-compare-card p,
        .landing-step-card p {
            color: #64748b;
            line-height: 1.5;
            margin: 0;
        }

        .landing-showcase-grid {
            display: grid;
            gap: calc(var(--space-xl) * 1.25);
        }

        .landing-showcase-row {
            display: grid;
            grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
            gap: calc(var(--space-xl) * 1.25);
            align-items: center;
            padding: calc(var(--space-xl) * 1.2);
            border-radius: 28px;
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid rgba(148, 163, 184, 0.22);
        }

        .landing-showcase-row:nth-child(even) {
            grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        }

        .landing-showcase-row:nth-child(even) .landing-showcase-media {
            order: 2;
        }

        .landing-showcase-copy h3 {
            color: #0f172a;
            font-size: clamp(1.45rem, 3vw, 2rem);
            line-height: 1.15;
            letter-spacing: -0.035em;
            margin: var(--space-sm) 0 var(--space-md);
        }

        .landing-showcase-copy p {
            color: #475569;
            font-size: var(--font-lg);
            line-height: 1.5;
            margin: 0;
        }

        .landing-showcase-list {
            list-style: none;
            display: grid;
            gap: 10px;
            margin-top: var(--space-lg);
            color: #334155;
            font-weight: 600;
        }

        .landing-showcase-list li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .landing-showcase-list i {
            color: #10b981;
            margin-top: 3px;
        }

        .landing-showcase-media .landing-image-placeholder {
            min-height: 300px;
        }

        .landing-chart-card {
            background: rgba(255, 255, 255, 0.98);
            border: 1px solid rgba(148, 163, 184, 0.24);
            border-radius: 28px;
            padding: var(--space-lg);
            box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
        }

        .landing-compare-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--space-xl);
        }

        .landing-compare-card {
            padding: calc(var(--space-xl) * 1.2);
        }

        .landing-compare-list {
            list-style: none;
            display: grid;
            gap: 16px;
            margin-top: var(--space-lg);
        }

        .landing-compare-list li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            color: #475569;
            line-height: 1.45;
        }

        .landing-compare-list .fa-times {
            color: #ef4444;
            margin-top: 3px;
        }

        .landing-compare-list .fa-check {
            color: #10b981;
            margin-top: 3px;
        }

        .landing-steps {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: var(--space-xl);
            margin-top: var(--space-xl);
        }

        .landing-step-card {
            padding: calc(var(--space-lg) + var(--space-xs));
        }

        .landing-step-number {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--primary-600);
            color: #ffffff;
            font-weight: 800;
            margin-bottom: var(--space-md);
        }

        .landing-final-cta {
            padding: clamp(var(--space-xl), 5vw, calc(var(--space-xl) * 2));
            text-align: center;
            background:
                radial-gradient(circle at 12% 15%, color-mix(in oklab, var(--color-accent-primary) 18%, transparent), transparent 28%),
                linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
        }

        .landing-final-cta h2 {
            color: #0f172a;
            font-size: clamp(2rem, 5vw, 3rem);
            line-height: 1.1;
            letter-spacing: -0.045em;
            margin: 0 0 var(--space-md);
        }

        .landing-final-cta p {
            max-width: 640px;
            margin: 0 auto var(--space-xl);
            color: #475569;
            font-size: var(--font-lg);
            line-height: 1.5;
        }

        .landing-pricing-note {
            color: #64748b;
            margin: var(--space-sm) 0 0;
            line-height: 1.5;
        }
        
        /* Модальное окно входа */
        .landing-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .landing-modal-overlay.active {
            display: flex;
            opacity: 1;
            animation: fadeIn 0.3s ease;
        }
        
        .landing-modal {
            background: rgba(255, 255, 255, 0.98);
            border: 1px solid rgba(148, 163, 184, 0.3);
            border-radius: var(--radius-lg);
            padding: calc(var(--space-xl) + var(--space-md));
            max-width: 520px;
            width: min(92vw, 520px);
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 
                0 20px 60px rgba(0, 0, 0, 0.3),
                0 10px 30px rgba(0, 0, 0, 0.2);
            transform: scale(0.9) translateY(20px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .landing-modal form {
            display: flex;
            flex-direction: column;
            gap: calc(var(--space-lg) + var(--space-sm));
        }
        
        .landing-modal .form-field {
            gap: var(--space-md);
            margin-bottom: 0;
        }
        
        .landing-modal__alert {
            margin-bottom: calc(var(--space-xl) + var(--space-xs));
        }
        
        .landing-modal-overlay.active .landing-modal {
            transform: scale(1) translateY(0);
        }
        
        .landing-modal .form-field input[type="text"],
        .landing-modal .form-field input[type="password"] {
            border: 1px solid var(--color-border-default);
            transition: border-color var(--motion-base) ease, box-shadow var(--motion-base) ease;
            background: var(--color-bg-elevated);
        }
        
        .landing-modal .form-field input[type="text"]:focus,
        .landing-modal .form-field input[type="password"]:focus {
            border-color: var(--color-accent-primary);
            box-shadow: 0 0 0 3px var(--color-focus-ring);
            outline: none;
        }
        
        /* «Запомнить меня»: без width:100% и лишних отступов от глобальных .form-field input */
        .landing-modal-remember {
            margin-top: 0;
        }
        
        .landing-modal-remember-label {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            font-size: var(--font-sm);
            font-weight: 500;
            color: #475569;
            user-select: none;
            line-height: 1.3;
        }
        
        .landing-modal-remember-label:hover {
            color: #0f172a;
        }
        
        .landing-modal-remember-label input[type="checkbox"] {
            width: 1.25rem;
            height: 1.25rem;
            min-width: 1.25rem;
            margin: 0;
            padding: 0;
            flex-shrink: 0;
            border: 1px solid var(--color-border-default);
            border-radius: 4px;
            background: var(--color-bg-elevated);
            accent-color: var(--color-accent-primary);
            cursor: pointer;
            vertical-align: middle;
            box-shadow: none;
        }
        
        .landing-modal-remember-label input[type="checkbox"]:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px var(--color-focus-ring);
        }
        
        /* Анимации появления при скролле */
        .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .fade-in-up.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .landing-section,
        .landing-value-section {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .landing-section.visible,
        .landing-value-section.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .landing-feature-card {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .landing-feature-card.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .landing-feature-card:nth-child(1) { transition-delay: 0.1s; }
        .landing-feature-card:nth-child(2) { transition-delay: 0.2s; }
        .landing-feature-card:nth-child(3) { transition-delay: 0.3s; }
        
        .landing-pricing-card {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .landing-pricing-card.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .landing-pricing-card:nth-child(1) { transition-delay: 0.1s; }
        .landing-pricing-card:nth-child(2) { transition-delay: 0.2s; }
        .landing-pricing-card:nth-child(3) { transition-delay: 0.3s; }
        
        .landing-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: calc(var(--space-xl) + var(--space-sm));
            padding-bottom: var(--space-sm);
            border-bottom: 1px solid var(--color-border-default);
        }
        
        .landing-modal-title {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            font-size: 1.5rem;
            font-weight: 700;
            color: #0f172a;
            margin: 0;
        }
        
        .landing-modal-close {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 44px;
            min-height: 44px;
            background: transparent;
            border: none;
            border-radius: var(--radius-sm);
            font-size: 1.25rem;
            color: #475569;
            cursor: pointer;
            padding: var(--space-sm);
            line-height: 1;
            transition: color var(--motion-base) ease, background-color var(--motion-base) ease;
        }
        
        .landing-modal-close:hover {
            color: #0f172a;
            background: rgba(148, 163, 184, 0.15);
        }
        
        .landing-modal-close:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px var(--color-focus-ring);
        }
        
        .landing-modal-submit {
            width: 100%;
            margin-top: 0;
            padding: calc(var(--space-md) + 2px) var(--space-lg);
            font-size: var(--font-base);
        }
        
        .landing-modal-footer-note {
            text-align: center;
            margin-top: calc(var(--space-xl) + var(--space-md));
            padding-top: calc(var(--space-lg) + var(--space-xs));
            border-top: 1px solid var(--color-border-default);
            color: #475569;
            font-size: var(--font-sm);
        }
        
        @media (max-width: 768px) {
            .landing-hero-title {
                font-size: 2.5rem;
            }
            
            .landing-hero p {
                font-size: 1.2rem;
            }
            
            .landing-hero-image-wrapper {
                margin-top: var(--space-xl);
                padding: 0 var(--space-md);
            }
            
            .landing-hero-image {
                border-radius: var(--radius-md);
            }
            
            .landing-tabs-nav {
                flex-wrap: nowrap;
                overflow-x: auto;
            }
            
            .landing-tabs-wrapper {
                padding: var(--space-md);
            }
            
            .landing-value-section {
                padding: calc(var(--space-xl) * 1.75) var(--space-md);
            }
            
            .landing-value-intro {
                margin-bottom: var(--space-lg);
            }
            
            .landing-value-intro__lead {
                font-size: var(--font-base);
            }
            
            .landing-split {
                grid-template-columns: 1fr;
                gap: var(--space-lg);
                padding: var(--space-lg) 0;
            }
            
            .landing-split__media {
                order: -1;
            }
            
            .landing-feature-card .landing-feature-title {
                font-size: 1.2rem;
            }
            
            .landing-pricing-card.featured {
                transform: scale(1.02);
            }
            
            .landing-pricing-card.featured:hover {
                transform: scale(1.02) translateY(-5px);
            }
            
            .landing-feature-icon {
                width: 60px;
                height: 60px;
                font-size: 1.5rem;
            }
            
            .ozon-style-metrics {
                grid-template-columns: 1fr;
            }

            .landing-proof {
                grid-template-columns: 1fr;
                padding: 0 var(--space-md) var(--space-xl);
            }

            .landing-section {
                padding-left: var(--space-md);
                padding-right: var(--space-md);
            }

            .landing-section-head {
                text-align: left;
            }

            .landing-analytics-shell,
            .landing-showcase-row,
            .landing-final-cta {
                border-radius: 20px;
            }

            .landing-analytics-layout,
            .landing-decision-grid,
            .landing-showcase-row,
            .landing-showcase-row:nth-child(even),
            .landing-compare-grid,
            .landing-steps {
                grid-template-columns: 1fr;
            }

            .landing-showcase-row {
                padding: var(--space-lg);
            }

            .landing-showcase-row:nth-child(even) .landing-showcase-media {
                order: 0;
            }

            .landing-image-placeholder,
            .landing-showcase-media .landing-image-placeholder {
                min-height: 220px;
                padding: var(--space-lg);
            }

            .landing-frame-top {
                align-items: flex-start;
                flex-direction: column;
            }

            .landing-pricing-card.featured,
            .landing-pricing-card.featured:hover {
                transform: none;
            }
        }

        /* Тёмная тема: поверхности и текст (токены из style.css) */
        [data-theme="dark"] .landing-wrapper {
            background: var(--color-bg-page);
        }
        [data-theme="dark"] .landing-wrapper:not(.landing-wrapper--minimal)::before {
            background: radial-gradient(circle, color-mix(in oklab, var(--primary-400) 14%, transparent) 0%, transparent 70%);
        }
        [data-theme="dark"] .landing-wrapper:not(.landing-wrapper--minimal)::after {
            background: radial-gradient(circle, rgba(167, 139, 250, 0.1) 0%, transparent 70%);
        }
        [data-theme="dark"] .landing-wrapper--minimal::before {
            background: radial-gradient(
                ellipse 78% 72% at 100% 16%,
                color-mix(in oklab, var(--primary-500) 22%, transparent) 0%,
                transparent 58%
            );
        }
        [data-theme="dark"] .landing-header {
            background: rgba(15, 23, 42, 0.92);
            border-bottom-color: var(--color-border-default);
        }
        [data-theme="dark"] .landing-header.scrolled {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
            background: rgba(15, 23, 42, 0.96);
        }
        [data-theme="dark"] .landing-logo {
            color: var(--color-text-primary);
        }
        [data-theme="dark"] .landing-hero-title {
            color: var(--color-text-primary) !important;
        }
        [data-theme="dark"] .landing-hero-title .highlight-blue {
            color: #93c5fd !important;
        }
        [data-theme="dark"] .landing-hero p {
            color: var(--color-text-secondary);
        }
        [data-theme="dark"] .landing-cta .btn-outline {
            border-color: color-mix(in oklab, var(--primary-400) 45%, transparent);
            background: rgba(30, 41, 59, 0.92);
            color: var(--color-text-primary);
        }
        [data-theme="dark"] .landing-cta .btn-outline:hover {
            background: rgba(51, 65, 85, 0.95);
            border-color: var(--primary-400);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
        }
        [data-theme="dark"] .landing-tabs-wrapper {
            background: var(--color-bg-surface);
            border-color: var(--color-border-default);
            box-shadow: var(--shadow-lg);
        }
        [data-theme="dark"] .landing-tabs-nav {
            background: var(--color-bg-page);
            border-color: var(--color-border-strong);
        }
        [data-theme="dark"] .landing-tab-btn {
            color: var(--color-text-secondary);
        }
        [data-theme="dark"] .landing-tab-btn:hover {
            color: var(--color-text-primary);
            background: color-mix(in srgb, var(--color-accent-primary) 16%, var(--color-bg-surface));
        }
        [data-theme="dark"] .landing-tab-btn.active {
            color: #93c5fd;
            background: var(--color-bg-elevated);
            border-color: color-mix(in srgb, var(--color-accent-primary) 35%, var(--color-border-default));
            box-shadow: var(--shadow-sm);
        }
        [data-theme="dark"] .landing-tab-content > div {
            background: var(--color-bg-page);
            border-color: var(--color-border-default);
        }
        [data-theme="dark"] .landing-section-title {
            color: var(--color-text-primary);
        }
        [data-theme="dark"] .landing-value-intro__title {
            color: var(--color-text-primary);
        }
        [data-theme="dark"] .landing-value-intro__lead {
            color: var(--color-text-secondary);
        }
        [data-theme="dark"] .landing-split__title {
            color: var(--color-text-primary);
        }
        [data-theme="dark"] .landing-split__lead {
            color: var(--color-text-muted);
        }
        [data-theme="dark"] .landing-split__text {
            color: var(--color-text-secondary);
        }
        [data-theme="dark"] .landing-split__figure {
            border-color: var(--color-border-strong);
            box-shadow: var(--shadow-lg);
        }
        [data-theme="dark"] .landing-chart-container {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.99) 100%);
            border-color: var(--color-border-strong);
            box-shadow:
                0 10px 30px rgba(0, 0, 0, 0.45),
                0 4px 12px rgba(0, 0, 0, 0.3),
                0 0 0 1px color-mix(in oklab, var(--primary-400) 12%, transparent);
        }
        [data-theme="dark"] .landing-feature-card {
            background: rgba(30, 41, 59, 0.88);
            border-color: var(--color-border-default);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        [data-theme="dark"] .landing-feature-card .landing-feature-title {
            color: var(--color-text-primary);
        }
        [data-theme="dark"] .landing-feature-card .landing-feature-text {
            color: var(--color-text-secondary);
        }
        [data-theme="dark"] .landing-pricing-card {
            background: rgba(30, 41, 59, 0.88);
            border-color: var(--color-border-default);
        }
        [data-theme="dark"] .landing-pricing-card.featured {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.45),
                0 10px 30px color-mix(in oklab, var(--color-accent-primary) 15%, transparent),
                0 0 0 1px color-mix(in oklab, var(--primary-400) 20%, transparent),
                inset 0 0 60px color-mix(in oklab, var(--color-accent-primary) 6%, transparent);
        }
        [data-theme="dark"] .landing-pricing-title {
            color: var(--color-text-primary);
        }
        [data-theme="dark"] .landing-pricing-price span {
            color: var(--color-text-secondary);
        }
        [data-theme="dark"] .landing-pricing-features li {
            color: var(--color-text-secondary);
        }
        [data-theme="dark"] .landing-footer:not(.landing-footer--minimal) {
            background: rgba(15, 23, 42, 0.95);
            border-top-color: var(--color-border-default);
            color: var(--color-text-secondary);
        }
        [data-theme="dark"] .landing-demo-table th {
            background: linear-gradient(135deg, color-mix(in oklab, var(--color-accent-primary) 22%, transparent) 0%, color-mix(in oklab, var(--color-accent-primary) 12%, transparent) 100%);
            color: var(--color-text-primary);
            border-bottom-color: color-mix(in oklab, var(--color-accent-primary) 28%, transparent);
            box-shadow:
                inset 2px 2px 4px rgba(0, 0, 0, 0.25),
                inset -2px -2px 4px rgba(148, 163, 184, 0.05);
        }
        [data-theme="dark"] .landing-demo-table tbody tr:nth-child(even) {
            background: linear-gradient(135deg, rgba(51, 65, 85, 0.4) 0%, rgba(30, 41, 59, 0.55) 100%);
        }
        [data-theme="dark"] .landing-demo-table tbody tr:nth-child(odd) {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.65) 0%, rgba(15, 23, 42, 0.55) 100%);
        }
        [data-theme="dark"] .landing-demo-table tbody tr:hover {
            box-shadow:
                inset 2px 2px 4px color-mix(in oklab, var(--color-accent-primary) 12%, transparent),
                inset -2px -2px 4px rgba(148, 163, 184, 0.04),
                0 4px 12px rgba(0, 0, 0, 0.35);
        }
        [data-theme="dark"] .landing-demo-table td {
            color: var(--color-text-secondary);
        }
        [data-theme="dark"] .landing-demo-table .status-badge {
            box-shadow:
                inset 2px 2px 4px rgba(0, 0, 0, 0.2),
                inset -2px -2px 4px rgba(148, 163, 184, 0.05);
        }
        [data-theme="dark"] .landing-demo-metric {
            background: rgba(30, 41, 59, 0.88);
            border-color: var(--color-border-default);
        }
        [data-theme="dark"] .landing-demo-metric-label {
            color: var(--color-text-secondary);
        }
        [data-theme="dark"] .landing-demo-metric-value {
            color: var(--color-text-primary);
        }
        [data-theme="dark"] .landing-tab-content .ozon-metric-card {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.92) 100%);
            border-color: var(--color-border-default);
            box-shadow:
                inset 3px 3px 6px rgba(0, 0, 0, 0.28),
                inset -3px -3px 6px rgba(148, 163, 184, 0.04),
                0 4px 12px rgba(0, 0, 0, 0.3);
        }
        [data-theme="dark"] .landing-tab-content .ozon-metric-label {
            color: var(--color-text-secondary);
        }
        [data-theme="dark"] .landing-tab-content .ozon-metric-value {
            color: var(--color-text-primary);
        }
        [data-theme="dark"] .landing-tab-content .ozon-detail-label,
        [data-theme="dark"] .landing-tab-content .ozon-detail-value {
            color: var(--color-text-secondary);
        }
        [data-theme="dark"] .landing-abc-block {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.92) 100%);
            border-color: var(--color-border-default);
            box-shadow:
                inset 3px 3px 6px rgba(0, 0, 0, 0.28),
                inset -3px -3px 6px rgba(148, 163, 184, 0.04);
        }
        [data-theme="dark"] .landing-abc-title {
            color: var(--color-text-primary);
        }
        [data-theme="dark"] .landing-abc-list li {
            color: var(--color-text-secondary);
            border-bottom-color: var(--color-border-default);
        }
        [data-theme="dark"] .landing-modal {
            background: var(--color-bg-elevated);
            border-color: var(--color-border-default);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 10px 30px rgba(0, 0, 0, 0.4);
        }
        [data-theme="dark"] .landing-modal-title {
            color: var(--color-text-primary);
        }
        [data-theme="dark"] .landing-modal-close {
            color: var(--color-text-secondary);
        }
        [data-theme="dark"] .landing-modal-close:hover {
            color: var(--color-text-primary);
            background: rgba(148, 163, 184, 0.12);
        }
        [data-theme="dark"] .landing-modal-footer-note {
            color: var(--color-text-muted);
        }
        [data-theme="dark"] .landing-modal-remember-label {
            color: var(--color-text-secondary);
        }
        [data-theme="dark"] .landing-modal-remember-label:hover {
            color: var(--color-text-primary);
        }
        [data-theme="dark"] .landing-proof-card,
        [data-theme="dark"] .landing-product-frame,
        [data-theme="dark"] .landing-insight-panel,
        [data-theme="dark"] .landing-decision-card,
        [data-theme="dark"] .landing-showcase-row,
        [data-theme="dark"] .landing-chart-card,
        [data-theme="dark"] .landing-compare-card,
        [data-theme="dark"] .landing-step-card {
            background: rgba(30, 41, 59, 0.9);
            border-color: var(--color-border-default);
            box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
        }
        [data-theme="dark"] .landing-section-head h2,
        [data-theme="dark"] .landing-proof-card strong,
        [data-theme="dark"] .landing-frame-title,
        [data-theme="dark"] .landing-insight-card strong,
        [data-theme="dark"] .landing-decision-card h3,
        [data-theme="dark"] .landing-showcase-copy h3,
        [data-theme="dark"] .landing-compare-card h3,
        [data-theme="dark"] .landing-step-card h3,
        [data-theme="dark"] .landing-final-cta h2 {
            color: var(--color-text-primary);
        }
        [data-theme="dark"] .landing-section-head p,
        [data-theme="dark"] .landing-proof-card small,
        [data-theme="dark"] .landing-insight-card p,
        [data-theme="dark"] .landing-decision-card p,
        [data-theme="dark"] .landing-showcase-copy p,
        [data-theme="dark"] .landing-compare-card p,
        [data-theme="dark"] .landing-step-card p,
        [data-theme="dark"] .landing-final-cta p,
        [data-theme="dark"] .landing-pricing-note {
            color: var(--color-text-secondary);
        }
        [data-theme="dark"] .landing-analytics-shell {
            background: #020617;
            box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
        }
        [data-theme="dark"] .landing-image-placeholder {
            background:
                linear-gradient(135deg, color-mix(in oklab, var(--color-accent-primary) 18%, transparent), rgba(14, 165, 233, 0.08)),
                repeating-linear-gradient(135deg, color-mix(in oklab, var(--primary-400) 12%, transparent) 0, color-mix(in oklab, var(--primary-400) 12%, transparent) 1px, transparent 1px, transparent 14px);
            border-color: rgba(147, 197, 253, 0.5);
            color: #bfdbfe;
        }
        [data-theme="dark"] .landing-image-placeholder small,
        [data-theme="dark"] .landing-showcase-list,
        [data-theme="dark"] .landing-compare-list li {
            color: var(--color-text-secondary);
        }
        [data-theme="dark"] .landing-insight-card {
            background: rgba(15, 23, 42, 0.72);
            border-color: var(--color-border-default);
        }
        [data-theme="dark"] .landing-insight-card--danger {
            background: rgba(127, 29, 29, 0.28);
            border-color: rgba(248, 113, 113, 0.24);
        }
        [data-theme="dark"] .landing-insight-card--danger strong,
        [data-theme="dark"] .landing-proof-card--alert span,
        [data-theme="dark"] .landing-proof-card--alert strong {
            color: #fca5a5;
        }
        [data-theme="dark"] .landing-final-cta {
            background:
                radial-gradient(circle at 12% 15%, color-mix(in oklab, var(--color-accent-primary) 22%, transparent), transparent 28%),
                linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
        }
        .landing-theme-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.5rem;
            height: 2.5rem;
            padding: 0;
            border-radius: var(--radius-sm);
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: rgba(255, 255, 255, 0.85);
            color: #475569;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        }
        .landing-theme-toggle:hover {
            background: rgba(241, 245, 249, 1);
            color: #0f172a;
        }
        [data-theme="dark"] .landing-theme-toggle {
            background: rgba(30, 41, 59, 0.9);
            border-color: var(--color-border-default);
            color: var(--color-text-secondary);
        }
        [data-theme="dark"] .landing-theme-toggle:hover {
            background: rgba(51, 65, 85, 0.95);
            color: var(--color-text-primary);
        }

        /* Poster landing refresh */
        .landing-wrapper--poster {
            --poster-display: 'Unbounded', 'Onest', sans-serif;
            --poster-measure: 38rem;
            --poster-heading-measure: min(100%, 48rem);
            --poster-h1: clamp(2.35rem, 5.2vw + 0.6rem, 4.25rem);
            --poster-h2: clamp(1.85rem, 3.4vw + 0.5rem, 3.35rem);
            --poster-h3: clamp(1.2rem, 2vw + 0.35rem, 1.85rem);
            --poster-lead: clamp(1rem, 1.1vw + 0.85rem, 1.25rem);
            --poster-line-tight: 1.08;
            --poster-line-display: 1.12;
            background:
                radial-gradient(circle at 80% 8%, color-mix(in oklab, var(--color-accent-primary) 18%, transparent), transparent 30rem),
                radial-gradient(circle at 12% 38%, rgba(167, 139, 250, 0.14), transparent 28rem),
                #f8fafc;
        }

        .landing-wrapper--poster .landing-section {
            width: min(100%, 1200px);
            max-width: none;
            margin: 0 auto;
            padding: clamp(48px, 7vw, 96px) clamp(18px, 4vw, 48px);
            opacity: 1;
            transform: none;
            box-sizing: border-box;
            overflow-x: clip;
            overflow-y: visible;
        }

        .poster-kicker {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            width: fit-content;
            max-width: 100%;
            flex-wrap: wrap;
            border: 1px solid rgba(37, 99, 235, 0.22);
            border-radius: 999px;
            padding: 9px 14px;
            background: rgba(255, 255, 255, 0.74);
            color: var(--primary-700);
            font-size: 0.78rem;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            line-height: 1.25;
            overflow-wrap: break-word;
        }

        .poster-hero {
            display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
            gap: clamp(28px, 5vw, 64px);
            align-items: center;
            min-height: calc(100vh - 92px);
        }

        .poster-hero__copy {
            min-width: 0;
            max-width: var(--poster-heading-measure);
        }

        .poster-hero__copy h1 {
            max-width: 100%;
            margin: 22px 0 20px;
            color: #020617;
            font-family: var(--poster-display);
            font-size: var(--poster-h1);
            font-weight: 900;
            line-height: var(--poster-line-display);
            letter-spacing: -0.028em;
            overflow-wrap: break-word;
            word-break: break-word;
            hyphens: auto;
        }

        .poster-hero__copy p {
            max-width: var(--poster-measure);
            margin: 0;
            color: #334155;
            font-size: var(--poster-lead);
            font-weight: 650;
            line-height: 1.45;
            overflow-wrap: break-word;
        }

        .poster-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-top: 34px;
        }

        .poster-actions .btn {
            padding: 15px 22px;
            font-size: 1rem;
            text-decoration: none;
        }

        .poster-hero__visual {
            position: relative;
            min-height: 620px;
            display: grid;
            place-items: center;
        }

        .poster-orbit {
            position: absolute;
            border-radius: 999px;
            filter: blur(1px);
            opacity: 0.9;
        }

        .poster-orbit--one {
            inset: 4% 6% auto auto;
            width: 290px;
            height: 290px;
            background: linear-gradient(135deg, var(--primary-400), #a78bfa);
        }

        .poster-orbit--two {
            inset: auto auto 4% 1%;
            width: 220px;
            height: 220px;
            background: linear-gradient(135deg, #22c55e, #38bdf8);
        }

        .poster-dashboard-card {
            position: relative;
            z-index: 1;
            width: min(100%, 560px);
            padding: clamp(24px, 4vw, 42px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 36px;
            background:
                radial-gradient(circle at 90% 10%, color-mix(in oklab, var(--color-accent-primary) 36%, transparent), transparent 34%),
                linear-gradient(145deg, #020617 0%, #0f172a 58%, #1e1b4b 100%);
            box-shadow: 0 44px 120px rgba(15, 23, 42, 0.34);
            color: #ffffff;
            transform: rotate(-2deg);
        }

        .poster-dashboard-card__top,
        .poster-dashboard-grid,
        .order-receipt__line,
        .order-receipt__result {
            display: flex;
            justify-content: space-between;
            gap: 18px;
            align-items: center;
        }

        .poster-dashboard-card__top span,
        .poster-dashboard-card__top strong {
            color: #cbd5e1;
            font-size: 0.88rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .poster-dashboard-card__top strong {
            color: #86efac;
        }

        .poster-profit-number {
            margin: 28px 0 22px;
            font-family: var(--poster-display);
            font-size: clamp(2rem, 4.5vw, 3.25rem);
            font-weight: 900;
            line-height: var(--poster-line-tight);
            letter-spacing: -0.028em;
            overflow-wrap: break-word;
        }

        .poster-dashboard-bars {
            display: grid;
            gap: 12px;
            margin-bottom: 30px;
        }

        .poster-dashboard-bars span {
            width: var(--bar);
            height: 14px;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--primary-400), #22c55e);
        }

        .poster-dashboard-grid {
            align-items: stretch;
        }

        .poster-dashboard-grid div {
            flex: 1;
            min-width: 0;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 18px;
            padding: 16px;
            background: rgba(255, 255, 255, 0.08);
        }

        .poster-dashboard-grid span {
            display: block;
            margin-bottom: 8px;
            color: #94a3b8;
            font-size: 0.82rem;
            font-weight: 800;
        }

        .poster-dashboard-grid strong {
            color: #ffffff;
            font-size: clamp(1.1rem, 2vw, 1.45rem);
        }

        .poster-dashboard-grid .is-danger strong {
            color: #fca5a5;
        }

        .money-ribbon {
            display: grid;
            grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
            gap: clamp(28px, 5vw, 72px);
            align-items: center;
            background: #020617;
            color: #ffffff;
            width: 100%;
            max-width: none;
            border-radius: 0;
        }

        .money-ribbon__headline {
            min-width: 0;
            max-width: var(--poster-heading-measure);
        }

        .money-ribbon .orders-iso {
            min-width: 0;
        }

        .money-ribbon__headline h2,
        .scene-reel__intro h2,
        .order-story__copy h2,
        .product-stage__intro h2,
        .decision-board__title h2,
        .chart-poster__copy h2,
        .start-strip h2,
        .pricing-poster__head h2,
        .final-poster h2 {
            margin: 16px 0 0;
            color: #020617;
            font-family: var(--poster-display);
            font-size: var(--poster-h2);
            font-weight: 900;
            line-height: var(--poster-line-display);
            letter-spacing: -0.026em;
            max-width: var(--poster-heading-measure);
            overflow-wrap: break-word;
            word-break: break-word;
            hyphens: auto;
        }

        .money-ribbon__headline h2 {
            color: #ffffff;
        }

        .money-ribbon .poster-kicker {
            border-color: color-mix(in oklab, var(--primary-400) 32%, transparent);
            background: color-mix(in oklab, var(--color-accent-primary) 13%, transparent);
            color: #bfdbfe;
        }

        .money-flow {
            display: grid;
            grid-column: 1 / -1;
            grid-template-columns: 1fr auto 1fr auto 1fr auto 1.1fr;
            gap: 14px;
            align-items: stretch;
        }

        .orders-iso {
            position: relative;
            min-height: 520px;
            perspective: 1200px;
        }

        .orders-iso::before,
        .orders-iso::after {
            content: '';
            position: absolute;
            border-radius: 999px;
            filter: blur(24px);
            opacity: 0.8;
        }

        .orders-iso::before {
            inset: 8% 2% auto auto;
            width: 210px;
            height: 210px;
            background: var(--primary-600);
        }

        .orders-iso::after {
            inset: auto auto 4% 6%;
            width: 170px;
            height: 170px;
            background: #22c55e;
        }

        .orders-iso__table {
            position: relative;
            z-index: 1;
            width: min(100%, 760px);
            margin: 28px auto 0;
            padding: 18px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 28px;
            background:
                linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.92)),
                #ffffff;
            box-shadow:
                42px 52px 100px rgba(0, 0, 0, 0.42),
                inset 0 1px 0 rgba(255, 255, 255, 0.75);
            transform: rotateX(58deg) rotateZ(-35deg) translateY(-28px);
            transform-style: preserve-3d;
        }

        .orders-iso__table::after {
            content: '';
            position: absolute;
            inset: 18px -22px -24px 22px;
            z-index: -1;
            border-radius: 28px;
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.4), rgba(15, 23, 42, 0.8));
            transform: translateZ(-34px);
            filter: blur(1px);
        }

        .orders-iso__top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 18px;
            padding: 12px 14px 18px;
            color: #0f172a;
            font-weight: 900;
        }

        .orders-iso__top span {
            color: var(--primary-600);
            font-size: 0.82rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .orders-iso__head,
        .orders-iso__row {
            display: grid;
            grid-template-columns: 0.85fr 0.9fr 0.9fr 0.85fr 0.85fr 0.82fr 0.82fr;
            gap: 8px;
            align-items: center;
        }

        .orders-iso__head {
            padding: 12px 14px;
            border-radius: 16px;
            background: #e0f2fe;
            color: #0369a1;
            font-size: 0.72rem;
            font-weight: 900;
            text-transform: uppercase;
        }

        .orders-iso__row {
            margin-top: 8px;
            padding: 12px 14px;
            border-radius: 16px;
            background: rgba(248, 250, 252, 0.92);
            color: #334155;
            font-size: 0.78rem;
            font-weight: 750;
            box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
        }

        .orders-iso__row strong {
            color: #047857;
        }

        .orders-iso__row .is-loss {
            color: #dc2626;
        }

        .orders-iso__row .is-muted {
            color: #64748b;
        }

        .orders-iso__badge {
            position: absolute;
            right: 4%;
            bottom: 8%;
            z-index: 3;
            max-width: 280px;
            padding: 18px;
            border-radius: 24px;
            background: rgba(15, 23, 42, 0.92);
            color: #ffffff;
            box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
        }

        .orders-iso__badge span {
            display: block;
            margin-bottom: 8px;
            color: #93c5fd;
            font-size: 0.76rem;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .orders-iso__badge strong {
            display: block;
            font-family: var(--poster-display);
            font-size: clamp(1.25rem, 2.5vw, 1.65rem);
            line-height: var(--poster-line-tight);
            letter-spacing: -0.02em;
            overflow-wrap: break-word;
        }

        .money-flow__item {
            min-height: 170px;
            min-width: 0;
            padding: 22px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 26px;
            background: rgba(255, 255, 255, 0.07);
        }

        .money-flow__item span {
            display: block;
            margin-bottom: 22px;
            color: #94a3b8;
            font-size: 0.88rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .money-flow__item strong {
            color: #ffffff;
            font-family: var(--poster-display);
            font-size: clamp(1.25rem, 2.2vw, 2rem);
            line-height: var(--poster-line-tight);
            letter-spacing: -0.02em;
            overflow-wrap: break-word;
        }

        .money-flow__item--accent {
            background: linear-gradient(135deg, var(--primary-600), #7c3aed);
            box-shadow: 0 24px 70px rgba(37, 99, 235, 0.34);
        }

        .money-flow__item--accent span {
            color: #dbeafe;
        }

        .money-flow__operator {
            display: grid;
            place-items: center;
            color: var(--primary-400);
            font-size: clamp(2rem, 4vw, 4rem);
            font-weight: 900;
        }

        .order-story {
            display: grid;
            grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.7fr);
            gap: clamp(28px, 6vw, 88px);
            align-items: center;
        }

        .order-story__copy {
            min-width: 0;
            max-width: var(--poster-heading-measure);
        }

        .order-story__copy p,
        .product-stage__intro p,
        .chart-poster__copy p,
        .final-poster p {
            max-width: var(--poster-measure);
            margin: 18px 0 0;
            color: #475569;
            font-size: var(--poster-lead);
            font-weight: 650;
            line-height: 1.45;
            overflow-wrap: break-word;
        }

        .order-receipt {
            border-radius: 34px;
            padding: clamp(24px, 4vw, 42px);
            background: #ffffff;
            border: 1px solid rgba(15, 23, 42, 0.09);
            box-shadow: 0 30px 90px rgba(15, 23, 42, 0.12);
            transform: rotate(1.4deg);
        }

        .order-receipt__line {
            padding: 16px 0;
            border-bottom: 1px solid rgba(148, 163, 184, 0.22);
            color: #475569;
            font-weight: 750;
        }

        .order-receipt__line strong {
            color: #dc2626;
        }

        .order-receipt__line--total {
            color: #020617;
            font-size: 1.25rem;
        }

        .order-receipt__line--total strong {
            color: #020617;
        }

        .order-receipt__result {
            margin-top: 24px;
            border-radius: 24px;
            padding: 22px;
            background: #dcfce7;
            color: #166534;
            font-weight: 900;
        }

        .order-receipt__result strong {
            font-family: var(--poster-display);
            font-size: clamp(1.65rem, 3.5vw, 2.35rem);
            line-height: var(--poster-line-tight);
            letter-spacing: -0.024em;
            overflow-wrap: break-word;
        }

        .product-stage__intro {
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.58fr);
            gap: clamp(24px, 5vw, 72px);
            align-items: end;
            margin-bottom: clamp(32px, 5vw, 72px);
        }

        .product-stage__intro > * {
            min-width: 0;
        }

        .product-stage__intro h2,
        .product-stage__intro p {
            max-width: var(--poster-heading-measure);
        }

        .product-stage__intro p {
            max-width: var(--poster-measure);
        }

        .stage-wall {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 20px;
        }

        .stage-tile {
            grid-column: span 3;
            min-height: 560px;
            min-width: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            border-radius: 36px;
            padding: clamp(22px, 3vw, 34px);
            background: #ffffff;
            border: 1px solid rgba(15, 23, 42, 0.08);
            box-shadow: 0 24px 80px rgba(15, 23, 42, 0.1);
        }

        .stage-tile--wide {
            grid-column: span 4;
        }

        .stage-tile--dark {
            background: #020617;
            color: #ffffff;
        }

        .stage-tile--gradient {
            background: linear-gradient(135deg, #eff6ff, #f5f3ff 60%, #ffffff);
        }

        .stage-screen {
            min-height: 310px;
            border-radius: 28px;
            padding: 22px;
            background:
                linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.58)),
                repeating-linear-gradient(0deg, rgba(37, 99, 235, 0.12) 0, rgba(37, 99, 235, 0.12) 1px, transparent 1px, transparent 24px);
            border: 1px solid rgba(37, 99, 235, 0.15);
        }

        .stage-screen--blue {
            background: linear-gradient(135deg, #dbeafe, #eff6ff);
        }

        .stage-screen--dark {
            display: grid;
            place-items: center;
            background: radial-gradient(circle at 20% 20%, color-mix(in oklab, var(--primary-400) 32%, transparent), transparent 38%), #0f172a;
            border-color: rgba(255, 255, 255, 0.12);
        }

        .stage-screen--purple {
            display: grid;
            align-content: center;
            gap: 16px;
            background: linear-gradient(135deg, #7c3aed, var(--primary-600));
            color: #ffffff;
        }

        .stage-screen__chrome {
            display: flex;
            gap: 8px;
            margin-bottom: 34px;
        }

        .stage-screen__chrome span {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #93c5fd;
        }

        .stage-screen__metric {
            color: #0f172a;
            font-family: var(--poster-display);
            font-size: clamp(1.8rem, 4vw, 3.8rem);
            font-weight: 900;
            line-height: 1;
            letter-spacing: -0.035em;
        }

        .stage-orders-ui {
            min-height: 360px;
            display: grid;
            gap: 16px;
            background: linear-gradient(135deg, #f8fafc, #dbeafe);
        }

        .stage-orders-ui__summary {
            display: grid;
            grid-template-columns: 1.1fr 0.8fr 0.8fr;
            gap: 12px;
        }

        .stage-orders-ui__summary div,
        .stage-card-ui__metric,
        .stage-orders-ui__table {
            border: 1px solid rgba(37, 99, 235, 0.12);
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.82);
            box-shadow: 0 12px 30px rgba(37, 99, 235, 0.08);
        }

        .stage-orders-ui__summary div {
            padding: 14px;
        }

        .stage-orders-ui__summary span,
        .stage-card-ui__metric span {
            display: block;
            margin-bottom: 8px;
            color: #64748b;
            font-size: 0.72rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .stage-orders-ui__summary strong,
        .stage-card-ui__metric strong {
            color: #0f172a;
            font-size: clamp(1.2rem, 2vw, 2rem);
            font-weight: 900;
            line-height: 1;
        }

        .stage-orders-ui__summary .is-good strong {
            color: #047857;
        }

        .stage-orders-ui__summary .is-bad strong {
            color: #dc2626;
        }

        .stage-orders-ui__table {
            overflow: hidden;
        }

        .stage-orders-ui__table-row {
            display: grid;
            grid-template-columns: 0.9fr 1fr 0.9fr 0.9fr 1fr 0.9fr;
            gap: 8px;
            padding: 12px 14px;
            color: #475569;
            font-size: 0.78rem;
            font-weight: 750;
            border-bottom: 1px solid rgba(148, 163, 184, 0.18);
        }

        .stage-orders-ui__table-row:first-child {
            background: #eff6ff;
            color: var(--primary-700);
            font-size: 0.68rem;
            font-weight: 900;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .stage-orders-ui__table-row:last-child {
            border-bottom: none;
        }

        .stage-orders-ui__table-row strong {
            color: #047857;
        }

        .stage-orders-ui__table-row .is-loss {
            color: #dc2626;
        }

        .stage-orders-ui__split {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 10px;
        }

        .stage-orders-ui__split span {
            display: grid;
            align-content: end;
            min-height: 72px;
            border-radius: 16px;
            padding: 10px;
            color: #ffffff;
            font-size: 0.76rem;
            font-weight: 900;
            background: linear-gradient(180deg, var(--primary-400), var(--primary-600));
        }

        .stage-orders-ui__split span:nth-child(2) {
            background: linear-gradient(180deg, #f87171, #dc2626);
        }

        .stage-orders-ui__split span:nth-child(3) {
            background: linear-gradient(180deg, #34d399, #059669);
        }

        .stage-card-ui {
            display: grid;
            gap: 14px;
            min-height: 360px;
        }

        .stage-card-ui__metrics {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
        }

        .stage-card-ui__metric {
            padding: 14px;
        }

        .stage-card-ui__funnel {
            display: grid;
            gap: 10px;
            padding: 16px;
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.72);
        }

        .stage-card-ui__funnel div {
            display: grid;
            grid-template-columns: 92px minmax(0, 1fr) 58px;
            gap: 10px;
            align-items: center;
            color: #334155;
            font-size: 0.78rem;
            font-weight: 850;
        }

        .stage-card-ui__funnel i {
            height: 12px;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--primary-600), #38bdf8);
        }

        .stage-card-ui__funnel div:nth-child(2) i {
            width: 68%;
            background: linear-gradient(90deg, #7c3aed, #a78bfa);
        }

        .stage-card-ui__funnel div:nth-child(3) i {
            width: 44%;
            background: linear-gradient(90deg, #ef4444, #f97316);
        }

        .stage-card-ui__alert {
            padding: 14px 16px;
            border-radius: 18px;
            background: #fff7ed;
            color: #9a3412;
            font-size: 0.86rem;
            font-weight: 850;
        }

        .stage-screen__rows {
            display: grid;
            gap: 10px;
            margin-top: 32px;
        }

        .stage-screen__rows span {
            height: 15px;
            border-radius: 999px;
            background: #bfdbfe;
        }

        .stage-screen__rows span:nth-child(2) {
            width: 72%;
        }

        .stage-screen__rows .is-danger {
            width: 48%;
            background: #fecaca;
        }

        .stage-funnel {
            display: grid;
            gap: 14px;
            margin-top: 44px;
        }

        .stage-funnel span {
            height: 58px;
            border-radius: 18px;
            background: var(--primary-600);
        }

        .stage-funnel span:nth-child(2) {
            width: 76%;
            background: var(--primary-400);
        }

        .stage-funnel span:nth-child(3) {
            width: 48%;
            background: #22c55e;
        }

        .stage-abc {
            display: flex;
            gap: 18px;
        }

        .stage-abc b {
            display: grid;
            place-items: center;
            width: clamp(72px, 8vw, 108px);
            height: clamp(72px, 8vw, 108px);
            border-radius: 32px;
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            font-size: clamp(1.75rem, 4vw, 3rem);
            line-height: 1;
        }

        .stage-price {
            font-family: var(--poster-display);
            font-size: clamp(2rem, 4.5vw, 3.25rem);
            font-weight: 900;
            line-height: var(--poster-line-tight);
            letter-spacing: -0.03em;
            overflow-wrap: break-word;
        }

        .stage-margin {
            font-size: clamp(1rem, 1.8vw, 1.35rem);
            font-weight: 850;
            line-height: 1.35;
            max-width: 100%;
        }

        .stage-tile__copy {
            margin-top: 28px;
            min-width: 0;
        }

        .stage-tile__copy span {
            color: var(--primary-600);
            font-size: 0.82rem;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .stage-tile--dark .stage-tile__copy span {
            color: #93c5fd;
        }

        .stage-tile__copy h3 {
            margin: 12px 0 12px;
            color: #020617;
            font-family: var(--poster-display);
            font-size: var(--poster-h3);
            font-weight: 900;
            line-height: var(--poster-line-display);
            letter-spacing: -0.022em;
            max-width: 100%;
            overflow-wrap: break-word;
        }

        .stage-tile--dark .stage-tile__copy h3 {
            color: #ffffff;
        }

        .stage-tile__copy p {
            margin: 0;
            color: #475569;
            font-size: 0.95rem;
            font-weight: 650;
            line-height: 1.5;
            max-width: 42rem;
            overflow-wrap: break-word;
        }

        .stage-tile--dark .stage-tile__copy p {
            color: #cbd5e1;
        }

        .decision-board {
            display: grid;
            grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
            gap: clamp(28px, 5vw, 72px);
            align-items: start;
        }

        .decision-board__title {
            position: sticky;
            top: 120px;
            min-width: 0;
            max-width: var(--poster-heading-measure);
        }

        .decision-board__grid {
            display: grid;
            gap: 18px;
        }

        .decision-board__grid article {
            display: grid;
            grid-template-columns: 90px minmax(0, 0.9fr) minmax(240px, 0.8fr);
            gap: 24px;
            align-items: center;
            padding: clamp(20px, 3vw, 34px);
            border-radius: 30px;
            background: #ffffff;
            border: 1px solid rgba(15, 23, 42, 0.08);
            box-shadow: 0 18px 60px rgba(15, 23, 42, 0.08);
        }

        .decision-board__grid article > span {
            justify-self: start;
        }

        .decision-board__grid article h3,
        .decision-board__grid article p,
        .decision-board__grid article > div {
            min-width: 0;
        }

        .decision-board__grid article.decision-board__card--feature {
            grid-template-columns: 90px minmax(0, 0.78fr) minmax(320px, 1.02fr);
            background:
                radial-gradient(circle at 88% 18%, rgba(37, 99, 235, 0.16), transparent 34%),
                #ffffff;
        }

        .decision-board__grid span {
            color: var(--primary-600);
            font-family: var(--poster-display);
            font-size: clamp(2rem, 4vw, 4.4rem);
            font-weight: 900;
            letter-spacing: -0.04em;
        }

        .decision-board__grid h3 {
            margin: 0;
            color: #020617;
            font-family: var(--poster-display);
            font-size: var(--poster-h3);
            font-weight: 900;
            line-height: var(--poster-line-display);
            letter-spacing: -0.022em;
            overflow-wrap: break-word;
        }

        .decision-board__grid p {
            margin: 0;
            color: #475569;
            font-size: 0.95rem;
            font-weight: 650;
            line-height: 1.5;
            max-width: 42rem;
            overflow-wrap: break-word;
        }

        .decision-card-analytics {
            display: grid;
            grid-template-columns: 0.9fr 1.1fr;
            gap: 12px;
            align-items: stretch;
        }

        .decision-card-analytics__score {
            display: grid;
            place-items: center;
            min-height: 164px;
            border-radius: 24px;
            background: #eff6ff;
            color: var(--primary-700);
            text-align: center;
            font-weight: 900;
        }

        .decision-card-analytics__score strong {
            display: block;
            font-family: var(--poster-display);
            font-size: clamp(2rem, 4.5vw, 3rem);
            line-height: var(--poster-line-tight);
            letter-spacing: -0.024em;
        }

        .decision-card-analytics__score small {
            display: block;
            margin-top: 8px;
            color: #64748b;
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .decision-card-analytics__list {
            display: grid;
            gap: 10px;
        }

        .decision-card-analytics__list div {
            display: grid;
            grid-template-columns: 92px minmax(0, 1fr) 48px;
            gap: 10px;
            align-items: center;
            padding: 11px 12px;
            border-radius: 16px;
            background: #f8fafc;
            color: #334155;
            font-size: 0.78rem;
            font-weight: 850;
        }

        .decision-card-analytics__list i {
            height: 10px;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--primary-600), #38bdf8);
        }

        .decision-card-analytics__list div:nth-child(2) i {
            width: 58%;
            background: linear-gradient(90deg, #f97316, #ef4444);
        }

        .decision-card-analytics__list div:nth-child(3) i {
            width: 74%;
            background: linear-gradient(90deg, #22c55e, #10b981);
        }

        .chart-poster {
            display: grid;
            grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
            gap: clamp(28px, 5vw, 72px);
            align-items: center;
        }

        .chart-poster__copy {
            min-width: 0;
            max-width: var(--poster-heading-measure);
        }

        .chart-poster__chart {
            min-width: 0;
            border-radius: 34px;
            padding: clamp(18px, 3vw, 34px);
            background: #ffffff;
            border: 1px solid rgba(15, 23, 42, 0.09);
            box-shadow: 0 30px 90px rgba(15, 23, 42, 0.1);
        }

        .start-strip {
            display: grid;
            gap: 30px;
            background: #dbeafe;
            max-width: none;
            width: 100%;
        }

        .start-strip h2 {
            max-width: var(--poster-heading-measure);
        }

        .start-strip__steps {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
        }

        .start-strip__steps span {
            border-radius: 999px;
            padding: 16px 20px;
            background: rgba(255, 255, 255, 0.66);
            color: #1e3a8a;
            font-weight: 850;
        }

        .pricing-poster__head {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: end;
            gap: 24px;
            margin-bottom: 34px;
            min-width: 0;
        }

        .pricing-poster__head h2 {
            max-width: var(--poster-heading-measure);
            min-width: 0;
        }

        .pricing-poster__cards {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 22px;
        }

        .pricing-poster .landing-pricing-card {
            opacity: 1;
            transform: none;
            text-align: left;
        }

        .pricing-poster .landing-pricing-card.featured {
            transform: translateY(-16px);
        }

        .pricing-poster .landing-pricing-card.featured:hover {
            transform: translateY(-24px);
        }

        .final-poster {
            display: grid;
            place-items: center;
            text-align: center;
            min-height: 72vh;
            background:
                radial-gradient(circle at 18% 22%, color-mix(in oklab, var(--primary-400) 35%, transparent), transparent 30%),
                radial-gradient(circle at 78% 68%, rgba(124, 58, 237, 0.28), transparent 34%),
                #020617;
            color: #ffffff;
            max-width: none;
            width: 100%;
        }

        .final-poster h2 {
            max-width: var(--poster-heading-measure);
            margin-left: auto;
            margin-right: auto;
            color: #ffffff;
        }

        .final-poster p {
            max-width: var(--poster-measure);
            margin-left: auto;
            margin-right: auto;
            color: #cbd5e1;
            text-align: center;
        }

        .final-poster .poster-actions {
            justify-content: center;
        }

        html:has(.landing-wrapper--poster) {
            scroll-behavior: smooth;
        }

        .landing-wrapper--poster .landing-header-content {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: clamp(12px, 2.4vw, 28px);
            max-width: 1440px;
        }

        .landing-wrapper--poster .landing-logo {
            justify-self: start;
        }

        .landing-wrapper--poster .landing-nav {
            justify-self: center;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 8px clamp(16px, 2.5vw, 28px);
        }

        .landing-wrapper--poster .landing-header-actions {
            justify-self: end;
        }

        .landing-nav a {
            color: #475569;
            text-decoration: none;
            font-weight: 750;
            font-size: 0.9rem;
            letter-spacing: 0.01em;
            padding: 6px 2px;
            position: relative;
            transition: color 0.2s ease;
        }

        .landing-nav a:hover {
            color: var(--primary-600);
        }

        .landing-nav a::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -2px;
            height: 2px;
            border-radius: 2px;
            background: linear-gradient(90deg, var(--primary-600), #7c3aed);
            transform: scaleX(0);
            transform-origin: center;
            transition: transform 0.28s ease;
        }

        .landing-nav a:hover::after {
            transform: scaleX(1);
        }

        .hero-scene {
            position: absolute;
            inset: -8% -12% -12% -8%;
            z-index: 0;
            pointer-events: none;
            overflow: hidden;
            border-radius: 50%;
        }

        .hero-scene__aurora {
            position: absolute;
            inset: -20%;
            background:
                radial-gradient(ellipse 80% 60% at 70% 20%, color-mix(in oklab, var(--primary-400) 45%, transparent), transparent 50%),
                radial-gradient(ellipse 70% 50% at 20% 80%, rgba(167, 139, 250, 0.35), transparent 45%),
                radial-gradient(ellipse 50% 40% at 50% 50%, rgba(34, 197, 94, 0.12), transparent 40%);
            animation: landingAuroraDrift 14s ease-in-out infinite alternate;
            filter: blur(40px);
            opacity: 0.85;
        }

        .hero-scene__mesh {
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(148, 163, 184, 0.07) 1px, transparent 1px),
                linear-gradient(90deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px);
            background-size: 48px 48px;
            mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 20%, transparent 75%);
            animation: landingMeshShift 22s linear infinite;
        }

        .hero-scene__scanner {
            position: absolute;
            inset: 0;
            background: linear-gradient(
                180deg,
                transparent 0%,
                color-mix(in oklab, var(--color-accent-primary) 6%, transparent) 45%,
                color-mix(in oklab, var(--primary-400) 14%, transparent) 50%,
                color-mix(in oklab, var(--color-accent-primary) 6%, transparent) 55%,
                transparent 100%
            );
            background-size: 100% 220%;
            animation: landingScannerSweep 5.5s ease-in-out infinite;
        }

        .poster-orbit--one {
            animation: landingOrbitFloatA 9s ease-in-out infinite;
        }

        .poster-orbit--two {
            animation: landingOrbitFloatB 11s ease-in-out infinite 0.8s;
        }

        .hero-dashboard-card {
            animation: landingHeroCardFloat 7s ease-in-out infinite;
        }

        .poster-dashboard-bars span {
            transform-origin: left center;
            animation: landingBarGrow 2.4s ease-out infinite;
        }

        .poster-dashboard-bars span:nth-child(1) { animation-delay: 0s; }
        .poster-dashboard-bars span:nth-child(2) { animation-delay: 0.12s; }
        .poster-dashboard-bars span:nth-child(3) { animation-delay: 0.24s; }
        .poster-dashboard-bars span:nth-child(4) { animation-delay: 0.36s; }
        .poster-dashboard-bars span:nth-child(5) { animation-delay: 0.48s; }

        .kpi-strip {
            padding-top: clamp(28px, 4vw, 48px) !important;
            padding-bottom: clamp(28px, 4vw, 48px) !important;
            background: transparent;
        }

        .kpi-strip__inner {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: clamp(14px, 2vw, 22px);
            width: min(100%, 1120px);
            margin: 0 auto;
        }

        .kpi-pill {
            position: relative;
            border-radius: 24px;
            padding: clamp(18px, 2.5vw, 26px) clamp(20px, 3vw, 28px);
            background: rgba(255, 255, 255, 0.82);
            border: 1px solid rgba(15, 23, 42, 0.08);
            box-shadow: 0 18px 50px rgba(15, 23, 42, 0.06);
            overflow: hidden;
            transition: transform 0.35s ease, box-shadow 0.35s ease;
        }

        .kpi-pill::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, color-mix(in oklab, var(--color-accent-primary) 8%, transparent), transparent 55%);
            opacity: 0;
            transition: opacity 0.35s ease;
        }

        .kpi-pill:hover {
            transform: translateY(-4px);
            box-shadow: 0 26px 64px rgba(37, 99, 235, 0.12);
        }

        .kpi-pill:hover::before {
            opacity: 1;
        }

        .kpi-pill--accent {
            border-color: rgba(37, 99, 235, 0.2);
        }

        .kpi-pill--warn {
            border-color: rgba(220, 38, 38, 0.18);
        }

        .kpi-pill__label {
            display: block;
            color: #64748b;
            font-size: 0.78rem;
            font-weight: 900;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        .kpi-pill__value {
            display: block;
            font-family: var(--poster-display);
            font-size: clamp(1.75rem, 3.2vw, 2.45rem);
            font-weight: 900;
            letter-spacing: -0.03em;
            line-height: 1;
            color: #020617;
        }

        .kpi-pill--warn .kpi-pill__value {
            color: #b91c1c;
        }

        .kpi-pill__hint {
            display: block;
            margin-top: 10px;
            color: #94a3b8;
            font-size: 0.86rem;
            font-weight: 650;
        }

        .scene-reel__intro {
            max-width: var(--poster-heading-measure);
            margin-bottom: clamp(32px, 4.5vw, 48px);
        }

        .scene-reel__intro h2 {
            margin-top: 16px;
            max-width: 100%;
        }

        .scene-reel__lead {
            margin: 18px 0 0;
            max-width: var(--poster-measure);
            color: #475569;
            font-size: var(--poster-lead);
            font-weight: 650;
            line-height: 1.45;
            overflow-wrap: break-word;
        }

        .scene-reel__track {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: clamp(18px, 2.5vw, 26px);
            align-items: stretch;
        }

        .scene-panel {
            display: flex;
            flex-direction: column;
            border-radius: 32px;
            padding: clamp(18px, 2.2vw, 26px);
            background: #ffffff;
            border: 1px solid rgba(15, 23, 42, 0.08);
            box-shadow: 0 28px 80px rgba(15, 23, 42, 0.09);
            min-height: 100%;
        }

        .scene-panel--risk {
            border-color: rgba(220, 38, 38, 0.15);
            box-shadow: 0 28px 80px rgba(220, 38, 38, 0.08);
        }

        .scene-panel__chrome {
            display: flex;
            gap: 8px;
            margin-bottom: 14px;
        }

        .scene-panel__chrome span {
            width: 11px;
            height: 11px;
            border-radius: 50%;
            background: #e2e8f0;
        }

        .scene-panel__chrome span:nth-child(1) {
            background: #fca5a5;
        }

        .scene-panel__chrome span:nth-child(2) {
            background: #fcd34d;
        }

        .scene-panel__chrome span:nth-child(3) {
            background: #86efac;
        }

        .scene-panel__viewport {
            flex: 1;
            min-height: 220px;
            border-radius: 22px;
            padding: 20px;
            background: linear-gradient(160deg, #f8fafc 0%, #eff6ff 100%);
            border: 1px solid rgba(37, 99, 235, 0.12);
            position: relative;
            overflow: hidden;
        }

        .scene-panel__viewport--risk {
            background: linear-gradient(160deg, #fef2f2 0%, #fff7ed 100%);
            border-color: rgba(220, 38, 38, 0.18);
        }

        .scene-panel__meta {
            margin-top: 20px;
        }

        .scene-panel__step {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 40px;
            padding: 6px 12px;
            border-radius: 999px;
            background: #020617;
            color: #e2e8f0;
            font-family: var(--poster-display);
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            margin-bottom: 12px;
        }

        .scene-panel__meta h3 {
            margin: 0 0 10px;
            font-family: var(--poster-display);
            font-size: var(--poster-h3);
            font-weight: 900;
            letter-spacing: -0.02em;
            line-height: var(--poster-line-display);
            color: #020617;
            max-width: 100%;
            overflow-wrap: break-word;
        }

        .scene-panel__meta p {
            margin: 0;
            color: #64748b;
            font-size: 0.95rem;
            font-weight: 650;
            line-height: 1.45;
        }

        .scene-sync-ui {
            display: grid;
            gap: 16px;
            height: 100%;
            align-content: start;
        }

        .scene-sync-ui__head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 900;
            color: var(--primary-700);
            font-size: 0.95rem;
        }

        .scene-sync-ui__head small {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: #22c55e;
            font-weight: 900;
            animation: landingLivePulse 1.8s ease-in-out infinite;
        }

        .scene-sync-ui__pulse {
            height: 4px;
            border-radius: 999px;
            background: linear-gradient(90deg, transparent, var(--primary-400), #22c55e, transparent);
            background-size: 200% 100%;
            animation: landingPulseShine 2.8s linear infinite;
        }

        .scene-sync-ui__rows {
            display: grid;
            gap: 10px;
        }

        .scene-sync-ui__row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(148, 163, 184, 0.2);
            font-size: 0.82rem;
            font-weight: 750;
            color: #334155;
            opacity: 0;
            transform: translateX(-12px);
            animation: landingRowStagger 4.5s ease-in-out infinite;
        }

        .scene-sync-ui__row:nth-child(1) { animation-delay: 0s; }
        .scene-sync-ui__row:nth-child(2) { animation-delay: 0.35s; }
        .scene-sync-ui__row:nth-child(3) { animation-delay: 0.7s; }

        .scene-sync-ui__row i {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #94a3b8;
            animation: landingDotBlink 4.5s ease-in-out infinite;
        }

        .scene-sync-ui__row:nth-child(1) i { animation-delay: 0s; }
        .scene-sync-ui__row:nth-child(2) i { animation-delay: 0.35s; }
        .scene-sync-ui__row:nth-child(3) i { animation-delay: 0.7s; }

        .scene-sync-ui__badge {
            margin-top: auto;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            border-radius: 16px;
            background: linear-gradient(135deg, #22c55e, #16a34a);
            color: #ffffff;
            font-size: 0.82rem;
            font-weight: 850;
            width: fit-content;
            box-shadow: 0 14px 36px rgba(22, 163, 74, 0.35);
            animation: landingBadgePop 4.5s ease-in-out infinite;
        }

        .scene-sync-ui__badge i {
            font-size: 0.9rem;
        }

        .scene-margin-ui {
            display: grid;
            gap: 18px;
            height: 100%;
            align-content: center;
        }

        .scene-margin-ui__title {
            font-weight: 900;
            font-size: 0.82rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #475569;
        }

        .scene-margin-ui__row {
            display: grid;
            grid-template-columns: 92px minmax(0, 1fr);
            gap: 12px;
            align-items: center;
        }

        .scene-margin-ui__label {
            font-size: 0.8rem;
            font-weight: 800;
            color: #64748b;
        }

        .scene-margin-ui__bar {
            display: block;
            height: 14px;
            border-radius: 999px;
            width: 0;
            max-width: 100%;
            animation: landingBarFillLoop 3.6s ease-in-out infinite;
        }

        .scene-margin-ui__bar--rev {
            background: linear-gradient(90deg, var(--primary-400), var(--primary-600));
        }

        .scene-margin-ui__bar--cost {
            background: linear-gradient(90deg, #fb923c, #ea580c);
            animation-delay: 0.25s;
        }

        .scene-margin-ui__bar--profit {
            background: linear-gradient(90deg, #34d399, #059669);
            animation-delay: 0.5s;
        }

        .scene-risk-ui {
            display: grid;
            gap: 10px;
            align-content: start;
        }

        .scene-risk-ui__head {
            font-weight: 900;
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #9a3412;
            margin-bottom: 6px;
        }

        .scene-risk-ui__row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 14px;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid rgba(251, 146, 60, 0.25);
            font-size: 0.82rem;
            font-weight: 750;
            color: #431407;
        }

        .scene-risk-ui__row .ok {
            color: #047857;
            font-weight: 900;
        }

        .scene-risk-ui__row .loss {
            color: #b91c1c;
            font-weight: 900;
        }

        .scene-risk-ui__row--alert {
            animation: landingRiskFlash 2.8s ease-in-out infinite;
            border-color: rgba(220, 38, 38, 0.45);
            box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.25);
        }

        .order-story.visible .order-receipt--animated .order-receipt__line,
        .order-story.visible .order-receipt--animated .order-receipt__result {
            animation: landingReceiptReveal 0.65s ease forwards;
        }

        .order-story.visible .order-receipt--animated .order-receipt__line--total { animation-delay: 0.05s; }
        .order-story.visible .order-receipt--animated .order-receipt__line:nth-of-type(2) { animation-delay: 0.15s; }
        .order-story.visible .order-receipt--animated .order-receipt__line:nth-of-type(3) { animation-delay: 0.22s; }
        .order-story.visible .order-receipt--animated .order-receipt__line:nth-of-type(4) { animation-delay: 0.29s; }
        .order-story.visible .order-receipt--animated .order-receipt__line:nth-of-type(5) { animation-delay: 0.36s; }
        .order-story.visible .order-receipt--animated .order-receipt__result { animation-delay: 0.48s; }

        .start-strip__steps span {
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .start-strip__steps span::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
            transform: translateX(-100%);
            animation: landingStepShine 4s ease-in-out infinite;
        }

        .start-strip__steps span:nth-child(2)::after { animation-delay: 1.1s; }
        .start-strip__steps span:nth-child(3)::after { animation-delay: 2.2s; }

        @keyframes landingAuroraDrift {
            0% { transform: translate(-4%, -2%) scale(1); }
            100% { transform: translate(4%, 3%) scale(1.06); }
        }

        @keyframes landingMeshShift {
            0% { background-position: 0 0; }
            100% { background-position: 48px 48px; }
        }

        @keyframes landingScannerSweep {
            0%, 100% { background-position: 0 -80%; opacity: 0.35; }
            50% { background-position: 0 80%; opacity: 0.85; }
        }

        @keyframes landingOrbitFloatA {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(-12px, 10px) scale(1.04); }
        }

        @keyframes landingOrbitFloatB {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(14px, -12px) scale(1.05); }
        }

        @keyframes landingHeroCardFloat {
            0%, 100% { transform: rotate(-2deg) translateY(0); }
            50% { transform: rotate(-1.2deg) translateY(-10px); }
        }

        @keyframes landingBarGrow {
            0%, 100% { transform: scaleX(0.92); opacity: 0.85; }
            50% { transform: scaleX(1); opacity: 1; }
        }

        @keyframes landingLivePulse {
            0%, 100% { opacity: 0.65; }
            50% { opacity: 1; }
        }

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

        @keyframes landingRowStagger {
            0%, 18% { opacity: 0; transform: translateX(-14px); }
            26%, 88% { opacity: 1; transform: translateX(0); }
            96%, 100% { opacity: 0; transform: translateX(10px); }
        }

        @keyframes landingDotBlink {
            0%, 22% { background: #94a3b8; box-shadow: none; }
            30%, 85% { background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25); }
            92%, 100% { background: #94a3b8; box-shadow: none; }
        }

        @keyframes landingBadgePop {
            0%, 72% { opacity: 0; transform: scale(0.92) translateY(8px); }
            78%, 92% { opacity: 1; transform: scale(1) translateY(0); }
            100% { opacity: 0; transform: scale(0.96) translateY(6px); }
        }

        @keyframes landingBarFillLoop {
            0%, 12% { width: 0; opacity: 0.5; }
            35%, 78% { width: var(--bar-target, 88%); opacity: 1; }
            92%, 100% { width: 0; opacity: 0.4; }
        }

        .scene-margin-ui__bar--rev { --bar-target: 92%; }
        .scene-margin-ui__bar--cost { --bar-target: 71%; }
        .scene-margin-ui__bar--profit { --bar-target: 43%; }

        @keyframes landingRiskFlash {
            0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); background: rgba(255, 255, 255, 0.92); }
            50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.18); background: rgba(254, 226, 226, 0.95); }
        }

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

        @keyframes landingStepShine {
            0%, 40% { transform: translateX(-100%); }
            55%, 100% { transform: translateX(100%); }
        }

        @media (prefers-reduced-motion: reduce) {
            html:has(.landing-wrapper--poster) {
                scroll-behavior: auto;
            }

            .hero-scene__aurora,
            .hero-scene__mesh,
            .hero-scene__scanner,
            .poster-orbit--one,
            .poster-orbit--two,
            .hero-dashboard-card,
            .poster-dashboard-bars span,
            .scene-sync-ui__head small,
            .scene-sync-ui__pulse,
            .scene-sync-ui__row,
            .scene-sync-ui__row i,
            .scene-sync-ui__badge,
            .scene-margin-ui__bar,
            .scene-risk-ui__row--alert,
            .start-strip__steps span::after {
                animation: none !important;
            }

            .scene-sync-ui__row {
                opacity: 1;
                transform: none;
            }

            .scene-sync-ui__badge {
                opacity: 1;
                transform: none;
            }

            .scene-margin-ui__bar {
                width: var(--bar-target, 80%);
                opacity: 1;
            }

            .order-story .order-receipt--animated .order-receipt__line,
            .order-story .order-receipt--animated .order-receipt__result {
                opacity: 1;
                transform: none;
                animation: none !important;
            }
        }

        [data-theme="dark"] .landing-wrapper--poster {
            background:
                radial-gradient(circle at 80% 8%, color-mix(in oklab, var(--color-accent-primary) 16%, transparent), transparent 30rem),
                radial-gradient(circle at 12% 38%, rgba(167, 139, 250, 0.12), transparent 28rem),
                #020617;
        }

        [data-theme="dark"] .poster-kicker,
        [data-theme="dark"] .start-strip__steps span {
            background: rgba(30, 41, 59, 0.78);
            border-color: color-mix(in oklab, var(--primary-400) 30%, transparent);
            color: #bfdbfe;
        }

        [data-theme="dark"] .poster-hero__copy h1,
        [data-theme="dark"] .scene-reel__intro h2,
        [data-theme="dark"] .order-story__copy h2,
        [data-theme="dark"] .product-stage__intro h2,
        [data-theme="dark"] .decision-board__title h2,
        [data-theme="dark"] .chart-poster__copy h2,
        [data-theme="dark"] .pricing-poster__head h2 {
            color: var(--color-text-primary);
        }

        [data-theme="dark"] .poster-hero__copy p,
        [data-theme="dark"] .order-story__copy p,
        [data-theme="dark"] .product-stage__intro p,
        [data-theme="dark"] .chart-poster__copy p,
        [data-theme="dark"] .stage-tile__copy p,
        [data-theme="dark"] .decision-board__grid p {
            color: var(--color-text-secondary);
        }

        [data-theme="dark"] .order-receipt,
        [data-theme="dark"] .stage-tile,
        [data-theme="dark"] .decision-board__grid article,
        [data-theme="dark"] .chart-poster__chart,
        [data-theme="dark"] .stage-orders-ui__summary div,
        [data-theme="dark"] .stage-card-ui__metric,
        [data-theme="dark"] .stage-orders-ui__table,
        [data-theme="dark"] .stage-card-ui__funnel {
            background: rgba(30, 41, 59, 0.92);
            border-color: var(--color-border-default);
            box-shadow: 0 28px 88px rgba(0, 0, 0, 0.34);
        }

        [data-theme="dark"] .order-receipt__line,
        [data-theme="dark"] .stage-tile__copy h3,
        [data-theme="dark"] .decision-board__grid h3,
        [data-theme="dark"] .stage-orders-ui__summary strong,
        [data-theme="dark"] .stage-card-ui__metric strong {
            color: var(--color-text-primary);
        }

        [data-theme="dark"] .orders-iso__table {
            background:
                linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.94)),
                #0f172a;
            border-color: rgba(148, 163, 184, 0.22);
        }

        [data-theme="dark"] .orders-iso__top {
            color: var(--color-text-primary);
        }

        [data-theme="dark"] .orders-iso__head {
            background: rgba(37, 99, 235, 0.22);
            color: #bfdbfe;
        }

        [data-theme="dark"] .orders-iso__row {
            background: rgba(15, 23, 42, 0.72);
            color: var(--color-text-secondary);
            box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
        }

        [data-theme="dark"] .stage-orders-ui {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.9));
        }

        [data-theme="dark"] .stage-orders-ui__summary span,
        [data-theme="dark"] .stage-card-ui__metric span,
        [data-theme="dark"] .stage-card-ui__funnel div,
        [data-theme="dark"] .stage-orders-ui__table-row {
            color: var(--color-text-secondary);
        }

        [data-theme="dark"] .stage-orders-ui__table-row:first-child {
            background: rgba(37, 99, 235, 0.18);
            color: #bfdbfe;
        }

        [data-theme="dark"] .stage-card-ui__alert {
            background: rgba(154, 52, 18, 0.24);
            color: #fdba74;
        }

        [data-theme="dark"] .decision-board__grid article.decision-board__card--feature {
            background:
                radial-gradient(circle at 88% 18%, rgba(37, 99, 235, 0.18), transparent 34%),
                rgba(30, 41, 59, 0.92);
        }

        [data-theme="dark"] .decision-card-analytics__score,
        [data-theme="dark"] .decision-card-analytics__list div {
            background: rgba(15, 23, 42, 0.72);
            color: #bfdbfe;
        }

        [data-theme="dark"] .decision-card-analytics__score small {
            color: var(--color-text-secondary);
        }

        [data-theme="dark"] .order-receipt__line {
            border-bottom-color: var(--color-border-default);
        }

        [data-theme="dark"] .order-receipt__line strong {
            color: #fca5a5;
        }

        [data-theme="dark"] .order-receipt__line--total strong {
            color: var(--color-text-primary);
        }

        [data-theme="dark"] .stage-tile--dark {
            background: #020617;
        }

        [data-theme="dark"] .stage-tile--gradient {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.96), rgba(49, 46, 129, 0.75));
        }

        [data-theme="dark"] .start-strip {
            background: #0f172a;
        }

        [data-theme="dark"] .landing-nav a {
            color: var(--color-text-secondary);
        }

        [data-theme="dark"] .landing-nav a:hover {
            color: #93c5fd;
        }

        [data-theme="dark"] .kpi-pill {
            background: rgba(30, 41, 59, 0.92);
            border-color: var(--color-border-default);
            box-shadow: 0 20px 56px rgba(0, 0, 0, 0.35);
        }

        [data-theme="dark"] .kpi-pill__value {
            color: var(--color-text-primary);
        }

        [data-theme="dark"] .kpi-pill__label,
        [data-theme="dark"] .kpi-pill__hint {
            color: var(--color-text-secondary);
        }

        [data-theme="dark"] .scene-reel__lead {
            color: var(--color-text-secondary);
        }

        [data-theme="dark"] .scene-panel {
            background: rgba(30, 41, 59, 0.94);
            border-color: var(--color-border-default);
            box-shadow: 0 28px 80px rgba(0, 0, 0, 0.4);
        }

        [data-theme="dark"] .scene-panel--risk {
            border-color: rgba(248, 113, 113, 0.35);
        }

        [data-theme="dark"] .scene-panel__viewport {
            background: linear-gradient(160deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 58, 138, 0.35) 100%);
            border-color: color-mix(in oklab, var(--primary-400) 25%, transparent);
        }

        [data-theme="dark"] .scene-panel__viewport--risk {
            background: linear-gradient(160deg, rgba(69, 10, 10, 0.45) 0%, rgba(30, 41, 59, 0.9) 100%);
        }

        [data-theme="dark"] .scene-panel__meta h3 {
            color: var(--color-text-primary);
        }

        [data-theme="dark"] .scene-panel__meta p,
        [data-theme="dark"] .scene-margin-ui__label,
        [data-theme="dark"] .scene-margin-ui__title {
            color: var(--color-text-secondary);
        }

        [data-theme="dark"] .scene-sync-ui__row {
            background: rgba(15, 23, 42, 0.85);
            border-color: rgba(148, 163, 184, 0.22);
            color: var(--color-text-secondary);
        }

        [data-theme="dark"] .scene-risk-ui__row {
            background: rgba(15, 23, 42, 0.88);
            border-color: rgba(251, 146, 60, 0.3);
            color: #fecaca;
        }

        @media (max-width: 1180px) {
            .poster-hero,
            .money-ribbon,
            .order-story,
            .product-stage__intro,
            .decision-board,
            .chart-poster {
                grid-template-columns: 1fr;
            }

            .scene-reel__track {
                grid-template-columns: 1fr;
            }

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

            .poster-hero {
                min-height: auto;
            }

            .poster-hero__visual {
                min-height: 520px;
            }

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

            .orders-iso {
                min-height: 460px;
            }

            .orders-iso__table {
                transform: rotateX(52deg) rotateZ(-28deg) translateY(-8px) scale(0.92);
            }

            .money-flow__operator {
                min-height: 28px;
                transform: rotate(90deg);
            }

            .decision-board__title {
                position: static;
            }
        }

        @media (max-width: 900px) {
            .landing-wrapper--poster .landing-header-content {
                grid-template-columns: 1fr auto;
            }

            .landing-wrapper--poster .landing-nav {
                display: none;
            }

            .poster-hero__copy h1 {
                font-size: clamp(2rem, 10vw + 0.5rem, 3.15rem);
            }

            .poster-hero__visual {
                min-height: 430px;
            }

            .poster-dashboard-card {
                transform: none;
            }

            .hero-dashboard-card {
                animation: none;
            }

            .poster-dashboard-grid,
            .start-strip__steps,
            .pricing-poster__cards {
                grid-template-columns: 1fr;
            }

            .stage-wall {
                grid-template-columns: 1fr;
            }

            .stage-tile,
            .stage-tile--wide {
                grid-column: auto;
                min-height: auto;
            }

            .decision-board__grid article {
                grid-template-columns: 1fr;
            }

            .decision-board__grid article.decision-board__card--feature,
            .decision-card-analytics {
                grid-template-columns: 1fr;
            }

            .pricing-poster__head {
                display: grid;
            }

            .pricing-poster .landing-pricing-card.featured,
            .pricing-poster .landing-pricing-card.featured:hover {
                transform: none;
            }
        }

        @media (max-width: 560px) {
            .landing-header-content {
                padding: 0 var(--space-md);
            }

            .landing-header-content > div {
                gap: 8px !important;
            }

            .landing-header .btn {
                padding: 10px 12px;
                font-size: 0.88rem;
            }

            .poster-actions {
                display: grid;
            }

            .poster-actions .btn {
                width: 100%;
            }

            .poster-dashboard-grid {
                display: grid;
            }

            .stage-screen {
                min-height: 230px;
            }

            .orders-iso {
                min-height: auto;
                overflow-x: auto;
                padding-bottom: 24px;
            }

            .orders-iso__table {
                width: 720px;
                margin-left: 0;
                transform: none;
            }

            .orders-iso__badge {
                position: relative;
                right: auto;
                bottom: auto;
                margin-top: 18px;
            }

            .stage-orders-ui__summary,
            .stage-card-ui__metrics,
            .stage-orders-ui__split {
                grid-template-columns: 1fr;
            }

            .stage-orders-ui__table {
                overflow-x: auto;
            }

            .stage-orders-ui__table-row {
                min-width: 620px;
            }

            .stage-abc {
                flex-wrap: wrap;
            }
        }

        /* Stable landing composition v2: final layout authority */
        .landing-wrapper--poster {
            --poster-page-x: clamp(18px, 4vw, 48px);
        }

        .landing-wrapper--poster .landing-section {
            box-sizing: border-box;
        }

        .poster-hero {
            grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr);
            min-height: auto;
            padding-top: clamp(56px, 6vw, 88px) !important;
            padding-bottom: clamp(56px, 7vw, 96px) !important;
        }

        .poster-hero__copy h1,
        .money-ribbon__headline h2,
        .scene-reel__intro h2,
        .order-story__copy h2,
        .product-stage__intro h2,
        .decision-board__title h2,
        .chart-poster__copy h2,
        .start-strip h2,
        .pricing-poster__head h2,
        .final-poster h2 {
            max-width: var(--poster-heading-measure);
            line-height: var(--poster-line-display);
            letter-spacing: -0.026em;
        }

        .poster-hero__visual {
            min-height: 480px;
            overflow: hidden;
        }

        .poster-dashboard-card {
            width: min(100%, 520px);
            transform: rotate(-1deg);
        }

        .money-ribbon {
            grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1.18fr);
            align-items: center;
            padding-top: clamp(72px, 8vw, 118px) !important;
            padding-bottom: clamp(72px, 8vw, 118px) !important;
        }

        .money-ribbon__headline h2 {
            font-size: var(--poster-h2);
        }

        .orders-iso {
            min-height: auto;
            perspective: none;
            overflow: visible;
        }

        .orders-iso::before,
        .orders-iso::after {
            filter: blur(34px);
            opacity: 0.42;
        }

        .orders-iso__table {
            width: 100%;
            margin: 0;
            transform: rotate(-1.2deg);
            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.34);
        }

        .orders-iso__table::after {
            display: none;
        }

        .orders-iso__head,
        .orders-iso__row {
            grid-template-columns: 0.8fr 0.85fr 0.8fr 0.78fr 0.85fr 0.85fr 0.8fr;
        }

        .orders-iso__badge {
            position: relative;
            right: auto;
            bottom: auto;
            margin: 22px 0 0 auto;
            transform: rotate(1.2deg);
        }

        .money-flow {
            grid-column: 1 / -1;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            margin-top: clamp(28px, 4vw, 54px);
        }

        .money-flow__operator {
            display: none;
        }

        .money-flow__item {
            min-height: 138px;
            min-width: 0;
        }

        .order-story {
            grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
            padding-top: clamp(72px, 8vw, 112px) !important;
            padding-bottom: clamp(72px, 8vw, 112px) !important;
        }

        .order-receipt {
            transform: none;
        }

        .product-stage__intro {
            grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.72fr);
        }

        .stage-wall {
            grid-template-columns: repeat(12, minmax(0, 1fr));
            align-items: stretch;
        }

        .stage-tile,
        .stage-tile--wide {
            grid-column: span 6;
            min-height: 0;
        }

        .stage-screen {
            min-height: 300px;
        }

        .stage-orders-ui,
        .stage-card-ui {
            min-height: 0;
        }

        .stage-orders-ui__table {
            overflow: hidden;
        }

        .stage-orders-ui__table-row {
            grid-template-columns: 0.8fr 0.8fr 0.82fr 0.82fr 0.86fr 0.78fr;
        }

        .decision-board {
            grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
        }

        .decision-board__grid article,
        .decision-board__grid article.decision-board__card--feature {
            grid-template-columns: 74px minmax(0, 0.92fr) minmax(280px, 0.9fr);
            align-items: start;
        }

        .decision-card-analytics {
            min-width: 0;
        }

        .chart-poster {
            grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
        }

        .pricing-poster__cards {
            align-items: stretch;
        }

        @media (max-width: 1180px) {
            .poster-hero,
            .money-ribbon,
            .order-story,
            .product-stage__intro,
            .decision-board,
            .chart-poster {
                grid-template-columns: 1fr;
            }

            .poster-hero__visual {
                min-height: 430px;
            }

            .orders-iso__table {
                transform: none;
            }

            .orders-iso__badge {
                margin-left: 0;
                transform: none;
            }

            .decision-board__title {
                position: static;
            }
        }

        @media (max-width: 900px) {
            .money-flow,
            .stage-wall,
            .pricing-poster__cards {
                grid-template-columns: 1fr;
            }

            .stage-tile,
            .stage-tile--wide {
                grid-column: auto;
            }

            .orders-iso,
            .stage-orders-ui__table {
                overflow-x: auto;
            }

            .orders-iso__table {
                min-width: 720px;
            }

            .stage-orders-ui__table-row {
                min-width: 620px;
            }

            .decision-board__grid article,
            .decision-board__grid article.decision-board__card--feature,
            .decision-card-analytics {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 560px) {
            .landing-logo span {
                display: none;
            }

            .landing-header .btn i {
                margin-right: 0;
            }

            .landing-header .btn {
                font-size: 0;
                min-width: 42px;
            }

            .landing-header .btn i {
                font-size: 0.95rem;
            }

            .poster-dashboard-card,
            .order-receipt,
            .stage-tile,
            .chart-poster__chart {
                border-radius: 24px;
            }
        }


/* Moved from app/Views/app/ozon-performance-data.php */
.opd-field { display: flex; flex-direction: column; gap: 6px; }
.opd-field-label { font-size: var(--font-sm); color: var(--text-secondary); }
.opd-field-actions { padding-top: 1.25rem; }
.opd-hint { font-size: var(--font-sm); margin-top: var(--space-md); }
.opd-hint code { font-size: 0.85em; }
.opd-badge {
    margin-left: var(--space-sm);
    font-size: var(--font-sm);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
}
.opd-empty {
    text-align: center;
    padding: var(--space-xl);
    color: var(--text-secondary);
}
.opd-empty .ti { font-size: 2.5rem; opacity: 0.5; margin-bottom: var(--space-sm); }
.opd-table-wrap { overflow-x: auto; }
.opd-fact-totals-summary {
    margin-top: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg, rgba(255,255,255,0.03));
}
.opd-fact-totals-summary-inner { max-width: 100%; }
.opd-fact-totals-title {
    margin-bottom: var(--space-md);
    font-size: var(--font-base);
}
.opd-fact-totals-title .opd-fact-totals-hint {
    font-weight: 400;
    margin-left: 0.35em;
}
.opd-fact-totals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-md) var(--space-lg);
    margin: 0;
}
.opd-fact-totals-item {
    margin: 0;
}
.opd-fact-totals-item dt {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin: 0 0 4px 0;
    font-weight: 500;
}
.opd-fact-totals-item dd {
    margin: 0;
    font-weight: 600;
    font-size: var(--font-base);
}
.opd-fact-totals-drr-note {
    font-weight: 400;
    font-size: var(--font-sm);
    white-space: nowrap;
}
.opd-metric-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.2rem;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9em;
    line-height: 1;
    vertical-align: middle;
}
.opd-metric-info:hover,
.opd-metric-info:focus-visible {
    color: var(--color-accent-primary);
    outline: none;
}
/* Мгновенная подсказка (без задержки нативного title — атрибут title не используем) */
.opd-metric-info[data-tooltip] {
    position: relative;
}
.opd-metric-info[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 6px);
    z-index: 100;
    padding: 6px 10px;
    min-width: 0;
    max-width: min(280px, 70vw);
    width: max-content;
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-default);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    box-shadow: var(--shadow-md);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: none;
}
.opd-metric-info[data-tooltip]:hover::after,
.opd-metric-info[data-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
}
.opd-table th { white-space: nowrap; }
.opd-table .opd-phrase { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opd-table .opd-src { max-width: 120px; font-size: 0.85em; overflow: hidden; text-overflow: ellipsis; }
.opd-muted { color: var(--text-secondary); font-size: 0.9em; }

.opd-sku-analysis {
    --opd-verdict-border: var(--color-border-default);
    --opd-verdict-muted: var(--color-text-muted);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--opd-verdict-border);
}

.opd-sku-analysis__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.opd-sku-analysis__overline {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--opd-verdict-muted);
}

.opd-sku-analysis__lead {
    margin: 0.35rem 0 0;
    font-size: var(--font-sm);
    line-height: 1.45;
    color: var(--color-text-secondary);
    max-width: 52rem;
}

.opd-sku-analysis__note {
    margin: 0;
    font-size: var(--font-xs);
    color: var(--opd-verdict-muted);
}

.opd-sku-analysis__counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: var(--space-md);
}

.opd-sku-analysis__count {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--opd-verdict-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-inset);
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: var(--font-sm);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.opd-sku-analysis__count:hover {
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
}

.opd-sku-analysis__count.is-active {
    border-color: color-mix(in oklab, var(--accent-blue, #3b82f6) 45%, var(--opd-verdict-border));
    background: color-mix(in oklab, var(--accent-blue, #3b82f6) 8%, var(--color-bg-surface));
    color: var(--color-text-primary);
}

.opd-sku-analysis__count strong {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}

.opd-sku-analysis__clear {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--accent-blue, #3b82f6);
    text-decoration: none;
}

.opd-sku-analysis__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
}

.opd-sku-analysis__card {
    border: 1px solid var(--opd-verdict-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-inset);
    overflow: hidden;
}

.opd-sku-analysis__card-head {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--opd-verdict-border);
}

.opd-sku-analysis__card-head h3 {
    margin: 0;
    font-size: var(--font-sm);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.opd-sku-analysis__card-head p {
    margin: 0.2rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.35;
    color: var(--opd-verdict-muted);
}

.opd-sku-analysis__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.opd-sku-analysis__link {
    display: block;
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid color-mix(in oklab, var(--opd-verdict-border) 80%, transparent);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.opd-sku-analysis__link:last-child {
    border-bottom: none;
}

.opd-sku-analysis__link:hover {
    background: color-mix(in oklab, var(--accent-blue, #3b82f6) 6%, var(--color-bg-surface));
}

.opd-sku-analysis__link-name {
    display: block;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.opd-sku-analysis__link-meta {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.6875rem;
    line-height: 1.35;
    color: var(--opd-verdict-muted);
}

.opd-sku-analysis__card--scale { border-top: 3px solid color-mix(in oklab, var(--color-accent-success, #30b566) 70%, var(--opd-verdict-border)); }
.opd-sku-analysis__card--hold { border-top: 3px solid var(--opd-verdict-border); }
.opd-sku-analysis__card--cut { border-top: 3px solid color-mix(in oklab, var(--color-accent-danger, #ef4444) 65%, var(--opd-verdict-border)); }
.opd-sku-analysis__card--check { border-top: 3px solid color-mix(in oklab, var(--color-accent-warning, #f59e0b) 65%, var(--opd-verdict-border)); }
.opd-sku-analysis__card--insufficient { border-top: 3px solid color-mix(in oklab, var(--opd-verdict-muted) 50%, var(--opd-verdict-border)); }

.opd-verdict-pill {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-pill, 999px);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.opd-verdict-pill--scale {
    color: #15803d;
    background: color-mix(in oklab, var(--color-accent-success, #30b566) 14%, transparent);
    border-color: color-mix(in oklab, var(--color-accent-success, #30b566) 28%, transparent);
}

.opd-verdict-pill--hold {
    color: var(--color-text-secondary);
    background: var(--color-bg-inset);
    border-color: var(--color-border-default);
}

.opd-verdict-pill--cut {
    color: #b91c1c;
    background: color-mix(in oklab, var(--color-accent-danger, #ef4444) 12%, transparent);
    border-color: color-mix(in oklab, var(--color-accent-danger, #ef4444) 26%, transparent);
}

.opd-verdict-pill--check {
    color: #b45309;
    background: color-mix(in oklab, var(--color-accent-warning, #f59e0b) 12%, transparent);
    border-color: color-mix(in oklab, var(--color-accent-warning, #f59e0b) 26%, transparent);
}

.opd-verdict-pill--insufficient {
    color: var(--color-text-muted);
    background: var(--color-bg-inset);
    border-color: var(--color-border-default);
}

.opd-fact-verdict-cell {
    min-width: 7.5rem;
}

.opd-fact-verdict-reasons {
    margin: 0 0 0.65rem;
    padding-left: 1.1rem;
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
}

.opd-fact-verdict-reasons li + li {
    margin-top: 0.2rem;
}

.opd-fact-group--highlight .opd-fact-group-head {
    background: color-mix(in oklab, var(--accent-blue, #3b82f6) 10%, transparent);
    transition: background 0.2s ease;
}

.opd-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.85em;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
}
.opd-pagination {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
    flex-wrap: wrap;
}
.opd-page-info { color: var(--text-secondary); font-size: var(--font-sm); }
.opd-state {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}
.opd-state--ok { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.opd-state--error { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.opd-state--pending, .opd-state--polling { background: rgba(234, 179, 8, 0.15); color: #ca8a04; }
.opd-uuid { max-width: 220px; overflow: hidden; text-overflow: ellipsis; font-size: 0.8rem; }
.opd-err { max-width: 200px; font-size: 0.85em; color: var(--text-secondary); }
.opd-table--jobs td { vertical-align: top; }
.opd-pill--cpc_from_cpo {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.3);
    color: #818cf8;
}
.opd-sync-card .opd-sync-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    gap: var(--space-md);
}
.opd-sync-form-get {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-md);
    flex: 0 1 auto;
}
.opd-sync-period-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-md);
}
.opd-sync-period-grid .opd-field {
    min-width: 11rem;
}
.opd-clear-form {
    display: flex;
    align-items: flex-end;
}
.opd-clear-data-btn {
    background: #dc2626;
    border: 1px solid #b91c1c;
    color: #ffffff;
}
.opd-clear-data-btn:hover {
    background: #b91c1c;
    border-color: #991b1b;
    color: #ffffff;
}
.opd-clear-data-btn:focus-visible {
    outline: 2px solid rgba(239, 68, 68, 0.6);
    outline-offset: 2px;
}
.opd-sync-card .opd-sync-msg { margin-bottom: var(--space-md); }
.opd-cooldown {
    display: block;
    margin-top: var(--space-sm);
    font-size: var(--font-sm);
    color: var(--text-secondary);
}


/* Moved from app/Views/app/sales-geography.php */
.sales-geo-map-panel {
    --geo-stripe-border: var(--color-border-default);
    --geo-stripe-inset: var(--color-bg-inset);
    --geo-stripe-muted: var(--color-text-muted);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    align-items: stretch;
    margin-top: var(--space-lg);
    border: 1px solid var(--geo-stripe-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(50, 50, 93, 0.04);
}

.sales-geo-map-panel__map-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--geo-stripe-inset);
}

.sales-geo-map-panel__stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-left: 1px solid var(--geo-stripe-border);
    background: var(--color-bg-surface);
}

.sales-geo-map-panel__overline {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--geo-stripe-muted);
}

.sales-geo-map-panel__sheet {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--geo-stripe-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.sales-geo-stat-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--geo-stripe-border);
}

.sales-geo-stat-row:last-child {
    border-bottom: none;
}

.sales-geo-stat-row__label {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--geo-stripe-muted);
}

.sales-geo-stat-row__value {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
    line-height: 1.2;
}

.sales-geo-map {
    flex: 1 1 auto;
    min-height: 360px;
    height: 100%;
    width: 100%;
    border-radius: 0;
    overflow: hidden;
    border: none;
    background: var(--geo-stripe-inset);
}

.sales-geo-map-empty {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    padding: var(--space-xl);
    color: var(--geo-stripe-muted);
    text-align: center;
    font-size: var(--font-sm);
    background: var(--geo-stripe-inset);
}

    .sales-geo-popup {
        font-family: inherit;
        min-width: 220px;
    }

    .sales-geo-popup__title {
        font-weight: 700;
        margin-bottom: 6px;
    }

    .sales-geo-popup__row {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin-top: 4px;
    }

    .sales-geo-table-section .section-card-inner {
        padding: 0;
        overflow: hidden;
    }

    .sales-geo-table-header {
        padding: var(--space-lg) var(--space-lg) var(--space-md);
        border-bottom: 1px solid var(--color-border-default);
    }

    .sales-geo-table-header h3 {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        margin: 0;
        color: var(--color-text-primary);
        font-size: var(--font-lg);
        font-weight: 700;
    }

    .sales-geo-table-header h3 i {
        color: var(--accent-blue);
    }

    .sales-geo-table-header .section-subtitle {
        margin-top: var(--space-xs);
    }

    .sales-geo-table-container {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        max-height: none;
    }

    .sales-geo-table-container table tbody td {
        vertical-align: top;
    }

    .sales-geo-product-cell {
        min-width: 260px;
    }

    .sales-geo-product-name {
        color: var(--color-text-primary);
        font-weight: 600;
        line-height: 1.35;
    }

    .sales-geo-product-meta {
        margin-top: 4px;
        color: var(--color-text-secondary);
        font-size: var(--font-xs);
    }

    @media (max-width: 1100px) {
        .sales-geo-map-panel {
            grid-template-columns: 1fr;
        }

        .sales-geo-map-panel__stats {
            border-left: none;
            border-top: 1px solid var(--geo-stripe-border);
        }

        .sales-geo-map-panel__sheet {
            flex-direction: row;
        }

        .sales-geo-stat-row {
            flex: 1 1 0;
            border-bottom: none;
            border-right: 1px solid var(--geo-stripe-border);
        }

        .sales-geo-stat-row:last-child {
            border-right: none;
        }
    }

    @media (max-width: 640px) {
        .sales-geo-map-panel__sheet {
            flex-direction: column;
        }

        .sales-geo-stat-row {
            border-right: none;
            border-bottom: 1px solid var(--geo-stripe-border);
        }

        .sales-geo-stat-row:last-child {
            border-bottom: none;
        }
    }

/* Workbench: кластеры + отслоение товаров */
.sales-geo-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.sales-geo-workbench__master {
    min-width: 0;
    padding: var(--space-lg);
    border-right: 1px solid var(--color-border-default);
    background: var(--color-bg-surface);
}

.sales-geo-workbench__detail {
    position: relative;
    min-width: 0;
    margin: var(--space-md);
    margin-left: 0;
    padding: var(--space-lg);
    border: 1px solid var(--color-border-default);
    border-left: 3px solid color-mix(in oklab, var(--color-border-strong, #c9d2dc) 80%, var(--color-border-default));
    border-radius: var(--radius-md);
    background: var(--color-bg-inset);
    box-shadow:
        0 1px 2px rgba(50, 50, 93, 0.05),
        0 4px 12px rgba(50, 50, 93, 0.04);
}

.sales-geo-workbench.is-cluster-selected .sales-geo-workbench__detail {
    border-left-color: color-mix(in oklab, var(--accent-blue, #3b82f6) 65%, var(--color-border-default));
    background: color-mix(in oklab, var(--accent-blue, #3b82f6) 4%, var(--color-bg-inset));
    box-shadow:
        0 1px 2px rgba(50, 50, 93, 0.06),
        0 8px 20px rgba(50, 50, 93, 0.08);
}

.sales-geo-workbench.is-cluster-selected .sales-geo-workbench__master {
    border-right-color: color-mix(in oklab, var(--accent-blue, #3b82f6) 18%, var(--color-border-default));
}

.sales-geo-cluster-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    padding: 0.65rem 0.9rem;
    border: 1px solid color-mix(in oklab, var(--accent-blue, #3b82f6) 28%, var(--color-border-default));
    border-radius: var(--radius-sm);
    background: color-mix(in oklab, var(--accent-blue, #3b82f6) 8%, var(--color-bg-surface));
}

.sales-geo-cluster-context__body {
    min-width: 0;
}

.sales-geo-cluster-context__eyebrow {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.sales-geo-cluster-context__name {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--font-md);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    line-height: 1.3;
    word-break: break-word;
}

.sales-geo-cluster-context__clear {
    flex-shrink: 0;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--accent-blue, #3b82f6);
    text-decoration: none;
    white-space: nowrap;
}

.sales-geo-cluster-context__clear:hover {
    text-decoration: underline;
}

.sales-geo-panel--detail {
    min-height: 0;
}

.sales-geo-workbench .sales-geo-panel {
    min-height: 24rem;
    max-height: min(72vh, 52rem);
}

.sales-geo-workbench .sales-geo-block-header h3 {
    font-size: var(--font-md);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.sales-geo-workbench .sales-geo-block-header h3 .ti,
.sales-geo-workbench .sales-geo-block-header h3 i[class*="ti-"] {
    color: var(--color-text-muted);
    opacity: 0.85;
}

/* Два блока в ряд: кластеры | товары (legacy alias) */
.sales-geo-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: stretch;
    width: 100%;
}

.content-section.sales-geo-main-grid {
    margin-bottom: var(--space-xl);
}

.sales-geo-main-grid__col {
    min-width: 0;
}

.sales-geo-panel {
    display: flex;
    flex-direction: column;
    min-height: 28rem;
    max-height: min(72vh, 52rem);
    overflow: hidden;
}

.sales-geo-panel__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.15rem;
    -webkit-overflow-scrolling: touch;
}

.sales-geo-block-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    justify-content: flex-end;
}

.sales-geo-view-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.2rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-default);
    background: color-mix(in oklab, var(--color-bg-surface) 90%, var(--color-border-default));
    height: 36px;
    align-items: stretch;
    box-sizing: border-box;
}

.sales-geo-view-tab {
    display: inline-flex;
    align-items: center;
    padding: 0 0.65rem;
    border-radius: calc(var(--radius-sm) - 2px);
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    height: 100%;
}

.sales-geo-view-tab:hover:not(.is-disabled) {
    color: var(--color-text-primary);
    background: color-mix(in oklab, var(--accent-blue, #3b82f6) 10%, transparent);
}

.sales-geo-view-tab.is-active {
    color: var(--color-text-primary);
    background: color-mix(in oklab, var(--accent-blue, #3b82f6) 16%, var(--color-bg-surface));
    box-shadow: var(--shadow-sm);
}

.sales-geo-view-tab.is-disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

.sales-geo-print-btn {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    box-sizing: border-box;
    padding: 0 16px;
}

@media print {
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt;
    }

    .app-wrapper {
        display: block !important;
        background: #fff !important;
    }

    .app-wrapper .main-content,
    .app-wrapper .main-content.container {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
        min-height: auto !important;
    }

    .sidebar-rail,
    .sidebar,
    .sidebar-toggle,
    .sidebar-overlay,
    .app-main-header,
    .app-header,
    .landing-header,
    .fab-container,
    .modal-overlay,
    .app-status-card,
    .app-health-menu,
    .period-selector,
    body:has(#sales-geo-products) .main-content > .content-section:not(:has(#sales-geo-products)),
    .sales-geo-map-panel,
    .sales-geo-top-clusters,
    .sales-geo-block-header__actions,
    .sales-geo-block-header__toolbar,
    .sales-geo-fallback-details,
    .sales-geo-supply-hint,
    .sales-geo-empty,
    .sales-geo-cluster-context__clear,
    .sales-geo-product-card__meta-copy,
    .alert,
    .sales-geo-cluster-item__bar,
    .sales-geo-product-card__bar,
    .sales-geo-product-cluster-row__bar,
    .sales-geo-supply-table-container {
        display: none !important;
    }

    .sales-geo-workbench {
        display: block !important;
        background: #fff !important;
    }

    .sales-geo-workbench__master {
        display: none !important;
    }

    .sales-geo-workbench__detail {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: #fff !important;
        width: 100% !important;
    }

    .sales-geo-panel,
    .sales-geo-panel__scroll {
        max-height: none !important;
        overflow: visible !important;
        height: auto !important;
    }

    .sales-geo-cluster-item,
    .sales-geo-product-card,
    .sales-geo-product-cluster-row {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .sales-geo-cluster-item,
    .sales-geo-product-card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        margin-bottom: 0.75rem !important;
        background: #fff !important;
    }

    .sales-geo-cluster-item *,
    .sales-geo-product-card * {
        color: #000 !important;
        text-decoration: none !important;
    }

    .content-section {
        margin-bottom: 1.5rem !important;
        padding: 0 !important;
    }

    .section-card {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        background: #fff !important;
    }

        .sales-geo-print-header {
            display: block !important;
            margin-bottom: 20px !important;
            padding-bottom: 10px !important;
            border-bottom: 2px solid #000 !important;
        }

        .sales-geo-print-header h2 {
            margin: 0 0 5px 0 !important;
            font-size: 16pt !important;
        }

        .sales-geo-print-header__meta {
            font-size: 11pt !important;
            color: #444 !important;
        }

        .sales-geo-cluster-context,
        .sales-geo-block-header {
            display: none !important;
        }

        .sales-geo-product-list--cluster-mode,
        .sales-geo-product-list {
            display: flex !important;
            flex-direction: column !important;
            gap: 2px !important;
        }

        .sales-geo-product-card {
            border: none !important;
            border-bottom: 1px solid #ccc !important;
            border-radius: 0 !important;
            padding: 8px 0 !important;
            margin: 0 !important;
            background: transparent !important;
        }

        .sales-geo-product-card__main {
            align-items: center !important;
            gap: 8px !important;
        }

        .sales-geo-product-card__thumb,
        .sales-geo-product-card__thumb-placeholder,
        .product-thumbnail {
            display: none !important;
        }

        .sales-geo-product-card__info {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: space-between !important;
            width: 100% !important;
            gap: 12px !important;
        }

        .sales-geo-product-card__name {
            font-size: 10pt !important;
            flex: 2 !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            font-weight: bold !important;
        }

        .sales-geo-product-card__meta {
            font-size: 9pt !important;
            flex: 1 !important;
            margin: 0 !important;
            color: #555 !important;
        }

        .sales-geo-product-card__totals {
            font-size: 10pt !important;
            flex: 1 !important;
            margin: 0 !important;
            text-align: right !important;
            font-weight: bold !important;
        }

        .sales-geo-product-card__clusters {
            display: block !important;
            margin-top: 4px !important;
            padding-left: 10px !important;
            border-left: 2px solid #eee !important;
        }

        .sales-geo-product-cluster-row {
            display: flex !important;
            justify-content: space-between !important;
            font-size: 9pt !important;
            padding: 2px 0 !important;
            border: none !important;
            margin: 0 !important;
        }

        .sales-geo-product-cluster-row__name {
            flex: 2 !important;
            color: #444 !important;
        }

        .sales-geo-product-cluster-row__stats {
            flex: 1 !important;
            text-align: right !important;
            color: #444 !important;
        }
    }

.sales-geo-product-card__bar {
    display: block;
    height: 5px;
    margin: 0.35rem 0;
    border-radius: var(--radius-full, 999px);
    background: color-mix(in oklab, var(--color-border-default) 75%, transparent);
    overflow: hidden;
}

.sales-geo-product-card__bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: color-mix(in oklab, var(--accent-blue, #3b82f6) 75%, #8b5cf6);
}

.sales-geo-popup__hint {
    margin: 0.5rem 0 0;
    font-size: var(--font-sm);
}

.sales-geo-popup__hint a {
    color: var(--accent-blue, #3b82f6);
    font-weight: 600;
}

@media (max-width: 1200px) {
    .sales-geo-workbench {
        grid-template-columns: 1fr;
    }

    .sales-geo-workbench__master {
        border-right: none;
        border-bottom: 1px solid var(--color-border-default);
    }

    .sales-geo-workbench__detail {
        margin: 0;
        border-left-width: 1px;
        border-radius: 0;
        box-shadow: none;
    }

    .sales-geo-workbench.is-cluster-selected .sales-geo-workbench__detail {
        border-left-width: 3px;
        box-shadow: none;
    }

    .sales-geo-main-grid {
        grid-template-columns: 1fr;
    }

    .sales-geo-panel {
        max-height: none;
        min-height: 0;
    }
}

.sales-geo-top-clusters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.sales-geo-top-cluster-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-full, 999px);
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-sm);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.sales-geo-top-cluster-chip:hover {
    border-color: color-mix(in oklab, var(--accent-blue, #3b82f6) 40%, var(--color-border-default));
    box-shadow: var(--shadow-sm);
}

.sales-geo-top-cluster-chip.is-active {
    border-color: color-mix(in oklab, var(--accent-blue, #3b82f6) 55%, var(--color-border-default));
    background: color-mix(in oklab, var(--accent-blue, #3b82f6) 10%, var(--color-bg-surface));
}

.sales-geo-top-cluster-chip__rank {
    font-weight: 800;
    color: var(--accent-blue, #3b82f6);
}

.sales-geo-top-cluster-chip__share {
    font-weight: 700;
    color: var(--color-text-muted);
}

.sales-geo-block-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    flex-shrink: 0;
}

.sales-geo-block-header--clusters {
    flex-direction: column;
    align-items: stretch;
}

.sales-geo-block-header__intro {
    min-width: 0;
}

.sales-geo-block-header__toolbar {
    width: 100%;
}

.sales-geo-block-header--clusters .sales-geo-sort-tabs {
    width: 100%;
}

.sales-geo-block-header h3 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--color-text-primary);
}

.sales-geo-block-header h3 i {
    color: var(--accent-blue, #3b82f6);
}

.sales-geo-block-header .section-subtitle {
    margin: var(--space-xs) 0 0;
}

.sales-geo-sort-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.sales-geo-sort-tab {
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    font-size: var(--font-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sales-geo-sort-tab:hover {
    color: var(--color-text-primary);
    border-color: color-mix(in oklab, var(--accent-blue, #3b82f6) 35%, var(--color-border-default));
}

.sales-geo-sort-tab.is-active {
    color: var(--color-text-primary);
    border-color: color-mix(in oklab, var(--accent-blue, #3b82f6) 50%, var(--color-border-default));
    background: color-mix(in oklab, var(--accent-blue, #3b82f6) 12%, var(--color-bg-surface));
}

.sales-geo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xl);
    color: var(--color-text-muted);
    text-align: center;
}

.sales-geo-empty i {
    font-size: 2rem;
    opacity: 0.65;
}

.sales-geo-cluster-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sales-geo-cluster-item {
    display: block;
    margin: 0 0 var(--space-sm);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sales-geo-cluster-item:hover {
    border-color: color-mix(in oklab, var(--accent-blue, #3b82f6) 30%, var(--color-border-default));
    box-shadow: var(--shadow-sm);
}

.sales-geo-cluster-item.is-active {
    border-color: color-mix(in oklab, var(--accent-blue, #3b82f6) 55%, var(--color-border-default));
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent-blue, #3b82f6) 25%, transparent);
}

.sales-geo-cluster-item:last-child {
    margin-bottom: 0;
}

.sales-geo-cluster-item__link {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    color: inherit;
    text-decoration: none;
}

.sales-geo-cluster-item__rank {
    flex-shrink: 0;
    width: 2rem;
    font-size: var(--font-lg);
    font-weight: 800;
    color: var(--accent-blue, #3b82f6);
    line-height: 1.2;
}

.sales-geo-cluster-item__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sales-geo-cluster-item__title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.sales-geo-cluster-item__name {
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
}

.sales-geo-cluster-item__share {
    flex-shrink: 0;
    font-weight: 800;
    font-size: var(--font-lg);
    color: var(--color-text-primary);
}

.sales-geo-cluster-item__location {
    font-size: var(--font-sm);
    color: var(--color-text-muted);
}

.sales-geo-cluster-item__bar {
    display: block;
    height: 6px;
    border-radius: var(--radius-full, 999px);
    background: color-mix(in oklab, var(--color-border-default) 80%, transparent);
    overflow: hidden;
}

.sales-geo-cluster-item__bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-blue, #3b82f6), color-mix(in oklab, var(--accent-blue, #3b82f6) 70%, #8b5cf6));
}

.sales-geo-cluster-item__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
}

.sales-geo-filter-clear {
    color: var(--accent-blue, #3b82f6);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sales-geo-product-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sales-geo-product-card {
    display: block;
    margin: 0 0 var(--space-md);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    padding: var(--space-md);
}

.sales-geo-product-card:last-child {
    margin-bottom: 0;
}

.sales-geo-product-card__main {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.sales-geo-product-card__thumb {
    flex-shrink: 0;
    width: 54px;
}

.sales-geo-product-card__thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 74px;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.35rem;
}

.sales-geo-product-card__thumb-placeholder.hidden {
    display: none;
}

.sales-geo-product-card__info {
    flex: 1;
    min-width: 0;
}

.sales-geo-product-card__name {
    font-size: var(--font-xs);
    color: var(--color-text-secondary);
    line-height: 1.35;
}

.sales-geo-product-card__meta {
    margin-top: 0.25rem;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.sales-geo-product-card__meta-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: color 0.15s ease;
    padding: 0.15rem;
    border-radius: var(--radius-sm);
}

.sales-geo-product-card__meta-copy:hover {
    color: var(--color-text-primary);
    background: color-mix(in oklab, var(--color-bg-surface) 50%, var(--color-border-default));
}

.sales-geo-product-card__totals {
    margin-top: 1rem;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.sales-geo-product-card__clusters {
    list-style: none;
    margin: var(--space-md) 0 0;
    padding: var(--space-md) 0 0;
    border-top: 1px solid var(--color-border-default);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sales-geo-product-cluster-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) auto;
    gap: var(--space-sm);
    align-items: center;
    font-size: var(--font-sm);
}

.sales-geo-product-cluster-row__name {
    color: var(--color-text-primary);
    font-weight: 600;
    line-height: 1.25;
}

.sales-geo-product-cluster-row__bar {
    height: 5px;
    border-radius: var(--radius-full, 999px);
    background: color-mix(in oklab, var(--color-border-default) 75%, transparent);
    overflow: hidden;
}

.sales-geo-product-cluster-row__bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: color-mix(in oklab, var(--accent-blue, #3b82f6) 75%, #8b5cf6);
}

.sales-geo-product-cluster-row__stats {
    white-space: nowrap;
    color: var(--color-text-secondary);
    font-weight: 600;
    text-align: right;
}

.sales-geo-fallback-details {
    margin-bottom: var(--space-lg);
}

.sales-geo-fallback-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.sales-geo-fallback-summary::-webkit-details-marker {
    display: none;
}

.sales-geo-fallback-details[open] .sales-geo-fallback-chevron {
    transform: rotate(180deg);
}

.sales-geo-fallback-chevron {
    transition: transform 0.2s ease;
}

.sales-geo-fallback-panel {
    margin-top: var(--space-sm);
    border-top: none;
}

@media (max-width: 768px) {
    .sales-geo-product-cluster-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .sales-geo-product-cluster-row__stats {
        text-align: left;
    }

    .sales-geo-block-header {
        flex-direction: column;
    }
}

@media (max-width: 960px) {
    .sales-geo-map-panel__map-head .section-subtitle {
        display: none;
    }
}

.sales-geo-supply-hint {
    margin-top: var(--space-3);
}

.sales-geo-supply-meta {
    margin: 0 0 var(--space-3);
}

.sales-geo-supply-table-container {
    margin-top: var(--space-2);
    max-height: min(70vh, 720px);
    overflow: auto;
}

.sales-geo-supply-table th.text-right,
.sales-geo-supply-table td.text-right {
    white-space: nowrap;
}


/* Moved from app/Views/app/wb/dashboard.php */
/* Стили для агрегированной таблицы WB */
/* Убрать цветовую стилизацию для всех столбцов кроме "Итого" */
.table-container table tbody td:not(.income) {
    color: var(--text-primary) !important;
}

.table-container table thead th:not(.income) {
    color: var(--text-secondary) !important;
}

/* Столбец "Сумма продажи" - жирный шрифт */
.table-container table thead th.sales-amount-header,
.table-container table tbody td.sales-amount-cell {
    font-weight: 700 !important;
}

/* Столбец "Итого" - зеленый цвет (оставляем класс income) */
.table-container table thead th.income,
.table-container table tbody td.income {
    color: var(--accent-green) !important;
    font-weight: 600;
}

/* Стили для изменения ширины столбцов (как в OZON) */
#wbAggregatedTable thead th {
    position: relative;
    user-select: none;
    border-right: 1px solid rgba(148, 163, 184, 0.3);
}

#wbAggregatedTable thead th:last-child {
    border-right: none;
}

#wbAggregatedTable thead th.aggregated-col-group--money,
#wbAggregatedTable tbody td[data-column="sales_amount"] {
    border-left: 2px solid color-mix(in srgb, var(--color-border-default) 85%, var(--color-accent-primary, var(--primary-400)) 15%);
}

#wbAggregatedTable thead th.aggregated-col-group--status,
#wbAggregatedTable tbody td[data-column="status"] {
    border-left: 2px solid color-mix(in srgb, var(--color-border-default) 85%, var(--color-text-muted) 15%);
}

#wbAggregatedTable thead th.aggregated-col-group--fees,
#wbAggregatedTable tbody td[data-column="sales_commission"] {
    border-left: 2px solid color-mix(in srgb, var(--color-border-default) 85%, var(--color-accent-warning, #f59e0b) 15%);
}

/* Фиксированная раскладка таблицы для корректного изменения ширины столбцов */
#wbAggregatedTable {
    table-layout: fixed;
    width: 100%;
}

#wbAggregatedTable tbody td {
    overflow: hidden;
    vertical-align: middle;
    padding: 0.3rem 0.5rem;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#wbAggregatedTable tbody td[data-column="sales_amount"],
#wbAggregatedTable tbody td[data-column="sales_payment"],
#wbAggregatedTable tbody td[data-column="sales_commission"],
#wbAggregatedTable tbody td[data-column="acquiring_fee"],
#wbAggregatedTable tbody td[data-column="total_commission"],
#wbAggregatedTable tbody td[data-column="total"],
#wbAggregatedTable tbody td[data-column="cost_price"],
#wbAggregatedTable tbody td[data-column="quantity"],
#wbAggregatedTable tbody td[data-column="returns_payment"],
#wbAggregatedTable tbody td[data-column="logistics_cost"],
#wbAggregatedTable tbody td[data-column="storage_fee"],
#wbAggregatedTable tbody td[data-column="acceptance_fee"],
#wbAggregatedTable tbody td[data-column="penalty"],
#wbAggregatedTable tbody td[data-column="compensations"],
#wbAggregatedTable tbody td[data-column="deductions"],
#wbAggregatedTable tbody td[data-column="loyalty_cost"],
#wbAggregatedTable tbody td[data-column="loyalty_compensation"],
#wbAggregatedTable tbody td[data-column="payment_schedule_change"],
#wbAggregatedTable tbody td[data-column="corrections"] {
    white-space: nowrap;
}

#wbAggregatedTable tbody td[data-column="nm_id"],
#wbAggregatedTable tbody td[data-column="sa_name"],
#wbAggregatedTable tbody td[data-column="srid"],
#wbAggregatedTable tbody td[data-column="assembly_id"] {
    max-width: 0;
}

#wbAggregatedTable .offer-id-cell {
    display: flex;
    padding-left: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

#wbAggregatedTable .offer-id-cell .mono {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

#wbAggregatedTable .offer-id-cell .copy-btn {
    flex: 0 0 auto;
}

/* Handle для изменения ширины столбца */
#wbAggregatedTable thead th::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    z-index: 10;
    transition: background-color 0.2s;
}

#wbAggregatedTable thead th:hover::after {
    background: color-mix(in oklab, var(--color-accent-primary) 30%, transparent);
}

#wbAggregatedTable thead th.resizing::after {
    background: color-mix(in oklab, var(--color-accent-primary) 50%, transparent);
}

#wbAggregatedTable.resizing {
    cursor: col-resize;
}

/* Визуальная линия при изменении ширины */
#wbAggregatedTable.resizing::before {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    left: var(--resize-line-x, 0);
    width: 2px;
    background: var(--accent-blue);
    pointer-events: none;
    z-index: 10000;
}


/* Moved from app/Views/app/dashboard.php */
/* Модальное окно транзакций */
.order-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: modalFadeIn 0.2s ease;
}

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

.order-modal-content {
    background: var(--bg-secondary, #1e293b);
    border: 1px solid var(--glass-border, rgba(148,163,184,0.2));
    border-radius: var(--radius-lg, 12px);
    max-width: 95vw;
    max-height: 85vh;
    width: 1400px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    animation: modalSlideIn 0.25s ease;
    color: var(--text-secondary, #334155);
}

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

.order-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--glass-border, rgba(148,163,184,0.2));
    flex-shrink: 0;
}

.order-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary, #334155);
}

.order-modal-header h3 i {
    color: var(--accent-blue, var(--primary-400));
    font-size: 1.3rem;
}

.order-modal-close {
    background: transparent;
    border: 1px solid var(--glass-border, rgba(148,163,184,0.2));
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-tertiary, #64748b);
    transition: all 0.2s ease;
    font-size: 1.1rem;
}

.order-modal-close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-red, #ef4444);
    border-color: rgba(239, 68, 68, 0.3);
}

.order-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 200px;
    color: var(--text-secondary, #334155);
}

.modal-transactions-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 8px;
}

.modal-tx-count {
    font-size: 0.9rem;
    color: var(--text-secondary, #334155);
    display: flex;
    align-items: center;
    gap: 6px;
}

.modal-tx-count i {
    color: var(--accent-blue, var(--primary-400));
}

.modal-table-container {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--glass-border, rgba(148,163,184,0.2));
}

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

.modal-transactions-table thead th {
    background: rgba(99, 102, 241, 0.06);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary, #64748b);
    border-bottom: 1px solid var(--glass-border, rgba(148,163,184,0.2));
    white-space: nowrap;
}

.modal-transactions-table thead th.number {
    text-align: right;
}

.modal-transactions-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--glass-border, rgba(148,163,184,0.1));
    color: var(--text-secondary, #334155);
    vertical-align: top;
}

.modal-transactions-table tbody td.number {
    text-align: right;
    white-space: nowrap;
}

.modal-transactions-table tbody td code {
    color: var(--accent-blue, var(--primary-400));
    background: rgba(99, 102, 241, 0.08);
    padding: 1px 4px;
    border-radius: 3px;
}

.modal-transactions-table tbody tr:hover {
    background: rgba(99, 102, 241, 0.04);
}

.modal-transactions-table tbody td.income {
    color: var(--accent-green, #34d399);
}

.modal-transactions-table tbody td.expense {
    color: var(--accent-red, #f87171);
}

.modal-totals-row {
    background: rgba(99, 102, 241, 0.06) !important;
    border-top: 2px solid var(--accent-blue, var(--primary-400)) !important;
}

.modal-totals-row td {
    padding: 12px !important;
    font-size: 13px;
    color: var(--text-secondary, #334155);
    font-weight: 700;
}

/* Строки таблицы заказов — hover эффект */
.order-row-clickable:hover {
    background: rgba(99, 102, 241, 0.06) !important;
    transition: background 0.15s ease;
}

.order-row-clickable:hover td:first-child {
    color: var(--accent-blue, var(--primary-400));
}

/* Тёмная тема: обеспечить контраст в модальном окне */
[data-theme="dark"] .order-modal-content {
    background: #1e293b;
    border-color: rgba(148,163,184,0.15);
}

[data-theme="dark"] .order-modal-header {
    border-bottom-color: rgba(148,163,184,0.15);
}

[data-theme="dark"] .order-modal-header h3 {
    color: #e2e8f0;
}

[data-theme="dark"] .order-modal-close {
    color: #cbd5e1;
    border-color: rgba(148,163,184,0.2);
}

[data-theme="dark"] .order-modal-body,
[data-theme="dark"] .modal-tx-count {
    color: #e2e8f0;
}

[data-theme="dark"] .modal-transactions-table thead th {
    color: #cbd5e1;
    background: rgba(99, 102, 241, 0.06);
}

[data-theme="dark"] .modal-transactions-table tbody td {
    color: #e2e8f0;
    border-bottom-color: rgba(148,163,184,0.1);
}

[data-theme="dark"] .modal-transactions-table tbody td.income {
    color: #34d399;
}

[data-theme="dark"] .modal-transactions-table tbody td.expense {
    color: #f87171;
}

[data-theme="dark"] .modal-transactions-table tbody td code {
    color: var(--primary-400);
    background: rgba(99, 102, 241, 0.1);
}

[data-theme="dark"] .modal-transactions-table tbody tr:hover {
    background: rgba(99, 102, 241, 0.06);
}

[data-theme="dark"] .modal-totals-row td {
    color: #e2e8f0;
}

[data-theme="dark"] .modal-totals-row td.income {
    color: #34d399;
}

[data-theme="dark"] .modal-totals-row td.expense {
    color: #f87171;
}

[data-theme="dark"] .modal-dash {
    color: var(--color-text-muted);
    opacity: 1;
}

[data-theme="dark"] .modal-svc-name {
    color: var(--color-text-secondary);
}

/* Светлая тема: тёмный текст на белом фоне */
[data-theme="light"] .order-modal-content {
    background: var(--color-bg-elevated);
    border-color: rgba(148,163,184,0.2);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

[data-theme="light"] .order-modal-header {
    border-bottom-color: rgba(148,163,184,0.2);
}

[data-theme="light"] .order-modal-header h3 {
    color: #1e293b;
}

[data-theme="light"] .order-modal-close {
    color: #64748b;
    border-color: rgba(148,163,184,0.25);
}

[data-theme="light"] .order-modal-body,
[data-theme="light"] .modal-tx-count {
    color: #334155;
}

[data-theme="light"] .modal-transactions-table thead th {
    color: #64748b;
    background: rgba(241, 245, 249, 0.8);
}

[data-theme="light"] .modal-transactions-table tbody td {
    color: #334155;
    border-bottom-color: rgba(148,163,184,0.12);
}

[data-theme="light"] .modal-transactions-table tbody td.income {
    color: #059669;
}

[data-theme="light"] .modal-transactions-table tbody td.expense {
    color: #dc2626;
}

[data-theme="light"] .modal-transactions-table tbody td code {
    color: var(--primary-500);
    background: color-mix(in oklab, var(--color-accent-primary) 8%, transparent);
}

[data-theme="light"] .modal-transactions-table tbody tr:hover {
    background: rgba(241, 245, 249, 0.6);
}

[data-theme="light"] .modal-totals-row td {
    color: #334155;
}

[data-theme="light"] .modal-totals-row td.income {
    color: #059669;
}

[data-theme="light"] .modal-totals-row td.expense {
    color: #dc2626;
}

/* Прочерки и вспомогательный текст в модалке */
.modal-dash {
    color: var(--color-text-muted);
    opacity: 0.85;
}

.modal-svc-name {
    color: var(--color-text-secondary);
}


/* Moved from app/Views/app/cost-calculator.php */
/* ============================================
   ОСНОВНЫЕ СТИЛИ КАЛЬКУЛЯТОРА
   ============================================ */
.calculator-container {
    padding: var(--spacing-xl) var(--spacing-lg);
}

/* Заголовок */
.calculator-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--glass-border);
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.calculator-header h1 {
    margin: 0;
    font-size: var(--font-2xl);
    font-weight: 700;
    color: var(--text-primary);
}

.calculator-header-lead {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}

.calculator-active-project {
    margin: 0;
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

.calculator-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}

/* Вкладки - современный дизайн */
.calculator-tabs {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xl);
    background: var(--glass-bg);
    padding: var(--spacing-xs);
    border-radius: var(--radius-lg);
    border: 2px solid var(--glass-border);
    overflow-x: auto;
    scrollbar-width: thin;
}

.calculator-tabs::-webkit-scrollbar {
    height: 4px;
}

.calculator-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.calculator-tabs::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 2px;
}

.calculator-tab.hidden {
    display: none !important;
}

.calculator-tab {
    padding: var(--spacing-md) var(--spacing-lg);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-base);
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.calculator-tab i {
    font-size: 1.1em;
}

.calculator-tab:hover {
    color: var(--accent-blue);
    background: color-mix(in oklab, var(--primary-400) 10%, transparent);
    transform: translateY(-1px);
}

.calculator-tab.active {
    color: var(--accent-blue);
    background: color-mix(in oklab, var(--primary-400) 15%, transparent);
    box-shadow: 0 2px 8px color-mix(in oklab, var(--primary-400) 20%, transparent);
}

.calculator-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: var(--accent-blue);
    border-radius: 2px 2px 0 0;
}

.calculator-content {
    display: none !important;
}

.calculator-content.active {
    display: block !important;
}

#calculatorTabSettings.calculator-content.active {
    display: block !important;
}

#calculatorTabSettings .form-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#calculatorTabSettings .form-grid {
    display: grid !important;
    visibility: visible !important;
}

#calculatorTabSettings .form-field {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Карточки проектов */
.projects-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.project-card {
    background: var(--glass-bg);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 2px solid var(--glass-border);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-blue);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-card:hover {
    border-color: var(--accent-blue);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

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

.project-card h3 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-primary);
    font-size: var(--font-xl);
    font-weight: 600;
}

.project-card p {
    margin: 0 0 var(--spacing-lg) 0;
    color: var(--text-secondary);
    font-size: var(--font-sm);
    line-height: 1.6;
    min-height: 3em;
}

.project-actions {
    display: flex;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.project-card:hover .project-actions {
    opacity: 1;
}

/* Карточки позиций (конструктор) */
.items-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.item-card {
    background: var(--glass-bg);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.item-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-blue);
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

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

.item-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
    gap: var(--spacing-md);
}

.item-card-title {
    flex: 1;
    min-width: 0;
}

.item-card-title {
    flex: 1;
    font-size: var(--font-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.item-card-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    opacity: 0.7;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.item-card:hover .item-card-actions {
    opacity: 1;
}

.item-card-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: var(--spacing-xs) var(--spacing-sm);
}

.item-card-actions .btn i {
    margin: 0;
    font-size: 1em;
    line-height: 1;
}

.item-card-body {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing-md);
}

.item-card-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid #e5e7eb;
}

.item-card-field-label {
    font-size: var(--font-xs);
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 140px;
    flex-shrink: 0;
}

.item-card-field-value {
    font-size: var(--font-base);
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
}

.item-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-md);
}

.item-card-price {
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--accent-blue);
}

.calculation-result {
    background: var(--bg-light);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-top: var(--spacing-lg);
}

.calculation-row {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--glass-border);
}

.calculation-row.total {
    font-weight: 600;
    font-size: var(--font-lg);
    border-bottom: 2px solid var(--accent-blue);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
}

/* Секции форм */
.form-section {
    background: var(--glass-bg);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    border: 2px solid var(--glass-border);
    transition: all 0.3s ease;
}

.form-section:hover {
    box-shadow: var(--shadow-md);
    border-color: color-mix(in oklab, var(--primary-400) 30%, transparent);
}

.form-section h3 {
    margin: 0 0 var(--spacing-lg) 0;
    color: var(--text-primary);
    font-size: var(--font-xl);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.form-section h3::before {
    content: '';
    width: 4px;
    height: 24px;
    background: var(--accent-blue);
    border-radius: 2px;
}

/* Только внутри калькулятора — не переопределяем глобальные .form-grid / .form-field из style.css */
.calculator-container .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.calculator-container .form-field label {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.calculator-container .form-field input,
.calculator-container .form-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px;
    min-height: 52px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    font-size: var(--font-base);
    font-family: 'Onest', sans-serif;
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.calculator-container .form-field input:focus,
.calculator-container .form-field select:focus {
    outline: none;
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* Описание под заголовком вкладок калькулятора */
.calculator-tab-intro {
    margin: 0 0 var(--space-lg);
    max-width: 44rem;
    font-size: var(--font-sm);
    line-height: 1.55;
    color: var(--color-text-secondary);
}
.calculator-tab-intro-note {
    margin: calc(var(--space-md) * -1) 0 var(--space-lg);
    max-width: 44rem;
    padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
    border-left: 3px solid color-mix(in srgb, var(--color-accent-primary) 45%, var(--color-border-default));
    font-size: var(--font-xs);
    line-height: 1.5;
    color: var(--color-text-muted);
}
.overhead-kpi-panel {
    margin-bottom: var(--space-lg);
    width: fit-content;
    max-width: min(34rem, 100%);
}
.overhead-kpi-panel .commission-logistics-label {
    margin-bottom: var(--space-sm);
}
.overhead-kpi-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    max-width: 22rem;
}
.overhead-kpi-field .input-v2 {
    flex: 1 1 8rem;
    min-width: 0;
}
.overhead-kpi-suffix {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.overhead-kpi-summary {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-default);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.overhead-kpi-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-lg);
    flex-wrap: wrap;
}
.overhead-kpi-summary__label {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    line-height: 1.35;
}
.overhead-kpi-summary__value {
    font-size: var(--font-base);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
    text-align: right;
    white-space: nowrap;
}
.overhead-kpi-summary__row--total .overhead-kpi-summary__value {
    font-size: var(--font-lg);
}
.overhead-kpi-summary__row--per-unit .overhead-kpi-summary__label {
    font-weight: 600;
    color: var(--color-text-primary);
}
.overhead-kpi-summary__row--per-unit .overhead-kpi-summary__value {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--color-accent-primary);
}
.overhead-kpi-summary__hint {
    margin: 0;
    font-size: var(--font-xs);
    line-height: 1.45;
    color: var(--color-text-muted);
}
.overhead-table-panel {
    margin-bottom: var(--space-lg);
    width: fit-content;
    max-width: 100%;
    min-width: min(40rem, 100%);
}
.overhead-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}
.overhead-table-toolbar h4 {
    margin: 0;
}
.overhead-table-scroll {
    width: fit-content;
    max-width: 100%;
    min-width: min(36rem, 100%);
    max-height: min(65vh, 720px);
}
.overhead-table-scroll .commission-params-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: 0 1px 0 var(--color-border-default);
}
.overhead-table-scroll .commission-params-table thead th.text-right {
    text-align: right;
}
.overhead-table-scroll .commission-params-table tbody td.text-right {
    text-align: right;
}
.overhead-table-scroll .commission-params-table tfoot td {
    font-weight: 600;
    background: color-mix(in srgb, var(--color-accent-primary) 8%, var(--color-bg-page));
    border-top: 1px solid var(--color-border-default);
}
.overhead-table-scroll .commission-params-table tfoot .overhead-total-value {
    font-variant-numeric: tabular-nums;
    font-size: var(--font-base);
    color: var(--color-text-primary);
}
.overhead-table-scroll .commission-params-table.overhead-table {
    width: auto;
    min-width: min(32rem, 100%);
}
tr.overhead-row td {
    vertical-align: top;
}
/* Компактная строка: подписи + узкие поля (без input-v2), действия справа */
.overhead-item-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: min(36rem, 100%);
    padding: var(--space-xs) 0;
}
.overhead-field-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.overhead-mini-label {
    flex: 0 0 6rem;
    width: 6rem;
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.2;
}
.overhead-in {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 6px 10px;
    font-size: var(--font-sm);
    font-family: inherit;
    line-height: 1.35;
    color: var(--color-text-primary);
    background: var(--color-bg-page);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.overhead-in:focus {
    outline: none;
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}
.overhead-in--name {
    flex: 1 1 10rem;
    min-width: 0;
    max-width: 100%;
    font-weight: 600;
}
.overhead-amount-field {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}
.overhead-in--amount {
    flex: 0 1 7.5rem;
    width: 7rem;
    min-width: 5rem;
    max-width: 10rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.overhead-amount-suffix {
    flex-shrink: 0;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--color-text-muted);
}
.overhead-actions-cell {
    vertical-align: top;
    padding-top: 1.75rem;
    white-space: nowrap;
    width: 1%;
}
.overhead-actions-cell .btn {
    padding: 6px 8px;
}
.overhead-empty-cell {
    padding: var(--space-xl) var(--space-md) !important;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-sm);
    background: var(--color-bg-page);
}
.overhead-empty-cell i {
    font-size: 2rem;
    opacity: 0.35;
    display: block;
    margin-bottom: var(--space-sm);
    color: var(--color-text-muted);
}

/* Пустые состояния */
.empty-state {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
    color: var(--text-secondary);
    background: var(--glass-bg);
    border: 2px dashed var(--glass-border);
    border-radius: var(--radius-lg);
    margin: var(--spacing-lg) auto;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Иначе .empty-state { display: flex } перебивает глобальный .hidden (идёт раньше в файле) */
.empty-state.hidden {
    display: none !important;
}

.empty-state i {
    font-size: 4rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.4;
    color: var(--accent-blue);
    display: block;
    text-align: center;
}

.empty-state h3 {
    margin: var(--spacing-md) 0 var(--spacing-sm) 0;
    color: var(--text-primary);
    font-size: var(--font-lg);
    text-align: center;
    width: 100%;
}

.empty-state p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-base);
    text-align: center;
    width: 100%;
}

/* Настройки комиссий: список площадок + панель (Stripe-подобный split view) */
.commission-settings-layout {
    display: grid;
    grid-template-columns: minmax(200px, 280px) 1fr;
    gap: var(--space-lg);
    align-items: start;
    margin-bottom: var(--space-lg);
}
@media (max-width: 768px) {
    .commission-settings-layout {
        grid-template-columns: 1fr;
    }
    .commission-settings-sidebar {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
        padding-bottom: var(--space-md);
        margin-bottom: var(--space-md);
        border-bottom: 1px solid var(--color-border-default);
    }
    .commission-sidebar-item {
        flex: 1 1 auto;
        min-width: 140px;
    }
}
.commission-settings-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-right: var(--space-md);
    border-right: 1px solid var(--color-border-default);
}
@media (max-width: 768px) {
    .commission-settings-sidebar {
        border-right: none;
        padding-right: 0;
    }
}
.commission-sidebar-item {
    width: 100%;
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.commission-sidebar-item:hover {
    background: var(--color-bg-page);
    color: var(--color-text-primary);
}
.commission-sidebar-item.is-active {
    background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
    font-weight: 600;
}
.commission-sidebar-item__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}
.commission-sidebar-item__badge {
    flex-shrink: 0;
    font-size: var(--font-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-bg-page);
    border: 1px solid var(--color-border-default);
    color: var(--color-text-muted);
}
.commission-sidebar-item.is-active .commission-sidebar-item__badge {
    background: color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-primary) 35%, var(--color-border-default));
    color: var(--color-text-primary);
}
.commission-settings-panel {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
}
.marketplace-detail-panel {
    max-width: 720px;
}
.commission-panel-head {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border-default);
    flex-wrap: wrap;
}
.commission-panel-head .marketplace-title-input {
    flex: 1;
    min-width: 12rem;
    font-weight: 600;
    font-size: var(--font-lg);
}
.commission-logistics-block {
    margin-bottom: var(--space-lg);
}
.commission-logistics-label {
    display: block;
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}
.commission-logistics-segments {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}
.commission-seg {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    background: var(--color-bg-page);
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}
.commission-seg:hover {
    border-color: color-mix(in srgb, var(--color-accent-primary) 40%, var(--color-border-default));
    color: var(--color-text-primary);
}
.commission-seg.is-active {
    background: color-mix(in srgb, var(--color-accent-primary) 12%, transparent);
    border-color: var(--color-accent-primary);
    color: var(--color-text-primary);
    font-weight: 600;
}
.commission-logistics-hint {
    font-size: var(--font-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-sm);
    line-height: 1.45;
    max-width: 42rem;
}
.commission-params-table-wrap {
    overflow-x: auto;
    margin-bottom: var(--space-md);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-default);
}
.commission-params-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-sm);
    background: var(--color-bg-surface);
}
.commission-params-table thead th {
    text-align: left;
    font-weight: 600;
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-page);
    border-bottom: 1px solid var(--color-border-default);
}
.commission-params-table tbody td {
    padding: var(--space-sm) var(--space-md);
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border-default);
}
.commission-params-table tbody tr:last-child td {
    border-bottom: none;
}
.commission-params-table .param-unit {
    margin-left: 4px;
    font-size: var(--font-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}
.commission-params-table input.input-v2,
.commission-params-table select.input-v2 {
    font-size: var(--font-sm);
}
.commission-add-param-bar {
    display: none;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--color-bg-page);
    border: 1px dashed var(--color-border-default);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
}
.commission-add-param-bar.is-open {
    display: flex;
}
.commission-add-param-bar .form-field {
    margin-bottom: 0;
    flex: 1 1 140px;
}
.commission-add-param-bar .form-field--narrow {
    flex: 0 0 120px;
}
.commission-params-section-title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-sm);
}

.marketplace-params {
    margin-bottom: var(--spacing-md);
}

.param-item {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    align-items: center;
}

.param-item input,
.param-item select {
    padding: 14px 18px;
    height: 52px;
    border: 2px solid var(--glass-border);
    border-radius: 12px;
    font-size: var(--font-base);
    background: var(--glass-bg);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.param-item input:focus,
.param-item select:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary-400) 10%, transparent);
}

.param-item input[type="text"] {
    flex: 1;
}

.param-item input[data-numeric] {
    width: 180px;
}

.add-param-form {
    display: none;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background: color-mix(in oklab, var(--primary-400) 5%, transparent);
    border: 2px dashed var(--glass-border);
    border-radius: 12px;
    flex-wrap: wrap;
}

.add-param-form.is-open {
    display: flex;
}

.add-param-form .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    white-space: nowrap;
}

.add-param-form .btn i {
    margin: 0;
    font-size: 1em;
    line-height: 1;
}

.add-param-form input,
.add-param-form select {
    padding: 14px 18px;
    height: 52px;
    border: 2px solid var(--glass-border);
    border-radius: 12px;
    font-size: var(--font-base);
    background: var(--glass-bg);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.add-param-form input:focus,
.add-param-form select:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary-400) 10%, transparent);
}

.add-param-form input[type="text"] {
    flex: 1;
}

.add-param-form input[data-numeric] {
    width: 180px;
}

/* Таблица товаров (вкладка «Товары») */
.calculator-products-scroll {
    margin-top: var(--space-sm);
}
.calculator-products-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-sm);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.calculator-products-table thead th {
    text-align: left;
    font-weight: 600;
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-page);
    border-bottom: 1px solid var(--color-border-default);
    white-space: nowrap;
}
.calculator-products-table tbody td {
    padding: var(--space-md);
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border-default);
    color: var(--color-text-primary);
}
.calculator-products-table tbody tr:last-child td {
    border-bottom: none;
}
.calculator-products-table tbody tr.calculator-product-subline td {
    padding-top: 0;
    padding-bottom: var(--space-sm);
    background: var(--color-bg-page);
    border-bottom: 1px solid var(--color-border-default);
}
.calculator-products-table tbody tr.calculator-product-materials-row td {
    padding: var(--space-sm) var(--space-md) var(--space-md);
    background: var(--color-bg-page);
    border-bottom: 1px solid var(--color-border-default);
}
.calculator-products-table tbody tr.calculator-product-materials-row:not(.open) {
    display: none;
}
.calculator-products-table tbody tr.calculator-product-materials-row.open {
    display: table-row;
}
.calculator-product-name strong {
    font-weight: 600;
    font-size: var(--font-base);
}
.calculator-products-table__actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}
.calculator-product-materials-td .product-card-material-row {
    font-size: var(--font-xs);
}
.calculator-product-materials-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    position: relative;
    overflow: hidden;
}

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

.product-card:hover {
    border-color: color-mix(in oklab, var(--primary-400) 45%, transparent);
    box-shadow: var(--shadow-sm);
    transform: none;
}

.product-card-header.compact {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: 4px;
}

.product-card-title.compact {
    flex: initial;
    min-width: 0;
}

.product-card-title.compact h4 {
    margin: 0;
    font-size: var(--font-base);
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}

.product-card-title p {
    margin: 0;
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.product-card-main-metrics {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.product-card-cost-inline {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.product-card-actions.compact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 1;
}

.product-card-actions.compact .btn {
    min-width: 30px;
    height: 30px;
    padding: 0;
}

.product-card-actions .btn i {
    margin: 0;
    font-size: 1em;
    line-height: 1;
}

.product-card-field-label {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0;
    flex-shrink: 0;
}

.product-card-field-value {
    font-size: var(--font-base);
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
}

.product-card-field-value-small {
    font-size: var(--font-xs);
    color: var(--text-dim);
}

.product-card-material-row {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    line-height: 1.25;
}

.product-card-material-name {
    max-width: 44%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-card-material-dots {
    flex: 1;
    border-bottom: 1px dotted rgba(148, 163, 184, 0.45);
    margin: 0 4px;
}

.product-card-material-value {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.product-card-material-empty {
    font-size: var(--font-xs);
    color: var(--text-secondary);
}

.product-card-margin.compact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: none;
    margin: 0;
}

.product-card-margin.compact select,
.product-card-margin.compact input {
    padding: 6px 10px;
    height: 32px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    font-size: var(--font-sm);
    background: var(--glass-bg);
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-card-margin.compact select:focus,
.product-card-margin.compact input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-400) 10%, transparent);
}

.product-card-margin.compact select {
    min-width: 120px;
}

.product-card-margin.compact input {
    width: 84px;
    text-align: right;
}

.product-card-subline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.product-materials-toggle {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-xs);
    padding: 2px 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.product-materials-toggle:hover {
    color: var(--text-primary);
}

.product-materials-toggle.active {
    color: var(--text-primary);
}

.product-card-materials.collapsible {
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-xs);
    border-top: 1px solid var(--glass-border);
    display: none;
    flex-direction: column;
    gap: 2px;
    font-size: var(--font-xs);
    color: var(--text-secondary);
}

.product-card-materials.collapsible.open {
    display: flex;
}

@media (max-width: 980px) {
    .product-card-header.compact {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }
}

/* Карточки параметров площадок */
.param-card {
    background: var(--glass-bg);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-md);
}

.param-card > * {
    flex-shrink: 0;
}

.param-card-name {
    flex: 1;
    min-width: 0;
}

.param-card:hover {
    background: color-mix(in oklab, var(--primary-400) 5%, transparent);
    box-shadow: var(--shadow-sm);
    transform: translateX(4px);
}

.param-card-name {
    flex: 1;
}

.param-card-name input {
    width: 100%;
    padding: 12px 16px;
    height: 48px;
    border: 2px solid var(--glass-border);
    border-radius: 10px;
    font-size: var(--font-base);
    background: var(--glass-bg);
    color: var(--text-primary);
    font-weight: 500;
    transition: all 0.2s ease;
}

.param-card-name input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-400) 10%, transparent);
}

.param-card-type {
    width: 160px;
}

.param-card-type select {
    width: 100%;
    padding: 12px 16px;
    height: 48px;
    border: 2px solid var(--glass-border);
    border-radius: 10px;
    font-size: var(--font-base);
    background: var(--glass-bg);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.param-card-type select:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-400) 10%, transparent);
}

.param-card-value {
    width: 150px;
}

.param-card-value input {
    width: 100%;
    padding: 12px 16px;
    height: 48px;
    border: 2px solid var(--glass-border);
    border-radius: 10px;
    font-size: var(--font-base);
    background: var(--glass-bg);
    color: var(--text-secondary);
    text-align: right;
    transition: all 0.2s ease;
}

.param-card-value input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-400) 10%, transparent);
}

.param-card-unit {
    width: 40px;
    text-align: center;
    font-size: var(--font-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.param-card-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    opacity: 0.7;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.param-card:hover .param-card-actions {
    opacity: 1;
}

.param-card-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: var(--spacing-xs) var(--spacing-sm);
}

.param-card-actions .btn i {
    margin: 0;
    font-size: 1em;
    line-height: 1;
}

/* Расчёты маркетплейс: split-view как «Настройки комиссий» */
.marketplace-calc-panel-head {
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border-default);
}
.marketplace-calc-panel-title {
    margin: 0 0 var(--space-xs);
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.marketplace-calc-panel-meta {
    margin: 0;
    font-size: var(--font-xs);
    color: var(--color-text-muted);
}
.marketplace-calc-table-wrap {
    overflow: auto;
    max-height: min(72vh, 880px);
    margin-top: var(--space-md);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-surface);
}
.calculation-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
    font-size: var(--font-sm);
}

.calculation-table thead {
    background: var(--color-bg-page);
}

.calculation-table th {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--color-border-default);
    white-space: nowrap;
}

.marketplace-calc-table-wrap .calculation-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-bg-page);
    box-shadow: 0 1px 0 var(--color-border-default);
}

.calculation-table th.text-right {
    text-align: right;
}

.calculation-table tbody tr {
    border-bottom: 1px solid var(--color-border-default);
    transition: background-color var(--motion-fast) ease;
}

.calculation-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--color-bg-page) 65%, transparent);
}

.calculation-table tbody tr:hover {
    background: color-mix(in srgb, var(--color-accent-primary) 6%, var(--color-bg-surface));
}

.calculation-table td {
    padding: var(--space-sm) var(--space-md);
    color: var(--color-text-primary);
    vertical-align: top;
}

.calculation-table td.text-right {
    text-align: right;
    font-weight: 500;
}

.calculation-table .profit-positive {
    color: var(--accent-green);
    font-weight: 600;
}

.calculation-table .profit-negative {
    color: var(--accent-red);
    font-weight: 600;
}

.calculation-table .price-highlight {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--accent-blue);
}

.marketplace-calc-table-wrap .calculation-table .price-highlight {
    font-size: var(--font-base);
    font-weight: 700;
}

.params-details {
    margin-top: var(--spacing-xs);
    font-size: var(--font-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
    max-width: 22rem;
}

.base-price-cell {
    min-width: 170px;
}

.base-price-value {
    font-weight: 600;
    color: var(--color-text-primary);
}

.base-price-control {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

.base-price-percent-input {
    width: 76px;
    height: 30px;
    padding: 4px 8px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: var(--glass-bg);
    color: var(--text-primary);
    text-align: right;
    font-size: var(--font-xs);
}

/* Модалки: стили из /assets/css/style.css (.modal-overlay, .modal-dialog-sync). Скрытие — класс .hidden. */

/* Анимации появления карточек - отключены */

/* Плавные переходы для всех интерактивных элементов */
.calculator-container .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.calculator-container .btn i {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0;
}

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

.calculator-container .btn:active {
    transform: translateY(0);
}

/* Улучшенные скроллбары */
.calculator-content::-webkit-scrollbar,
.modal-dialog-sync::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.calculator-content::-webkit-scrollbar-track,
.modal-dialog-sync::-webkit-scrollbar-track {
    background: transparent;
}

.calculator-content::-webkit-scrollbar-thumb,
.modal-dialog-sync::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 4px;
}

.calculator-content::-webkit-scrollbar-thumb:hover,
.modal-dialog-sync::-webkit-scrollbar-thumb:hover {
    background: var(--accent-blue);
}

/* Анимация для пустых состояний - отключена */

/* Переходы полей конструктора */
.calculator-container .form-field input:not(:focus),
.calculator-container .form-field select:not(:focus) {
    transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

/* Эффект при наведении на карточки - will-change отключен */

/* Плавное появление элементов списка - отключено */

/* Вкладка «Товары»: шапка и панель массовой маржи (без metric-card / лишних теней) */
.calculator-tab-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-default);
}
.calculator-tab-heading h3 {
    margin: 0;
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
}
/* Панель массовой маржи: по ширине контента, справа; колонки подпись → поле */
.calculator-bulk-margin-toolbar {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: var(--space-lg);
}
.calculator-bulk-margin {
    width: fit-content;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.calculator-bulk-margin__title {
    margin: 0;
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    line-height: 1.35;
}
.calculator-bulk-margin__stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: min(100%, 20rem);
}
.calculator-bulk-margin__field {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    align-items: center;
    gap: var(--space-sm);
}
@media (max-width: 480px) {
    .calculator-bulk-margin__field {
        grid-template-columns: 1fr;
    }
}
.calculator-bulk-margin__label {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin: 0;
}
.calculator-bulk-margin__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}
.calculator-bulk-margin__controls .input-v2.w-160 {
    min-width: 5rem;
}

/* Модальное окно товара: полная колонка + скролл тела (форма вне .calculator-container) */
.create-product-modal.modal-overlay {
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}
.create-product-modal .modal-dialog-sync {
    display: flex;
    flex-direction: column;
    width: min(100%, 800px);
    max-width: 800px;
    max-height: min(92vh, 900px);
    min-height: 0;
    overflow: hidden;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-default);
    box-shadow: var(--shadow-lg);
}
.create-product-modal .modal-header {
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-border-default);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-accent-primary) 6%, transparent) 0%,
        color-mix(in srgb, var(--purple-400) 5%, transparent) 100%
    );
}
.create-product-modal .modal-header h3 {
    color: var(--color-text-primary);
    font-weight: 700;
}
.create-product-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-lg);
}
.create-product-modal #createProductForm {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-height: min-content;
}
/* Сетка «амортизация» — класс .form-grid снаружи .calculator-container иначе без display:grid */
.create-product-modal .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
    margin: 0;
}
.create-product-modal .form-grid .form-field {
    margin-bottom: 0;
}
.create-product-modal .modal-body .form-field label:first-child {
    display: block;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
}
.create-product-modal .modal-actions {
    flex-shrink: 0;
    margin-top: var(--space-md);
}
.create-product-modal__dims-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-md);
}
.create-product-modal__dims-grid .form-field {
    margin-bottom: 0;
}
.create-product-modal #productItemsList {
    overflow-y: auto;
    background: var(--color-bg-page);
    border-radius: var(--radius-md);
    min-height: 4rem;
    border-width: 1px;
}
.create-product-modal .product-modal-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
    transition: border-color var(--motion-fast) ease;
}
.create-product-modal .product-modal-item:last-child {
    margin-bottom: 0;
}
.create-product-modal .product-modal-item:hover {
    border-color: color-mix(in srgb, var(--color-accent-primary) 35%, var(--color-border-default));
}
.create-product-modal .product-modal-item__label {
    flex: 1;
    min-width: 0;
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.4;
    cursor: pointer;
}
.create-product-modal .product-modal-item__label strong {
    font-weight: 700;
    color: var(--color-text-primary);
}
.create-product-modal .product-modal-item__qty {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 5.5rem;
    min-width: 4.5rem;
    max-width: 7rem;
    text-align: center;
}
.create-product-modal .product-modal-items-section {
    margin-top: 0;
}
.create-product-modal .product-modal-items-section-title {
    margin: 0 0 var(--space-sm);
    font-size: var(--font-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    line-height: 1.3;
}
.create-product-modal .product-modal-items-section-title .product-modal-items-required {
    color: var(--accent-red);
    font-weight: 700;
}
.create-product-modal .product-modal-type-group {
    margin-bottom: var(--space-md);
}
.create-product-modal .product-modal-type-group:last-child {
    margin-bottom: 0;
}
.create-product-modal .product-modal-type-heading {
    font-size: var(--font-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    padding: var(--space-xs) var(--space-md);
    margin: 0 0 var(--space-xs);
    background: color-mix(in srgb, var(--color-accent-primary) 6%, var(--color-bg-page));
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-default);
}
.create-product-modal .product-modal-item__check {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--color-accent-primary);
    flex-shrink: 0;
}
.create-product-modal #productItemsList .empty-state {
    padding: var(--space-lg);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-sm);
    margin: 0;
}
.create-product-modal #productItemsList .empty-state p {
    margin: 0;
}


/* Moved from app/Views/auth/verify-email.php */
body.verification-page {
            background: linear-gradient(135deg, var(--color-bg-page) 0%, var(--color-bg-surface) 100%);
            color: var(--color-text-primary);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--space-xl);
        }
        
        .verification-container {
            max-width: 500px;
            width: 100%;
            background: var(--color-bg-elevated);
            border: 1px solid var(--color-border-default);
            border-radius: var(--radius-lg);
            padding: var(--space-xl);
            box-shadow: var(--shadow-md);
        }
        
        .verification-header {
            text-align: center;
            margin-bottom: var(--space-xl);
        }
        
        .verification-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-400) 0%, #a78bfa 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto var(--space-lg);
            font-size: 2.5rem;
            color: white;
        }
        
        .verification-icon.success {
            background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
        }
        
        .verification-icon.error {
            background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
        }
        
        .verification-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-text-primary);
            margin-bottom: var(--space-sm);
        }
        
        .verification-message {
            color: var(--color-text-secondary);
            line-height: 1.6;
            margin-bottom: var(--space-xl);
        }
        
        .verification-actions {
            text-align: center;
        }
        
        .verification-actions a {
            display: inline-block;
            padding: var(--space-md) var(--space-xl);
            background: var(--primary-400);
            color: white;
            text-decoration: none;
            border-radius: var(--radius-md);
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .verification-actions a:hover {
            background: var(--primary-500);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px color-mix(in oklab, var(--primary-400) 30%, transparent);
        }


/* Moved from app/Views/app/logs.php */
.log-level-debug {
    background: #6b7280;
    color: white;
}

.log-level-info {
    background: var(--primary-500);
    color: white;
}

.log-level-warning {
    background: #f59e0b;
    color: white;
}

.log-level-error {
    background: #ef4444;
    color: white;
}

.log-level-critical {
    background: #991b1b;
    color: white;
}

#contextModal {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Shared classes replacing formerly inline styles */
.ym-counter-pixel {
    position: absolute;
    left: -9999px;
}

.is-hidden {
    display: none !important;
}

.link-unstyled {
    text-decoration: none;
}

.inline-accent-link {
    color: var(--color-accent-primary);
    text-decoration: underline;
}

.u-w-100 {
    width: 100%;
}

.u-text-semibold {
    font-weight: 600;
}

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

.u-text-danger {
    color: var(--accent-red);
}

.u-text-success {
    color: var(--accent-green);
}

.u-mt-xs {
    margin-top: var(--space-xs);
}

.u-mt-sm {
    margin-top: var(--space-sm);
}

.u-mt-md {
    margin-top: var(--space-md);
}

.u-mt-lg {
    margin-top: var(--space-lg);
}

.u-mb-sm {
    margin-bottom: var(--space-sm);
}

.u-mb-md {
    margin-bottom: var(--space-md);
}

.u-mb-lg {
    margin-bottom: var(--space-lg);
}

.u-uppercase {
    text-transform: uppercase;
}

.u-mono-sm {
    font-family: monospace;
    font-size: 0.875rem;
}

.u-mono-xs {
    font-family: monospace;
    font-size: 0.8rem;
}

.landing-logo__text {
    font-size: 1.5rem;
    font-weight: 700;
}

.landing-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.landing-chart-canvas {
    min-height: 400px;
}

.landing-pricing-action {
    width: 100%;
    text-decoration: none;
}

.bar-pct-92 { --bar: 92%; }
.bar-pct-80 { --bar: 80%; }
.bar-pct-72 { --bar: 72%; }
.bar-pct-54 { --bar: 54%; }
.bar-pct-42 { --bar: 42%; }
.bar-pct-38 { --bar: 38%; }

.sidebar-empty-state {
    padding: var(--space-md);
    color: var(--text-secondary);
    font-size: var(--font-sm);
    text-align: center;
}

.sidebar-empty-state__line {
    margin-top: var(--space-xs);
}

.sidebar-empty-state__meta {
    margin-top: var(--space-xs);
    font-size: var(--font-xs);
}

.app-status-card {
    margin: 0 0 var(--space-md);
    position: relative;
    z-index: 100;
}

.app-status-card--warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--accent-orange);
}

.app-status-card--warning i,
.app-status-card--warning .app-status-card__title {
    color: var(--accent-orange);
}

.app-status-card--danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--accent-red);
}

.app-status-card--danger i,
.app-status-card--danger .app-status-card__title {
    color: var(--accent-red);
}

.app-status-card__title {
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.app-status-card__text {
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.period-selector-title {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--glass-border);
    color: var(--text-primary);
    font-size: var(--font-xl);
    font-weight: 700;
}

.opd-sync-bg-hint {
    margin-top: var(--space-sm);
    color: var(--color-text-muted);
    font-size: 0.9em;
}

.opd-queue-status {
    margin-top: var(--space-md);
}

.settings-keys-panel :disabled,
.settings-api-section :disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.admin-login-icon {
    color: var(--accent-blue);
}

.migration-container {
    max-width: 800px;
    margin: 50px auto;
}

.migration-card {
    margin-bottom: var(--space-lg);
}

.migration-card--success {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--accent-green);
    margin-bottom: var(--space-md);
}

.migration-card--danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--accent-red);
    margin-bottom: var(--space-md);
}

.migration-card--spaced-top {
    margin-top: var(--space-lg);
}

.migration-icon-info,
.migration-link {
    color: var(--accent-blue);
}

.migration-icon-success,
.migration-card--success .migration-card__title {
    color: var(--accent-green);
}

.migration-icon-danger,
.migration-card--danger .migration-card__title {
    color: var(--accent-red);
}

.migration-card__title {
    margin-bottom: var(--space-xs);
    font-weight: 600;
}

.migration-card__text {
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.migration-card__body {
    color: var(--text-secondary);
    font-family: monospace;
    font-size: var(--font-sm);
    line-height: 1.8;
}

.migration-card__lead {
    line-height: 1.6;
}

.migration-actions {
    margin-top: var(--space-xl);
}

.migration-actions .btn + .btn {
    margin-left: var(--space-md);
}

.db-error-container {
    max-width: 600px;
    margin: 50px auto;
}

.db-error-actions {
    margin-top: var(--space-lg);
}

.admin-topbar-heading-wrap,
.admin-check-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.admin-form-reset {
    margin: 0;
}

.admin-inline-form {
    display: inline;
}

.admin-table-scroll {
    overflow-x: auto;
}

.admin-details-spaced {
    margin-bottom: 1.5rem;
}

.admin-currency-input {
    max-width: 6rem;
    text-transform: uppercase;
}

.admin-check-group {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.admin-check-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.admin-toolbar-count {
    margin-left: 0.5rem;
    font-weight: 500;
}

.admin-table-id,
.admin-table-date {
    color: var(--text-secondary);
}

.admin-table-login,
.admin-modal-user-name {
    font-weight: 600;
}

.admin-table-db,
.admin-profile-db {
    color: var(--text-secondary);
    font-family: monospace;
    font-size: 0.875rem;
}

.admin-table-date {
    font-size: 0.875rem;
}

.admin-status-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
}

.admin-sub-status-wrap {
    margin-top: 0.25rem;
}

.admin-card-id {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 600;
}

.admin-card-action-spacer {
    margin-top: 0.5rem;
}

.admin-modal-note {
    margin-top: 0.75rem;
    margin-bottom: 0;
}

.admin-form-grid-subscription {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.admin-form-grid-plan {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.admin-quick-label {
    margin-bottom: 0.5rem;
}

.admin-profile-reset-form {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
}

.admin-modal-footer-spaced {
    margin-top: 1rem;
}

.admin-delete-body {
    margin-bottom: 1.5rem;
}

.modal-delete-text {
    margin-bottom: 0.75rem;
}

.sync-status-message {
    color: green;
}

.sync-status-message--error {
    padding: 10px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 4px;
    background: rgba(239, 68, 68, 0.1);
    color: red;
}

/* Inline-style cleanup leftovers */
.verification-alert {
    margin-bottom: var(--space-md);
}

.verification-alert--success {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--accent-green);
}

.verification-alert--success i,
.verification-alert--success .verification-alert__text {
    color: var(--accent-green);
}

.verification-alert--danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--accent-red);
}

.verification-alert--danger i,
.verification-alert--danger .verification-alert__text {
    color: var(--accent-red);
}

.verification-alert__text {
    font-weight: 600;
}

.migration-details-card {
    margin-top: var(--space-lg);
}

.migration-details-log {
    max-height: 400px;
    overflow-y: auto;
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
}

.migration-details-log__row {
    margin-bottom: var(--space-xs);
    font-family: 'Consolas', monospace;
    font-size: var(--font-sm);
}

.migration-actions-row {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.overhead-actions-head {
    width: 1%;
}

.overhead-total-label,
.product-packaging-label {
    color: var(--color-text-secondary);
    font-size: var(--font-sm);
    font-weight: 600;
}

.param-value-cell,
.param-action-cell,
.param-value-head {
    text-align: right;
}

.param-value-input {
    display: inline-block;
    max-width: 8rem;
    text-align: right;
}

.param-empty-cell {
    padding: var(--space-md);
}

.param-add-actions-field {
    flex: 0 0 auto;
    align-self: flex-end;
}

.param-add-hidden-label {
    visibility: hidden;
}

.param-add-actions {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.product-calculation-error {
    margin: 0.35rem 0 0;
    font-size: var(--font-xs);
}

.product-modal-item__qty.is-muted {
    opacity: 0.5;
}

.marketplace-calc-error-cell {
    padding: var(--space-md);
    color: var(--accent-red);
}

/* Dynamic funnel bar width classes */
.pca-bar-w-0 { width: 0%; }
.pca-bar-w-1 { width: 1%; }
.pca-bar-w-2 { width: 2%; }
.pca-bar-w-3 { width: 3%; }
.pca-bar-w-4 { width: 4%; }
.pca-bar-w-5 { width: 5%; }
.pca-bar-w-6 { width: 6%; }
.pca-bar-w-7 { width: 7%; }
.pca-bar-w-8 { width: 8%; }
.pca-bar-w-9 { width: 9%; }
.pca-bar-w-10 { width: 10%; }
.pca-bar-w-11 { width: 11%; }
.pca-bar-w-12 { width: 12%; }
.pca-bar-w-13 { width: 13%; }
.pca-bar-w-14 { width: 14%; }
.pca-bar-w-15 { width: 15%; }
.pca-bar-w-16 { width: 16%; }
.pca-bar-w-17 { width: 17%; }
.pca-bar-w-18 { width: 18%; }
.pca-bar-w-19 { width: 19%; }
.pca-bar-w-20 { width: 20%; }
.pca-bar-w-21 { width: 21%; }
.pca-bar-w-22 { width: 22%; }
.pca-bar-w-23 { width: 23%; }
.pca-bar-w-24 { width: 24%; }
.pca-bar-w-25 { width: 25%; }
.pca-bar-w-26 { width: 26%; }
.pca-bar-w-27 { width: 27%; }
.pca-bar-w-28 { width: 28%; }
.pca-bar-w-29 { width: 29%; }
.pca-bar-w-30 { width: 30%; }
.pca-bar-w-31 { width: 31%; }
.pca-bar-w-32 { width: 32%; }
.pca-bar-w-33 { width: 33%; }
.pca-bar-w-34 { width: 34%; }
.pca-bar-w-35 { width: 35%; }
.pca-bar-w-36 { width: 36%; }
.pca-bar-w-37 { width: 37%; }
.pca-bar-w-38 { width: 38%; }
.pca-bar-w-39 { width: 39%; }
.pca-bar-w-40 { width: 40%; }
.pca-bar-w-41 { width: 41%; }
.pca-bar-w-42 { width: 42%; }
.pca-bar-w-43 { width: 43%; }
.pca-bar-w-44 { width: 44%; }
.pca-bar-w-45 { width: 45%; }
.pca-bar-w-46 { width: 46%; }
.pca-bar-w-47 { width: 47%; }
.pca-bar-w-48 { width: 48%; }
.pca-bar-w-49 { width: 49%; }
.pca-bar-w-50 { width: 50%; }
.pca-bar-w-51 { width: 51%; }
.pca-bar-w-52 { width: 52%; }
.pca-bar-w-53 { width: 53%; }
.pca-bar-w-54 { width: 54%; }
.pca-bar-w-55 { width: 55%; }
.pca-bar-w-56 { width: 56%; }
.pca-bar-w-57 { width: 57%; }
.pca-bar-w-58 { width: 58%; }
.pca-bar-w-59 { width: 59%; }
.pca-bar-w-60 { width: 60%; }
.pca-bar-w-61 { width: 61%; }
.pca-bar-w-62 { width: 62%; }
.pca-bar-w-63 { width: 63%; }
.pca-bar-w-64 { width: 64%; }
.pca-bar-w-65 { width: 65%; }
.pca-bar-w-66 { width: 66%; }
.pca-bar-w-67 { width: 67%; }
.pca-bar-w-68 { width: 68%; }
.pca-bar-w-69 { width: 69%; }
.pca-bar-w-70 { width: 70%; }
.pca-bar-w-71 { width: 71%; }
.pca-bar-w-72 { width: 72%; }
.pca-bar-w-73 { width: 73%; }
.pca-bar-w-74 { width: 74%; }
.pca-bar-w-75 { width: 75%; }
.pca-bar-w-76 { width: 76%; }
.pca-bar-w-77 { width: 77%; }
.pca-bar-w-78 { width: 78%; }
.pca-bar-w-79 { width: 79%; }
.pca-bar-w-80 { width: 80%; }
.pca-bar-w-81 { width: 81%; }
.pca-bar-w-82 { width: 82%; }
.pca-bar-w-83 { width: 83%; }
.pca-bar-w-84 { width: 84%; }
.pca-bar-w-85 { width: 85%; }
.pca-bar-w-86 { width: 86%; }
.pca-bar-w-87 { width: 87%; }
.pca-bar-w-88 { width: 88%; }
.pca-bar-w-89 { width: 89%; }
.pca-bar-w-90 { width: 90%; }
.pca-bar-w-91 { width: 91%; }
.pca-bar-w-92 { width: 92%; }
.pca-bar-w-93 { width: 93%; }
.pca-bar-w-94 { width: 94%; }
.pca-bar-w-95 { width: 95%; }
.pca-bar-w-96 { width: 96%; }
.pca-bar-w-97 { width: 97%; }
.pca-bar-w-98 { width: 98%; }
.pca-bar-w-99 { width: 99%; }
.pca-bar-w-100 { width: 100%; }


/* Wildberries install status page */
.wb-install-page {
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    background: #f5f7fa;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.wb-install-card {
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.wb-install-card--success {
    border: 1px solid #c3e6cb;
    background: #d4edda;
    color: #155724;
}

.wb-install-card--info {
    padding: 15px;
    border: 1px solid #bee5eb;
    background: #d1ecf1;
    color: #0c5460;
}

.wb-install-card--error {
    border: 1px solid #f5c6cb;
    background: #f8d7da;
    color: #721c24;
}

.wb-install-card ul {
    margin: 10px 0;
    padding-left: 20px;
}

.wb-install-card li {
    margin: 5px 0;
}

.wb-install-actions {
    text-align: center;
}

.wb-install-actions .btn + .btn {
    margin-left: 10px;
}

.wb-install-note {
    margin-top: 10px;
    color: #856404;
    font-size: 0.875rem;
}

/* Landing auth refresh */
.landing-auth-actions {
    gap: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
}

.landing-auth-btn {
    min-height: 42px;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 800;
}

.landing-auth-btn--login {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.landing-auth-btn--start {
    gap: 10px;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.24);
    text-decoration: none;
}

.landing-auth-modal-overlay {
    display: flex;
    visibility: hidden;
    pointer-events: none;
    padding: 20px;
    background:
        radial-gradient(circle at 20% 12%, color-mix(in oklab, var(--primary-400) 28%, transparent), transparent 30rem),
        radial-gradient(circle at 88% 80%, rgba(124, 58, 237, 0.22), transparent 28rem),
        rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(18px);
}

.landing-auth-modal-overlay.active {
    visibility: visible;
    pointer-events: auto;
}

.landing-auth-modal {
    position: relative;
    display: grid;
    grid-template-columns: minmax(260px, 0.82fr) minmax(320px, 1fr);
    gap: 0;
    width: min(94vw, 920px);
    max-width: 920px;
    padding: 0;
    overflow: hidden;
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 34px 110px rgba(2, 6, 23, 0.38);
}

.landing-auth-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 4;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 999px;
}

.landing-auth-modal__aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 560px;
    padding: 34px;
    color: #ffffff;
    background:
        radial-gradient(circle at 18% 18%, color-mix(in oklab, var(--primary-400) 58%, transparent), transparent 34%),
        radial-gradient(circle at 88% 78%, rgba(167, 139, 250, 0.38), transparent 36%),
        linear-gradient(145deg, #020617 0%, #0f172a 58%, #1e1b4b 100%);
}

.landing-auth-modal__eyebrow {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 14px;
    border-radius: 999px;
    padding: 8px 12px;
    background: color-mix(in oklab, var(--primary-400) 14%, transparent);
    color: #93c5fd;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.landing-auth-modal__aside h3 {
    margin: 0;
    color: #ffffff;
    font-family: var(--poster-display, 'Unbounded', 'Onest', sans-serif);
    font-size: clamp(1.75rem, 3vw, 2.55rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.landing-auth-modal__metric {
    margin: 28px 0;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.08);
}

.landing-auth-modal__metric span {
    display: block;
    margin-bottom: 10px;
    color: #cbd5e1;
    font-weight: 800;
}

.landing-auth-modal__metric strong {
    display: block;
    font-family: var(--poster-display, 'Unbounded', 'Onest', sans-serif);
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.landing-auth-modal__bullets {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #dbeafe;
    font-weight: 750;
}

.landing-auth-modal__bullets li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.landing-auth-modal__bullets i {
    color: #86efac;
}

.landing-auth-modal__main {
    padding: clamp(28px, 4vw, 46px);
}

.landing-auth-modal__header {
    margin-bottom: 26px;
    padding: 0;
    border: 0;
}

.landing-auth-modal__header .landing-modal-title {
    display: block;
    color: #020617;
    font-family: var(--poster-display, 'Unbounded', 'Onest', sans-serif);
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.landing-auth-modal__header p {
    margin: 10px 0 0;
    color: #64748b;
    font-weight: 650;
    line-height: 1.45;
}

.landing-auth-form {
    gap: 18px;
}

.landing-auth-field {
    position: relative;
}

.landing-auth-field label {
    color: #334155;
    font-weight: 850;
}

.landing-auth-field input[type="text"],
.landing-auth-field input[type="password"] {
    min-height: 54px;
    border-radius: 18px;
    padding: 0 16px;
    background: #f8fafc;
    font-weight: 700;
}

.landing-auth-field input[type="text"]::placeholder,
.landing-auth-field input[type="password"]::placeholder {
    font-weight: 400;
    color: var(--color-text-dim, #94a3b8);
    opacity: 1;
}

.landing-auth-form__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.landing-auth-form__row a {
    color: var(--primary-600);
    font-size: var(--font-sm);
    font-weight: 850;
    text-decoration: none;
}

.landing-auth-form__row a:hover {
    text-decoration: underline;
}

.landing-auth-modal .landing-modal-submit {
    display: inline-flex;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    border-radius: 18px;
    font-weight: 900;
}

.landing-auth-modal__footer {
    margin-top: 22px;
    padding-top: 22px;
}

.auth-page--landing {
    align-items: stretch;
    background:
        radial-gradient(circle at 12% 16%, color-mix(in oklab, var(--primary-400) 18%, transparent), transparent 30rem),
        radial-gradient(circle at 86% 72%, rgba(124, 58, 237, 0.15), transparent 28rem),
        linear-gradient(135deg, var(--color-bg-page) 0%, var(--color-bg-surface) 100%);
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(320px, 0.92fr) minmax(360px, 0.78fr);
    gap: clamp(18px, 3vw, 32px);
    width: min(1120px, 100%);
    margin: auto;
}

.auth-side-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 680px;
    padding: clamp(28px, 4vw, 46px);
    border-radius: 34px;
    color: #ffffff;
    background:
        radial-gradient(circle at 14% 16%, color-mix(in oklab, var(--primary-400) 52%, transparent), transparent 32%),
        radial-gradient(circle at 84% 74%, rgba(167, 139, 250, 0.38), transparent 34%),
        linear-gradient(145deg, #020617 0%, #0f172a 60%, #1e1b4b 100%);
    box-shadow: 0 34px 110px rgba(15, 23, 42, 0.22);
}

.auth-side-panel__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 900;
    text-decoration: none;
}

.auth-side-panel__copy span {
    color: #93c5fd;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auth-side-panel__copy h2 {
    max-width: 680px;
    margin: 18px 0;
    color: #ffffff;
    font-family: var(--poster-display, 'Unbounded', 'Onest', sans-serif);
    font-size: clamp(2rem, 4.6vw, 4.2rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.auth-side-panel__copy p {
    max-width: 560px;
    margin: 0;
    color: #cbd5e1;
    font-size: 1.08rem;
    font-weight: 650;
    line-height: 1.5;
}

.auth-side-panel__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.auth-side-panel__stats div {
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
}

.auth-side-panel__stats span {
    display: block;
    margin-bottom: 8px;
    color: #93c5fd;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.auth-side-panel__stats strong {
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.25;
}

.auth-card--register {
    align-self: center;
    max-width: none;
    border-radius: 30px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.12);
}

[data-theme="dark"] .landing-auth-actions {
    background: transparent;
    border-color: transparent;
}

[data-theme="dark"] .landing-auth-btn--login {
    color: var(--color-text-primary);
}

[data-theme="dark"] .landing-auth-modal {
    background: rgba(15, 23, 42, 0.96);
    border-color: var(--color-border-default);
}

[data-theme="dark"] .landing-auth-modal__main,
[data-theme="dark"] .landing-auth-modal__header .landing-modal-title {
    color: var(--color-text-primary);
}

[data-theme="dark"] .landing-auth-modal__header p,
[data-theme="dark"] .landing-auth-field label,
[data-theme="dark"] .landing-auth-modal__footer {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .landing-auth-field input[type="text"],
[data-theme="dark"] .landing-auth-field input[type="password"] {
    background: rgba(30, 41, 59, 0.92);
    border-color: var(--color-border-default);
}

@media (max-width: 980px) {
    .landing-auth-modal,
    .auth-shell {
        grid-template-columns: 1fr;
    }

    .landing-auth-modal__aside {
        min-height: auto;
    }

    .auth-side-panel {
        min-height: 440px;
    }
}

@media (max-width: 640px) {
    .landing-auth-actions {
        gap: 6px;
        padding: 4px;
    }

    .landing-auth-btn {
        min-height: 38px;
        padding: 9px 12px;
    }

    .landing-auth-btn--start span {
        display: none;
    }

    .landing-auth-modal-overlay {
        padding: 10px;
    }

    .landing-auth-modal {
        width: min(100%, 420px);
        border-radius: 26px;
    }

    .landing-auth-modal__aside {
        display: none;
    }

    .landing-auth-modal__main {
        padding: 28px 20px 22px;
    }

    .landing-auth-form__row {
        align-items: flex-start;
        flex-direction: column;
    }

    .auth-page--landing {
        padding: 16px;
    }

    .auth-side-panel {
        min-height: auto;
        padding: 26px;
    }

    .auth-side-panel__stats {
        grid-template-columns: 1fr;
    }

    .auth-card--register {
        padding: 24px 20px;
        border-radius: 24px;
    }
}

/* Кастомные модалки подтверждения/ввода (assets/js/app-modals.js) */
.app-native-modal {
    z-index: 12000;
}
.modal-dialog.modal-dialog-sync.app-native-modal-dialog {
    display: flex;
    flex-direction: column;
    max-width: min(28rem, calc(100vw - 2.5rem));
    width: 100%;
    min-height: 0;
    overflow: hidden;
}

.app-native-modal-dialog .modal-header {
    flex-shrink: 0;
}

.app-native-modal-dialog .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-lg);
}

.app-native-modal-dialog .modal-body .form-field:last-child {
    margin-bottom: 0;
}

.app-native-modal-dialog .modal-actions {
    flex-shrink: 0;
    margin-top: 0;
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    border-top: 1px solid var(--color-border-default);
    background: color-mix(in srgb, var(--color-bg-elevated) 94%, var(--color-accent-primary) 6%);
}

.app-native-modal-message {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
    white-space: pre-wrap;
}

/* Блок «Начало работы» — toast-панель (справа, под шапкой) */
.getting-started.getting-started--toast {
    --gs-width: min(24rem, calc(100vw - var(--space-lg) * 2));
    position: fixed;
    top: var(--getting-started-top, 5.25rem);
    right: var(--space-lg);
    left: auto;
    z-index: 9990;
    width: var(--gs-width);
    max-width: calc(100vw - var(--space-lg) * 2);
    max-height: min(34rem, calc(100vh - var(--getting-started-top, 5.25rem) - var(--space-lg)));
    margin: 0;
    padding: 0;
    pointer-events: none;
    opacity: 0;
    transform: translateX(1.15rem) scale(0.985);
    transition:
        opacity 0.3s ease,
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.getting-started.getting-started--toast.getting-started--ready:not(.getting-started--hidden) {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .getting-started.getting-started--toast {
        transition: opacity 0.15s ease;
        transform: none;
    }
}

.getting-started--hidden {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.getting-started.getting-started--toast.getting-started--collapsed {
    --gs-width: min(18.5rem, calc(100vw - var(--space-lg) * 2));
    max-height: none;
}

.getting-started__card {
    display: flex;
    flex-direction: column;
    max-height: inherit;
    overflow: hidden;
    padding: 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-lg);
}

.getting-started__card::before,
.getting-started__card::after {
    display: none;
}
.getting-started__panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    overflow: hidden;
}

.getting-started__head {
    flex-shrink: 0;
    padding: 0.85rem 0.9rem 0.7rem;
    border-bottom: 1px solid var(--color-border-default);
    background: var(--color-bg-surface);
}

.getting-started__head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.getting-started__head-tools {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.getting-started__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--color-text-primary);
}

.getting-started__lead {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.getting-started__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--color-accent-primary);
    background: color-mix(in srgb, var(--color-accent-primary) 10%, var(--color-bg-inset));
    border: 1px solid color-mix(in srgb, var(--color-accent-primary) 22%, transparent);
    white-space: nowrap;
}

.getting-started__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-xs);
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition:
        background-color var(--motion-fast) ease,
        border-color var(--motion-fast) ease,
        color var(--motion-fast) ease;
}

.getting-started__icon-btn:hover {
    background: var(--color-bg-inset);
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
}

.getting-started__icon-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
}

.getting-started__icon-btn--danger {
    color: var(--color-accent-danger);
    border-color: color-mix(in srgb, var(--color-accent-danger) 35%, var(--color-border-default));
    background: color-mix(in srgb, var(--color-accent-danger) 6%, var(--color-bg-surface));
}

.getting-started__icon-btn--danger:hover {
    color: var(--color-accent-danger-hover, #dc2626);
    border-color: var(--color-accent-danger);
    background: color-mix(in srgb, var(--color-accent-danger) 10%, var(--color-bg-surface));
}

.getting-started__hide-menu {
    position: relative;
}

.getting-started__hide-menu > summary {
    list-style: none;
    cursor: pointer;
}

.getting-started__hide-menu > summary::-webkit-details-marker {
    display: none;
}

.getting-started__hide-menu > summary.getting-started__icon-btn {
    list-style: none;
}

.getting-started__hide-panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 30;
    width: min(16.5rem, calc(100vw - 2.5rem));
    padding: 0.65rem;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-lg);
}

.getting-started__hide-intro {
    margin: 0 0 0.5rem;
    padding: 0 0.15rem 0.35rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border-default);
}

.getting-started__hide-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    width: 100%;
    margin: 0;
    padding: 0.55rem 0.6rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition:
        background-color var(--motion-fast) ease,
        border-color var(--motion-fast) ease;
}

.getting-started__hide-option + .getting-started__hide-option {
    margin-top: 0.35rem;
}

.getting-started__hide-option:hover {
    background: var(--color-bg-inset, #f7fafc);
    border-color: var(--color-border-default);
}

.getting-started__hide-option:focus-visible {
    outline: none;
    border-color: var(--color-accent-danger);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-danger) 18%, transparent);
}

.getting-started__hide-option-title {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.getting-started__hide-option-desc {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.getting-started__steps {
    list-style: none;
    margin: 0;
    padding: 0.65rem 0.75rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1;
    min-height: 0;
}
.getting-started__step {
    display: flex;
    gap: 0.6rem;
    align-items: stretch;
    padding: 0.65rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-inset);
}
.getting-started__step--done {
    border-color: color-mix(in srgb, var(--color-accent-success, #16a34a) 28%, var(--color-border-default));
    background: color-mix(in srgb, var(--color-accent-success, #16a34a) 5%, var(--color-bg-elevated));
}
.getting-started__step-idx {
    flex-shrink: 0;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--color-text-muted);
    background: color-mix(in srgb, var(--color-border-muted) 55%, var(--color-bg-surface));
}
.getting-started__step--done .getting-started__step-idx {
    color: var(--color-accent-success, #15803d);
    background: color-mix(in srgb, var(--color-accent-success) 14%, transparent);
}
.getting-started__step-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.getting-started__step-title-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}
.getting-started__step-title {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.25;
    color: var(--color-text-primary);
}
.getting-started__step-hint {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text-secondary, #64748b);
}
.getting-started__step-cta-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.25rem;
}
.getting-started__icon-done {
    font-size: 1.15rem;
    color: var(--color-accent-success, #16a34a);
}
.getting-started__icon-todo {
    font-size: 1.15rem;
    color: var(--color-text-muted);
}
.getting-started--collapsed .getting-started__panel {
    display: none;
}

.getting-started--collapsed .getting-started__collapsed-bar {
    display: block;
}

.getting-started__collapsed-bar {
    padding: 0.45rem 0.55rem;
}
.getting-started__expand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.75rem;
    padding: 0.5rem 0.35rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--color-text-primary);
}
.getting-started__expand:hover {
    background: color-mix(in srgb, var(--color-text-primary) 4%, transparent);
}
.getting-started__collapsed-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.9rem;
}
.getting-started__collapsed-meta {
    margin-left: auto;
    margin-right: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.getting-started__chev {
    flex-shrink: 0;
    opacity: 0.7;
}
.app-wrapper .getting-started__card {
    border-color: var(--color-border-default);
    box-shadow: var(--shadow-lg);
}

@media (max-width: 640px) {
    .getting-started.getting-started--toast {
        right: var(--space-md);
        left: var(--space-md);
        width: auto;
        max-width: none;
        --gs-width: auto;
    }

    .getting-started__hide-panel {
        position: fixed;
        top: auto;
        bottom: var(--space-md);
        left: var(--space-md);
        right: var(--space-md);
        width: auto;
    }
}

/* Onboarding bootstrap — прогресс в блоке «Начало работы» */
.getting-started__bootstrap {
    flex-shrink: 0;
    margin: 0;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--color-border-default);
    background: color-mix(in srgb, var(--color-accent-primary) 5%, var(--color-bg-surface));
}

.getting-started__bootstrap--active {
    background: color-mix(in srgb, var(--color-accent-primary) 8%, var(--color-bg-surface));
}

.getting-started__bootstrap-lead {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-primary);
}

.getting-started__bootstrap-cron {
    margin: 0 0 0.5rem;
    font-size: 0.6875rem;
}

.getting-started__bootstrap-pools {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.getting-started__bootstrap-pool {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.6875rem;
    line-height: 1.4;
}

.getting-started__bootstrap-pool-label {
    flex-shrink: 0;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.getting-started__bootstrap-pool-status-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    min-width: 0;
    max-width: 58%;
}

.getting-started__bootstrap-pool-link {
    font-size: 0.625rem;
    color: var(--color-accent-primary);
    text-decoration: none;
    white-space: nowrap;
}

.getting-started__bootstrap-pool-link:hover {
    text-decoration: underline;
}

.getting-started__bootstrap-pool-link:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.getting-started__bootstrap-pool-status {
    text-align: right;
    color: var(--color-text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 58%;
}

.getting-started__bootstrap-pool-status--completed,
.getting-started__bootstrap-pool--completed .getting-started__bootstrap-pool-status {
    color: var(--color-accent-success);
}

.getting-started__bootstrap-pool-status--failed,
.getting-started__bootstrap-pool--failed .getting-started__bootstrap-pool-status {
    color: var(--color-accent-danger);
}

.getting-started__bootstrap-pool-status--running,
.getting-started__bootstrap-pool--running .getting-started__bootstrap-pool-status {
    color: var(--color-accent-primary);
}

.getting-started__bootstrap-pool-status--pending,
.getting-started__bootstrap-pool--pending .getting-started__bootstrap-pool-status {
    color: var(--color-text-muted);
}

.getting-started__bootstrap-pool-status--skipped {
    color: var(--color-text-dim);
}

.getting-started__bootstrap-pool--skipped .getting-started__bootstrap-pool-status {
    color: var(--color-text-dim);
}

/* Расширение Chrome — showcase (Stripe) */
.app-wrapper .oez-page .oez-showcase {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-top: var(--space-md);
    width: 100%;
    text-align: left;
}

.app-wrapper .oez-page .oez-showcase-hero {
    width: 100%;
}

.app-wrapper .oez-showcase-row.section-card {
    display: grid;
    gap: var(--space-lg);
    align-items: center;
    padding: var(--space-lg);
    margin: 0;
    border-radius: var(--radius-md);
}

.app-wrapper .oez-showcase-title {
    margin: 0 0 var(--space-sm);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--color-text-primary);
}

.app-wrapper .oez-showcase-copy {
    min-width: 0;
}

.app-wrapper .oez-showcase-copy p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.app-wrapper .oez-showcase-copy strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

.app-wrapper .oez-page .oez-media-slot {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-inset);
    box-sizing: border-box;
    box-shadow: none;
}

.app-wrapper .oez-page .oez-media-slot--hero {
    border-radius: var(--radius-md);
    min-height: 12rem;
}

.app-wrapper .oez-page .oez-media-slot--video {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    padding: 0;
}

.app-wrapper .oez-page .oez-media-slot--image {
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    background: var(--color-bg-surface);
}

.app-wrapper .oez-page .oez-media-slot--image .oez-media-slot__img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

@media (min-width: 768px) {
    .app-wrapper .oez-showcase-row.section-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-xl);
        padding: var(--space-xl);
    }
}

@media (max-width: 767px) {
    .app-wrapper .oez-showcase-row--flip .oez-media-slot {
        order: -1;
    }
}