@import "./fonts.css";
@import "./theme.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --z-content: 10;
        --z-sticky: 20;
        --z-dropdown: 40;
        --z-header: 60;
        --z-fab: 70;
        --z-modal: 80;
        --z-lightbox: 90;
        --z-emergency: 100;
        --admin-sidebar-width: 16rem;
        --eca-scrollbar-size: 6px;
    }

    [x-cloak] {
        display: none !important;
    }

    html[lang="fa"],
    html[lang="fa"] body,
    html[lang="fa"] .admin-shell {
        font-family: IRANSans, Vazir, ui-sans-serif, system-ui, sans-serif;
    }

    html:not([lang="fa"]) body {
        font-family:
            ui-sans-serif,
            system-ui,
            -apple-system,
            BlinkMacSystemFont,
            sans-serif;
    }

    /*
     * Desktop scrollbars site-wide: thin, theme-colored.
     * Component rules that set scrollbar-width: none still win (higher specificity).
     */
    html.layout-lg,
    html.layout-lg body {
        scrollbar-width: thin;
        scrollbar-color: var(--eca-scrollbar-thumb) var(--eca-scrollbar-track);
    }

    html.layout-lg * {
        scrollbar-width: thin;
        scrollbar-color: var(--eca-scrollbar-thumb) var(--eca-scrollbar-track);
    }

    html.layout-lg::-webkit-scrollbar,
    html.layout-lg *::-webkit-scrollbar {
        width: var(--eca-scrollbar-size, 6px);
        height: var(--eca-scrollbar-size, 6px);
    }

    html.layout-lg::-webkit-scrollbar-track,
    html.layout-lg *::-webkit-scrollbar-track {
        background: var(--eca-scrollbar-track);
        border-radius: 999px;
    }

    html.layout-lg::-webkit-scrollbar-thumb,
    html.layout-lg *::-webkit-scrollbar-thumb {
        background: var(--eca-scrollbar-thumb);
        border-radius: 999px;
        border: 1px solid transparent;
        background-clip: padding-box;
    }

    html.layout-lg::-webkit-scrollbar-thumb:hover,
    html.layout-lg *::-webkit-scrollbar-thumb:hover {
        background: var(--eca-scrollbar-thumb-hover);
        background-clip: padding-box;
    }

    html.layout-lg::-webkit-scrollbar-corner,
    html.layout-lg *::-webkit-scrollbar-corner {
        background: transparent;
    }
}

@layer components {
    .site-container {
        @apply mx-auto w-full max-w-[100rem] px-0 sm:px-2 desktop:px-2;
    }

    .site-shell {
        @apply relative mx-auto w-full max-w-[100rem] px-1 sm:px-2;
    }

    html.layout-xl {
        .site-shell {
            @apply block px-2;
        }
    }

    .site-shell-main {
        @apply min-w-0 w-full;
        overflow-x: hidden;
        background:
        radial-gradient(
            ellipse 75% 55% at 50% 48%,
            color-mix(in srgb, var(--eca-primary) 38%, transparent) 0%,
            color-mix(in srgb, var(--eca-primary) 22%, transparent) 28%,
            color-mix(in srgb, var(--eca-primary) 10%, transparent) 48%,
            transparent 72%
        ),
        linear-gradient(
            180deg,
            var(--eca-card) 0%,
            var(--eca-card) 100%
        );
    }

    .site-shell-main-inner {
        @apply mx-auto w-full max-w-none px-0 sm:px-1;
    }

    .site-card-grid {
        content-visibility: auto;
        contain-intrinsic-size: 1px 960px;
    }

    .site-skeleton {
        position: relative;
        overflow: hidden;
        background: linear-gradient(
            180deg,
            rgba(226, 232, 240, 0.92),
            rgba(241, 245, 249, 0.96)
        );
    }

    .site-skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.78),
            transparent
        );
        transform: translate3d(-100%, 0, 0);
        animation: site-skeleton-shimmer 1.25s linear infinite;
    }

    .site-skeleton-card {
        @apply rounded-2xl border border-slate-200/80 bg-white/85;
    }

    .site-skeleton-line {
        @apply rounded-full bg-slate-200/90;
    }

    .site-logo-wordmark {
        direction: ltr;
        position: relative;

        @apply mt-0.5 flex items-center;
        height: 2rem;
    }

    .site-logo-wordmark__static {
        @apply  tracking-[0.08em] text-brand-accent;
        font-family: 'Segoe UI', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
         font-size: 1.5rem;
         font-weight: 1000;
        line-height: 2rem;
        letter-spacing: .12em;
    
    }

    .brand-font-default {
        font-family: IRANSans, Vazir, Arial, sans-serif;
    }

    .brand-font-iransans {
        font-family: IRANSans, Vazir, Arial, sans-serif;
    }

    .brand-font-modesty {
        font-family: MoDesty, IRANSans, Arial, sans-serif;
    }

    .site-logo-wordmark.brand-font-modesty .site-logo-wordmark__static,
    .site-logo-wordmark__static.brand-font-modesty {
        letter-spacing: 0.06em;
    }

    .site-logo-wordmark__letters {
        @apply flex items-center;
        height: 100%;
    }

    .site-logo-wordmark__letters:not(.is-ready) {
        display: none !important;
    }

    .site-logo-wordmark--footer {
        height: 2.35rem;
        direction: ltr;
    }

    .site-logo-letter {
        display: block;
        height: 100%;
        width: 2rem;
        margin-inline-start: -0.34rem;
        overflow: hidden;
    }

    .site-logo-letter:first-child {
        margin-inline-start: 0;
    }

    .site-logo-wordmark--footer .site-logo-letter {
        width: 2.05rem;
        margin-inline-start: -0.38rem;
    }

    .site-logo-wordmark--footer .site-logo-letter:first-child {
        margin-inline-start: 0;
    }

    .site-logo-wordmark--admin {
        height: 1.55rem;
        direction: ltr;
    }

    .site-logo-wordmark--admin .site-logo-letter {
        width: 1.35rem;
        margin-inline-start: -0.22rem;
    }

    .site-logo-wordmark--admin .site-logo-letter:first-child {
        margin-inline-start: 0;
    }

    .site-logo-letter svg {
        display: block;
        height: 100%;
        width: 100%;
    }

    .site-progressive-media {
        position: relative;
        overflow: hidden;
        background: linear-gradient(
            180deg,
            rgba(226, 232, 240, 0.438),
            rgba(241, 245, 249, 0.418)
        );
    }

    .site-progressive-media::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(
                circle at top,
                rgba(255, 255, 255, 0.192),
                transparent 42%
            ),
            linear-gradient(
                180deg,
                rgba(248, 250, 252, 0.205),
                rgba(226, 232, 240, 0.192)
            );
    }

    .site-progressive-media img {
        opacity: 0;
        transform: translate3d(0, 14px, 0) scale(1.015);
        transition:
            opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
            transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .site-progressive-media.is-loaded::after {
        opacity: 0;
    }

    .site-progressive-media.is-loaded img {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }

    .site-motion [data-reveal] {
        opacity: 0;
        transform: translate3d(0, var(--reveal-distance, 18px), 0);
        transition:
            opacity var(--reveal-duration, 320ms) cubic-bezier(0.22, 1, 0.36, 1),
            transform var(--reveal-duration, 320ms)
                cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--reveal-delay, 0ms);
        will-change: opacity, transform;
    }

    .site-motion [data-reveal="page"] {
        --reveal-distance: 24px;
        --reveal-duration: 360ms;
    }

    .site-motion [data-reveal="section"] {
        --reveal-distance: 20px;
        --reveal-duration: 320ms;
    }

    .site-motion [data-reveal="media"] {
        --reveal-distance: 16px;
        --reveal-duration: 300ms;
    }

    .site-motion [data-reveal="card"] {
        --reveal-distance: 14px;
        --reveal-duration: 260ms;
    }

    .site-motion [data-reveal="soft"] {
        --reveal-distance: 10px;
        --reveal-duration: 220ms;
    }

    .site-motion [data-reveal].is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    .site-shell-rail {
        @apply sticky z-20 self-start overflow-y-auto overscroll-contain;
        top: 8.5rem;
        max-height: calc(100vh - 9.5rem);
    }

    .site-shell-rail--lead {
        @apply overflow-y-auto overscroll-contain;
        max-height: calc(100vh - 9.5rem);
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: var(--eca-scrollbar-thumb) transparent;
    }

    .site-shell-rail--lead::-webkit-scrollbar {
        width: var(--eca-scrollbar-size, 6px);
    }

    .site-shell-rail--lead::-webkit-scrollbar-track {
        margin-block: 0.35rem;
        margin-inline: 1px;
        border-radius: 999px;
        background: transparent;
    }

    .site-shell-rail--lead::-webkit-scrollbar-thumb {
        border: 1px solid transparent;
        border-radius: 999px;
        background: var(--eca-scrollbar-thumb);
        background-clip: padding-box;
        transition: background 0.15s ease;
    }

    .site-shell-rail--lead::-webkit-scrollbar-thumb:hover {
        background: var(--eca-scrollbar-thumb-hover);
        background-clip: padding-box;
    }

    .site-shell-rail--lead::-webkit-scrollbar-corner {
        background: transparent;
    }

    .site-shell-lead-inner {
        @apply overflow-hidden rounded-none border-0 bg-transparent p-0 shadow-none;
    }

    .site-shell-lead-inner > div {
        @apply rounded-lg border-0 bg-transparent p-0 shadow-none;
    }

    .site-shell-lead-inner .site-lead-form-compact .site-lead-input,
    .site-shell-lead-inner .site-lead-form-compact textarea.site-lead-input {
        @apply py-2 text-xs;
    }

    .site-shell-lead-inner.site-lead-form-compact .site-lead-form-fields {
        @apply space-y-3;
    }

    .site-shell-lead-inner.site-lead-form-compact h2 {
        @apply text-base;
    }

    .site-shell-lead-inner.site-lead-form-compact .grid {
        @apply grid-cols-1 gap-3;
    }

    .site-shell-rail--categories {
        @apply min-h-0;
        overflow: visible;
        max-height: none;
    }

    .site-shell-category-inner {
        @apply flex max-h-[calc(100vh-9.5rem)] flex-col overflow-hidden shadow-sm;
        background-color: var(--eca-card);
        border: 1px solid var(--eca-border);
    }

    .eca-category-tree-panel {
        @apply overflow-hidden rounded-xl border shadow-sm;
        border-color: var(--eca-border);
        background-color: var(--eca-card);
    }

    .site-fab-stack {
        @apply fixed flex flex-col-reverse items-end gap-3;
        z-index: var(--z-fab);
        inset-inline-end: 1.25rem;
        bottom: 1.5rem;
    }

    .site-fab-stack.is-hidden {
        @apply pointer-events-none opacity-0;
    }

    .site-fab-teaser {
        @apply relative mb-1 flex max-w-[18rem] items-start gap-2 rounded-2xl px-3.5 py-3 shadow-lg;
        background: var(--eca-card);
        border: 1px solid
            color-mix(in srgb, var(--eca-primary) 15%, transparent);
        color: var(--eca-text);
        box-shadow: 0 8px 32px
            color-mix(in srgb, var(--eca-primary) 12%, rgb(0 0 0 / 0.18));
    }

    .site-fab-teaser__body {
        @apply min-w-0 flex-1 text-start;
    }

    .site-fab-teaser__text {
        @apply m-0 text-[13px] leading-relaxed;
        color: var(--eca-text);
    }

    .site-fab-teaser__dismiss {
        @apply shrink-0 rounded-md px-1 text-base leading-none transition;
        color: var(--eca-text-muted);
    }

    .site-fab-teaser__dismiss:hover {
        color: var(--eca-text);
    }

    .site-fab {
        @apply relative flex h-14 w-14 items-center justify-center rounded-full text-white transition-transform duration-150 ease-out hover:scale-[1.04] active:scale-[0.96] focus:outline-none focus:ring-2 focus:ring-offset-2;
        --tw-ring-offset-color: var(--eca-surface);
    }

    .site-fab-lead {
        background: var(--eca-primary);
        box-shadow: 0 8px 24px
            color-mix(in srgb, var(--eca-primary) 35%, transparent);
    }

    .site-fab-lead:hover {
        filter: brightness(1.06);
    }

    .site-fab-lead:focus {
        --tw-ring-color: color-mix(
            in srgb,
            var(--eca-primary) 50%,
            transparent
        );
    }

    .site-fab-badge {
        @apply absolute -end-1 -top-1 flex min-h-[1.25rem] min-w-[1.25rem] items-center justify-center rounded-full px-1 text-[11px] font-bold leading-none ring-2;
        background: var(--eca-card);
        color: var(--eca-primary);
        --tw-ring-color: var(--eca-primary);
    }

    .site-fab-whatsapp {
        @apply bg-[#25D366] hover:bg-[#1ebe57] focus:ring-emerald-400;
        box-shadow: 0 8px 24px color-mix(in srgb, #25d366 35%, transparent);
    }

    .site-mobile-explore {
        @apply scroll-mt-20;
    }

    .site-section-sticky-heading {
        @apply sticky z-20 -mx-1 mb-6 flex items-center justify-between gap-4 border-b  bg-white px-4 py-3;
        top: calc(env(safe-area-inset-top, 0px) + 7.5rem);
    }

    .site-section-sticky-heading--soft {
        @apply bg-slate-50/90 supports-[backdrop-filter]:bg-slate-50/80;
    }

    .site-section-sticky-heading h2 {
        @apply text-xl font-bold  sm:text-2xl;
    }

    .site-section-sticky-action {
        @apply shrink-0 text-sm font-semibold text-brand-accent transition hover:text-brand-accentHover hover:underline;
    }

    .site-category-tabs-wrap {
        @apply sticky z-30 -mx-1 w-full min-w-0 max-w-full;
        top: calc(env(safe-area-inset-top, 0px) + 4.5rem);
        font-family: IRANSans, Vazir, ui-sans-serif, system-ui, sans-serif;
    }

    html.layout-lg {
        .site-category-tabs-wrap {
            top: calc(env(safe-area-inset-top, 0px) + 5rem);
        }
    }

    .site-category-tabs-shell {
        @apply relative min-w-0 overflow-visible px-2 pt-2;
        background-color: color-mix(
            in srgb,
            var(--eca-category-title-bg) 100%,
            transparent
        );
        border-bottom: 1px solid var(--eca-border);
        color: var(--eca-text);
    }

    .site-category-tabs-shell::before,
    .site-category-tabs-shell::after {
        @apply pointer-events-none absolute top-0 z-10 h-full w-6;
        content: "";
    }

    .site-category-tabs-shell::before {
        inset-inline-start: 0;
        background: linear-gradient(
            to inline-end,
            var(--eca-category-title-bg) 28%,
            transparent
        );
    }

    .site-category-tabs-shell::after {
        inset-inline-end: 0;
        background: linear-gradient(
            to inline-start,
            var(--eca-category-title-bg) 28%,
            transparent
        );
    }

    .site-category-tabs-scroll {
        @apply min-w-0 max-w-full overflow-x-auto overflow-y-hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        touch-action: pan-x;
    }

    .site-category-tabs-scroll::-webkit-scrollbar {
        display: none;
    }

    .site-category-tabs-track {
        @apply m-0 flex w-max max-w-none min-w-0 list-none flex-nowrap items-center gap-1 p-0 py-1;
    }

    .site-category-tab {
        @apply relative inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-lg border border-transparent px-3 py-2 text-[13px] font-medium leading-6 transition duration-150;
        scroll-snap-align: start;
        font-family: inherit;
        color: var(--eca-text);
    }

    .site-category-tab:hover {
        background-color: var(--eca-category-hover-bg);
        border-color: var(--eca-border);
        color: var(--eca-accent);
    }

    .site-category-tab:active {
        transform: scale(0.98);
        background-color: var(--eca-category-active-bg);
        border-color: color-mix(
            in srgb,
            var(--eca-accent) 22%,
            var(--eca-border)
        );
    }

    .site-category-tab:focus-visible {
        outline: 2px solid var(--eca-accent);
        outline-offset: 2px;
    }

    .site-category-tab--active {
        @apply font-semibold;
        background-color: var(--eca-category-active-bg);
        border-color: color-mix(
            in srgb,
            var(--eca-accent) 30%,
            var(--eca-border)
        );
        color: var(--eca-accent);
        box-shadow: 0 1px 4px
            color-mix(in srgb, var(--eca-text) 10%, transparent);
        transform: none;
    }

    .site-category-tab--active:hover {
        background-color: var(--eca-category-active-bg);
        color: var(--eca-accent);
    }

    .site-category-tab--active:active {
        transform: scale(0.98);
    }

    .site-category-tab--in-path {
        border-color: color-mix(
            in srgb,
            var(--eca-accent) 18%,
            var(--eca-border)
        );
        color: var(--eca-accent);
    }

    .site-category-tab-badge {
        @apply rounded-full px-2 py-0.5 text-[11px] font-bold;
        background-color: var(--eca-category-sub-bg);
        color: var(--eca-text-muted);
    }

    .site-category-tab--active .site-category-tab-badge {
        background-color: color-mix(
            in srgb,
            var(--eca-accent) 14%,
            var(--eca-card)
        );
        color: var(--eca-accent);
    }

    .site-category-tab-item {
        @apply relative m-0 inline-flex shrink-0 list-none p-0;
    }

    .site-category-tab-chevron {
        @apply inline-block h-1.5 w-1.5 shrink-0 border-b-2 border-e-2 opacity-70;
        border-color: currentColor;
        transform: rotate(45deg);
        margin-top: -0.2rem;
    }

    .site-category-tab-item[data-depth]:not([data-depth="0"])
        > .site-category-tab
        .site-category-tab-chevron {
        margin-top: 0;
        transform: rotate(-45deg);
    }

    [dir="rtl"]
        .site-category-tab-item[data-depth]:not([data-depth="0"])
        > .site-category-tab
        .site-category-tab-chevron {
        transform: rotate(135deg);
    }

    .site-category-tab-flyout {
        @apply absolute z-40 min-w-[12.5rem] rounded-xl border p-1.5;
        top: calc(100% + 0.25rem);
        inset-inline-start: 0;
        background: var(--eca-card);
        border-color: var(--eca-border);
        box-shadow: var(--shadow-card);
    }

    .site-category-tab-item[data-depth]:not([data-depth="0"])
        > .site-category-tab-flyout {
        top: 0;
        inset-inline-start: 100%;
        margin-inline-start: 0.25rem;
    }

    [dir="rtl"]
        .site-category-tab-item[data-depth]:not([data-depth="0"])
        > .site-category-tab-flyout {
        inset-inline-start: auto;
        inset-inline-end: 100%;
        margin-inline-start: 0;
        margin-inline-end: 0.25rem;
    }

    .site-category-tab-flyout-list {
        @apply m-0 flex list-none flex-col gap-0.5 p-0;
    }

    .site-category-tab-flyout-list .site-category-tab-item {
        @apply w-full;
    }

    .site-category-tab-flyout-list .site-category-tab {
        @apply w-full justify-between;
        scroll-snap-align: none;
    }

    html.layout-lg {
        .site-category-tabs-shell {
            @apply overflow-visible;
        }

        .site-category-tabs-shell::before,
        .site-category-tabs-shell::after {
            display: none;
        }

        .site-category-tabs-scroll {
            @apply overflow-visible;
            scroll-snap-type: none;
        }

        .site-category-tabs-track {
            @apply w-full max-w-full flex-wrap;
            scroll-snap-type: none;
        }
    }

    html:not(.layout-lg)
        .site-category-tab-item[data-depth="0"]
        > .site-category-tab-flyout {
        position: fixed;
        inset-inline: 0.5rem;
        top: calc(env(safe-area-inset-top, 0px) + 7rem);
        width: auto;
        max-height: min(50vh, 18rem);
        overflow-y: auto;
        z-index: 45;
    }

    .site-mobile-bottom-nav {
        @apply fixed inset-x-0 desktop:hidden;
        z-index: var(--z-dropdown);
        bottom: 0;
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 0.1rem);
    }

    .site-mobile-bottom-nav-shell {
        @apply mx-auto flex max-w-lg items-center justify-around gap-1 border-t   px-2 py-2 backdrop-blur-md;
    }

    .site-mobile-bottom-nav-item {
        @apply relative flex min-w-0 flex-1 flex-col items-center justify-center gap-1 px-2 py-2 text-[11px] font-semibold   transition duration-150 active:scale-[0.97];
        transition-property: color, transform;
    }

    .site-mobile-bottom-nav-item--active {
        @apply text-brand-accent;
    }

    .site-mobile-bottom-nav-avatar {
        @apply relative inline-flex h-7 w-7 shrink-0 items-center justify-center;
    }

    .site-mobile-bottom-nav-avatar__img {
        @apply h-7 w-7 rounded-full object-cover;
        background: color-mix(in srgb, var(--eca-accent) 16%, var(--eca-card));
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--eca-accent) 28%, transparent);
    }

    .site-mobile-bottom-nav-avatar__img--initial {
        @apply inline-flex items-center justify-center text-[11px] font-bold;
        color: var(--eca-accent);
    }

    .site-mobile-bottom-nav-avatar__badge {
        @apply absolute -end-1 -top-1 z-10 inline-flex min-h-[1rem] min-w-[1rem] items-center justify-center rounded-full px-1 text-[9px] font-bold leading-none;
        background: var(--eca-accent);
        color: var(--eca-accent-contrast, #fff);
        box-shadow: 0 0 0 2px var(--eca-surface);
    }

    html.layout-mobile {
        .site-fab-stack {
            bottom: calc(env(safe-area-inset-bottom, 0px) + 5.75rem);
        }
    }

    .site-svg-icon {
        @apply inline-flex shrink-0 items-center justify-center leading-none;
    }

    .site-svg-icon > svg {
        display: block;
    }

    .site-btn-primary {
        @apply inline-flex items-center justify-center rounded px-5 py-2.5 text-sm font-semibold text-white transition duration-150 active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-brand-accent focus:ring-offset-2;
        background-color: var(--eca-accent);
        transition-property: background-color, transform, box-shadow;
        --tw-ring-offset-color: var(--eca-surface);
    }

    .site-btn-primary:hover {
        background-color: var(--eca-accent);
        filter: brightness(1.08);
        box-shadow: 0 4px 14px
            color-mix(in srgb, var(--eca-accent) 35%, transparent);
    }

    .site-btn-outline {
        @apply inline-flex items-center justify-center rounded border px-5 py-2.5 text-sm font-semibold transition duration-150 active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-brand-accent/40 focus:ring-offset-2;
        border-color: var(--eca-border);
        background-color: color-mix(in srgb, var(--eca-card) 88%, transparent);
        color: var(--eca-text);
        transition-property:
            border-color, color, background-color, transform, box-shadow;
        --tw-ring-offset-color: var(--eca-surface);
    }

    .site-btn-outline:hover {
        border-color: color-mix(
            in srgb,
            var(--eca-accent) 35%,
            var(--eca-border)
        );
        background-color: var(--eca-category-hover-bg);
        color: var(--eca-accent);
    }

    .eca-detail-sticky-actions {
        @apply sticky bottom-20 z-30 flex flex-wrap gap-3 rounded-xl p-3 desktop:static desktop:border-0 desktop:bg-transparent desktop:p-0 desktop:shadow-none;
        background: var(--eca-detail-glass);
        border: 1px solid var(--eca-border);
        backdrop-filter: blur(16px);
        box-shadow: var(--eca-shadow-card);
    }

    .eca-detail-sticky-actions .site-btn-primary,
    .eca-detail-sticky-actions .site-btn-outline {
        @apply min-h-[2.75rem] flex-1 sm:flex-none;
    }

    html.layout-lg {
        .eca-detail-sticky-actions {
            backdrop-filter: none;
        }
    }

    .site-card {
        @apply flex flex-col overflow-hidden border   duration-200;
        transition-property: box-shadow, border-color;
    }

    .site-card:hover {
        box-shadow: 0 2px 17px 0 rgba(0, 0, 0, 0.09);
        transform: none;
    }

    .eca-card-grid {
        @apply grid grid-cols-1 gap-4 sm:grid-cols-2 desktop:grid-cols-4 wide:grid-cols-4;
    }

    .eca-card-grid--services {
        @apply gap-4 grid-cols-1   md:grid-cols-2 desktop:grid-cols-3 wide:grid-cols-3;
    }

    .eca-card-grid--services > li {
        @apply flex min-w-0;
    }

    .eca-card-grid--services .eca-smart-card--service {
        @apply w-full max-w-none;
    }

    .eca-card-grid--home {
        @apply gap-3 sm:gap-3.5;
    }

    .eca-card-grid--home .eca-smart-card__body-zone {
        @apply gap-1.5 p-3;
    }

    .eca-card-grid--home .eca-smart-card__footer-zone {
        @apply px-3 pb-3;
    }

    .eca-card-grid--home .eca-smart-card__title {
        @apply text-sm leading-snug;
    }

    .eca-card-grid--home .eca-smart-card__btn {
        @apply min-h-[2.25rem] px-3 text-xs;
    }

    .eca-card-grid--home .eca-smart-card__media-zone {
        max-height: 9.5rem;
    }

    @media (min-width: 768px) {
        .eca-card-grid--home .eca-smart-card__media-zone {
            max-height: 11rem;
        }
    }

    .eca-card-grid--home .eca-smart-card__media--product,
    .eca-card-grid--home .eca-smart-card__media--article {
        aspect-ratio: unset;
    }

    .eca-card-grid--home .eca-smart-card__service-thumb img,
    .eca-card-grid--home .eca-smart-card__service-thumb > div {
        @apply h-16 w-16;
    }

    .eca-card-grid--home .eca-smart-card__service-thumb img {
        @apply ring-2;
    }

    .eca-card-grid--home
        .eca-smart-card--service
        .eca-smart-card__timeline-panel {
        @apply p-2.5;
    }

    .eca-card-grid--home
        .eca-smart-card--service
        .eca-smart-card__timeline-label {
        @apply text-[10px];
    }

    .eca-services-pipeline {
        @apply flex flex-col gap-4;
    }

    .eca-services-pipeline__item {
        @apply min-w-0;
    }

    .eca-services-pipeline__item > li,
    .eca-services-pipeline__item .eca-smart-card--service {
        @apply w-full max-w-none;
    }

    .eca-section-heading a {
        color: var(--eca-primary);
    }

    .eca-smart-card {
        @apply relative flex h-full overflow-hidden border backdrop-blur-xl;
        border-radius: var(--card-radius);
        background-color: color-mix(in srgb, var(--eca-card) 80%, transparent);
        border-color: var(--eca-border);
        box-shadow:     1px 1px 1px 1px var(--eca-border);
        color: var(--eca-text);
        transition:
            transform var(--card-transition),
            box-shadow var(--card-transition),
            border-color var(--card-transition);
    }

    .eca-smart-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--card-shadow-hover);
    }

    .eca-smart-card:focus-within {
        border-color: color-mix(
            in srgb,
            var(--eca-primary) 45%,
            var(--eca-border)
        );
    }

    .eca-smart-card__border {
        background: linear-gradient(
            135deg,
            var(--eca-primary),
            var(--eca-secondary)
        );
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: calc(var(--card-radius) - 1px);
        padding: 1px;
        -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    .eca-smart-card:hover .eca-smart-card__border {
        opacity: 1;
    }

    .eca-smart-card :focus-visible {
        outline: none;
        box-shadow: 0 0 0 4px var(--focus-ring);
        border-radius: 0.75rem;
    }

    .eca-smart-card__interaction {
        @apply pointer-events-none absolute inset-0 z-0;
    }

    .eca-smart-card__engine {
        @apply min-h-0 w-full;
    }

    .eca-smart-card__media-zone {
        @apply relative overflow-hidden;
        aspect-ratio: 16 / 9;
        max-height: 10rem;
    }

    @media (min-width: 768px) {
        .eca-smart-card__media-zone {
            max-height: 13.75rem;
        }
    }

    .eca-smart-card__media-link {
        @apply block h-full w-full;
    }

    .eca-smart-card__media {
        @apply relative block h-full w-full overflow-hidden;
        border-radius: var(--card-media-radius);
    }

    .eca-smart-card__media--product,
    .eca-smart-card__media--article {
        aspect-ratio: unset;
        min-height: 0;
    }

    .eca-smart-card__media--article::after {
        content: "";
        @apply absolute inset-0 pointer-events-none;
        background: linear-gradient(
            to top,
            color-mix(in srgb, var(--eca-card) 55%, transparent),
            transparent 50%
        );
    }

    .eca-smart-card__badge-zone {
        @apply pointer-events-none absolute inset-0 z-[2];
    }

    .eca-smart-card__media-actions-zone,
    .eca-smart-card__actions-zone {
        @apply absolute inset-x-0 bottom-3 z-[3] flex justify-center gap-2;
    }

    .eca-smart-card__body-zone {
        @apply flex flex-1 flex-col gap-2 p-4;
    }

    .eca-smart-card__eyebrow-zone {
        @apply text-xs font-semibold uppercase tracking-wide;
        color: var(--eca-text-muted);
    }

    .eca-smart-card__content-zone {
        @apply flex flex-col gap-2;
    }

    .eca-smart-card__meta-zone {
        @apply mt-1;
    }

    .eca-smart-card__intelligence-zone {
        @apply mt-2;
    }

    .eca-smart-card__hit {
        @apply absolute inset-0 z-[2];
    }

    .eca-smart-card__footer-zone {
        @apply relative z-[3] mt-auto flex flex-col gap-2 px-4 pb-4;
    }

    .eca-smart-card__image {
        @apply h-full w-full object-cover transition duration-500 ease-out;
    }

    .eca-smart-card:hover .eca-smart-card__image {
        transform: scale(1.08);
    }

    .eca-smart-card__placeholder {
        @apply flex h-full min-h-[12rem] items-center justify-center text-sm;
        color: var(--eca-text-muted);
        background: color-mix(
            in srgb,
            var(--eca-card) 70%,
            var(--eca-primary) 30%
        );
    }

    .eca-smart-card__chip {
        @apply absolute start-2 top-2 z-[2] rounded-full px-2 py-0.5 text-[11px] font-bold;
        background: color-mix(
            in srgb,
            var(--eca-card) 85%,
            var(--eca-primary) 15%
        );
        color: var(--eca-text);
    }

    .eca-smart-card__chip--glass,
    .eca-smart-card__discount--glass {
        backdrop-filter: blur(10px);
        background: color-mix(in srgb, var(--eca-card) 72%, transparent);
        border: 1px solid color-mix(in srgb, var(--eca-border) 70%, transparent);
    }

    .eca-smart-card__chip--accent {
        background: var(--eca-accent);
        color: #fff;
    }

    .eca-smart-card__discount {
        @apply absolute end-2 top-2 z-[2] rounded-full px-2 py-0.5 text-[11px] font-bold text-white;
        background: var(--eca-danger);
    }

    .eca-smart-card__category {
        @apply absolute bottom-2 start-2 z-[2] rounded-full px-2 py-0.5 text-[11px] font-bold;
        background: color-mix(
            in srgb,
            var(--eca-secondary) 25%,
            var(--eca-card) 75%
        );
        color: var(--eca-text);
    }

    .eca-smart-card__quick-actions {
        @apply flex justify-center gap-2 opacity-0 transition duration-300;
    }

    .eca-smart-card:hover .eca-smart-card__quick-actions {
        @apply opacity-100;
    }

    .eca-smart-card__quick-btn {
        @apply inline-flex h-9 w-9 items-center justify-center rounded-full border text-xs font-bold backdrop-blur-md transition;
        border-color: var(--eca-border);
        background: color-mix(in srgb, var(--eca-card) 70%, transparent);
        color: var(--eca-text);
    }

    .eca-smart-card__stats {
        @apply grid w-full gap-1.5 rounded-2xl border p-2 text-[11px];
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-color: color-mix(in srgb, var(--eca-border) 80%, transparent);
        background: color-mix(
            in srgb,
            var(--eca-card) 92%,
            var(--eca-primary) 8%
        );
        color: var(--eca-text-muted);
    }

    .eca-smart-card--product .eca-smart-card__stats,
    .eca-smart-card__stats--product {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .eca-smart-card__stat--desktop {
        @apply hidden;
    }

    html.layout-lg {
        .eca-smart-card__stat--desktop {
            @apply flex;
        }
    }

    html.layout-mobile[data-layout-size="md"] {
        .eca-smart-card__stats--product {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    html.layout-mobile[data-layout-size="xs"]
        .eca-smart-card--product
        .eca-smart-card__stats,
    html.layout-mobile[data-layout-size="xs"] .eca-smart-card__stats--product {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eca-smart-card__stat {
        @apply flex min-w-0 flex-col items-center justify-center gap-1 rounded-xl px-1 py-2 text-center;
        background: color-mix(in srgb, var(--eca-card) 88%, transparent);
    }

    .eca-smart-card__stat-icon {
        @apply inline-flex h-4 w-4 shrink-0 items-center justify-center;
        color: var(--eca-text-muted);
    }

    .eca-smart-card__stat-value {
        @apply w-full truncate text-xs font-bold tabular-nums leading-none;
        color: var(--eca-text);
    }

    .eca-smart-card__stat-label {
        @apply line-clamp-2 w-full text-[9px] font-semibold uppercase leading-tight tracking-wide;
        color: var(--eca-text-muted);
    }

    .eca-smart-card__title {
        @apply text-sm font-semibold leading-snug;
    }

    .eca-smart-card__title a {
        @apply transition hover:text-[var(--eca-primary)];
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }

    .eca-smart-card__description {
        @apply text-sm leading-relaxed;
        color: var(--eca-text-muted);
    }

    .eca-smart-card__price-block {
        @apply flex flex-wrap items-baseline gap-2;
    }

    .eca-smart-card__price-old {
        @apply text-xs line-through;
        color: var(--eca-text-muted);
    }

    .eca-smart-card__price {
        @apply text-base font-bold sm:text-lg;
        color: var(--eca-primary);
    }

    .eca-smart-card__price--inquiry {
        @apply text-sm font-semibold sm:text-sm;
        color: var(--eca-text);
    }

    .eca-smart-card--product .eca-smart-card__badge-zone {
        @apply flex flex-col items-start gap-1 p-2;
    }

    .eca-smart-card--product .eca-smart-card__chip {
        @apply static;
    }

    .eca-smart-card__rating {
        @apply flex items-center gap-1 text-xs font-semibold;
        color: var(--eca-text);
    }

    .eca-smart-card__rating-icon {
        @apply h-3.5 w-3.5;
        color: var(--eca-primary);
    }

    .eca-smart-card__feature-chips,
    .eca-smart-card__trust-chips {
        @apply m-0 flex list-none flex-wrap gap-1 p-0;
    }

    .eca-smart-card__feature-chip,
    .eca-smart-card__trust-chip {
        @apply rounded-md px-1.5 py-0.5 text-[10px] font-semibold leading-tight;
        color: var(--eca-text);
    }

    .eca-smart-card__trust-chip {
        background: color-mix(in srgb, var(--eca-card) 88%, transparent);
        color: var(--eca-text-muted);
    }

    .eca-smart-card__footer-actions {
        @apply flex flex-wrap gap-2;
    }

    .eca-smart-card__footer-actions .eca-smart-card__btn {
        @apply min-w-0 flex-1;
    }

    .eca-smart-card--state-out-of-stock .eca-smart-card__image {
        @apply grayscale;
        opacity: 0.72;
    }

    .eca-smart-card--state-out-of-stock .eca-smart-card__btn--primary {
        background: color-mix(
            in srgb,
            var(--eca-card) 70%,
            var(--eca-text-muted) 30%
        );
        color: var(--eca-text);
    }

    .eca-smart-card--state-low-stock .eca-smart-card__stock--low {
        @apply font-bold;
    }

    .eca-smart-card--state-inquiry .eca-smart-card__price--inquiry {
        color: var(--eca-primary);
    }

    .eca-smart-card--compact .eca-smart-card__feature-chips {
        @apply line-clamp-none max-h-[3.5rem] overflow-hidden;
    }

    .eca-smart-card--compact.eca-smart-card--product
        .eca-smart-card__media-zone {
        max-height: 11.5rem;
    }

    .eca-smart-card--compact.eca-smart-card--product
        .eca-smart-card__media--product {
        aspect-ratio: unset;
    }

    .eca-smart-card--compact .eca-smart-card__body-zone {
        @apply gap-1.5 p-3;
    }

    .eca-smart-card--compact .eca-smart-card__footer-zone {
        @apply px-3 pb-3;
    }

    .eca-smart-card--compact .eca-smart-card__title {
        @apply text-sm leading-snug;
    }

    .eca-smart-card--compact .eca-smart-card__price {
        @apply text-sm;
    }

    .eca-smart-card--compact .eca-smart-card__btn {
        @apply min-h-[2.25rem] px-3 text-xs;
    }

    .eca-smart-card__stock {
        @apply text-xs font-medium;
    }

    .eca-smart-card__stock--ok {
        color: var(--eca-success);
    }

    .eca-smart-card__stock--low {
        @apply animate-pulse;
        color: var(--eca-danger);
    }

    .eca-smart-card__stock--out {
        color: var(--eca-text-muted);
    }

    .eca-smart-card__ai-bar {
        @apply rounded-lg px-2 py-1.5 text-[11px];
        background: linear-gradient(
            90deg,
            color-mix(in srgb, var(--eca-primary) 15%, transparent),
            color-mix(in srgb, var(--eca-secondary) 15%, transparent)
        );
    }

    .eca-smart-card--service {
        @apply min-h-0;
    }

    .eca-service-showcase {
        @apply flex flex-col gap-3;
    }

    .eca-service-showcase--detail {
        @apply gap-4 rounded-2xl border p-4 sm:p-5;
        border-color: color-mix(in srgb, var(--eca-border) 90%, transparent);
    }

    html.layout-lg {
        .eca-service-showcase--detail {
            @apply gap-5 rounded-2xl border-0 bg-transparent p-0 shadow-none;
        }

        .eca-service-showcase--detail .eca-service-showcase__layout {
            @apply grid items-start gap-5;
            grid-template-columns: minmax(0, 1.2fr) minmax(17rem, 0.8fr);
        }

        .eca-service-showcase--detail .eca-service-showcase__sidebar {
            @apply sticky flex flex-col gap-4;
            top: 6rem;
        }

        .eca-service-showcase--detail
            .eca-service-showcase__sidebar
            .eca-smart-card__financial {
            grid-template-columns: 1fr;
        }

        .eca-service-showcase--detail
            .eca-service-showcase__sidebar
            .eca-smart-card__financial-item {
            @apply flex-row items-center justify-between px-4 py-3.5 text-start;
        }

        .eca-service-showcase--detail
            .eca-service-showcase__sidebar
            .eca-smart-card__financial-item:not(:last-child) {
            border-inline-end: none;
            border-bottom: 1px solid
                color-mix(in srgb, var(--eca-border) 70%, transparent);
        }

        .eca-service-showcase--detail
            .eca-service-showcase__sidebar
            .eca-smart-card__financial-label {
            @apply line-clamp-none text-start normal-case tracking-normal;
        }

        .eca-service-showcase--detail
            .eca-service-showcase__sidebar
            .eca-smart-card__financial-value {
            @apply w-auto shrink-0 text-base;
        }

        .eca-service-showcase--detail .eca-service-showcase__tech {
            @apply gap-4 p-5;
        }

        .eca-service-showcase--detail .eca-smart-card__tech-rating {
            @apply flex;
        }
    }

    html.layout-xl {
        .eca-service-showcase--detail .eca-service-showcase__layout {
            gap: 1.75rem;
            grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
        }
    }

    .eca-service-showcase__layout {
        @apply flex flex-col gap-3;
    }

    .eca-service-showcase__primary,
    .eca-service-showcase__sidebar {
        @apply flex min-w-0 flex-col gap-3;
    }

    .eca-service-showcase__primary {
        container-type: inline-size;
        container-name: service-timeline;
    }

    /* Narrow: steps stacked vertically (detail + cramped cards) */
    @container service-timeline (max-width: 26rem) {
        .eca-smart-card__timeline--detail {
            @apply gap-2;
        }

        .eca-smart-card__timeline--detail .eca-smart-card__timeline-row {
            @apply flex flex-col gap-2;
            grid-template-columns: unset;
            max-width: none;
            padding: 0;
        }

        .eca-smart-card__timeline--detail .eca-smart-card__timeline-row--tail,
        .eca-smart-card__timeline--detail .eca-smart-card__timeline-row--pair {
            @apply mx-0 w-full max-w-none px-0;
        }

        .eca-smart-card__timeline--detail .eca-smart-card__timeline-step {
            @apply flex-row items-center justify-start gap-3 text-start;
        }

        .eca-smart-card__timeline--detail
            .eca-smart-card__timeline-step:not(:last-child)::after {
            display: none;
        }

        .eca-smart-card__timeline--detail .eca-smart-card__timeline-label {
            @apply w-auto whitespace-normal text-xs leading-snug;
        }
    }

    /* Medium: 4+2 grid (default row layout) */
    @container service-timeline (min-width: 26.01rem) and (max-width: 39.99rem) {
        .eca-smart-card__timeline--detail .eca-smart-card__timeline-label {
            @apply whitespace-normal text-[10px] leading-tight;
        }
    }

    /* Wide enough: single row of 6 steps */
    @container service-timeline (min-width: 40rem) {
        .eca-smart-card__timeline--detail {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 0.65rem;
        }

        .eca-smart-card__timeline--detail .eca-smart-card__timeline-row {
            display: contents;
        }

        .eca-smart-card__timeline--detail .eca-smart-card__timeline-step {
            @apply min-w-0 flex-col items-center text-center;
        }

        .eca-smart-card__timeline--detail .eca-smart-card__timeline-label {
            @apply text-[10px] leading-tight;
            white-space: normal;
        }
    }

    /* Service list cards: same vertical timeline when card column is narrow */
    .eca-smart-card--service .eca-smart-card__timeline-panel {
        container-type: inline-size;
        container-name: service-card-timeline;
    }

    @container service-card-timeline (max-width: 22rem) {
        .eca-smart-card--service .eca-smart-card__timeline-row {
            @apply flex flex-col gap-2;
            grid-template-columns: unset;
            max-width: none;
            padding: 0;
        }

        .eca-smart-card--service .eca-smart-card__timeline-row--tail,
        .eca-smart-card--service .eca-smart-card__timeline-row--pair {
            @apply mx-0 w-full max-w-none px-0;
        }

        .eca-smart-card--service .eca-smart-card__timeline-step {
            @apply flex-row items-center justify-start gap-3 text-start;
        }

        .eca-smart-card--service
            .eca-smart-card__timeline-step:not(:last-child)::after {
            display: none;
        }

        .eca-smart-card--service .eca-smart-card__timeline-label {
            @apply w-auto whitespace-normal;
        }
    }

    .eca-service-showcase__status-bar {
        @apply flex items-center justify-between gap-4 border-b pb-4;
        border-color: color-mix(in srgb, var(--eca-border) 65%, transparent);
    }

    html.layout-lg {
        .eca-service-showcase--detail .eca-service-showcase__status-bar {
            @apply rounded-2xl border px-5 py-4;
            border-color: color-mix(
                in srgb,
                var(--eca-border) 75%,
                transparent
            );
            background: color-mix(
                in srgb,
                var(--eca-card) 92%,
                var(--eca-primary) 8%
            );
        }
    }

    .eca-service-showcase__status-main {
        @apply flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center sm:gap-3;
    }

    .eca-service-showcase__tracking {
        @apply m-0 text-sm eca-theme-text-muted;
    }

    .eca-service-showcase__tracking-label {
        @apply me-1.5 font-medium;
    }

    .eca-service-showcase__tracking strong {
        @apply font-mono text-sm font-bold eca-theme-text;
    }

    .eca-service-showcase--detail .eca-smart-card__timeline-panel {
        @apply mt-0 rounded-xl border p-4 desktop:p-5;
        border-color: color-mix(in srgb, var(--eca-border) 70%, transparent);
        background-color: color-mix(in srgb, var(--eca-card) 88%, transparent);
    }

    .eca-service-showcase--detail .eca-smart-card__timeline-title {
        @apply text-xs desktop:text-sm;
    }

    .eca-service-showcase--detail .eca-smart-card__timeline-label {
        @apply whitespace-normal text-[11px] leading-snug;
    }

    .eca-service-showcase--detail .eca-smart-card__tech,
    .eca-service-showcase--detail .eca-service-showcase__tech {
        @apply rounded-2xl border p-4;
        border-color: color-mix(in srgb, var(--eca-border) 70%, transparent);
        background-color: color-mix(in srgb, var(--eca-card) 90%, transparent);
    }

    .eca-service-showcase--detail .eca-smart-card__financial {
        @apply rounded-2xl;
    }

    .eca-service-showcase--detail .eca-smart-card__financial-value {
        @apply text-sm sm:text-base;
    }

    .eca-service-showcase__ai--detail {
        @apply text-sm leading-relaxed desktop:text-[0.95rem];
    }

    .eca-service-showcase__ai-text {
        margin: 0;
        line-height: 1.625;
        max-height: calc(1.625em * 4); /* hard cap: exactly 4 lines */
        overflow: hidden;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .eca-service-showcase--detail .eca-service-showcase__footer {
        @apply mt-0 justify-start gap-3;
    }

    .eca-service-showcase--detail .eca-smart-card__btn {
        @apply flex-none py-2.5 text-sm desktop:py-3 desktop:text-base;
        width: auto;
        min-width: 10rem;
        max-width: 16rem;
    }

    .eca-service-showcase--card
        .eca-service-showcase__footer
        .eca-smart-card__btn {
        @apply flex-1;
        max-width: 12rem;
    }

    .eca-service-detail__hero {
        @apply overflow-hidden;
    }

    .eca-service-detail__prose {
        @apply leading-relaxed;
    }

    .eca-smart-card--service .eca-smart-card__footer-zone {
        @apply mt-auto;
    }

    .eca-smart-card__service-header {
        @apply flex gap-3 p-3;
    }

    .eca-smart-card__service-thumb {
        @apply relative shrink-0;
    }

    .eca-smart-card__service-status {
        @apply   -translate-x-1/2 whitespace-nowrap rounded-full px-2 py-0.5 text-[11px] font-bold;
        color: var(--eca-warning);
    }

    .eca-smart-card__tracking {
        @apply mt-1 text-xs;
        color: var(--eca-text-muted);
    }

    .eca-smart-card__timeline-panel {
        @apply rounded-2xl border p-3 sm:p-3.5 mt-3;
        border-color: var(--eca-border);
        background: color-mix(
            in srgb,
            var(--eca-card) 94%,
            var(--eca-primary) 6%
        );
    }

    .eca-smart-card__timeline-head {
        @apply mb-2.5 flex items-center justify-between gap-2;
    }

    .eca-smart-card__timeline-title {
        @apply text-[11px] font-bold uppercase tracking-wide;
        color: var(--eca-text-muted);
    }

    .eca-smart-card__timeline-badge {
        @apply inline-flex shrink-0 items-center rounded-full px-2 py-0.5 text-[11px] font-bold tabular-nums;
        background: color-mix(in srgb, var(--eca-primary) 18%, transparent);
        color: var(--eca-primary);
    }

    .eca-smart-card__timeline-meter {
        --timeline-progress: 0;
        @apply relative mb-3 h-1.5 overflow-hidden rounded-full;
        background: color-mix(in srgb, var(--eca-border) 65%, transparent);
    }

    .eca-smart-card__timeline-meter-fill {
        width: calc(var(--timeline-progress) * 1%);
        @apply block h-full rounded-full transition-[width] duration-700 ease-out;
        background: linear-gradient(
            90deg,
            var(--eca-success),
            var(--eca-primary)
        );
        box-shadow: 0 0 12px
            color-mix(in srgb, var(--eca-primary) 45%, transparent);
    }

    .eca-smart-card__timeline--grid {
        @apply space-y-2.5;
    }

    .eca-smart-card__timeline-row {
        @apply relative m-0 grid list-none gap-1 p-0;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .eca-smart-card__timeline-row--tail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        @apply px-1;
    }

    .eca-smart-card__timeline-row--pair {
        @apply mx-auto w-full max-w-[72%];
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eca-smart-card__timeline-step {
        @apply relative flex min-w-0 flex-col items-center gap-1 text-center;
    }

    .eca-smart-card__timeline--grid
        .eca-smart-card__timeline-step:not(:last-child)::after {
        content: "";
        @apply absolute top-3 h-px;
        background: color-mix(in srgb, var(--eca-border) 80%, transparent);
        inset-inline-start: calc(50% + 0.8rem);
        width: calc(100% - 1.6rem);
    }

    .eca-smart-card__timeline-row--pair
        .eca-smart-card__timeline-step:not(:last-child)::after {
        width: calc(100% - 1.4rem);
    }

    .eca-smart-card__timeline-dot {
        @apply relative z-[1] flex h-10 w-10 shrink-0 items-center justify-center rounded-full border text-[11px] font-bold transition-all duration-500;
        border-color: color-mix(in srgb, var(--eca-border) 85%, transparent);
        color: var(--eca-text-muted);
    }

    .eca-smart-card__timeline-dot-num {
        @apply leading-none;
    }

    .eca-smart-card__timeline-step--done .eca-smart-card__timeline-dot {
        @apply border-transparent text-white;
        background: var(--eca-success);
        box-shadow: 0 4px 14px
            color-mix(in srgb, var(--eca-success) 45%, transparent);
    }

    .eca-smart-card__timeline-step--done:not(:last-child)::after {
        background: color-mix(
            in srgb,
            var(--eca-success) 55%,
            var(--eca-border)
        );
    }

    .eca-smart-card__timeline-step--active .eca-smart-card__timeline-dot {
        @apply border-transparent text-white;
        background: var(--eca-primary);
        box-shadow:
            0 0 0 3px color-mix(in srgb, var(--eca-primary) 28%, transparent),
            0 6px 16px color-mix(in srgb, var(--eca-primary) 40%, transparent);
        animation: eca-timeline-pulse 2s ease-in-out infinite;
    }

    .eca-smart-card__timeline-step--active .eca-smart-card__timeline-label {
        color: var(--eca-primary);
        font-weight: 700;
    }

    .eca-smart-card__timeline-label {
        @apply w-full truncate text-[11px] leading-snug;
        color: var(--eca-text-muted);
    }

    .eca-smart-card__timeline-step--done .eca-smart-card__timeline-label {
        color: var(--eca-text);
    }

    @keyframes eca-timeline-pulse {
        0%,
        100% {
            box-shadow:
                0 0 0 3px
                    color-mix(in srgb, var(--eca-primary) 22%, transparent),
                0 6px 16px
                    color-mix(in srgb, var(--eca-primary) 35%, transparent);
        }

        50% {
            box-shadow:
                0 0 0 5px
                    color-mix(in srgb, var(--eca-primary) 14%, transparent),
                0 8px 20px
                    color-mix(in srgb, var(--eca-primary) 45%, transparent);
        }
    }

    .eca-smart-card__tech {
        @apply flex items-center gap-3 rounded-2xl   p-3;
        min-height: 4.5rem;
    }

    .eca-smart-card__tech-rating {
        @apply inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-1 text-xs font-bold;
        background: color-mix(in srgb, var(--eca-warning) 14%, transparent);
        color: var(--eca-warning);
    }

    .eca-smart-card__progress-ring {
        @apply relative   h-16 w-16;
    }

    .eca-smart-card__ring-bg {
        fill: none;
        stroke: color-mix(in srgb, var(--eca-border) 80%, transparent);
        stroke-width: 3;
    }

    .eca-smart-card__ring-fill {
        fill: none;
        stroke: url(#ecaRingGradient);
        stroke-width: 3;
        stroke-linecap: round;
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
    }

    .eca-smart-card__progress-label {
        @apply absolute inset-0 flex items-center justify-center text-xs font-bold;
    }

    .eca-smart-card__financial {
        @apply grid w-full grid-cols-3 overflow-hidden rounded-2xl border;
        border-color: color-mix(
            in srgb,
            var(--eca-success) 35%,
            var(--eca-border)
        );
        background: linear-gradient(
            135deg,
            color-mix(in srgb, var(--eca-success) 12%, var(--eca-card)),
            color-mix(in srgb, var(--eca-primary) 8%, var(--eca-card))
        );
        box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
    }

    .eca-smart-card__financial-item {
        @apply flex min-w-0 flex-col items-center justify-center gap-1.5 px-2 py-3.5 text-center sm:px-3 sm:py-4;
    }

    .eca-smart-card__financial-item:not(:last-child) {
        border-inline-end: 1px solid
            color-mix(in srgb, var(--eca-border) 70%, transparent);
    }

    .eca-smart-card__financial-item--remaining {
        background: color-mix(in srgb, var(--eca-warning) 10%, transparent);
    }

    .eca-smart-card__financial-label {
        @apply line-clamp-2 text-[11px] font-semibold uppercase leading-tight tracking-wide;
        color: var(--eca-text-muted);
    }

    .eca-smart-card__financial-value {
        @apply block w-full truncate text-xs font-bold tabular-nums leading-tight;
        color: var(--eca-text);
    }

    .eca-smart-card__financial-value--paid {
        color: var(--eca-success);
    }

    .eca-smart-card__financial-value--remaining {
        color: var(--eca-warning);
    }

    .eca-smart-card__ai-box {
        @apply flex gap-2     text-xs leading-relaxed;
        border-color: color-mix(in srgb, var(--eca-primary) 25%, transparent);
        background: linear-gradient(
            135deg,
            color-mix(in srgb, var(--eca-primary) 10%, transparent),
            color-mix(in srgb, var(--eca-secondary) 10%, transparent)
        );
    }

    .eca-smart-card__ai-box--compact {
        @apply p-2 text-[11px];
    }

    .eca-smart-card__footer {
        @apply mt-auto flex flex-wrap gap-2;
    }

    .eca-smart-card__btn {
        @apply inline-flex flex-1 items-center justify-center rounded-xl px-3 py-2 text-xs font-semibold transition;
    }

    .eca-smart-card__btn--primary {
        background: linear-gradient(
            90deg,
            var(--eca-primary),
            var(--eca-secondary)
        );
        color: #fff;
    }

    .eca-smart-card__btn--outline {
        @apply border;
        border-color: var(--eca-border);
        background: color-mix(in srgb, var(--eca-card) 80%, transparent);
        color: var(--eca-text);
    }

    .eca-smart-card__meta-row {
        @apply flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px];
        color: var(--eca-text-muted);
    }

    .eca-smart-card__meta-row--article {
        @apply normal-case tracking-normal;
    }

    .eca-smart-card__meta-sep {
        @apply opacity-60;
    }

    .eca-smart-card__meta-sep--category {
        @apply hidden sm:inline;
    }

    .eca-smart-card__category-inline {
        @apply rounded-full px-2 py-0.5 text-[10px] font-semibold;
        background: color-mix(
            in srgb,
            var(--eca-secondary) 12%,
            var(--eca-card) 88%
        );
        color: var(--eca-text);
    }

    .eca-smart-card__title-link {
        @apply block text-inherit no-underline transition;
        color: inherit;
    }

    .eca-smart-card__title-link:hover .eca-smart-card__title {
        color: var(--eca-primary);
    }

    .eca-smart-card__title--clamp {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
    }

    @media (min-width: 1024px) {
        .eca-smart-card__title--clamp {
            -webkit-line-clamp: 2;
            line-clamp: 2;
        }
    }

    .eca-smart-card__cta-hint {
        @apply mt-2 inline-flex items-center gap-1 text-xs font-semibold;
        color: var(--eca-primary);
    }

    .eca-smart-card__ai-box--secondary {
        @apply gap-1.5 rounded-lg border p-2 text-[11px] leading-relaxed;
        border-color: color-mix(in srgb, var(--eca-border) 85%, transparent);
        background: color-mix(
            in srgb,
            var(--eca-card) 94%,
            var(--eca-primary) 6%
        );
        color: var(--eca-text-muted);
    }

    .eca-smart-card__ai-label {
        @apply shrink-0 text-[10px];
        opacity: 0.85;
    }

    .eca-smart-card__ai-text {
        @apply m-0 min-w-0;
    }

    .eca-smart-card__ai-bar--secondary {
        @apply border text-[10px];
        border-color: color-mix(in srgb, var(--eca-border) 85%, transparent);
        background: color-mix(
            in srgb,
            var(--eca-card) 94%,
            var(--eca-primary) 6%
        );
        color: var(--eca-text-muted);
    }

    .eca-smart-card__stats--article {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eca-smart-card--article .eca-smart-card__engine,
    .eca-smart-card--product .eca-smart-card__engine {
        @apply flex h-full flex-col;
    }

    .eca-smart-card--article .eca-smart-card__body-zone,
    .eca-smart-card--product .eca-smart-card__body-zone {
        @apply flex flex-1 flex-col gap-2;
    }

    .eca-smart-card--article:hover,
    .eca-smart-card--product:hover {
        transform: translateY(-2px);
    }

    .eca-smart-card--article .eca-smart-card__spotlight,
    .eca-smart-card--product .eca-smart-card__spotlight {
        @apply hidden;
    }

    .eca-smart-card--article:hover .eca-smart-card__border,
    .eca-smart-card--product:hover .eca-smart-card__border {
        opacity: 0.45;
    }

    .eca-smart-card--article:hover .eca-smart-card__image,
    .eca-smart-card--product:hover .eca-smart-card__image {
        transform: none;
    }

    .eca-smart-card--article .eca-smart-card__placeholder,
    .eca-smart-card--product .eca-smart-card__placeholder {
        @apply min-h-0;
    }

    .eca-product-grid {
        @apply eca-card-grid;
    }

    /* legacy tile card kept for reference pages if needed */
    .eca-product-card {
        @apply relative flex flex-col border;
        border-color: var(--eca-border);
        background: var(--eca-card);
        margin-left: -1px;
        margin-bottom: -1px;
        border-radius: 0;
        box-shadow: none;
    }

    .eca-product-card:hover {
        z-index: 11;
        box-shadow: 0 2px 17px 0 rgba(0, 0, 0, 0.09);
        transform: none;
    }

    .eca-product-card__media {
        @apply relative block w-full overflow-hidden bg-white;
        aspect-ratio: 1 / 1;
    }

    .eca-product-card__image {
        @apply absolute inset-0 block h-full w-full bg-white;
    }

    .eca-product-card__placeholder {
        @apply absolute inset-0 flex items-center justify-center   text-xs text-brand-muted;
    }

    .eca-product-card__badge {
        @apply absolute start-2 top-2 z-[2] bg-brand-accent px-1.5 py-0.5 text-[11px] font-bold text-white;
        border-radius: 0;
    }

    .eca-product-card__body {
        @apply flex flex-1 flex-col bg-white px-2 pb-3 pt-1 text-center;
    }

    .eca-product-card__name {
        @apply min-h-[3.25rem] text-sm leading-[1.625rem];
    }

    .eca-product-card__name a {
        @apply block overflow-hidden  transition hover:text-brand-accent;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .eca-product-card__price {
        @apply mt-1 text-sm font-bold text-brand-slate;
    }

    .eca-product-card__action {
        @apply mt-2 text-xs font-semibold text-brand-accent hover:text-brand-accentHover hover:underline;
    }

    .eca-header-shell {
        /* Children participate in page flow so sticky header isn't trapped in a short wrapper */
        display: contents;
        color: var(--eca-text);
    }

    .eca-header {
        @apply sticky top-0 border-b backdrop-blur-md;
        z-index: var(--z-header);
        background-color: var(--eca-header-bg);
        border-color: var(--eca-border);
        color: var(--eca-text);
        position: sticky;
        overflow: visible;
    }

    .eca-topbar {
        @apply relative border-b text-xs px-1;
        z-index: var(--z-dropdown);
        border-color: color-mix(in srgb, var(--eca-border) 80%, transparent);
        background-color: color-mix(
            in srgb,
            var(--eca-header-bg) 88%,
            var(--eca-primary) 12%
        );
    }

    .eca-topbar__inner {
        @apply flex h-9 items-center justify-between gap-3;
    }

    .eca-topbar__meta {
        @apply flex min-w-0 items-center gap-3 sm:gap-5;
        color: color-mix(in srgb, var(--eca-text) 75%, transparent);
    }

    .eca-topbar__phone {
        @apply inline-flex items-center gap-1.5 transition-colors;
    }

    .eca-topbar__phone:hover {
        color: var(--eca-accent);
    }

    .eca-topbar__hours {
        @apply inline-flex items-center gap-1.5 truncate;
    }

    .eca-topbar__hours-sep {
        @apply opacity-40;
    }

    .eca-topbar__online-dot {
        @apply inline-block h-1.5 w-1.5 shrink-0 rounded-full;
        background-color: #34d399;
        box-shadow: 0 0 0 3px color-mix(in srgb, #34d399 25%, transparent);
    }

    .eca-topbar__ctas {
        @apply flex shrink-0 items-center gap-1.5 sm:gap-2;
    }

    .eca-topbar__langs {
        @apply me-0.5 sm:me-1;
    }

    .eca-lang-switch {
        @apply inline-flex items-center gap-0.5 rounded-full p-0.5;
        background-color: color-mix(in srgb, var(--eca-card) 55%, transparent);
        border: 1px solid color-mix(in srgb, var(--eca-border) 85%, transparent);
    }

    .eca-lang-switch--roomy {
        @apply gap-1 rounded-xl p-1;
    }

    .eca-lang-switch__item {
        @apply relative inline-flex h-7 w-7 items-center justify-center rounded-full transition;
        color: var(--eca-text);
    }

    .eca-lang-switch--roomy .eca-lang-switch__item {
        @apply h-9 w-auto min-w-[2.25rem] gap-1.5 rounded-lg px-2;
    }

    .eca-lang-switch__item:hover {
        background-color: color-mix(
            in srgb,
            var(--eca-accent) 12%,
            transparent
        );
    }

    .eca-lang-switch__item.is-active {
        background-color: color-mix(
            in srgb,
            var(--eca-accent) 18%,
            var(--eca-card)
        );
        box-shadow: inset 0 0 0 1.5px
            color-mix(in srgb, var(--eca-accent) 55%, transparent);
    }

    .eca-lang-switch__flag {
        @apply h-[1.125rem] w-[1.125rem] rounded-full object-cover;
        box-shadow: 0 0 0 1px
            color-mix(in srgb, var(--eca-border) 70%, transparent);
    }

    .eca-lang-switch--roomy .eca-lang-switch__flag {
        @apply h-5 w-5;
    }

    .eca-lang-switch__label {
        @apply text-[11px] font-semibold leading-none;
    }

    .eca-lang-switch__check {
        @apply absolute -end-0.5 -top-0.5 inline-flex h-3.5 w-3.5 items-center justify-center rounded-full text-white;
        background-color: var(--eca-accent);
        box-shadow: 0 0 0 1.5px
            color-mix(in srgb, var(--eca-card) 90%, transparent);
    }

    .eca-topbar__cta {
        @apply inline-flex h-7 items-center justify-center rounded px-2.5 text-[11px] font-semibold transition sm:px-3;
    }

    .eca-topbar__cta--primary {
        color: #fff;
        background-color: var(--eca-accent);
    }

    .eca-topbar__cta--primary:hover {
        filter: brightness(1.08);
    }

    .eca-topbar__cta--secondary {
        border: 1px solid
            color-mix(in srgb, var(--eca-border) 90%, var(--eca-accent) 10%);
        color: var(--eca-text);
        background-color: color-mix(in srgb, var(--eca-card) 70%, transparent);
    }

    .eca-topbar__cta--secondary:hover {
        border-color: color-mix(
            in srgb,
            var(--eca-accent) 40%,
            var(--eca-border)
        );
        color: var(--eca-accent);
    }

    .eca-track-progress__bar {
        @apply h-2 overflow-hidden rounded-full;
        background-color: color-mix(
            in srgb,
            var(--eca-border) 70%,
            transparent
        );
    }

    .eca-track-progress__fill {
        @apply h-full rounded-full transition-all duration-500;
        width: calc(var(--track-progress, 0) * 1%);
        background: linear-gradient(
            90deg,
            var(--eca-accent),
            color-mix(in srgb, var(--eca-accent) 70%, #34d399)
        );
    }

    .eca-track-progress__steps {
        @apply grid gap-2 sm:grid-cols-5;
    }

    .eca-track-progress__step {
        @apply flex flex-col items-start gap-1 rounded-xl px-3 py-2.5 text-xs;
        background-color: color-mix(
            in srgb,
            var(--eca-surface) 92%,
            transparent
        );
        border: 1px solid transparent;
    }

    .eca-track-progress__step--done {
        border-color: color-mix(
            in srgb,
            var(--eca-accent) 25%,
            var(--eca-border)
        );
        background-color: color-mix(
            in srgb,
            var(--eca-accent) 10%,
            var(--eca-card)
        );
    }

    .eca-track-progress__step--current {
        border-color: color-mix(
            in srgb,
            var(--eca-accent) 45%,
            var(--eca-border)
        );
        background-color: color-mix(
            in srgb,
            var(--eca-accent) 16%,
            var(--eca-card)
        );
        box-shadow: 0 0 0 1px
            color-mix(in srgb, var(--eca-accent) 20%, transparent);
    }

    .eca-track-progress__step--upcoming {
        opacity: 0.55;
    }

    .eca-track-progress__dot {
        @apply mb-0.5 h-2 w-2 rounded-full;
        background-color: color-mix(
            in srgb,
            var(--eca-text-muted) 50%,
            transparent
        );
    }

    .eca-track-progress__step--done .eca-track-progress__dot,
    .eca-track-progress__step--current .eca-track-progress__dot {
        background-color: var(--eca-accent);
    }

    .eca-track-progress__label {
        @apply font-semibold leading-snug;
        color: var(--eca-text);
    }

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

    .eca-header__row {
        @apply flex flex-wrap items-center justify-between gap-3 py-2.5;
    }

    .eca-header-search {
        @apply flex min-w-0 flex-1 items-center gap-2 rounded-full px-4 py-2.5 text-sm transition;
        background-color: color-mix(
            in srgb,
            var(--eca-card) 85%,
            var(--eca-primary) 15%
        );
        color: var(--eca-text);
    }

    .eca-header-search span {
        color: var(--eca-text-muted);
    }

    .eca-header-icon {
        @apply inline-flex h-10 w-10 shrink-0 items-center justify-center rounded transition;
        color: var(--eca-text-muted);
    }

    .eca-header-icon:hover {
        background-color: color-mix(
            in srgb,
            var(--eca-card) 90%,
            var(--eca-primary) 10%
        );
        color: var(--eca-primary);
    }

    .eca-header-icon--account {
        color: var(--eca-accent);
        box-shadow: inset 0 0 0 1px
            color-mix(in srgb, var(--eca-accent) 35%, transparent);
    }

    .eca-header-icon--account:hover {
        background-color: color-mix(
            in srgb,
            var(--eca-accent) 12%,
            var(--eca-card)
        );
        color: var(--eca-accent);
    }

    .eca-header-icon--account-active {
        background-color: color-mix(
            in srgb,
            var(--eca-accent) 16%,
            var(--eca-card)
        );
        color: var(--eca-accent);
    }

    .eca-header-icon__avatar {
        @apply h-6 w-6 shrink-0 rounded-full object-cover;
        background: color-mix(in srgb, var(--eca-accent) 16%, var(--eca-card));
    }

    .eca-header-icon__badge {
        @apply absolute -end-0.5 -top-0.5 z-10 inline-flex min-h-[1.125rem] min-w-[1.125rem] items-center justify-center rounded-full px-1 text-[10px] font-bold leading-none;
        background: var(--eca-accent);
        color: var(--eca-accent-contrast, #fff);
        box-shadow: 0 0 0 2px var(--eca-header-bg, var(--eca-bg));
    }

    .eca-header-icon__avatar--initial {
        @apply inline-flex items-center justify-center text-[11px] font-bold;
        color: var(--eca-accent);
    }

    .eca-account-page {
        @apply py-6 desktop:py-8;
    }

    html.layout-mobile .eca-account-page {
        @apply pb-6 pt-0;
    }

    .eca-account-back {
        @apply inline-flex items-center gap-1 rounded-xl px-3.5 py-2 text-sm font-bold no-underline transition;
        background: var(--brand-accent);
        color: #fff;
        box-shadow: 0 0 0 3px
            color-mix(in srgb, var(--brand-accent) 35%, transparent);
    }

    .eca-account-back:hover {
        background: color-mix(in srgb, var(--brand-accent) 88%, #000);
        color: #fff;
    }

    .eca-account-header {
        @apply flex flex-wrap items-center justify-between gap-4 rounded-2xl border px-5 py-4 sm:px-6;
        border-color: var(--eca-border);
        background: var(--eca-card);
    }

    .eca-account-identity {
        @apply flex min-w-0 items-center gap-3;
    }

    .eca-account-avatar {
        @apply flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-full text-sm font-bold;
        background: color-mix(in srgb, var(--eca-accent) 16%, var(--eca-card));
        color: var(--eca-accent);
        border: 1px solid
            color-mix(in srgb, var(--eca-accent) 22%, var(--eca-border));
    }

    .eca-account-avatar__img {
        @apply h-full w-full object-cover;
    }

    .eca-account-avatar--lg {
        @apply h-20 w-20 text-lg;
    }

    .eca-profile-card__avatar-editor {
        @apply flex flex-wrap items-center gap-4;
    }

    .eca-profile-card__avatar-actions {
        @apply flex min-w-0 flex-1 flex-wrap items-center gap-2;
    }

    .eca-profile-card__row--avatar {
        @apply items-start;
    }

    .eca-account-kicker {
        @apply text-[11px] font-semibold uppercase tracking-[0.14em];
        color: var(--eca-text-muted);
    }

    .eca-account-identity__name {
        @apply text-xl font-bold leading-tight sm:text-2xl;
        color: var(--eca-text);
    }

    .eca-account-identity__meta {
        @apply mt-1 flex flex-wrap items-center gap-2 text-sm;
        color: var(--eca-text-muted);
    }

    .eca-account-verified {
        @apply inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold;
        color: var(--eca-success);
        background: color-mix(in srgb, var(--eca-success) 12%, var(--eca-card));
    }

    .eca-account-header__chip {
        @apply inline-flex items-center rounded-full px-3 py-1;
        background: color-mix(in srgb, var(--eca-accent) 10%, var(--eca-card));
        border: 1px solid
            color-mix(in srgb, var(--eca-accent) 20%, var(--eca-border));
    }

    .eca-account-logout-confirm {
        @apply flex flex-wrap items-center gap-2 text-sm;
        color: var(--eca-text-muted);
    }

    .eca-account-logout {
        @apply inline-flex shrink-0 items-center justify-center rounded-xl px-4 py-2 text-sm font-semibold transition;
        color: var(--eca-danger);
        border: 1px solid
            color-mix(in srgb, var(--eca-danger) 35%, var(--eca-border));
        background: color-mix(in srgb, var(--eca-danger) 8%, var(--eca-card));
    }

    .eca-account-logout:hover {
        background: color-mix(in srgb, var(--eca-danger) 14%, var(--eca-card));
    }

    .eca-account-section {
        @apply rounded-2xl border p-5 sm:p-6;
        border-color: var(--eca-border);
        background: var(--eca-card);
    }

    .eca-account-section__title {
        @apply text-lg font-bold;
        color: var(--eca-text);
    }

    .eca-account-section__subtitle {
        @apply mt-1 text-sm;
        color: var(--eca-text-muted);
    }

    .eca-account-empty {
        @apply mt-6 rounded-xl border px-6 py-10 text-center;
        border-color: var(--eca-border);
        color: var(--eca-text-muted);
        background: color-mix(
            in srgb,
            var(--eca-card) 96%,
            var(--eca-accent) 4%
        );
    }

    .eca-account-empty__icon {
        @apply mx-auto mb-3 h-8 w-8 opacity-60;
    }

    .eca-account-empty__title {
        @apply mb-2 text-base font-bold;
        color: var(--eca-text);
    }

    .eca-account-shell {
        @apply flex flex-col gap-5 px-2;
    }

    .eca-account-sticky-top {
        display: contents;
    }

    html.layout-lg {
        .eca-account-shell {
            display: grid;
            grid-template-columns: 13.5rem minmax(0, 1fr);
            grid-template-areas: "nav workspace";
            align-items: start;
            gap: 1.5rem;
        }

        .eca-account-shell--profile {
            grid-template-areas:
                "header header"
                "nav workspace";
        }

        .eca-account-header {
            grid-area: header;
        }

        .eca-account-nav {
            grid-area: nav;
        }

        .eca-account-workspace {
            grid-area: workspace;
            min-width: 0;
        }
    }

    html.layout-mobile {
        .eca-account-sticky-top {
            display: flex;
            flex-direction: column;
            gap: 0;
            order: 1;
            position: sticky;
            top: calc(env(safe-area-inset-top, 0px));
            z-index: 30;
            margin-inline: -0.5rem;
            backdrop-filter: blur(20px);
            background: color-mix(in srgb, var(--eca-header-bg, var(--eca-card)) 92%, transparent);
            border-bottom: 1px solid var(--eca-border);
        }

        .eca-account-shell--profile .eca-account-sticky-top {
            gap: 0.35rem;
        }

        .eca-account-header {
            margin: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            padding: 0.75rem 1rem 0.35rem;
        }

        .eca-account-header .eca-account-avatar {
            @apply h-10 w-10 text-xs;
        }

        .eca-account-header .eca-account-identity__name {
            @apply text-lg;
        }

        .eca-account-workspace {
            order: 2;
            min-width: 0;
        }
    }

    .eca-account-nav,
    .eca-account-tabs {
        @apply grid grid-cols-2 gap-1 rounded-2xl border p-1;
        border-color: var(--eca-border);
        background: color-mix(in srgb, var(--eca-card) 88%, transparent);
    }

    html.layout-mobile {
        .eca-account-nav {
            position: static;
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 0.25rem;
            overflow-x: auto;
            overflow-y: hidden;
            overscroll-behavior-x: contain;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            margin: 0;
            padding: 0.35rem 0.5rem;
            border-radius: 0;
            border: 0;
            background: transparent;
            backdrop-filter: none;
        }

        .eca-account-nav::-webkit-scrollbar {
            display: none;
        }

        .eca-account-tab {
            flex: 0 0 auto;
            white-space: nowrap;
        }
    }

    html.layout-lg {
        .eca-account-nav {
            @apply sticky grid-cols-1 self-start p-2;
            top: 1rem;
        }
    }

    .eca-account-tab {
        @apply inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold transition;
        color: var(--eca-text-muted);
    }

    html.layout-lg {
        .eca-account-tab {
            @apply justify-start;
        }
    }

    .eca-account-tab:hover {
        color: var(--eca-text);
        background: color-mix(
            in srgb,
            var(--eca-card) 90%,
            var(--eca-accent) 10%
        );
    }

    .eca-account-tab--active {
        color: var(--eca-accent);
        background: var(--eca-card);
        box-shadow: 0 0 0 1px
            color-mix(in srgb, var(--eca-accent) 28%, var(--eca-border));
        font-weight: 700;
    }

    .eca-account-tab__badge {
        @apply inline-flex min-w-[1.25rem] items-center justify-center rounded-full px-1.5 py-0.5 text-[11px] font-bold;
        background: color-mix(in srgb, var(--eca-accent) 18%, var(--eca-card));
        color: var(--eca-accent);
    }

    .eca-account-notifications {
        @apply flex flex-col gap-3;
    }

    .eca-account-notification {
        @apply block rounded-2xl border p-4 transition-colors;
        border-color: var(--eca-border);
        background: var(--eca-card);
        color: var(--eca-text);
    }

    .eca-account-notification:hover {
        border-color: color-mix(
            in srgb,
            var(--eca-accent) 35%,
            var(--eca-border)
        );
        background: color-mix(in srgb, var(--eca-accent) 4%, var(--eca-card));
    }

    .eca-account-notification--unread {
        border-color: color-mix(
            in srgb,
            var(--eca-accent) 40%,
            var(--eca-border)
        );
        box-shadow: inset 3px 0 0 var(--eca-accent);
    }

    .eca-account-notification__head {
        @apply flex flex-wrap items-start justify-between gap-2;
    }

    .eca-account-notification__title {
        @apply text-sm font-bold;
        color: var(--eca-text);
    }

    .eca-account-notification__time {
        @apply shrink-0 text-xs;
        color: var(--eca-muted);
    }

    .eca-account-notification__body {
        @apply mt-2 whitespace-pre-line text-sm leading-relaxed;
        color: var(--eca-muted);
    }

    .eca-account-workspace,
    .eca-account-panel {
        @apply flex min-w-0 flex-col gap-5;
    }

    .eca-account-profile-grid {
        @apply grid gap-5;
    }

    html.layout-lg {
        .eca-account-profile-grid {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        }
    }

    .eca-profile-card {
        @apply rounded-2xl border p-5;
        border-color: var(--eca-border);
        background: var(--eca-card);
    }

    .eca-profile-card__head {
        @apply mb-4 flex items-start gap-3;
    }

    .eca-profile-card__icon {
        @apply inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg;
        color: var(--eca-accent);
        background: color-mix(in srgb, var(--eca-accent) 12%, var(--eca-card));
        border: 1px solid
            color-mix(in srgb, var(--eca-accent) 22%, var(--eca-border));
    }

    .eca-profile-card__title {
        @apply text-base font-bold;
        color: var(--eca-text);
    }

    .eca-profile-card__hint {
        @apply mt-0.5 text-sm;
        color: var(--eca-text-muted);
    }

    .eca-profile-card__microhint {
        @apply text-xs;
        color: var(--eca-text-muted);
    }

    .eca-profile-card__field {
        @apply space-y-1.5;
    }

    .eca-profile-card__field + .eca-profile-card__field {
        @apply mt-4;
    }

    .eca-profile-card__label {
        @apply block text-sm font-medium;
        color: var(--eca-text);
    }

    .eca-profile-card__row {
        @apply grid gap-2;
    }

    .eca-profile-card__control {
        @apply flex flex-col gap-2 sm:flex-row sm:items-stretch;
    }

    .eca-profile-card__control .eca-auth-modal__input,
    .eca-profile-card__control .eca-password-field {
        @apply min-w-0 w-full flex-1;
    }

    .eca-profile-card__cta {
        @apply sm:shrink-0;
    }

    .eca-profile-card__current-mobile,
    .eca-account-mobile-current {
        @apply mb-4 flex flex-wrap items-center justify-between gap-3 rounded-xl border px-4 py-3;
        border-color: var(--eca-border);
        background: color-mix(
            in srgb,
            var(--eca-card) 94%,
            var(--eca-accent) 6%
        );
    }

    .eca-account-mobile-current__value {
        @apply mt-1 font-mono text-sm;
        color: var(--eca-text);
    }

    .eca-profile-card__actions {
        @apply mt-4 flex flex-wrap gap-3;
    }

    .eca-profile-card__actions--end {
        @apply justify-end;
    }

    .eca-otp-inline {
        @apply space-y-4;
    }

    .eca-otp-inline__input {
        @apply text-lg font-semibold;
        letter-spacing: 0.35em;
    }

    .eca-account-feedback-slot {
        @apply mt-3 min-h-[2.25rem];
    }

    .eca-account-feedback {
        @apply mt-0 inline-block rounded-lg px-3 py-2 text-sm;
    }

    .eca-account-feedback--error {
        color: var(--eca-danger);
        background: color-mix(in srgb, var(--eca-danger) 12%, var(--eca-card));
        border: 1px solid
            color-mix(in srgb, var(--eca-danger) 25%, var(--eca-border));
    }

    .eca-account-feedback--success {
        color: var(--eca-accent);
        background: color-mix(in srgb, var(--eca-accent) 12%, var(--eca-card));
        border: 1px solid
            color-mix(in srgb, var(--eca-accent) 28%, var(--eca-border));
    }

    .survey-cards-grid {
        display: grid;
        gap: 1rem;
    }

    @media (min-width: 640px) {
        .survey-cards-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 1100px) {
        .survey-cards-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    .survey-card {
        display: flex;
        flex-direction: column;
        border-radius: 1.5rem;
        border: 1px solid color-mix(in srgb, var(--eca-border) 85%, transparent);
        background: color-mix(in srgb, var(--eca-card) 96%, transparent);
        padding: 1rem;
        box-shadow: 0 1px 2px color-mix(in srgb, var(--eca-text) 6%, transparent);
    }

    @media (min-width: 640px) {
        .survey-card {
            padding: 1.25rem;
        }
    }

    .survey-card__header {
        margin-bottom: 1.25rem;
    }

    .survey-card__category {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.04em;
        color: var(--eca-text-muted);
    }

    .survey-card__title {
        margin-top: 0.375rem;
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--eca-text);
    }

    .survey-card__question {
        margin-top: 0.75rem;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.75rem;
        color: var(--eca-text);
    }

    .survey-card__hint {
        margin-top: 0.5rem;
        font-size: 0.75rem;
        color: var(--eca-text-muted);
    }

    .survey-form {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .survey-options {
        display: grid;
        gap: 0.625rem;
        margin: 0;
        padding: 0;
        border: 0;
        min-inline-size: 0;
    }

    .survey-option {
        position: relative;
        display: flex;
        min-height: 48px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        cursor: pointer;
        border: 1px solid var(--eca-border);
        border-radius: 14px;
        padding: 11px 13px;
        transition:
            border-color 160ms ease,
            background-color 160ms ease,
            box-shadow 160ms ease,
            transform 160ms ease;
    }

    .survey-option:hover {
        border-color: color-mix(in srgb, var(--eca-primary) 45%, var(--eca-border));
    }

    .survey-option:has(input:checked) {
        border-color: var(--eca-primary);
        background: color-mix(in srgb, var(--eca-primary) 7%, transparent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--eca-primary) 10%, transparent);
    }

    .survey-option:active {
        transform: scale(0.99);
    }

    .survey-option input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .survey-option__text {
        min-width: 0;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--eca-text);
    }

    .survey-option__indicator {
        width: 19px;
        height: 19px;
        flex: 0 0 19px;
        border: 1.5px solid var(--eca-border);
        border-radius: 999px;
        transition:
            border-color 160ms ease,
            box-shadow 160ms ease,
            background-color 160ms ease;
    }

    .survey-option--multi .survey-option__indicator {
        border-radius: 6px;
    }

    .survey-option:has(input:checked) .survey-option__indicator {
        border-color: var(--eca-primary);
        box-shadow: inset 0 0 0 4px var(--eca-card);
        background: var(--eca-primary);
    }

    .survey-text__input {
        width: 100%;
        min-height: 6.5rem;
        resize: vertical;
        border-radius: 14px;
        border: 1px solid var(--eca-border);
        background: transparent;
        padding: 0.75rem 0.875rem;
        font-size: 0.875rem;
        color: var(--eca-text);
    }

    .survey-text__input:focus {
        outline: none;
        border-color: var(--eca-primary);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--eca-primary) 12%, transparent);
    }

    .survey-form__error {
        margin-top: 0.5rem;
        font-size: 0.75rem;
        color: var(--eca-danger);
    }

    .survey-form__actions {
        margin-top: auto;
        padding-top: 0.875rem;
    }

    .survey-submit {
        width: 100%;
    }

    .survey-submit:disabled {
        cursor: not-allowed;
        opacity: 0.45;
    }

    @media (min-width: 640px) {
        .survey-submit {
            width: auto;
            min-width: 120px;
        }
    }

    .eca-account-filters {
        @apply mt-4 inline-flex flex-wrap gap-1 rounded-xl border p-1;
        border-color: var(--eca-border);
        background: color-mix(in srgb, var(--eca-card) 90%, transparent);
    }

    .eca-account-filter {
        @apply inline-flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-semibold no-underline transition;
        color: var(--eca-text-muted);
    }

    .eca-account-filter span {
        @apply rounded-full px-1.5 py-0.5 text-[11px];
        background: color-mix(in srgb, var(--eca-text-muted) 12%, transparent);
    }

    .eca-account-filter--active {
        color: var(--eca-accent);
        background: var(--eca-card);
        box-shadow: 0 0 0 1px
            color-mix(in srgb, var(--eca-accent) 25%, var(--eca-border));
    }

    .eca-account-requests-toolbar {
        @apply flex flex-wrap items-start justify-between gap-3;
    }

    .eca-account-requests-toolbar__count {
        @apply inline-flex shrink-0 items-center rounded-full px-3 py-1 text-xs font-semibold;
        color: var(--eca-accent);
        background: color-mix(in srgb, var(--eca-accent) 12%, var(--eca-card));
        border: 1px solid
            color-mix(in srgb, var(--eca-accent) 22%, var(--eca-border));
    }

    .eca-password-meter {
        @apply mt-2 space-y-1.5;
    }

    .eca-password-meter__bar {
        @apply h-1.5 overflow-hidden rounded-full;
        background: color-mix(in srgb, var(--eca-border) 80%, transparent);
    }

    .eca-password-meter__bar span {
        @apply block h-full rounded-full transition-all;
        width: 12%;
        background: var(--eca-danger);
    }

    .eca-password-meter__bar[data-score="1"] span {
        width: 33%;
        background: var(--eca-warning);
    }

    .eca-password-meter__bar[data-score="2"] span {
        width: 66%;
        background: #eab308;
    }

    .eca-password-meter__bar[data-score="3"] span {
        width: 100%;
        background: var(--eca-success);
    }

    .eca-password-meter__label {
        @apply text-xs font-semibold;
        color: var(--eca-text-muted);
    }

    .eca-password-meter__rules {
        @apply space-y-0.5 text-xs;
        color: var(--eca-text-muted);
    }

    .eca-password-meter__rules .is-ok {
        color: var(--eca-success);
    }

    .eca-account-page .eca-auth-modal__input:focus {
        outline: none;
        border-color: color-mix(
            in srgb,
            var(--eca-accent) 55%,
            var(--eca-border)
        );
        box-shadow: 0 0 0 3px
            color-mix(in srgb, var(--eca-accent) 18%, transparent);
    }

    .eca-account-page .eca-password-field {
        @apply w-full;
    }

    .repair-ticket-card__hit {
        @apply absolute inset-0 z-10 rounded-2xl;
    }

    .repair-ticket-card__hit:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--eca-accent) 70%, transparent);
        outline-offset: 3px;
    }

    .repair-ticket-card__hit-glow {
        @apply pointer-events-none absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-300;
        background:
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--eca-accent) 8%, transparent) 0%,
                transparent 42%,
                color-mix(in srgb, var(--eca-accent) 22%, transparent) 100%
            );
        box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--eca-accent) 45%, transparent);
    }

    .repair-ticket-card__hit-cta {
        @apply pointer-events-none absolute inline-flex max-w-[calc(100%-1.5rem)] items-center gap-2 overflow-hidden rounded-full px-3 py-2 text-xs font-bold leading-none shadow-lg;
        inset-inline-end: 0.85rem;
        bottom: 0.85rem;
        color: #fff;
        background: linear-gradient(
            135deg,
            var(--eca-accent) 0%,
            color-mix(in srgb, var(--eca-primary) 70%, var(--eca-accent)) 100%
        );
        box-shadow:
            0 10px 24px color-mix(in srgb, var(--eca-accent) 38%, transparent),
            0 0 0 1px color-mix(in srgb, #fff 18%, transparent);
        animation: repair-ticket-hit-pulse 2.4s ease-in-out infinite;
    }

    .repair-ticket-card__hit-cta-text {
        @apply truncate;
    }

    .repair-ticket-card__hit-cta-arrow {
        @apply shrink-0 transition-transform duration-300;
    }

    .repair-ticket-card--linked {
        @apply cursor-pointer;
    }

    .repair-ticket-card--linked .repair-card-body {
        padding-bottom: 3.75rem;
    }

    .repair-ticket-card--linked:hover .repair-ticket-card__hit-glow,
    .repair-ticket-card--linked:focus-within .repair-ticket-card__hit-glow {
        opacity: 1;
    }

    .repair-ticket-card--linked:hover .repair-ticket-card__hit-cta,
    .repair-ticket-card--linked:focus-within .repair-ticket-card__hit-cta {
        transform: translateY(-2px) scale(1.04);
        animation: none;
        box-shadow:
            0 16px 32px color-mix(in srgb, var(--eca-accent) 48%, transparent),
            0 0 0 1px color-mix(in srgb, #fff 28%, transparent);
    }

    .repair-ticket-card--linked:hover .repair-ticket-card__hit-cta-arrow,
    .repair-ticket-card--linked:focus-within .repair-ticket-card__hit-cta-arrow {
        transform: translateX(-3px);
    }

    [dir='ltr'] .repair-ticket-card--linked:hover .repair-ticket-card__hit-cta-arrow,
    [dir='ltr'] .repair-ticket-card--linked:focus-within .repair-ticket-card__hit-cta-arrow {
        transform: translateX(3px);
    }

    @keyframes repair-ticket-hit-pulse {
        0%,
        100% {
            box-shadow:
                0 10px 24px color-mix(in srgb, var(--eca-accent) 38%, transparent),
                0 0 0 0 color-mix(in srgb, var(--eca-accent) 35%, transparent);
        }
        50% {
            box-shadow:
                0 12px 28px color-mix(in srgb, var(--eca-accent) 46%, transparent),
                0 0 0 8px color-mix(in srgb, var(--eca-accent) 0%, transparent);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .repair-ticket-card__hit-cta {
            animation: none;
        }
    }

    .repair-ticket-card--lead {
        @apply transition;
    }

    .repair-ticket-card--lead:has(.repair-ticket-card__hit):hover {
        border-color: color-mix(
            in srgb,
            var(--eca-accent) 40%,
            var(--eca-border)
        );
    }

    .eca-request-summary {
        @apply mt-3;
    }

    .eca-request-thread {
        @apply mt-0;
    }

    .eca-request-thread__list {
        @apply mt-5 space-y-3;
    }

    .eca-request-thread__empty {
        @apply text-sm;
        color: var(--eca-text-muted);
    }

    .eca-request-thread__row--user .eca-request-thread__bubble {
        margin-inline-start: auto;
        background: color-mix(in srgb, var(--eca-accent) 14%, var(--eca-card));
    }

    .eca-request-thread__row--agent .eca-request-thread__bubble {
        background: color-mix(in srgb, var(--eca-success) 14%, var(--eca-card));
        border-color: color-mix(
            in srgb,
            var(--eca-success) 28%,
            var(--eca-border)
        );
    }

    .eca-request-thread__row--system .eca-request-thread__bubble {
        background: color-mix(in srgb, var(--eca-warning) 10%, var(--eca-card));
    }

    .eca-request-thread__meta {
        @apply mb-1 text-[11px] font-semibold;
        color: var(--eca-text-muted);
    }

    .eca-request-thread__bubble {
        @apply max-w-[min(100%,36rem)] min-w-0 rounded-2xl border px-4 py-3 text-sm break-words;
        border-color: var(--eca-border);
        background: var(--eca-card);
        color: var(--eca-text);
        overflow-wrap: anywhere;
    }

    .eca-request-thread__bubble p,
    .eca-request-thread__bubble dd {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .eca-request-thread__composer {
        @apply mt-5 space-y-3;
    }

    .eca-nav-bar {
        @apply hidden border-t desktop:block;
        background-color: color-mix(in srgb, var(--eca-card) 92%, transparent);
        border-color: var(--eca-border);
        font-family: IRANSans, Vazir, ui-sans-serif, system-ui, sans-serif;
    }

    .eca-nav-bar__track {
        @apply flex items-center justify-center gap-0 py-1;
    }

    .eca-nav-bar__item {
        @apply relative inline-flex;
    }

    .eca-nav-bar__link {
        @apply inline-flex shrink-0 items-center whitespace-nowrap border-b-2 border-transparent px-3 py-2.5 text-[13px] font-medium leading-6 transition duration-150;
        color: var(--eca-text-muted);
        font-family: inherit;
    }

    .eca-nav-bar__link:hover {
        border-color: color-mix(in srgb, var(--eca-accent) 30%, transparent);
        background-color: var(--eca-card);
        color: var(--eca-primary);
    }

    .eca-nav-bar__link--active {
        border-color: var(--eca-accent);
        background-color: var(--eca-card);
        @apply font-semibold;
        color: var(--eca-accent);
    }

    .eca-nav-bar__link--mega {
        @apply gap-1.5;
        cursor: pointer;
        background: transparent;
        font-family: inherit;
    }

    .eca-nav-bar__mega-icon {
        color: var(--eca-accent);
    }

    .eca-nav-bar__mega-chevron {
        color: var(--eca-text-muted);
        transition: transform 0.2s ease;
    }

    [dir="ltr"] .eca-nav-bar__mega-chevron--open {
        transform: rotate(-90deg);
    }

    [dir="rtl"] .eca-nav-bar__mega-chevron--open {
        transform: rotate(90deg);
    }

    /* CCHP institutional header — colors from --eca-* / --brand-* only */
    .cchp-header-shell {
        display: contents;
        color: var(--eca-text);
    }

    .cchp-topbar {
        @apply relative border-b text-xs;
        z-index: var(--z-dropdown);
        border-color: var(--eca-border);
        background-color: color-mix(
            in srgb,
            var(--eca-footer-main) 88%,
            var(--eca-header-bg) 12%
        );
        color: var(--eca-text-muted);
    }

    .cchp-topbar__inner {
        @apply flex min-h-8 items-center justify-between gap-3;
    }

    .cchp-topbar__contact {
        @apply flex min-w-0 flex-wrap items-center gap-x-4 gap-y-1;
    }

    .cchp-topbar__link {
        @apply inline-flex max-w-full items-center gap-1.5 truncate transition-colors;
        color: var(--eca-text-muted);
        font-weight: 700;
    }

    .cchp-topbar__link:hover {
        color: var(--eca-accent);
    }

    .cchp-topbar__langs {
        @apply shrink-0;
        background: color-mix(in srgb, var(--eca-card) 40%, transparent);
    }

    .cchp-header {
        @apply sticky top-0;
        z-index: var(--z-header);
        color: var(--eca-text);
        position: sticky;
        overflow: visible;
    }

    .cchp-header__bar {
        @apply relative border-b backdrop-blur-md;
        background-color: var(--eca-header-bg);
        border-color: var(--eca-border);
    }

    .cchp-header__row {
        @apply flex items-center justify-between gap-3 py-2.5 desktop:gap-6;
    }

    .cchp-header__brand {
        @apply flex min-w-0 shrink-0 items-center;
    }

    .cchp-nav {
        @apply min-w-0 flex-1 items-center justify-center gap-0.5;
    }

    .cchp-nav__item {
        @apply relative;
    }

    .cchp-nav__link {
        @apply inline-flex items-center gap-1 whitespace-nowrap px-2.5 py-2 text-[16px] font-medium transition;
        color: var(--eca-text);
        background: transparent;
        border: 0;
        box-shadow: inset 0 -2px 0 transparent;
    }

    .cchp-nav__link:hover,
    .cchp-nav__link.is-active {
        color: var(--eca-accent);
        box-shadow: inset 0 -2px 0 var(--eca-accent);
    }

    .cchp-nav__link--flyout {
        cursor: pointer;
        font-family: inherit;
    }

    .cchp-nav__chevron {
        @apply inline-block shrink-0;
        width: 0.4rem;
        height: 0.4rem;
        margin-inline-start: 0.15rem;
        margin-top: -0.15em;
        border-bottom: 1.5px solid currentColor;
        border-right: 1.5px solid currentColor;
        opacity: 0.75;
        transform: rotate(45deg);
        transform-origin: 50% 50%;
        transition:
            transform 0.2s ease,
            opacity 0.2s ease;
    }

    .cchp-nav__link[aria-expanded="true"] .cchp-nav__chevron,
    .eca-nav-bar__link[aria-expanded="true"] .cchp-nav__chevron {
        transform: rotate(225deg);
        opacity: 1;
    }

    .cchp-nav__link:hover .cchp-nav__chevron,
    .eca-nav-bar__link:hover .cchp-nav__chevron {
        opacity: 1;
    }

    .cchp-flyout {
        @apply absolute start-0 top-full z-50 min-w-[12.5rem] rounded-b-lg border border-t-0 py-2;
        border-color: var(--eca-border);
        background-color: var(--eca-card);
        box-shadow: var(--shadow-card);
    }

    .cchp-flyout__link {
        @apply block px-4 py-2 text-sm transition;
        color: var(--eca-text);
    }

    .cchp-flyout__link:hover,
    .cchp-flyout__link.is-active {
        color: var(--eca-accent);
        background-color: color-mix(
            in srgb,
            var(--eca-accent) 8%,
            var(--eca-card)
        );
    }

    /* Floating editorial popover under nav triggers (news / activities / …) */
    .cchp-nav-popover {
        position: absolute;
        top: calc(100% + 14px);
        left: 50%;
        z-index: 80;
        width: min(760px, calc(100vw - 2.5rem));
        transform-origin: top center;
    }

    .cchp-nav-popover--news,
    .cchp-nav-popover--activities {
        width: min(820px, calc(100vw - 2.5rem));
    }

    .cchp-nav-popover--association {
        width: min(13.5rem, calc(100vw - 2.5rem));
    }

    .cchp-nav-popover__panel {
        position: relative;
        left: -50%;
        z-index: 1;
        width: 100%;
        padding: 1.15rem 1.25rem 1rem;
        border-radius: 1.5rem;
        overflow: visible;
        border: 1px solid color-mix(in srgb, var(--eca-primary, #43a2bc) 14%, var(--eca-border));
        background: color-mix(in srgb, var(--eca-card, #111d25) 94%, transparent);
        box-shadow:
            0 24px 70px rgba(15, 23, 42, 0.16),
            0 4px 18px rgba(15, 23, 42, 0.06);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .cchp-nav-popover--association .cchp-nav-popover__panel {
        padding: 0.65rem 0.55rem;
        border-radius: 1rem;
        box-shadow:
            0 16px 40px rgba(15, 23, 42, 0.14),
            0 2px 10px rgba(15, 23, 42, 0.05);
    }

    .cchp-nav-popover__list--compact .cchp-mega__link {
        padding: 0.55rem 0.75rem;
        border-radius: 0.7rem;
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--eca-text);
        line-height: 1.35;
    }

    .cchp-nav-popover__list--compact .cchp-mega__link:hover {
        background: color-mix(in srgb, var(--eca-primary, #43a2bc) 10%, transparent);
        color: var(--eca-accent, var(--eca-primary, #43a2bc));
    }

    .cchp-nav-popover__panel::before {
        content: "";
        position: absolute;
        top: -7px;
        left: 50%;
        width: 14px;
        height: 14px;
        margin-left: -7px;
        background: inherit;
        border-top: 1px solid color-mix(in srgb, var(--eca-primary, #43a2bc) 14%, var(--eca-border));
        border-left: 1px solid color-mix(in srgb, var(--eca-primary, #43a2bc) 14%, var(--eca-border));
        transform: rotate(45deg);
        pointer-events: none;
    }

    .cchp-nav-popover__grid {
        position: relative;
        z-index: 1;
        display: grid;
        gap: 1.25rem;
    }

    .cchp-nav-popover__grid--news {
        grid-template-columns: minmax(12rem, 0.95fr) minmax(0, 1.35fr);
        gap: 1.5rem;
    }

    .cchp-nav-popover__grid--activities {
        grid-template-columns: minmax(9rem, 0.95fr) minmax(0, 1.35fr);
        gap: 1.5rem;
    }

    .cchp-nav-popover__grid--market {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .cchp-nav-popover__col--latest .cchp-mega__news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .cchp-nav-popover__footer {
        position: relative;
        z-index: 1;
        margin-top: 0.9rem;
        padding-top: 0.85rem;
        border-top: 1px solid color-mix(in srgb, var(--eca-border) 88%, transparent);
    }

    .cchp-nav-popover .cchp-mega__heading {
        margin-bottom: 0.65rem;
    }

    .cchp-nav-popover .cchp-mega__parent {
        padding-block: 0.4rem;
    }

    .cchp-nav-popover .cchp-mega__news-card-img {
        aspect-ratio: 16 / 10;
        height: auto;
    }

    .cchp-nav-popover .cchp-mega__news-card-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    @media (max-width: 860px) {
        .cchp-nav-popover__grid--news,
        .cchp-nav-popover__grid--activities,
        .cchp-nav-popover__grid--market {
            grid-template-columns: 1fr;
        }
    }

    .cchp-header__actions {
        @apply flex shrink-0 items-center gap-0.5 sm:gap-1;
    }

    .cchp-icon-btn {
        @apply relative inline-flex h-10 w-10 items-center justify-center rounded-full transition;
        color: var(--eca-text-muted);
        background: transparent;
        border: 0;
    }

    .cchp-icon-btn:hover,
    .cchp-icon-btn.is-active {
        color: var(--eca-accent);
        background-color: color-mix(
            in srgb,
            var(--eca-accent) 10%,
            transparent
        );
    }

    .cchp-icon-btn--account {
        color: var(--eca-accent);
    }

    .cchp-icon-btn__badge {
        @apply absolute -end-0.5 -top-0.5 z-10 inline-flex min-h-[1.125rem] min-w-[1.125rem] items-center justify-center rounded-full px-1 text-[10px] font-bold leading-none;
        background: var(--cchp-accent, #c8102e);
        color: #fff;
        box-shadow: 0 0 0 2px var(--cchp-header-bg, #fff);
    }

    .cchp-icon-btn__avatar {
        @apply h-6 w-6 rounded-full object-cover;
        background: color-mix(in srgb, var(--eca-accent) 16%, var(--eca-card));
    }

    .cchp-icon-btn__avatar--initial {
        @apply inline-flex items-center justify-center text-[11px] font-bold;
        color: var(--eca-accent);
    }

    .cchp-member-cta {
        @apply relative inline-flex items-center gap-2 rounded-full px-3 py-2 text-sm font-semibold transition;
        color: #fff;
        background: var(--eca-accent);
        box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--eca-accent) 70%, transparent);
        border: 0;
    }

    .cchp-member-cta:hover,
    .cchp-member-cta.is-active {
        filter: brightness(1.05);
    }

    .cchp-member-cta__label {
        @apply whitespace-nowrap;
    }

    .cchp-member-cta__badge {
        @apply absolute -end-1 -top-1 z-10 inline-flex min-h-[1.125rem] min-w-[1.125rem] items-center justify-center rounded-full px-1 text-[10px] font-bold leading-none;
        background: var(--eca-surface);
        color: var(--eca-accent);
        box-shadow: 0 0 0 2px var(--eca-accent);
    }

    .cchp-member-cta__avatar {
        @apply h-6 w-6 rounded-full object-cover;
        background: color-mix(in srgb, #fff 22%, var(--eca-accent));
    }

    .cchp-member-cta__avatar--initial {
        @apply inline-flex items-center justify-center text-[11px] font-bold text-white;
    }

    .cchp-mega {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        z-index: 50;
        transform-origin: top center;
        border-bottom-width: 1px;
        border-color: var(--eca-border);
        background-color: var(--eca-card);
        box-shadow: var(--shadow-card);
    }

    .cchp-mega__panel {
        @apply overflow-hidden     border-b;
        border-color: var(--eca-border);
        background-color: var(--eca-card);
    }

    .cchp-mega__scroll {
        @apply relative min-h-0 overflow-x-hidden overflow-y-auto overscroll-contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: var(--eca-scrollbar-thumb) var(--eca-scrollbar-track);
    }

    .cchp-mega__scroll--can-up::before,
    .cchp-mega__scroll--can-down::after {
        content: "";
        @apply pointer-events-none sticky z-[1] block h-6;
    }

    .cchp-mega__scroll--can-up::before {
        top: 0;
        background: linear-gradient(to bottom, var(--eca-card), transparent);
    }

    .cchp-mega__scroll--can-down::after {
        bottom: 0;
        background: linear-gradient(to top, var(--eca-card), transparent);
    }

    .cchp-mega--rich .cchp-mega__panel {
        @apply px-4 py-5 desktop:px-6 desktop:py-6;
        max-height: min(34rem, calc(100vh - 8rem));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: var(--eca-scrollbar-thumb) var(--eca-scrollbar-track);
    }

    .cchp-mega__scroll::-webkit-scrollbar,
    .cchp-mega--rich .cchp-mega__panel::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    .cchp-mega__scroll::-webkit-scrollbar-track,
    .cchp-mega--rich .cchp-mega__panel::-webkit-scrollbar-track {
        margin-block: 0.35rem;
        margin-inline: 1px;
        border-radius: 999px;
        background: var(--eca-scrollbar-track);
    }

    .cchp-mega__scroll::-webkit-scrollbar-thumb,
    .cchp-mega--rich .cchp-mega__panel::-webkit-scrollbar-thumb {
        border: 1px solid transparent;
        border-radius: 999px;
        background: var(--eca-scrollbar-thumb);
        background-clip: padding-box;
        transition: background 0.15s ease;
    }

    .cchp-mega__scroll::-webkit-scrollbar-thumb:hover,
    .cchp-mega--rich .cchp-mega__panel::-webkit-scrollbar-thumb:hover {
        background: var(--eca-scrollbar-thumb-hover);
        background-clip: padding-box;
    }

    .cchp-mega__scroll::-webkit-scrollbar-corner,
    .cchp-mega--rich .cchp-mega__panel::-webkit-scrollbar-corner {
        background: transparent;
    }

    .cchp-mega__grid {
        @apply grid gap-6;
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    }

    .cchp-mega__grid--categories {
        grid-template-columns: minmax(17rem, 0.38fr) minmax(0, 1fr);
        align-items: stretch;
        gap: 0;
        min-height: 22rem;
    }

    .cchp-mega__col--catalog {
        @apply min-w-0 flex flex-col gap-4;
    }

    .cchp-mega__catalog-cols {
        @apply grid gap-6;
        grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
        align-items: start;
    }

    .cchp-mega__catalog-col {
        @apply min-w-0;
    }

    .cchp-mega__col--primary {
        @apply relative min-w-0 flex flex-col gap-3;
        max-height: min(28rem, calc(100vh - 10rem));
        padding: 0.25rem 0.85rem 0.25rem 0.15rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-inline-end: 1px solid var(--eca-border);
        scrollbar-width: thin;
        scrollbar-color: var(--eca-scrollbar-thumb) transparent;
    }

    .cchp-mega__primary-list {
        @apply flex flex-col gap-0.5;
    }

    .cchp-mega__primary-list--cards {
        @apply gap-1.5;
    }

    .cchp-mega__primary-card {
        @apply relative flex items-center gap-3 rounded-xl px-3 py-2.5 transition duration-200;
        color: var(--eca-text);
        background: transparent;
        border: 1px solid transparent;
    }

    .cchp-mega__primary-card:hover {
        background-color: color-mix(in srgb, var(--eca-accent) 8%, var(--eca-card));
        border-color: color-mix(in srgb, var(--eca-accent) 18%, var(--eca-border));
        transform: translateX(-2px);
    }

    [dir="ltr"] .cchp-mega__primary-card:hover {
        transform: translateX(2px);
    }

    .cchp-mega__primary-card.is-active {
        background-color: color-mix(in srgb, var(--eca-accent) 14%, var(--eca-card));
        border-color: color-mix(in srgb, var(--eca-accent) 35%, var(--eca-border));
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--eca-accent) 18%, transparent);
    }

    .cchp-mega__primary-card.is-active::before {
        content: "";
        position: absolute;
        inset-block: 0.55rem;
        inset-inline-start: 0;
        width: 3px;
        border-radius: 999px;
        background: var(--eca-accent);
    }

    .cchp-mega__primary-icon {
        @apply flex h-8 w-11 shrink-0 items-center justify-center overflow-hidden rounded-xl;
        background-color: color-mix(in srgb, var(--eca-accent) 12%, var(--eca-card));
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eca-border) 80%, transparent);
    }

    .cchp-mega__primary-icon img {
        @apply h-full w-full object-cover;
    }

    .cchp-mega__primary-icon-fallback {
        @apply block h-4 w-4 rounded-sm opacity-50;
        background: var(--eca-accent);
    }

    .cchp-mega__primary-body {
        @apply min-w-0 flex-1 flex flex-col gap-0.5 text-start;
    }

    .cchp-mega__primary-title {
        @apply text-sm font-semibold leading-snug;
        color: inherit;
    }

    .cchp-mega__primary-desc {
        @apply text-[12px] leading-snug;
        color: var(--eca-text-muted);
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .cchp-mega__primary-card.is-active .cchp-mega__primary-title {
        color: var(--eca-accent);
    }

    .cchp-mega__primary-arrow {
        @apply ms-auto flex h-7 w-7 shrink-0 items-center justify-center rounded-lg opacity-35 transition duration-200;
        color: var(--eca-text-muted);
    }

    [dir="ltr"] .cchp-mega__primary-arrow svg {
        transform: scaleX(-1);
    }

    .cchp-mega__primary-card:hover .cchp-mega__primary-arrow,
    .cchp-mega__primary-card.is-active .cchp-mega__primary-arrow {
        opacity: 1;
        color: var(--eca-accent);
        background-color: color-mix(in srgb, var(--eca-accent) 12%, transparent);
    }

    /* legacy simple primary link (other headers) */
    .cchp-mega__primary-link {
        @apply flex items-center gap-2 rounded-md px-2.5 py-2 text-sm font-medium transition;
        color: var(--eca-text);
    }

    .cchp-mega__primary-link:hover {
        background-color: color-mix(in srgb, var(--eca-accent) 8%, var(--eca-card));
        color: var(--eca-accent);
    }

    .cchp-mega__primary-link.is-active {
        background-color: color-mix(in srgb, var(--eca-accent) 12%, var(--eca-card));
        color: var(--eca-accent);
        font-weight: 600;
    }

    .cchp-mega__primary-label {
        @apply min-w-0 flex-1 truncate text-start;
    }

    .cchp-mega__primary-chevron {
        @apply relative ms-auto inline-block h-2 w-2 shrink-0 opacity-40 transition;
        border-block-end: 1.5px solid currentColor;
        border-inline-end: 1.5px solid currentColor;
        transform: rotate(-45deg);
    }

    [dir="rtl"] .cchp-mega__primary-chevron {
        transform: rotate(135deg);
    }

    .cchp-mega__primary-link:hover .cchp-mega__primary-chevron,
    .cchp-mega__primary-link.is-active .cchp-mega__primary-chevron {
        opacity: 1;
    }

    .cchp-mega__more--utility {
        @apply mt-auto sticky bottom-0 pt-3 pb-1 border-t text-[12px] font-semibold;
        border-color: var(--eca-border);
        background: linear-gradient(
            to top,
            var(--eca-card) 70%,
            color-mix(in srgb, var(--eca-card) 0%, transparent)
        );
    }

    .cchp-mega__col--preview {
        @apply relative min-w-0 grid;
        min-height: 20rem;
        padding: 0.35rem 0.15rem 0.35rem 1.15rem;
        align-content: start;
    }

    .cchp-mega__preview-panel {
        @apply flex min-w-0 flex-col gap-5;
        grid-area: 1 / 1;
        width: 100%;
    }

    .cchp-mega__preview-hero {
        @apply grid gap-4 rounded-2xl p-3;
        grid-template-columns: minmax(7.5rem, 10.5rem) minmax(0, 1fr);
        align-items: center;
        background: color-mix(in srgb, var(--eca-accent) 6%, var(--eca-card));
        border: 1px solid color-mix(in srgb, var(--eca-accent) 14%, var(--eca-border));
    }

    .cchp-mega__preview-img {
        @apply w-full rounded-xl object-cover;
        aspect-ratio: 4 / 3;
        max-height: 7.75rem;
        background-color: color-mix(
            in srgb,
            var(--eca-accent) 10%,
            var(--eca-card)
        );
    }

    .cchp-mega__preview-img--empty {
        display: block;
    }

    .cchp-mega__preview-intro {
        @apply min-w-0 py-0.5;
    }

    .cchp-mega__preview-title {
        @apply text-base font-semibold leading-snug;
        color: var(--eca-text);
    }

    .cchp-mega__preview-excerpt {
        @apply mt-1.5 text-[13px] leading-relaxed;
        color: var(--eca-text-muted);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .cchp-mega__preview-cta {
        @apply mt-3 inline-flex items-center gap-1.5 text-[13px] font-semibold transition duration-200;
        color: var(--eca-accent);
    }

    .cchp-mega__preview-cta:hover {
        color: var(--eca-text);
    }

    [dir="rtl"] .cchp-mega__preview-cta-arrow {
        display: inline-block;
        transform: scaleX(-1);
    }

    .cchp-mega__preview-links {
        @apply grid gap-1.5;
        grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    }

    .cchp-mega__preview-child {
        @apply flex items-center gap-2 rounded-xl px-3 py-2.5 text-[13px] font-medium transition duration-200;
        color: var(--eca-text);
        background: color-mix(in srgb, var(--eca-text) 2.5%, var(--eca-card));
        border: 1px solid color-mix(in srgb, var(--eca-border) 90%, transparent);
    }

    .cchp-mega__preview-child:hover {
        color: var(--eca-accent);
        background-color: color-mix(in srgb, var(--eca-accent) 9%, var(--eca-card));
        border-color: color-mix(in srgb, var(--eca-accent) 28%, var(--eca-border));
        transform: translateY(-1px);
    }

    .cchp-mega__preview-child-title {
        @apply min-w-0 flex-1 truncate text-start;
    }

    .cchp-mega__preview-child-arrow {
        @apply flex shrink-0 opacity-40 transition;
        color: currentColor;
    }

    [dir="ltr"] .cchp-mega__preview-child-arrow svg {
        transform: scaleX(-1);
    }

    .cchp-mega__preview-child:hover .cchp-mega__preview-child-arrow {
        opacity: 1;
    }

    .cchp-mega__preview-link {
        @apply block rounded-md px-1.5 py-1.5 text-[13px] leading-snug transition;
        color: var(--eca-text-muted);
    }

    .cchp-mega__preview-link:hover {
        color: var(--eca-accent);
        background-color: color-mix(in srgb, var(--eca-accent) 6%, transparent);
    }

    .cchp-mega__preview-empty {
        @apply text-[13px];
        color: var(--eca-text-muted);
    }

    .cchp-mega__col--feature {
        @apply min-w-0;
        padding-inline-start: 1.25rem;
        border-inline-start: 1px solid var(--eca-border);
    }

    .cchp-mega__heading {
        @apply mb-3 text-[11px] font-bold uppercase tracking-wider;
        color: var(--eca-text-muted);
    }

    .cchp-mega__groups {
        @apply flex flex-col gap-4;
    }

    .cchp-mega__group {
        @apply min-w-0;
    }

    .cchp-mega__parent {
        @apply mb-1.5 flex items-center gap-2.5 text-sm font-semibold transition;
        color: var(--eca-text);
    }

    .cchp-mega__parent:hover {
        color: var(--eca-accent);
    }

    .cchp-mega__parent-img {
        @apply h-8 w-11 shrink-0 rounded-lg object-cover ring-1 ring-black/5;
        background-color: color-mix(
            in srgb,
            var(--eca-accent) 10%,
            var(--eca-card)
        );
    }

    .cchp-mega__parent-img--empty {
        display: block;
    }

    .cchp-mega__list {
        @apply flex flex-col gap-0.5  ;
    }

    .cchp-mega__list--pages {
        @apply mt-3 border-t pt-3;
        border-color: var(--eca-border);
    }

    .cchp-mega__link {
        @apply block py-1 text-[13px] leading-snug transition;
        color: var(--eca-text-muted);
    }

    .cchp-mega__link:hover {
        color: var(--eca-accent);
    }

    .cchp-mega__feature {
        @apply min-w-0;
    }

    .cchp-mega__feature-img {
        @apply mb-3 w-full rounded-lg object-cover;
        aspect-ratio: 16 / 10;
        max-height: 7.5rem;
        background-color: color-mix(
            in srgb,
            var(--eca-accent) 10%,
            var(--eca-card)
        );
    }

    .cchp-mega__feature-img--empty {
        display: block;
    }

    .cchp-mega__feature-title {
        @apply text-sm font-semibold leading-snug;
        color: var(--eca-text);
    }

    .cchp-mega__feature-excerpt {
        @apply mt-1.5 text-[13px] leading-relaxed;
        color: var(--eca-text-muted);
    }

    .cchp-mega__feature-cta,
    .cchp-mega__more {
        @apply mt-3 inline-flex text-[13px] font-semibold transition;
        color: var(--eca-accent);
    }

    .cchp-mega__feature-cta:hover,
    .cchp-mega__more:hover {
        color: var(--eca-text);
    }

    .cchp-mega__news-grid {
        @apply grid grid-cols-2 gap-3 ;
    }

    @media (min-width: 1101px) {
        .cchp-mega__news-grid {
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 0.75rem;
        }
    }

    .cchp-mega__news-card {
        @apply flex min-w-0 flex-col gap-1.5;
        color: var(--eca-text);
    }

    .cchp-mega__news-card:hover .cchp-mega__news-card-title {
        color: var(--eca-accent);
    }

    .cchp-mega__news-card-img {
        @apply w-full rounded-md object-cover;
        aspect-ratio: 1 / 1;
        background-color: color-mix(
            in srgb,
            var(--eca-accent) 10%,
            var(--eca-card)
        );
    }

    .cchp-mega__news-card-img--empty {
        display: block;
    }

    .cchp-mega__news-card-title {
        @apply text-[13px] font-semibold leading-snug transition;
    }

    .cchp-mega__news-card-date {
        @apply text-[11px];
        color: var(--eca-text-muted);
    }

    .cchp-mega__empty {
        @apply text-[13px];
        color: var(--eca-text-muted);
    }

    @media (max-width: 1100px) {
        .cchp-mega__grid--categories {
            grid-template-columns: minmax(0, 1fr);
        }

        .cchp-mega__col--primary {
            max-height: 14rem;
            padding: 0;
            border-inline-end: 0;
            order: 1;
        }

        .cchp-mega__col--preview {
            padding: 0 0 1rem;
            border-bottom: 1px solid var(--eca-border);
            min-height: 0;
            order: 0;
        }

        .cchp-mega__preview-hero {
            grid-template-columns: minmax(6rem, 7.5rem) minmax(0, 1fr);
        }

        .cchp-mega__preview-links {
            grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
        }

        .cchp-mega__grid--association,
        .cchp-mega__grid--news {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .cchp-mega__col--feature {
            padding-inline-start: 0;
            border-inline-start: 0;
            grid-column: 1 / -1;
            order: -1;
        }
    }

    .cchp-mobile {
        @apply border-t;
        border-color: var(--eca-border);
        background-color: var(--eca-card);
    }

    .cchp-mobile__nav {
        @apply flex flex-col py-3 text-sm;
    }

    .cchp-mobile__link {
        @apply flex w-full px-2 py-3 text-start transition;
        color: var(--eca-text);
        background: transparent;
        border: 0;
    }

    .cchp-mobile__link:hover {
        background-color: color-mix(in srgb, var(--eca-accent) 8%, transparent);
        color: var(--eca-accent);
    }

    .cchp-mobile__link--accent {
        @apply font-semibold;
        color: var(--eca-accent);
    }

    .cchp-mobile__cats {
        @apply mt-3 border-t pt-3;
        border-color: var(--eca-border);
    }

    .cchp-activity {
        @apply relative overflow-hidden py-10 desktop:py-14;
         color: var(--eca-text);
    }

    .cchp-activity__intro {
        @apply mb-8 mx-2 grid gap-6 desktop:mb-10 desktop:grid-cols-2 desktop:items-end desktop:gap-10;
    }

    .cchp-activity__title,
    .cchp-activity__kicker {
        @apply text-2xl font-bold leading-tight desktop:text-3xl;
        color: var(--eca-text);
    }

    .cchp-activity__lead {
        @apply mt-3 max-w-xl text-sm leading-relaxed desktop:text-base;
        color: var(--eca-text-muted);
    }

    .cchp-activity__rule {
        @apply mt-5 block h-px w-16;
        background-color: var(--eca-accent);
    }

    .cchp-activity__kicker-accent {
        color: var(--eca-accent);
    }

    .cchp-activity__tagline {
        @apply mt-2 text-lg font-semibold desktop:text-xl;
        color: var(--eca-text);
    }

    .cchp-activity__grid {
        @apply grid gap-3 desktop:gap-4;
        grid-template-columns: repeat(
            min(4, var(--cchp-activity-count, 4)),
            minmax(0, 1fr)
        );
    }

    .cchp-activity__card {
        @apply relative flex min-h-[18rem] overflow-hidden no-underline desktop:min-h-[35rem];
        isolation: isolate;
        border-radius: var(--card-radius, 20px);
        background-color: var(--eca-card);
        box-shadow: var(--eca-shadow-card);
        border: 1px solid color-mix(in srgb, var(--eca-border) 55%, transparent);
        color: inherit;
        transition:
            transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            border-color 0.35s ease;
    }

    .cchp-activity__card--linked {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .cchp-activity__card:hover,
    .cchp-activity__card:focus-within {
        transform: translateY(-6px);
        border-color: color-mix(in srgb, var(--eca-primary) 36%, var(--eca-border));
        box-shadow:
            0 18px 42px color-mix(in srgb, var(--eca-primary) 16%, transparent),
            var(--eca-shadow-card);
    }

    .cchp-activity__card:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--eca-primary) 80%, white);
        outline-offset: 3px;
    }

    .cchp-activity__card-img {
        @apply absolute inset-0 h-full w-full object-cover;
        transform: scale(1.01);
        transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .cchp-activity__card:hover .cchp-activity__card-img,
    .cchp-activity__card:focus-within .cchp-activity__card-img {
        transform: scale(1.08);
    }

    .cchp-activity__card-img--empty {
        background-color: color-mix(
            in srgb,
            var(--eca-accent) 16%,
            var(--eca-card)
        );
    }

    /* Hover tip — same language as Rayan masonry */
    .cchp-activity__tip {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        align-items: flex-end;
        justify-content: stretch;
        padding: 0.85rem;
        pointer-events: none;
    }

    .cchp-activity__tip-veil {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--eca-surface) 0%, transparent) 30%,
                color-mix(in srgb, var(--eca-surface) 52%, transparent) 64%,
                color-mix(in srgb, var(--eca-surface) 88%, transparent) 100%
            ),
            linear-gradient(
                145deg,
                color-mix(in srgb, var(--eca-primary) 26%, transparent) 0%,
                transparent 55%
            );
        opacity: 0;
        transform: scale(1.04);
        transition:
            opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .cchp-activity__tip-panel {
        position: relative;
        z-index: 1;
        width: 100%;
        display: grid;
        gap: 0.35rem;
        padding: 0.9rem 1rem;
        border-radius: 0.95rem;
        border: 1px solid color-mix(in srgb, var(--eca-border) 55%, transparent);
        box-shadow:
            0 14px 34px color-mix(in srgb, var(--eca-primary) 14%, transparent),
            0 1px 0 color-mix(in srgb, white 18%, transparent) inset;
        backdrop-filter: blur(14px) saturate(1.2);
        -webkit-backdrop-filter: blur(14px) saturate(1.2);
        opacity: 0;
        transform: translateY(16px) scale(0.96);
        filter: blur(4px);
        transition:
            opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            filter 0.4s ease,
            border-color 0.3s ease,
            box-shadow 0.35s ease;
    }

    .cchp-activity__tip-title,
    .cchp-activity__tip-subtitle,
    .cchp-activity__tip-cta {
        opacity: 0;
        transform: translateY(8px);
        transition:
            opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .cchp-activity__tip-title {
        font-size: 0.98rem;
        font-weight: 800;
        line-height: 1.35;
        color: var(--eca-text);
        letter-spacing: -0.01em;
        transition-delay: 0ms;
    }

    .cchp-activity__tip-subtitle {
        font-size: 0.78rem;
        line-height: 1.45;
        color: var(--eca-text-muted);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        transition-delay: 40ms;
    }

    .cchp-activity__tip-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        margin-top: 0.4rem;
        width: fit-content;
        max-width: 100%;
        padding: 0.45rem 0.9rem;
        border-radius: 999px;
        border: 1px solid color-mix(in srgb, var(--eca-primary) 35%, transparent);
        background: var(--eca-primary);
        color: var(--eca-primary-contrast, #fff);
        font-size: 0.78rem;
        font-weight: 700;
        line-height: 1.2;
        box-shadow: 0 8px 18px color-mix(in srgb, var(--eca-primary) 28%, transparent);
        transition-delay: 80ms;
    }

    .cchp-activity__tip-cta-icon {
        width: 0.95rem;
        height: 0.95rem;
        flex-shrink: 0;
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }

    [dir="rtl"] .cchp-activity__tip-cta-icon {
        transform: scaleX(-1);
    }

    @media (hover: hover) and (pointer: fine) {
        .cchp-activity__card:hover .cchp-activity__tip-veil,
        .cchp-activity__card:focus-within .cchp-activity__tip-veil {
            opacity: 1;
            transform: scale(1);
        }

        .cchp-activity__card:hover .cchp-activity__tip-panel,
        .cchp-activity__card:focus-within .cchp-activity__tip-panel {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
            border-color: color-mix(in srgb, var(--eca-primary) 32%, var(--eca-border));
            box-shadow:
                0 16px 36px color-mix(in srgb, var(--eca-primary) 18%, transparent),
                0 1px 0 color-mix(in srgb, white 22%, transparent) inset;
        }

        .cchp-activity__card:hover .cchp-activity__tip-title,
        .cchp-activity__card:hover .cchp-activity__tip-subtitle,
        .cchp-activity__card:hover .cchp-activity__tip-cta,
        .cchp-activity__card:focus-within .cchp-activity__tip-title,
        .cchp-activity__card:focus-within .cchp-activity__tip-subtitle,
        .cchp-activity__card:focus-within .cchp-activity__tip-cta {
            opacity: 1;
            transform: translateY(0);
        }

        .cchp-activity__card:hover .cchp-activity__tip-cta-icon,
        .cchp-activity__card:focus-within .cchp-activity__tip-cta-icon {
            transform: translateX(3px);
        }

        [dir="rtl"] .cchp-activity__card:hover .cchp-activity__tip-cta-icon,
        [dir="rtl"] .cchp-activity__card:focus-within .cchp-activity__tip-cta-icon {
            transform: scaleX(-1) translateX(3px);
        }
    }

    /* Touch: always-visible tip so the linked card stays clear */
    @media (hover: none), (pointer: coarse) {
        .cchp-activity__tip-veil {
            opacity: 1;
            transform: scale(1);
            background: linear-gradient(
                180deg,
                transparent 38%,
                color-mix(in srgb, var(--eca-surface) 74%, transparent) 100%
            );
        }

        .cchp-activity__tip-panel {
            opacity: 1;
            transform: none;
            filter: none;
            padding: 0.75rem 0.85rem;
        }

        .cchp-activity__tip-title,
        .cchp-activity__tip-subtitle,
        .cchp-activity__tip-cta {
            opacity: 1;
            transform: none;
        }
    }

    html.light-visuals .cchp-activity__tip-panel,
    html.low-network .cchp-activity__tip-panel {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .cchp-activity__card,
        .cchp-activity__card-img,
        .cchp-activity__tip-veil,
        .cchp-activity__tip-panel,
        .cchp-activity__tip-title,
        .cchp-activity__tip-subtitle,
        .cchp-activity__tip-cta,
        .cchp-activity__tip-cta-icon {
            transition: none !important;
            filter: none !important;
            transform: none !important;
        }

        .cchp-activity__card .cchp-activity__tip-veil,
        .cchp-activity__card .cchp-activity__tip-panel,
        .cchp-activity__card .cchp-activity__tip-title,
        .cchp-activity__card .cchp-activity__tip-subtitle,
        .cchp-activity__card .cchp-activity__tip-cta {
            opacity: 1;
        }
    }

    @media (max-width: 900px) {
        .cchp-activity__grid {
            grid-template-columns: repeat(
                min(3, var(--cchp-activity-count, 2)),
                minmax(0, 1fr)
            );
        }
    }

    @media (max-width: 520px) {
        .cchp-activity__grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .eca-category-mega {
        @apply absolute inset-x-0 top-full z-50 border-b shadow-lg;
        border-color: var(--eca-border);
        background-color: color-mix(in srgb, var(--eca-card) 98%, transparent);
        box-shadow: var(--eca-shadow-card);
    }

    .eca-category-mega__panel {
        @apply overflow-hidden rounded-b-xl border-x border-b;
        border-color: var(--eca-border);
        background-color: var(--eca-card);
    }

    .eca-category-mega__scroll {
        @apply relative min-h-0 overflow-x-hidden overflow-y-auto overscroll-contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: var(--eca-scrollbar-thumb) var(--eca-scrollbar-track);
    }

    .eca-category-mega__panel::-webkit-scrollbar,
    .eca-category-mega__scroll::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    .eca-category-mega__panel::-webkit-scrollbar-track,
    .eca-category-mega__scroll::-webkit-scrollbar-track {
        margin-block: 0.35rem;
        margin-inline: 1px;
        border-radius: 999px;
        background: var(--eca-scrollbar-track);
    }

    .eca-category-mega__panel::-webkit-scrollbar-thumb,
    .eca-category-mega__scroll::-webkit-scrollbar-thumb {
        border: 1px solid transparent;
        border-radius: 999px;
        background: var(--eca-scrollbar-thumb);
        background-clip: padding-box;
        transition: background 0.15s ease;
    }

    .eca-category-mega__panel::-webkit-scrollbar-thumb:hover,
    .eca-category-mega__scroll::-webkit-scrollbar-thumb:hover {
        background: var(--eca-scrollbar-thumb-hover);
        background-clip: padding-box;
    }

    .eca-category-mega__panel::-webkit-scrollbar-corner,
    .eca-category-mega__scroll::-webkit-scrollbar-corner {
        background: transparent;
    }

    .eca-category-mega__scroll--can-up::before,
    .eca-category-mega__scroll--can-down::after {
        @apply pointer-events-none absolute inset-x-0 z-10 h-8;
        content: "";
    }

    .eca-category-mega__scroll--can-up::before {
        top: 0;
        background: linear-gradient(to bottom, var(--eca-card), transparent);
    }

    .eca-category-mega__scroll--can-down::after {
        bottom: 0;
        background: linear-gradient(to top, var(--eca-card), transparent);
    }

    .eca-category-tree--in-mega {
        @apply min-h-0;
    }

    .eca-category-tree--in-mega .eca-category-tree-header {
        @apply sticky top-0 z-[2];
    }

    .eca-category-tree {
        @apply flex min-h-0 flex-col;
        font-family: IRANSans, Vazir, ui-sans-serif, system-ui, sans-serif;
    }

    .eca-category-tree-header {
        @apply flex shrink-0 items-center gap-2.5 border-b px-4 py-3;
        background-color: var(--eca-category-title-bg);
        border-color: var(--eca-border);
    }

    .eca-category-tree-title {
        @apply m-0 min-w-0 flex-1 truncate text-sm font-bold;
        font-family: inherit;
        color: var(--eca-text);
    }

    .eca-category-tree-scroll {
        @apply min-h-0 flex-1 overflow-y-auto overscroll-contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--eca-accent) 45%, transparent)
            transparent;
    }

    .eca-category-tree-scroll::-webkit-scrollbar {
        width: 5px;
    }

    .eca-category-tree-scroll::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: color-mix(
            in srgb,
            var(--eca-accent) 40%,
            var(--eca-border)
        );
    }

    .eca-category-tree-scroll:focus-visible {
        outline: 2px solid
            color-mix(in srgb, var(--eca-accent) 40%, transparent);
        outline-offset: -2px;
    }

    .eca-category-tree-panel .eca-category-tree {
        max-height: min(52vh, 22rem);
    }

    .site-shell-category-inner .eca-category-tree {
        @apply min-h-0 flex-1;
        max-height: none;
    }

    /* Mobile menu: one scroll container; category tree grows with the panel (no nested scroll). */
    html.layout-mobile #mobile-site-nav {
        max-height: calc(
            100dvh - var(--site-mobile-header-height, 6.5rem) -
                env(safe-area-inset-bottom, 0px)
        );
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    html.layout-mobile #mobile-site-nav .eca-category-tree,
    html.layout-mobile
        #mobile-site-nav
        .eca-category-tree-panel
        .eca-category-tree {
        max-height: none;
        min-height: auto;
    }

    html.layout-mobile #mobile-site-nav .eca-category-tree-panel {
        overflow: visible;
    }

    html.layout-mobile #mobile-site-nav .eca-category-tree-scroll {
        max-height: none;
        min-height: auto;
        flex: none;
        overflow: visible;
        -webkit-overflow-scrolling: auto;
        scrollbar-gutter: auto;
    }

    html.layout-mobile #mobile-site-nav .eca-category-tree-item {
        overflow: visible;
    }

    .eca-category-tree-list--mega {
        @apply grid gap-2 p-3 sm:p-4;
        grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    }

    html.layout-xl {
        .eca-category-tree-list--mega {
            grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
        }
    }

    @media (min-width: 1536px) {
        .eca-category-tree-list--mega {
            grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
        }
    }

    .eca-category-tree--mega .eca-category-tree-item + .eca-category-tree-item {
        @apply mt-0;
    }

    .eca-category-tree--mega .eca-category-tree-item {
        @apply flex min-h-0 min-w-0 flex-col overflow-hidden rounded-xl border;
        border-color: color-mix(in srgb, var(--eca-border) 80%, transparent);
        background-color: var(--eca-card);
    }

    .eca-category-tree--mega .eca-category-tree-row {
        @apply border-b;
        border-color: color-mix(in srgb, var(--eca-border) 55%, transparent);
    }

    .eca-category-tree-link--mega-parent,
    .eca-category-tree-link--mega-parent-only {
        @apply min-h-[2.5rem] rounded-none px-3 py-2 text-[13px] font-semibold;
    }

    .eca-category-tree-link--mega-parent::before,
    .eca-category-tree-link--mega-parent-only::before {
        @apply hidden;
    }

    .eca-category-tree-sub--mega {
        @apply flex flex-wrap gap-1.5 border-0 p-2.5 pt-2;
        background-color: var(--eca-category-sub-bg);
    }

    .eca-category-tree-sub--mega > li {
        @apply m-0 min-w-0 list-none;
        flex: 0 1 auto;
        max-width: 100%;
    }

    .eca-category-tree-sublink--mega {
        @apply inline-flex max-w-full min-h-0 items-center rounded-lg border px-2.5 py-1.5 text-[11px] font-medium leading-snug;
        padding-inline-start: 0.65rem;
        border-color: color-mix(in srgb, var(--eca-border) 75%, transparent);
        background-color: color-mix(
            in srgb,
            var(--eca-card) 88%,
            var(--eca-category-sub-bg)
        );
        color: var(--eca-text-muted);
        white-space: normal;
        word-break: break-word;
    }

    .eca-category-tree-sublink--mega::before {
        @apply hidden;
    }

    .eca-category-tree-sublink--mega:hover {
        border-color: color-mix(
            in srgb,
            var(--eca-accent) 45%,
            var(--eca-border)
        );
        color: var(--eca-accent);
    }

    .eca-category-tree-sublink--mega.is-active {
        border-color: color-mix(
            in srgb,
            var(--eca-accent) 55%,
            var(--eca-border)
        );
        background-color: var(--eca-category-active-bg);
        color: var(--eca-accent);
    }

    .eca-category-tree-list {
        @apply m-0 list-none p-1.5;
    }

    .eca-category-tree-item {
        @apply overflow-hidden rounded-xl;
    }

    .eca-category-tree-item + .eca-category-tree-item {
        @apply mt-1;
    }

    .eca-category-tree-row {
        @apply relative flex items-stretch gap-0;
    }

    .eca-category-tree-link {
        @apply flex min-h-[2.75rem] min-w-0 flex-1 items-center gap-2 rounded-xl px-3 py-2 text-[13px] leading-snug transition duration-150;
        font-family: inherit;
        color: var(--eca-text);
    }

    .eca-category-tree-link--branch {
        padding-inline-end: 0.5rem;
    }

    .eca-category-tree-link-text {
        @apply min-w-0 flex-1 truncate;
    }

    .eca-category-tree-link::before {
        content: "";
        @apply h-1.5 w-1.5 shrink-0 rounded-full border;
        background-color: var(--eca-category-dot-bg);
        border-color: var(--eca-category-dot-border);
    }

    .eca-category-tree-link:hover {
        background-color: var(--eca-category-hover-bg);
        color: var(--eca-accent);
    }

    .eca-category-tree-link.is-active {
        @apply font-semibold;
        background-color: var(--eca-category-active-bg);
        color: var(--eca-accent);
    }

    .eca-category-tree-link.is-active::before {
        @apply border-brand-accent bg-brand-accent;
    }

    .eca-category-tree-count {
        @apply shrink-0 rounded-full px-1.5 py-0.5 text-[11px] font-bold tabular-nums;
        background: color-mix(in srgb, var(--eca-accent) 12%, var(--eca-card));
        color: var(--eca-text-muted);
    }

    .eca-category-tree-link.is-active .eca-category-tree-count {
        background: color-mix(in srgb, var(--eca-accent) 22%, transparent);
        color: var(--eca-accent);
    }

    .eca-category-tree-toggle {
        @apply order-first flex h-11 w-10 shrink-0 items-center justify-center rounded-xl transition duration-200;
        cursor: pointer;
        color: var(--eca-accent);
        background-color: transparent;
    }

    .eca-category-tree-toggle:hover {
        background-color: var(--eca-category-hover-bg);
    }

    .eca-category-tree-toggle-icon {
        @apply transition-transform duration-200;
        color: currentColor;
    }

    [dir="ltr"] .eca-category-tree-toggle--open .eca-category-tree-toggle-icon {
        transform: rotate(-90deg);
    }

    [dir="rtl"] .eca-category-tree-toggle--open .eca-category-tree-toggle-icon {
        transform: rotate(90deg);
    }

    .site-faq-empty {
        @apply rounded-2xl border border-dashed px-6 py-12 text-center text-sm;
        border-color: var(--eca-border);
        background-color: color-mix(in srgb, var(--eca-card) 88%, transparent);
        color: var(--eca-text-muted);
    }

    .site-faq-item {
        @apply overflow-hidden rounded-2xl border shadow-sm transition;
        background-color: var(--eca-card);
        border-color: var(--eca-border);
        color: var(--eca-text);
        box-shadow: var(--eca-shadow-card);
    }

    .site-faq-item:hover {
        border-color: color-mix(
            in srgb,
            var(--eca-primary) 38%,
            var(--eca-border)
        );
    }

    .site-faq-item__icon-wrap {
        @apply flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-brand-accent;
        border: 1px solid color-mix(in srgb, var(--eca-border) 90%, transparent);
        background-color: color-mix(
            in srgb,
            var(--eca-card) 70%,
            var(--eca-primary) 6%
        );
    }

    .site-faq-item__chevron {
        @apply flex h-8 w-8 shrink-0 items-center justify-center rounded-full;
        color: var(--eca-text-muted);
        background-color: color-mix(
            in srgb,
            var(--eca-border) 35%,
            transparent
        );
    }

    .site-faq-item__body {
        @apply border-t px-5 pb-5 pt-4 text-sm leading-relaxed;
        border-color: var(--eca-border);
        color: var(--eca-text-muted);
    }

    .site-faq-cta {
        @apply rounded-2xl border;
        border-color: color-mix(
            in srgb,
            var(--eca-accent) 35%,
            var(--eca-border)
        );
        background-color: color-mix(
            in srgb,
            var(--eca-accent) 8%,
            var(--eca-card)
        );
    }

    /* Rayan middle banner — responsive masonry (images only, natural heights) */
    .rayan-masonry {
        @apply relative isolate border-b py-8 sm:py-10 desktop:py-12;
        border-color: transparent;
    }

    .rayan-masonry__inner {
        @apply px-2 sm:px-3;
    }

    .rayan-masonry__empty {
        @apply rounded-2xl border border-dashed px-6 py-12 text-center text-sm;
        border-color: var(--eca-border);
        background-color: color-mix(in srgb, var(--eca-card) 88%, transparent);
    }

    .rayan-masonry__grid {
        columns: 1;
        column-gap: 0.75rem;
    }

    html.layout-mobile[data-layout-size="sm"] .rayan-masonry__grid {
        columns: 2;
        column-gap: 0.85rem;
    }

    html.layout-mobile[data-layout-size="md"] .rayan-masonry__grid {
        columns: 2;
        column-gap: 1rem;
    }

    html.layout-lg .rayan-masonry__grid {
        columns: 3;
        column-gap: 1.1rem;
    }

    html.layout-xl .rayan-masonry__grid {
        columns: 4;
        column-gap: 1.25rem;
    }

    .rayan-masonry__item {
        break-inside: avoid;
        page-break-inside: avoid;
        position: relative;
        display: block;
        margin: 0 0 0.75rem;
        overflow: hidden;
        border-radius: 1rem;
        background-color: color-mix(in srgb, var(--eca-card) 90%, transparent);
        border: 1px solid color-mix(in srgb, var(--eca-border) 70%, transparent);
        text-decoration: none;
        color: inherit;
        -webkit-tap-highlight-color: transparent;
        isolation: isolate;
    }

    html.layout-mobile[data-layout-size="md"] .rayan-masonry__item,
    html.layout-lg .rayan-masonry__item {
        margin-bottom: 1rem;
        border-radius: 1.15rem;
    }

    .rayan-masonry__item--static {
        cursor: default;
    }

    .rayan-masonry__img {
        display: block;
        width: 100%;
        height: auto;
        vertical-align: middle;
        object-fit: cover;
        transform: scale(1);
        filter: blur(10px);
        transition:
            transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
            filter 0.6s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.45s ease;
        opacity: 0.92;
    }

    /* After reveal: sharp focus */
    .rayan-masonry__item.is-visible .rayan-masonry__img,
    html:not(.site-motion) .rayan-masonry__img,
    html.light-visuals .rayan-masonry__img,
    html.low-network .rayan-masonry__img {
        filter: blur(0);
        opacity: 1;
    }

    @media (prefers-reduced-motion: reduce) {
        .rayan-masonry__img {
            filter: none;
            opacity: 1;
            transition: none;
        }
    }

    .rayan-masonry__item:not(.rayan-masonry__item--static):hover .rayan-masonry__img,
    .rayan-masonry__item:not(.rayan-masonry__item--static):focus-within .rayan-masonry__img {
        transform: scale(1.06);
    }

    .rayan-masonry__item:not(.rayan-masonry__item--static):focus-within {
        outline: 2px solid color-mix(in srgb, var(--eca-primary) 80%, white);
        outline-offset: 3px;
    }

    .site-motion .rayan-masonry__item[data-reveal] {
        --reveal-distance: 48px;
        --reveal-duration: 600ms;
    }

    /* Hover tip — theme glass panel */
    .rayan-masonry__tip {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        align-items: flex-end;
        justify-content: stretch;
        padding: 0.75rem;
        pointer-events: none;
    }

    .rayan-masonry__tip-veil {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--eca-surface) 0%, transparent) 28%,
                color-mix(in srgb, var(--eca-surface) 55%, transparent) 62%,
                color-mix(in srgb, var(--eca-surface) 88%, transparent) 100%
            ),
            linear-gradient(
                145deg,
                color-mix(in srgb, var(--eca-primary) 28%, transparent) 0%,
                transparent 55%
            );
        opacity: 0;
        transform: scale(1.04);
        transition:
            opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .rayan-masonry__tip-panel {
        position: relative;
        z-index: 1;
        width: 100%;
        display: grid;
        gap: 0.35rem;
        padding: 0.85rem 0.95rem;
        border-radius: 0.85rem;
        border: 1px solid color-mix(in srgb, var(--eca-border) 55%, transparent);
         box-shadow:
            0 12px 32px color-mix(in srgb, var(--eca-primary) 14%, transparent),
            0 1px 0 color-mix(in srgb, white 18%, transparent) inset;
        backdrop-filter: blur(14px) saturate(1.2);
        -webkit-backdrop-filter: blur(14px) saturate(1.2);
        opacity: 0;
        transform: translateY(14px) scale(0.96);
        filter: blur(4px);
        transition:
            opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            filter 0.4s ease,
            border-color 0.3s ease,
            box-shadow 0.35s ease;
    }

    .rayan-masonry__tip-title,
    .rayan-masonry__tip-subtitle,
    .rayan-masonry__tip-cta {
        opacity: 0;
        transform: translateY(8px);
        transition:
            opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
            background-color 0.25s ease,
            color 0.25s ease,
            box-shadow 0.25s ease;
    }

    .rayan-masonry__tip-title {
        margin: 0;
        font-size: 0.92rem;
        font-weight: 800;
        line-height: 1.35;
        color: var(--eca-text);
        letter-spacing: -0.01em;
        transition-delay: 0ms;
    }

    .rayan-masonry__tip-subtitle {
        margin: 0;
        font-size: 0.78rem;
        line-height: 1.45;
        color: var(--eca-text);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        transition-delay: 40ms;
    }

    .rayan-masonry__tip-cta {
        pointer-events: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        margin-top: 0.35rem;
        width: fit-content;
        max-width: 100%;
        padding: 0.42rem 0.85rem;
        border-radius: 999px;
        border: 1px solid color-mix(in srgb, var(--eca-primary) 35%, transparent);
        background: var(--eca-primary);
        color: var(--eca-primary-contrast, #fff);
        font-size: 0.78rem;
        font-weight: 650;
        line-height: 1.2;
        text-decoration: none;
        box-shadow: 0 8px 18px color-mix(in srgb, var(--eca-primary) 28%, transparent);
        transition-delay: 80ms;
    }

    .rayan-masonry__tip-cta-icon {
        width: 0.95rem;
        height: 0.95rem;
        flex-shrink: 0;
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }

    [dir="rtl"] .rayan-masonry__tip-cta-icon {
        transform: scaleX(-1);
    }

    .rayan-masonry__tip-cta:hover {
        background: color-mix(in srgb, var(--eca-primary) 88%, white);
        box-shadow: 0 10px 22px color-mix(in srgb, var(--eca-primary) 36%, transparent);
    }

    .rayan-masonry__tip-cta:hover .rayan-masonry__tip-cta-icon {
        transform: translateX(3px);
    }

    [dir="rtl"] .rayan-masonry__tip-cta:hover .rayan-masonry__tip-cta-icon {
        transform: scaleX(-1) translateX(3px);
    }

    .rayan-masonry__tip-cta:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--eca-accent, var(--eca-primary)) 85%, white);
        outline-offset: 2px;
    }

    /* Desktop / fine pointer: reveal tip on hover & keyboard focus */
    @media (hover: hover) and (pointer: fine) {
        .rayan-masonry__item--has-tip:hover .rayan-masonry__tip-veil,
        .rayan-masonry__item--has-tip:focus-within .rayan-masonry__tip-veil {
            opacity: 1;
            transform: scale(1);
        }

        .rayan-masonry__item--has-tip:hover .rayan-masonry__tip-panel,
        .rayan-masonry__item--has-tip:focus-within .rayan-masonry__tip-panel {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
            border-color: color-mix(in srgb, var(--eca-primary) 32%, var(--eca-border));
            box-shadow:
                0 16px 36px color-mix(in srgb, var(--eca-primary) 18%, transparent),
                0 1px 0 color-mix(in srgb, white 22%, transparent) inset;
        }

        .rayan-masonry__item--has-tip:hover .rayan-masonry__tip-title,
        .rayan-masonry__item--has-tip:hover .rayan-masonry__tip-subtitle,
        .rayan-masonry__item--has-tip:hover .rayan-masonry__tip-cta,
        .rayan-masonry__item--has-tip:focus-within .rayan-masonry__tip-title,
        .rayan-masonry__item--has-tip:focus-within .rayan-masonry__tip-subtitle,
        .rayan-masonry__item--has-tip:focus-within .rayan-masonry__tip-cta {
            opacity: 1;
            transform: translateY(0);
        }

        .rayan-masonry__item--has-tip:hover .rayan-masonry__tip,
        .rayan-masonry__item--has-tip:focus-within .rayan-masonry__tip {
            pointer-events: auto;
        }
    }

    /* Touch / coarse pointer: always-visible compact tip so CTA remains usable */
    @media (hover: none), (pointer: coarse) {
        .rayan-masonry__tip-veil {
            opacity: 1;
            transform: scale(1);
            background: linear-gradient(
                180deg,
                transparent 40%,
                color-mix(in srgb, var(--eca-surface) 72%, transparent) 100%
            );
        }

        .rayan-masonry__tip-panel {
            opacity: 1;
            transform: none;
            filter: none;
            padding: 0.7rem 0.8rem;
         }

        .rayan-masonry__tip-title,
        .rayan-masonry__tip-subtitle,
        .rayan-masonry__tip-cta {
            opacity: 1;
            transform: none;
        }

        .rayan-masonry__tip {
            pointer-events: auto;
        }
    }

    html.light-visuals .rayan-masonry__tip-panel,
    html.low-network .rayan-masonry__tip-panel {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: color-mix(in srgb, var(--eca-card) 40%, transparent);
    }

    @media (prefers-reduced-motion: reduce) {
        .rayan-masonry__tip-veil,
        .rayan-masonry__tip-panel,
        .rayan-masonry__tip-title,
        .rayan-masonry__tip-subtitle,
        .rayan-masonry__tip-cta,
        .rayan-masonry__tip-cta-icon {
            transition: none !important;
            filter: none !important;
            transform: none !important;
        }

        .rayan-masonry__item--has-tip .rayan-masonry__tip-veil,
        .rayan-masonry__item--has-tip .rayan-masonry__tip-panel,
        .rayan-masonry__item--has-tip .rayan-masonry__tip-title,
        .rayan-masonry__item--has-tip .rayan-masonry__tip-subtitle,
        .rayan-masonry__item--has-tip .rayan-masonry__tip-cta {
            opacity: 1;
        }

        .rayan-masonry__item:not(.rayan-masonry__item--static):hover .rayan-masonry__img,
        .rayan-masonry__item:not(.rayan-masonry__item--static):focus-within .rayan-masonry__img {
            transform: none;
        }
    }

    /* Home full-bleed hero */
    .site-top-hero {
        position: relative;
        isolation: isolate;
        width: 100vw;
        max-width: 100vw;
        margin-inline: calc(50% - 50vw);
        margin-top: -0.5rem;
        margin-bottom: 0;
        min-height: clamp(490px, 78vh, 858px);
        overflow: hidden;
        color: #f8fafc;
        background: #0b1220;
    }

    .site-top-hero__media {
        @apply absolute inset-0;
    }

    .site-top-hero__slide {
        @apply absolute inset-0 opacity-0 transition-opacity duration-[1800ms] ease-in-out;
        pointer-events: none;
    }

    .site-top-hero__slide--active {
        opacity: 1;
    }

    .site-top-hero__ken {
        @apply absolute inset-0;
    }

    html.page-ready:not(.low-network):not(.light-visuals) .site-top-hero__ken,
    html.page-ready:not(.low-network):not(.light-visuals)
        .cchp-top-banner__ken,
    html.page-ready:not(.low-network):not(.light-visuals)
        .cchp-news-stage__ken {
        @apply will-change-transform;
    }

    .site-top-hero__img {
        @apply block h-full w-full object-cover object-center;
        min-height: 100%;
        transform: scale(1.08);
    }

    html.page-ready:not(.low-network):not(.light-visuals)
        .site-top-hero__ken.kb-right,
    html.page-ready:not(.low-network):not(.light-visuals)
        .cchp-top-banner__ken.kb-right,
    html.page-ready:not(.low-network):not(.light-visuals)
        .cchp-news-stage__ken.kb-right {
        animation: site-kb-right 8s ease-out forwards;
    }
    html.page-ready:not(.low-network):not(.light-visuals)
        .site-top-hero__ken.kb-left,
    html.page-ready:not(.low-network):not(.light-visuals)
        .cchp-top-banner__ken.kb-left,
    html.page-ready:not(.low-network):not(.light-visuals)
        .cchp-news-stage__ken.kb-left {
        animation: site-kb-left 8s ease-out forwards;
    }
    html.page-ready:not(.low-network):not(.light-visuals)
        .site-top-hero__ken.kb-up,
    html.page-ready:not(.low-network):not(.light-visuals)
        .cchp-top-banner__ken.kb-up,
    html.page-ready:not(.low-network):not(.light-visuals)
        .cchp-news-stage__ken.kb-up {
        animation: site-kb-up 8s ease-out forwards;
    }
    html.page-ready:not(.low-network):not(.light-visuals)
        .site-top-hero__ken.kb-tl,
    html.page-ready:not(.low-network):not(.light-visuals)
        .cchp-top-banner__ken.kb-tl,
    html.page-ready:not(.low-network):not(.light-visuals)
        .cchp-news-stage__ken.kb-tl {
        animation: site-kb-tl 8s ease-out forwards;
    }
    html.page-ready:not(.low-network):not(.light-visuals)
        .site-top-hero__ken.kb-br,
    html.page-ready:not(.low-network):not(.light-visuals)
        .cchp-top-banner__ken.kb-br,
    html.page-ready:not(.low-network):not(.light-visuals)
        .cchp-news-stage__ken.kb-br {
        animation: site-kb-br 8s ease-out forwards;
    }

    @keyframes site-kb-right {
        from {
            transform: scale(1.12) translateX(-2%);
        }
        to {
            transform: scale(1.2) translateX(2%);
        }
    }
    @keyframes site-kb-left {
        from {
            transform: scale(1.12) translateX(2%);
        }
        to {
            transform: scale(1.2) translateX(-2%);
        }
    }
    @keyframes site-kb-up {
        from {
            transform: scale(1.1) translateY(2%);
        }
        to {
            transform: scale(1.18) translateY(-2%);
        }
    }
    @keyframes site-kb-tl {
        from {
            transform: scale(1.1) translate(-2%, 2%);
        }
        to {
            transform: scale(1.18) translate(2%, -2%);
        }
    }
    @keyframes site-kb-br {
        from {
            transform: scale(1.1) translate(2%, -2%);
        }
        to {
            transform: scale(1.18) translate(-2%, 2%);
        }
    }

    .site-top-hero__veil {
        @apply pointer-events-none absolute inset-0;
        background: color-mix(in srgb, #0b1220 55%, transparent);
    }

    .site-top-hero__veil--side {
        background: linear-gradient(
            to right,
            transparent 0%,
            color-mix(in srgb, #0b1220 35%, transparent) 55%,
            color-mix(in srgb, #0b1220 78%, transparent) 100%
        );
    }

    [dir="ltr"] .site-top-hero__veil--side {
        background: linear-gradient(
            to right,
            color-mix(in srgb, #0b1220 78%, transparent) 0%,
            color-mix(in srgb, #0b1220 35%, transparent) 55%,
            transparent 100%
        );
    }

    .site-top-hero__veil--bottom {
        background: linear-gradient(
            to top,
            color-mix(in srgb, var(--eca-surface) 88%, transparent) 0%,
            transparent 42%
        );
    }

    .site-top-hero__content {
        @apply relative z-10 flex min-h-[inherit] items-end pb-16 pt-24 sm:items-center sm:pb-20 sm:pt-28;
    }

    .site-top-hero__inner {
        @apply max-w-[70rem] px-4 sm:px-6 text-start;
    }

    .site-top-hero__eyebrow {
        @apply mb-3 text-sm font-bold uppercase tracking-[0.22em];
        color: color-mix(in srgb, #fff 70%, var(--eca-accent));
    }

    .site-top-hero__title {
        @apply text-2xl font-extrabold leading-tight tracking-tight sm:text-4xl md:text-5xl desktop:text-[3.25rem];
        color: #fff;
        text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
    }

    .site-top-hero__subtitle {
        @apply mt-4 max-w-2xl text-lg leading-relaxed sm:text-xl;
        color: color-mix(in srgb, #fff 86%, transparent);
        text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
    }

    .site-top-hero__actions {
        @apply mt-8 flex flex-wrap items-center gap-3;
    }

    .site-top-hero__cta {
        @apply min-h-[2.75rem] px-6 text-sm font-bold sm:text-[15px];
    }

    .site-top-hero__cta--ghost {
        border-color: color-mix(in srgb, #fff 28%, transparent);
        background-color: color-mix(in srgb, #fff 8%, transparent);
        color: #fff;
    }

    .site-top-hero__cta--ghost:hover {
        border-color: color-mix(in srgb, #fff 50%, transparent);
        background-color: color-mix(in srgb, #fff 14%, transparent);
        color: #fff;
    }

    .site-top-hero__usps {
        @apply mt-6 flex flex-col gap-2 text-base sm:flex-row sm:flex-wrap sm:gap-x-5 sm:gap-y-2;
        color: color-mix(in srgb, #fff 82%, transparent);
    }

    .site-top-hero__usps li {
        @apply relative ps-5 font-medium;
    }

    .site-top-hero__usps li::before {
        content: "";
        @apply absolute start-0 top-1.5 h-2.5 w-2.5 rounded-full;
        background: var(--eca-accent);
        box-shadow: 0 0 0 3px
            color-mix(in srgb, var(--eca-accent) 25%, transparent);
    }

    .site-top-hero__kpis {
        @apply mt-8 flex gap-3 overflow-x-auto pb-1 sm:grid sm:max-w-xl sm:grid-cols-3 sm:overflow-visible sm:pb-0;
        scrollbar-width: none;
    }

    .site-top-hero__kpis::-webkit-scrollbar {
        display: none;
    }

    .site-top-hero__kpi {
        @apply flex min-w-[8.5rem] shrink-0 flex-col gap-0.5 rounded-xl px-3.5 py-3 sm:min-w-0;
        background: color-mix(in srgb, #fff 8%, transparent);
        border: 1px solid color-mix(in srgb, #fff 12%, transparent);
        backdrop-filter: blur(8px);
    }

    .site-top-hero__kpi-value {
        @apply text-lg font-extrabold tabular-nums text-white;
    }

    .site-top-hero__kpi-label {
        @apply text-[13px] font-medium;
        color: color-mix(in srgb, #fff 76%, transparent);
    }

    .site-top-hero__dots {
        @apply absolute bottom-5 end-5 z-20 flex items-center gap-1.5 sm:bottom-8 sm:end-8;
    }

    .site-top-hero__dot {
        @apply h-1.5 w-1.5 rounded-full p-0 transition-all duration-500;
        border: 0;
        background-color: color-mix(in srgb, #fff 28%, transparent);
    }

    .site-top-hero__dot:hover {
        background-color: color-mix(in srgb, #fff 55%, transparent);
    }

    .site-top-hero__dot--active {
        @apply w-7;
        background-color: var(--eca-accent);
    }

    /* CCHP home top banner — image strip + in-slide arrows (iccima-style) */
    .cchp-top-banner {
        position: relative;
        isolation: isolate;
        width: 100vw;
        max-width: 100vw;
        margin-inline: calc(50% - 50vw);
        margin-top: -0.5rem;
        margin-bottom: 0;
        height: clamp(180px, 28vw, 420px);
        overflow: hidden;
        background: var(--eca-surface-2, #0a131a);
        outline: none;
    }

    @media (max-width: 640px) {
        .cchp-top-banner {
            height: clamp(140px, 42vw, 240px);
        }
    }

    .cchp-top-banner__viewport {
        height: 100%;
        overflow: hidden;
    }

    .cchp-top-banner__track {
        display: flex;
        flex-direction: row;
        direction: ltr;
        width: 100%;
        height: 100%;
        transition: transform 1s ease;
        will-change: transform;
    }

    [dir="rtl"] .cchp-top-banner__track {
        flex-direction: row-reverse;
    }

    @media (prefers-reduced-motion: reduce) {
        .cchp-top-banner__track {
            transition: none;
        }
    }

    .cchp-top-banner__slide {
        position: relative;
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .cchp-top-banner__frame,
    .cchp-top-banner__link {
        display: block;
        position: relative;
        height: 100%;
    }

    .cchp-top-banner__ken {
        @apply absolute inset-0;
    }

    .cchp-top-banner__img {
        @apply block h-full w-full object-cover object-center;
        min-height: 100%;
        transform: scale(1.08);
    }

    .cchp-top-banner__veil {
        @apply pointer-events-none absolute inset-0;
        background: linear-gradient(
            to top,
            color-mix(in srgb, #0a131a 78%, transparent) 0%,
            color-mix(in srgb, #0a131a 28%, transparent) 42%,
            transparent 70%
        );
    }

    .cchp-top-banner__copy {
        @apply pointer-events-none absolute inset-x-0 bottom-0 z-[5] px-16 pb-5 pt-8 sm:px-20 sm:pb-6;
        text-align: start;
        color: #fff;
    }

    .cchp-top-banner__title {
        @apply text-lg font-extrabold leading-tight sm:text-2xl desktop:text-[1.75rem];
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
    }

    .cchp-top-banner__subtitle {
        @apply mt-1.5 max-w-xl text-sm leading-relaxed sm:text-base;
        color: color-mix(in srgb, #fff 88%, transparent);
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
    }

    .cchp-top-banner__arrow {
        @apply absolute top-1/2 z-20 inline-flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full;
        border: 1px solid color-mix(in srgb, #fff 38%, transparent);
        background: color-mix(
            in srgb,
            var(--eca-surface, #0a131a) 42%,
            transparent
        );
        color: #fff;
        backdrop-filter: blur(8px);
        transition:
            background-color 200ms ease,
            border-color 200ms ease,
            color 200ms ease;
    }

    .cchp-top-banner__arrow:hover {
        border-color: color-mix(in srgb, var(--eca-accent) 55%, #fff);
        background: color-mix(in srgb, var(--eca-primary) 55%, transparent);
        color: #fff;
    }

    .cchp-top-banner__arrow--prev {
        inset-inline-start: 0.75rem;
    }

    .cchp-top-banner__arrow--next {
        inset-inline-end: 0.75rem;
    }

    [dir="rtl"] .cchp-top-banner__chevron {
        transform: scaleX(-1);
    }

    .cchp-top-banner__chevron {
        @apply h-5 w-5;
    }

    /* CCHP News Stage — featured slider + latest rail */
    .cchp-news-stage {
        @apply relative w-full py-4 sm:py-5;
    }

    .cchp-news-stage__inner {
        @apply px-2 sm:px-3;
    }

    .cchp-news-stage__grid {
        display: grid;
        gap: 1rem;
        align-items: stretch;
    }

    @media (min-width: 1024px) {
        .cchp-news-stage__grid {
            grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
            gap: 1.25rem;
            min-height: clamp(360px, 42vw, 520px);
        }
    }

    .cchp-news-stage__slider {
        position: relative;
        isolation: isolate;
        min-height: clamp(240px, 56vw, 380px);
        border-radius: 2rem;
        overflow: hidden;
        background: var(--eca-surface-2, #0a131a);
        outline: none;
        box-shadow: var(--eca-shadow-card, 0 18px 52px rgba(0, 0, 0, 0.18));
    }

    @media (min-width: 1024px) {
        .cchp-news-stage__slider {
            min-height: 100%;
            height: 100%;
        }
    }

    .cchp-news-stage__viewport {
        height: 100%;
        min-height: inherit;
        overflow: hidden;
    }

    .cchp-news-stage__track {
        display: flex;
        flex-direction: row;
        direction: ltr;
        width: 100%;
        height: 100%;
        min-height: inherit;
        transition: transform 0.85s ease;
        will-change: transform;
    }

    [dir="rtl"] .cchp-news-stage__track {
        flex-direction: row-reverse;
    }

    @media (prefers-reduced-motion: reduce) {
        .cchp-news-stage__track {
            transition: none;
        }
    }

    .cchp-news-stage__slide {
        position: relative;
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        height: 100%;
        min-height: inherit;
        overflow: hidden;
    }

    .cchp-news-stage__frame {
        position: relative;
        display: block;
        height: 100%;
        min-height: inherit;
    }

    .cchp-news-stage__ken {
        @apply absolute inset-0;
    }

    .cchp-news-stage__img,
    .cchp-news-stage__img-fallback {
        @apply block h-full w-full object-cover object-center;
        min-height: 100%;
        transform: scale(1.06);
    }

    .cchp-news-stage__img-fallback {
        background:
            linear-gradient(135deg, color-mix(in srgb, var(--eca-primary) 35%, #0a131a), #0a131a);
    }

    .cchp-news-stage__veil {
        @apply pointer-events-none absolute inset-0;
        background: linear-gradient(
            to top,
            color-mix(in srgb, #061018 88%, transparent) 0%,
            color-mix(in srgb, #061018 42%, transparent) 42%,
            color-mix(in srgb, #061018 8%, transparent) 72%,
            transparent 100%
        );
    }

    .cchp-news-stage__copy {
        @apply absolute inset-x-0 bottom-0 z-[5] flex flex-col gap-2 px-5 pb-14 pt-16 sm:px-7 sm:pb-16 sm:pt-20;
        color: #fff;
        text-align: start;
        pointer-events: none;
    }

    .cchp-news-stage__copy a {
        pointer-events: auto;
    }

    .cchp-news-stage__meta {
        @apply flex flex-wrap items-center gap-2.5 px-1 sm:px-5;
    }

    .cchp-news-stage__badge {
        @apply inline-flex items-center rounded-full px-3 py-1 text-[0.7rem] font-bold tracking-wide;
        background: color-mix(in srgb, var(--eca-accent, #d5a14a) 92%, #fff);
        color: #1a1208;
    }

    .cchp-news-stage__date {
        @apply text-xs sm:text-sm;
        color: color-mix(in srgb, #fff 78%, transparent);
    }

    .cchp-news-stage__title {
        @apply max-w-3xl text-xl font-extrabold leading-snug sm:text-2xl desktop:text-[1.85rem];
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .cchp-news-stage__title a {
        color: inherit;
        text-decoration: none;
    }

    .cchp-news-stage__title a:hover {
        color: color-mix(in srgb, var(--eca-accent, #d5a14a) 70%, #fff);
    }

    .cchp-news-stage__excerpt {
        @apply max-w-2xl text-sm leading-relaxed sm:text-[0.95rem];
        color: color-mix(in srgb, #fff 86%, transparent);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    html.layout-mobile .cchp-news-stage__excerpt {
        display: none;
    }

    .cchp-news-stage__actions {
        @apply mt-1 flex items-center;
    }

    .cchp-news-stage__cta {
        @apply inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-sm font-bold transition;
        background: color-mix(in srgb, var(--eca-primary, #43a2bc) 88%, #fff);
        color: #061018;
    }

    .cchp-news-stage__cta:hover {
        background: color-mix(in srgb, var(--eca-accent, #d5a14a) 88%, #fff);
    }

    .cchp-news-stage__cta-icon {
        @apply h-4 w-4;
    }

    [dir="ltr"] .cchp-news-stage__cta-icon {
        transform: scaleX(-1);
    }

    .cchp-news-stage__dots {
        @apply absolute bottom-4 z-20 flex items-center gap-1.5 sm:bottom-5;
        inset-inline-end: 1.25rem;
    }

    @media (min-width: 640px) {
        .cchp-news-stage__dots {
            inset-inline-end: 1.75rem;
        }
    }

    .cchp-news-stage__dot {
        width: 0.55rem;
        height: 0.55rem;
        border-radius: 999px;
        border: 0;
        padding: 0;
        background: color-mix(in srgb, #fff 38%, transparent);
        transition:
            width 180ms ease,
            background-color 180ms ease;
        cursor: pointer;
    }

    .cchp-news-stage__dot.is-active {
        width: 1.35rem;
        background: var(--eca-accent, #d5a14a);
    }

    .cchp-news-stage__arrow {
        @apply absolute top-1/2 z-20 inline-flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full;
        border: 1px solid color-mix(in srgb, #fff 32%, transparent);
        background: color-mix(in srgb, var(--eca-surface, #0a131a) 48%, transparent);
        color: #fff;
        backdrop-filter: blur(8px);
        transition:
            background-color 200ms ease,
            border-color 200ms ease;
    }

    html.layout-mobile .cchp-news-stage__arrow {
        display: none;
    }

    .cchp-news-stage__arrow:hover {
        border-color: color-mix(in srgb, var(--eca-accent) 55%, #fff);
        background: color-mix(in srgb, var(--eca-primary) 55%, transparent);
    }

    .cchp-news-stage__arrow--prev {
        inset-inline-start: 0.75rem;
    }

    .cchp-news-stage__arrow--next {
        inset-inline-end: 0.75rem;
    }

    [dir="rtl"] .cchp-news-stage__chevron {
        transform: scaleX(-1);
    }

    .cchp-news-stage__chevron {
        @apply h-4 w-4;
    }

    .cchp-news-stage__rail {
        display: flex;
        flex-direction: column;
        border-radius: 2rem;
        overflow: hidden;
        background: var(--eca-card, #111d25);
        border: 1px solid var(--eca-border, rgba(210, 225, 232, 0.14));
        box-shadow: var(--eca-shadow-card, 0 12px 30px rgba(0, 0, 0, 0.12));
        min-height: 0;
    }

    @media (min-width: 1024px) {
        .cchp-news-stage__rail {
            height: 100%;
        }
    }

    .cchp-news-stage__rail-head {
        @apply flex items-center justify-between gap-3 px-4 py-3.5 sm:px-5;
        border-bottom: 1px solid var(--eca-border, rgba(210, 225, 232, 0.14));
        background: color-mix(in srgb, var(--eca-surface-2, #17242d) 55%, var(--eca-card));
    }

    .cchp-news-stage__rail-title {
        @apply text-sm font-extrabold tracking-tight sm:text-base;
        color: var(--eca-text, #f2f6f8);
    }

    .cchp-news-stage__rail-all {
        @apply text-xs font-bold sm:text-sm;
        color: var(--eca-primary, #43a2bc);
        text-decoration: none;
    }

    .cchp-news-stage__rail-all:hover {
        color: var(--eca-accent, #d5a14a);
    }

    .cchp-news-stage__rail-list {
        @apply m-0 flex list-none flex-col p-0;
        flex: 1 1 auto;
    }

    @media (min-width: 640px) and (max-width: 1023px) {
        .cchp-news-stage__rail-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
    }

    .cchp-news-stage__rail-item {
        position: relative;
        flex: 1 1 0;
        min-height: 0;
        border-bottom: 1px solid var(--eca-border, rgba(210, 225, 232, 0.12));
    }

    @media (min-width: 640px) and (max-width: 1023px) {
        .cchp-news-stage__rail-item:nth-child(odd) {
            border-inline-end: 1px solid var(--eca-border, rgba(210, 225, 232, 0.12));
        }

        .cchp-news-stage__rail-item:nth-last-child(-n + 2) {
            border-bottom: 0;
        }
    }

    @media (min-width: 1024px) {
        .cchp-news-stage__rail-item:last-child {
            border-bottom: 0;
        }
    }

    .cchp-news-stage__rail-item::before {
        content: '';
        position: absolute;
        inset-block: 0.65rem;
        inset-inline-start: 0;
        width: 3px;
        border-radius: 999px;
        background: transparent;
        transition: background-color 180ms ease;
    }

    .cchp-news-stage__rail-item:hover::before {
        background: var(--eca-accent, #d5a14a);
    }

    .cchp-news-stage__rail-link {
        @apply flex h-full items-start gap-3 px-4 py-3.5 no-underline sm:px-5;
        color: inherit;
        transition: background-color 180ms ease;
    }

    .cchp-news-stage__rail-link:hover {
        background: color-mix(in srgb, var(--eca-primary, #43a2bc) 8%, transparent);
    }

    .cchp-news-stage__rail-num {
        @apply shrink-0 pt-0.5 text-xs font-bold tabular-nums;
        color: color-mix(in srgb, var(--eca-text-muted, #a8b7c0) 80%, transparent);
        letter-spacing: 0.04em;
    }

    .cchp-news-stage__rail-thumb {
        @apply relative shrink-0 overflow-hidden rounded-xl;
        width: 4.75rem;
        height: 3.5rem;
        background: var(--eca-surface-2, #17242d);
    }

    .cchp-news-stage__rail-thumb img,
    .cchp-news-stage__rail-thumb-fallback {
        @apply block h-full w-full object-cover;
    }

    .cchp-news-stage__rail-thumb-fallback {
        background: color-mix(in srgb, var(--eca-primary) 22%, var(--eca-surface-2));
    }

    .cchp-news-stage__rail-body {
        @apply min-w-0 flex flex-1 flex-col gap-1;
    }

    .cchp-news-stage__rail-date {
        @apply text-[0.7rem] leading-none;
        color: var(--eca-text-muted, #a8b7c0);
    }

    .cchp-news-stage__rail-item-title {
        @apply text-sm font-bold leading-snug;
        color: var(--eca-text, #f2f6f8);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Trust strip */
    .site-trust-strip {
        @apply relative border-y py-2 sm:py-10 px-2;
        border-color: transparent;
    }

    .site-trust-strip__heading {
        @apply mb-6 text-center text-sm font-bold uppercase tracking-[0.2em];
        color: var(--eca-text-muted);
    }

    .site-trust-strip__grid {
        @apply grid grid-cols-2 gap-3 md:grid-cols-4 md:gap-4;
    }

    .site-trust-strip__card {
        @apply flex flex-col items-center gap-2.5 rounded-2xl px-3 py-4 text-center transition;
        background: color-mix(in srgb, var(--eca-card) 88%, transparent);
        border: 1px solid color-mix(in srgb, var(--eca-border) 85%, transparent);
    }

    .site-trust-strip__card:hover {
        border-color: color-mix(
            in srgb,
            var(--eca-accent) 30%,
            var(--eca-border)
        );
        background: color-mix(
            in srgb,
            var(--eca-card) 80%,
            var(--eca-accent) 8%
        );
    }

    .site-trust-strip__icon {
        @apply inline-flex h-11 w-11 items-center justify-center rounded-2xl;
        color: var(--eca-accent);
        background: color-mix(in srgb, var(--eca-accent) 10%, var(--eca-card));
        border: 1px solid
            color-mix(in srgb, var(--eca-accent) 18%, var(--eca-border));
    }

    .site-trust-strip__title {
        @apply text-sm font-bold leading-snug;
        color: var(--eca-text);
    }

    .site-trust-strip__desc {
        @apply mt-0.5 text-[13px] leading-snug;
        color: var(--eca-text-muted);
    }

    /* Industry pages */
    .site-industry-hero {
        position: relative;
        isolation: isolate;
        width: 100vw;
        max-width: 100vw;
        margin-inline: calc(50% - 50vw);
        min-height: clamp(280px, 42vh, 460px);
        overflow: hidden;
        color: #f8fafc;
        background-color: #0b1220;
        background-image: var(--industry-hero-image, none);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .site-listing-hero {
        position: relative;
        isolation: isolate;
        width: 100vw;
        max-width: 100vw;
        margin-inline: calc(50% - 50vw);
        min-height: clamp(200px, 28vh, 320px);
        overflow: hidden;
        color: #f8fafc;
        background-color: #0b1220;
        background-image: var(--listing-hero-image, none);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .site-listing-hero__veil {
        @apply pointer-events-none absolute inset-0;
        background: linear-gradient(
            to top,
            color-mix(in srgb, #0b1220 88%, transparent) 0%,
            color-mix(in srgb, #0b1220 40%, transparent) 55%,
            color-mix(in srgb, #0b1220 25%, transparent) 100%
        );
    }

    .site-listing-hero__inner {
        @apply relative z-10 flex min-h-[inherit] flex-col justify-end mx-3 px-6 py-8 text-start sm:px-6 sm:py-10;
    }

    .site-listing-hero__eyebrow {
        @apply mb-2 text-xs font-semibold uppercase tracking-wider text-white/70;
    }

    .site-listing-hero__title {
        @apply text-2xl font-extrabold leading-tight sm:text-3xl;
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
    }

    .site-listing-hero__subtitle {
        @apply mt-2 max-w-2xl text-sm leading-relaxed text-white/80 sm:text-base;
    }

    .site-industry-hero__veil {
        @apply pointer-events-none absolute inset-0;
        background: linear-gradient(
            to top,
            color-mix(in srgb, #0b1220 88%, transparent) 0%,
            color-mix(in srgb, #0b1220 35%, transparent) 55%,
            color-mix(in srgb, #0b1220 20%, transparent) 100%
        );
    }

    .site-industry-hero__inner {
        @apply relative z-10 flex min-h-[inherit] flex-col justify-end px-4 py-10 text-start sm:px-6 sm:py-12;
    }

    .site-industry-hero__breadcrumb {
        @apply mb-4 text-xs text-white/70;
    }

    .site-industry-hero__breadcrumb a {
        color: color-mix(in srgb, #fff 78%, var(--eca-accent));
    }

    .site-industry-hero__title {
        @apply text-2xl font-extrabold leading-tight sm:text-4xl;
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
    }

    .site-industry-hero__subtitle {
        @apply mt-3 max-w-3xl text-sm leading-relaxed sm:text-base;
        color: color-mix(in srgb, #fff 78%, transparent);
    }

    .site-industry-hero__actions {
        @apply mt-6 flex flex-wrap gap-3;
    }

    .site-industry-section {
        @apply space-y-4;
    }

    .site-industry-activities {
        @apply grid grid-cols-1 gap-3 sm:grid-cols-2 desktop:grid-cols-3;
    }

    .site-industry-activities--index {
        @apply desktop:grid-cols-2;
    }

    .site-industry-activities__card {
        @apply flex h-full overflow-hidden rounded-xl border transition duration-300;
        border-color: color-mix(in srgb, var(--eca-border) 85%, transparent);
        background: color-mix(in srgb, var(--eca-card) 90%, transparent);
        color: var(--eca-text);
    }

    .site-industry-activities__card:hover {
        border-color: color-mix(
            in srgb,
            var(--eca-primary) 40%,
            var(--eca-border)
        );
        box-shadow: var(--card-shadow-hover);
        transform: translateY(-2px);
    }

    .site-industry-activities__image {
        @apply h-24 w-24 shrink-0 object-cover sm:h-28 sm:w-28;
    }

    .site-industry-activities__content {
        @apply flex min-w-0 flex-1 flex-col justify-center gap-1 p-3 sm:p-4;
    }

    .site-industry-activities__content h2,
    .site-industry-activities__content h3 {
        @apply text-sm font-bold leading-snug sm:text-base;
    }

    .site-industry-activities__content p {
        @apply text-xs leading-relaxed text-brand-muted sm:text-sm;
    }

    .site-industry-repairs {
        @apply grid grid-cols-1 gap-3 sm:grid-cols-2 desktop:grid-cols-4;
    }

    .site-industry-repairs__item {
        @apply rounded-xl border p-4;
        border-color: color-mix(in srgb, var(--eca-border) 85%, transparent);
        background: color-mix(in srgb, var(--eca-card) 88%, transparent);
    }

    .site-industry-repairs__code {
        @apply font-mono text-xs text-brand-muted;
    }

    .site-industry-repairs__device {
        @apply mt-1 text-sm font-semibold;
    }

    .site-industry-repairs__meta {
        @apply mt-1 text-xs text-brand-muted;
    }

    .site-industry-repairs--services {
        @apply grid gap-3 sm:grid-cols-2 desktop:grid-cols-3;
    }

    /* Services index */
    .site-services__inner {
        @apply space-y-8;
    }

    .site-services__header {
        @apply flex flex-col gap-4 px-2 sm:flex-row sm:items-end sm:justify-between;
    }

    .site-services__title {
        @apply text-2xl font-bold;
    }

    .site-services__subtitle {
        @apply mt-2 max-w-2xl text-sm text-brand-muted;
    }

    .site-services__header-actions {
        @apply flex shrink-0 flex-wrap gap-2;
    }

    .site-services-categories__grid {
        @apply grid grid-cols-2 gap-2.5 sm:gap-3 desktop:grid-cols-5;
    }

    .site-services-categories__card {
        @apply flex h-full flex-col overflow-hidden rounded-xl border text-start transition duration-200;
        border-color: color-mix(in srgb, var(--eca-border) 85%, transparent);
        background: color-mix(in srgb, var(--eca-card) 92%, transparent);
    }

    .site-services-categories__card:hover,
    .site-services-categories__card--active {
        border-color: color-mix(
            in srgb,
            var(--eca-primary) 35%,
            var(--eca-border)
        );
        box-shadow: 0 10px 24px
            color-mix(in srgb, var(--eca-primary) 10%, transparent);
    }

    .site-services-categories__card--active {
        border-color: var(--eca-primary);
    }

    .site-services-categories__image {
        @apply aspect-[16/10] w-full object-cover;
        max-height: 8.5rem;
    }

    .site-services-categories__placeholder {
        @apply flex aspect-[16/10] w-full items-center justify-center;
        max-height: 5.5rem;
        background: color-mix(
            in srgb,
            var(--eca-surface-2) 80%,
            var(--eca-primary) 8%
        );
        color: var(--eca-primary);
    }

    .site-services-categories__content {
        @apply flex flex-1 flex-col gap-1 p-2.5;
    }

    .site-services-categories__name {
        @apply text-xs font-bold leading-snug sm:text-sm;
        color: var(--eca-text);
    }

    .site-services-categories__desc {
        @apply line-clamp-2 text-[11px] leading-relaxed;
        color: var(--eca-text-muted);
    }

    .site-specialty__header--split {
        @apply mb-8 flex flex-col gap-4 text-start sm:mb-9 sm:flex-row sm:items-start sm:justify-between;
    }

    .site-specialty__header--split .site-specialty__subtitle {
        @apply mx-0;
    }

    .site-specialty__services-btn {
        @apply shrink-0 self-start;
    }

    /* Specialty repair grid */
    .site-specialty {
        @apply relative overflow-hidden border-y py-9 sm:py-10 px-2;
        border-color: transparent;
    }

    .site-specialty__glow {
        @apply pointer-events-none absolute inset-0;
    }

    .site-specialty__inner {
        @apply relative;
    }

    .site-specialty__header {
        @apply mb-8 text-center sm:mb-9;
    }

    .site-specialty__eyebrow {
        @apply mb-3 text-xs font-bold uppercase tracking-[0.25em];
        color: var(--eca-primary);
    }

    .site-specialty__title {
        @apply text-2xl font-extrabold tracking-tight sm:text-3xl;
        color: var(--eca-text);
    }

    .site-specialty__subtitle {
        @apply mx-auto mt-3 max-w-2xl text-sm leading-relaxed sm:text-base;
        color: var(--eca-text-muted);
    }

    .site-specialty__grid {
        @apply grid grid-cols-2 gap-2.5 md:grid-cols-3 md:gap-3 desktop:grid-cols-5;
    }

    .site-specialty__card {
        @apply flex h-full flex-col items-center rounded-xl p-3 text-center transition duration-300 sm:p-3.5;
        --specialty-accent: var(--eca-primary);
        background: color-mix(in srgb, var(--eca-card) 88%, transparent);
        border: 1px solid color-mix(in srgb, var(--eca-border) 85%, transparent);
        backdrop-filter: blur(12px);
        color: var(--eca-text);
    }

    .site-specialty__card[data-accent="blue"] {
        --specialty-accent: #60a5fa;
    }
    .site-specialty__card[data-accent="amber"] {
        --specialty-accent: #fbbf24;
    }
    .site-specialty__card[data-accent="purple"] {
        --specialty-accent: #c084fc;
    }
    .site-specialty__card[data-accent="cyan"] {
        --specialty-accent: var(--eca-primary);
    }
    .site-specialty__card[data-accent="green"] {
        --specialty-accent: var(--eca-success);
    }
    .site-specialty__card[data-accent="pink"] {
        --specialty-accent: #f472b6;
    }
    .site-specialty__card[data-accent="orange"] {
        --specialty-accent: #fb923c;
    }
    .site-specialty__card[data-accent="teal"] {
        --specialty-accent: #2dd4bf;
    }
    .site-specialty__card[data-accent="indigo"] {
        --specialty-accent: #818cf8;
    }
    .site-specialty__card[data-accent="yellow"] {
        --specialty-accent: var(--eca-warning);
    }

    .site-specialty__card:hover {
        border-color: color-mix(
            in srgb,
            var(--specialty-accent) 40%,
            var(--eca-border)
        );
        background: color-mix(
            in srgb,
            var(--eca-card) 82%,
            var(--specialty-accent) 10%
        );
        box-shadow: 0 12px 32px
            color-mix(in srgb, var(--specialty-accent) 12%, transparent);
    }

    .site-specialty__icon {
        @apply mb-2.5 inline-flex h-9 w-9 items-center justify-center rounded-lg transition duration-300;
        color: var(--specialty-accent);
        background: color-mix(
            in srgb,
            var(--specialty-accent) 12%,
            var(--eca-card)
        );
        border: 1px solid
            color-mix(in srgb, var(--specialty-accent) 20%, var(--eca-border));
    }

    .site-specialty__card:hover .site-specialty__icon {
        background: color-mix(
            in srgb,
            var(--specialty-accent) 22%,
            var(--eca-card)
        );
    }

    .site-specialty__card-title {
        @apply mb-1 text-xs font-bold leading-snug sm:text-sm;
        color: var(--eca-text);
    }

    .site-specialty__card-desc {
        @apply text-[11px] leading-relaxed sm:text-xs;
        color: var(--eca-text-muted);
    }

    .site-specialty__actions {
        @apply mt-8 flex flex-wrap items-center justify-center gap-3;
    }

    @media (prefers-reduced-motion: reduce) {
        .site-specialty__card,
        .site-specialty__icon {
            transition: none;
        }
    }

    /* Brand marquee — keep low height (trust role) */
    .site-brand-marquee {
        @apply overflow-hidden  py-4;
        max-height: 150px;
        direction: ltr;
        border-top: none;
    }

    .site-brand-marquee__heading {
        @apply mb-3 text-center text-[16px] font-bold uppercase tracking-[0.18em];
        color: var(--eca-text-muted);
    }

    .site-brand-marquee__viewport {
        @apply flex flex-col gap-2;
        mask-image: linear-gradient(
            to right,
            transparent,
            #000 8%,
            #000 92%,
            transparent
        );
    }

    .site-brand-marquee__row {
        @apply flex w-max items-center gap-2;
    }

    html.page-ready:not(.low-network):not(.light-visuals)
        .site-brand-marquee__row {
        animation: site-marquee 48s linear infinite;
    }

    html.page-ready:not(.low-network):not(.light-visuals)
        .site-brand-marquee__row--reverse {
        animation-name: site-marquee-reverse;
        animation-duration: 56s;
    }

    html.low-network .site-brand-marquee__viewport,
    html.light-visuals .site-brand-marquee__viewport {
        overflow-x: auto;
    }

    html.low-network .site-brand-marquee__row,
    html.light-visuals .site-brand-marquee__row {
        @apply w-full flex-wrap justify-center;
    }

    html.low-network .site-brand-marquee__row--reverse,
    html.light-visuals .site-brand-marquee__row--reverse {
        display: none;
    }

    html.light-visuals.site-motion [data-reveal]:not(.is-visible) {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .site-brand-marquee__chip {
        @apply inline-flex h-10 shrink-0 items-center gap-2 rounded-lg px-3 text-xs font-semibold transition;
        color: var(--eca-text-muted);
        background: color-mix(in srgb, var(--eca-card) 90%, transparent);
        border: 1px solid color-mix(in srgb, var(--eca-border) 80%, transparent);
    }

    .site-brand-marquee__chip:hover {
        color: var(--eca-text);
        border-color: color-mix(
            in srgb,
            var(--eca-accent) 30%,
            var(--eca-border)
        );
        background: color-mix(
            in srgb,
            var(--eca-card) 80%,
            var(--eca-accent) 8%
        );
    }

    .site-brand-marquee__chip-logo {
        @apply h-6 w-auto shrink-0;
        max-width: 5.5rem;
        object-fit: contain;
    }

    .site-brand-marquee__scroller {
        @apply flex flex-nowrap gap-2;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding-inline: 0.25rem;
    }

    .site-brand-marquee__scroller::-webkit-scrollbar {
        display: none;
    }

    .site-brand-marquee__scroller .site-brand-marquee__chip {
        scroll-snap-align: start;
    }

    html.layout-mobile .site-brand-marquee {
        max-height: none;
    }

    @keyframes site-marquee {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-50%);
        }
    }

    @keyframes site-marquee-reverse {
        from {
            transform: translateX(-50%);
        }
        to {
            transform: translateX(0);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .site-top-hero__slide {
            transition: none;
        }
        .site-top-hero__ken.kb-right,
        .site-top-hero__ken.kb-left,
        .site-top-hero__ken.kb-up,
        .site-top-hero__ken.kb-tl,
        .site-top-hero__ken.kb-br,
        .cchp-top-banner__ken.kb-right,
        .cchp-top-banner__ken.kb-left,
        .cchp-top-banner__ken.kb-up,
        .cchp-top-banner__ken.kb-tl,
        .cchp-top-banner__ken.kb-br,
        .cchp-news-stage__ken.kb-right,
        .cchp-news-stage__ken.kb-left,
        .cchp-news-stage__ken.kb-up,
        .cchp-news-stage__ken.kb-tl,
        .cchp-news-stage__ken.kb-br {
            animation: none;
        }
        .site-brand-marquee__row,
        .site-brand-marquee__row--reverse {
            animation: none;
        }
        .site-brand-marquee__viewport {
            overflow-x: auto;
        }
        .site-brand-marquee__row {
            flex-wrap: nowrap;
        }
    }

    @media (max-width: 639px) {
        .site-top-hero {
            min-height: clamp(455px, 77vh, 718px);
        }
        .site-top-hero__content {
            @apply items-end pb-14 pt-20;
        }
    }

    /* Contact page — Assistant-first */
    .site-contact {
        @apply relative;
    }

    .site-contact-hero {
        @apply relative overflow-hidden border-b px-2;
        min-height: clamp(320px, 45vh, 560px);
        border-color: transparent;
        background-color: color-mix(in srgb, var(--eca-surface, var(--eca-bg)) 88%, var(--eca-card));
    }

    .site-contact-hero__media {
        @apply pointer-events-none absolute inset-0;
        background-image: var(--contact-hero-image, none);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .site-contact-hero--has-image .site-contact-hero__media,
    .site-contact-hero[style*='--contact-hero-image'] .site-contact-hero__media {
        opacity: 1;
    }

    .site-contact-hero__glow {
        @apply pointer-events-none absolute inset-0;
        opacity: 0.95;
        background: linear-gradient(
            145deg,
            color-mix(in srgb, var(--eca-card) 88%, transparent),
            color-mix(in srgb, var(--eca-surface, var(--eca-bg)) 70%, transparent)
        );
    }

    .site-contact-hero--has-image .site-contact-hero__glow,
    .site-contact-hero[style*='--contact-hero-image'] .site-contact-hero__glow {
        opacity: 1;
        background: linear-gradient(
            to top,
            color-mix(in srgb, #0b1220 82%, transparent) 0%,
            color-mix(in srgb, #0b1220 45%, transparent) 48%,
            color-mix(in srgb, #0b1220 28%, transparent) 100%
        );
    }

    .site-contact-hero--has-image .site-contact-hero__crumb,
    .site-contact-hero--has-image .site-contact-hero__title,
    .site-contact-hero--has-image .site-contact-hero__sub,
    .site-contact-hero[style*='--contact-hero-image'] .site-contact-hero__crumb,
    .site-contact-hero[style*='--contact-hero-image'] .site-contact-hero__title,
    .site-contact-hero[style*='--contact-hero-image'] .site-contact-hero__sub {
        color: #f8fafc;
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
    }

    .site-contact-hero--has-image .site-contact-hero__crumb,
    .site-contact-hero[style*='--contact-hero-image'] .site-contact-hero__crumb {
        color: rgb(248 250 252 / 0.72);
        text-shadow: none;
    }

    .site-contact-hero--has-image .site-contact-hero__sub,
    .site-contact-hero[style*='--contact-hero-image'] .site-contact-hero__sub {
        color: rgb(248 250 252 / 0.86);
    }

    .site-contact-hero--has-image .site-contact-hero__chip,
    .site-contact-hero[style*='--contact-hero-image'] .site-contact-hero__chip {
        border-color: rgb(255 255 255 / 0.22);
        background: rgb(15 23 42 / 0.35);
        color: #f8fafc;
        backdrop-filter: blur(8px);
    }

    .site-contact-hero__inner {
        @apply relative z-10 flex min-h-[inherit] flex-col justify-center py-14 sm:py-16 desktop:py-20;
    }

    .site-contact-hero__crumb {
        @apply mb-5 text-sm;
        color: color-mix(in srgb, var(--eca-text) 55%, transparent);
    }

    .site-contact-hero__crumb a:hover {
        color: var(--eca-primary);
    }

    .site-contact-hero__title {
        @apply max-w-4xl font-bold leading-tight;
        color: var(--eca-text);
        font-size: clamp(1.75rem, 4vw, 3rem);
    }

    .site-contact-hero__sub {
        @apply mt-4 max-w-3xl leading-relaxed;
        color: var(--eca-text-muted);
        font-size: clamp(0.95rem, 1.5vw, 1.125rem);
    }

    .site-contact-hero__actions {
        @apply mt-6 flex flex-wrap gap-3;
    }

    .site-contact-hero__chips {
        @apply mt-6 flex list-none flex-wrap gap-2 p-0;
    }

    .site-contact-hero__chip {
        @apply inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold;
        border-color: color-mix(in srgb, var(--eca-border) 80%, transparent);
        background: color-mix(in srgb, var(--eca-card) 70%, transparent);
        color: var(--eca-text-muted);
    }

    .site-contact-channels-bar {
        @apply border-b py-5 px-2;
        border-color: transparent;
      
    }

    .site-contact-channels-grid {
        @apply grid gap-3 sm:grid-cols-2 desktop:grid-cols-4;
    }

    .site-contact-qcard {
        @apply flex items-center gap-3 rounded-2xl border p-4 transition;
        border-color: var(--eca-border);
        background: color-mix(in srgb, var(--eca-card) 88%, transparent);
        color: var(--eca-text);
    }

    .site-contact-qcard:hover {
        border-color: color-mix(
            in srgb,
            var(--eca-primary) 35%,
            var(--eca-border)
        );
        background: color-mix(in srgb, var(--eca-primary) 8%, var(--eca-card));
    }

    .site-contact-qcard__icon {
        @apply inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl;
        color: var(--eca-primary);
        background: color-mix(in srgb, var(--eca-primary) 12%, transparent);
        border: 1px solid
            color-mix(in srgb, var(--eca-primary) 22%, transparent);
    }

    .site-contact-qcard__body {
        @apply min-w-0 flex flex-col gap-0.5;
    }

    .site-contact-qcard__label {
        @apply text-[11px] font-semibold uppercase tracking-wide;
        color: var(--eca-text-muted);
    }

    .site-contact-qcard__value {
        @apply text-sm font-semibold leading-snug;
    }

    .site-contact-trust {
        @apply border-b py-6;
        border-color: transparent;
     }

    .site-contact-trust__grid {
        @apply grid grid-cols-2 gap-4 desktop:grid-cols-4;
    }

    .site-contact-trust__item {
        @apply flex flex-col items-center gap-2 px-2 py-1 text-center;
    }

    .site-contact-trust__icon {
        @apply inline-flex h-10 w-10 items-center justify-center rounded-xl;
        color: var(--eca-primary);
        background: color-mix(in srgb, var(--eca-primary) 12%, transparent);
    }

    .site-contact-trust__value {
        @apply text-lg font-extrabold;
        color: var(--eca-text);
    }

    .site-contact-trust__label {
        @apply text-xs;
        color: var(--eca-text-muted);
    }

    .site-contact__main {
        @apply space-y-8 pt-10;
    }

    .site-contact-repair {
        @apply flex flex-col gap-6 rounded-2xl p-5 sm:flex-row sm:items-center sm:justify-between sm:p-7 px-2;
        background: color-mix(
            in srgb,
            var(--eca-card) 90%,
            var(--eca-primary) 10%
        );
        box-shadow: var(--eca-shadow-card);
        border: 1px solid
            color-mix(in srgb, var(--eca-primary) 25%, transparent);
    }

    .site-contact-repair__title {
        @apply text-xl font-bold sm:text-2xl;
        color: var(--eca-text);
    }

    .site-contact-repair__sub {
        @apply mt-1 text-sm;
        color: var(--eca-text-muted);
    }

    .site-contact-repair__list {
        @apply mt-4 flex list-none flex-wrap gap-2 p-0;
    }

    .site-contact-repair__list li {
        @apply inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold;
        border-color: var(--eca-border);
        background: color-mix(in srgb, var(--eca-card) 80%, transparent);
        color: var(--eca-text);
    }

    .site-contact-repair__cta {
        @apply shrink-0 self-start sm:self-center;
        width: auto;
        min-width: 12rem;
        max-width: 100%;
    }

    .site-contact-empty {
        @apply flex flex-col items-start gap-4 rounded-2xl p-6;
    }

    .site-contact-empty__text {
        @apply text-sm;
        color: var(--eca-text-muted);
    }

    .site-contact-split {
        @apply grid gap-6 desktop:grid-cols-12 desktop:items-start;
    }

    .site-contact-intro {
        @apply rounded-2xl p-5 sm:p-6 desktop:col-span-5;
    }

    .site-contact-intro__brand {
        @apply text-lg font-bold;
        color: var(--eca-text);
    }

    .site-contact-intro__text {
        @apply mt-3 text-sm leading-7;
        color: var(--eca-text-muted);
    }

    .site-contact-hub {
        @apply rounded-2xl p-5 sm:p-6 desktop:col-span-7;
    }

    .site-contact-hub__head {
        @apply mb-5 flex items-center gap-3;
    }

    .site-contact-hub__icon {
        @apply inline-flex h-10 w-10 items-center justify-center rounded-xl;
        color: var(--eca-primary);
        background: color-mix(in srgb, var(--eca-primary) 12%, transparent);
        border: 1px solid
            color-mix(in srgb, var(--eca-primary) 22%, transparent);
    }

    .site-contact-hub__title {
        @apply text-base font-bold;
        color: var(--eca-text);
    }

    .site-contact-hub__rows {
        @apply m-0 divide-y;
        border-color: var(--eca-border);
    }

    .site-contact-hub__row {
        @apply grid gap-1 px-0 py-3 sm:grid-cols-12 sm:items-center;
        border-color: var(--eca-border);
    }

    .site-contact-hub__row dt {
        @apply text-xs font-semibold uppercase tracking-wide sm:col-span-4;
        color: var(--eca-text-muted);
    }

    .site-contact-hub__row dd {
        @apply text-sm font-semibold sm:col-span-8;
        color: var(--eca-text);
    }

    .site-contact-hub__row a {
        color: var(--eca-primary);
    }

    .site-contact-hub__row a:hover {
        text-decoration: underline;
    }

    .site-contact-hub__hours,
    .site-contact-hub__address {
        @apply mt-5 border-t pt-5;
        border-color: var(--eca-border);
    }

    .site-contact-hub__hours h3,
    .site-contact-hub__address h3 {
        @apply mb-3 text-xs font-bold uppercase tracking-wide;
        color: var(--eca-text-muted);
    }

    .site-contact-hub__hours ul {
        @apply m-0 list-none space-y-2 p-0;
    }

    .site-contact-hub__hours li {
        @apply flex items-center justify-between gap-3 text-sm;
        color: var(--eca-text);
    }

    .site-contact-hub__hours strong {
        @apply rounded-full px-2.5 py-1 text-xs font-bold;
        color: var(--eca-primary);
        background: color-mix(in srgb, var(--eca-primary) 12%, transparent);
    }

    .site-contact-hub__address p {
        @apply text-sm leading-relaxed;
        color: var(--eca-text-muted);
    }

    .site-contact-hub__map {
        @apply mt-3 inline-flex text-sm font-semibold;
        color: var(--eca-primary);
    }

    .site-contact-specialties {
        @apply border-t py-12;
        border-color: transparent;
    
    }

    .site-contact-specialties__header {
        @apply mb-8 text-center;
    }

    .site-contact-specialties__header h2 {
        @apply text-xl font-bold;
        color: var(--eca-text);
    }

    .site-contact-specialties__header p {
        @apply mt-1 text-sm;
        color: var(--eca-text-muted);
    }

    .site-contact-specialties__grid {
        @apply m-0 mb-8 grid list-none grid-cols-2 gap-3 p-0 sm:grid-cols-3 desktop:grid-cols-6;
    }

    .site-contact-specialty {
        @apply flex flex-col items-center gap-2 rounded-2xl border p-4 text-center transition;
        border-color: var(--eca-border);
        background: color-mix(in srgb, var(--eca-card) 88%, transparent);
        color: var(--eca-text);
    }

    .site-contact-specialty:hover {
        border-color: color-mix(
            in srgb,
            var(--eca-primary) 35%,
            var(--eca-border)
        );
    }

    .site-contact-specialty__icon {
        @apply inline-flex h-12 w-12 items-center justify-center rounded-2xl;
        color: var(--eca-primary);
        background: color-mix(in srgb, var(--eca-primary) 12%, transparent);
    }

    .site-contact-specialty__title {
        @apply text-xs font-semibold leading-tight;
    }

    .site-contact-specialties__cta {
        @apply flex flex-col items-center justify-center gap-3 sm:flex-row;
    }

    .site-contact-dock {
        @apply fixed inset-x-0 bottom-0;
        z-index: var(--z-fab);
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 0.5rem);
        pointer-events: none;
    }

    .site-contact-dock__inner {
        @apply pointer-events-auto mx-auto mb-[4.5rem] flex max-w-3xl flex-col gap-3 rounded-2xl border px-4 py-3 shadow-lg sm:mb-6 sm:flex-row sm:items-center sm:justify-between sm:px-5;
        border-color: var(--eca-border);
        background: color-mix(in srgb, var(--eca-card) 92%, transparent);
        backdrop-filter: blur(16px);
        box-shadow: var(--eca-shadow-card);
    }

    html.layout-lg {
        .site-contact-dock__inner {
            margin-bottom: 1.5rem;
        }
    }

    .site-contact-dock__title {
        @apply text-sm font-bold;
        color: var(--eca-text);
    }

    .site-contact-dock__sub {
        @apply text-xs;
        color: var(--eca-text-muted);
    }

    .site-contact-dock__actions {
        @apply flex gap-2;
    }

    .site-contact-dock__btn {
        @apply shrink-0;
    }

    .eca-faq-chevron__icon {
        @apply transition-transform duration-200;
        color: currentColor;
    }

    [dir="ltr"] .eca-faq-chevron__icon {
        transform: rotate(-90deg);
    }

    [dir="rtl"] .eca-faq-chevron__icon {
        transform: rotate(90deg);
    }

    [dir="ltr"] .eca-faq-chevron__icon--open {
        transform: rotate(90deg);
    }

    [dir="rtl"] .eca-faq-chevron__icon--open {
        transform: rotate(-90deg);
    }

    .eca-category-tree-sub {
        @apply m-0 list-none space-y-0.5 p-1.5 pt-0;
        background-color: var(--eca-category-sub-bg);
        border-top: 1px solid
            color-mix(in srgb, var(--eca-border) 65%, transparent);
    }

    .eca-category-tree-sublink {
        @apply relative block min-h-[2.25rem] truncate rounded-lg py-2 pe-3 text-xs leading-6 transition duration-150;
        padding-inline-start: 2rem;
        font-family: inherit;
        color: var(--eca-text-muted);
    }

    .eca-category-tree-sublink::before {
        content: "";
        @apply absolute top-1/2 h-1 w-1 -translate-y-1/2 rounded-full;
        inset-inline-start: 0.85rem;
        background-color: var(--eca-category-dot-border);
    }

    .eca-category-tree-sublink:hover {
        background-color: var(--eca-category-hover-bg);
        color: var(--eca-accent);
    }

    .eca-category-tree-sublink:hover::before {
        background-color: var(--eca-accent);
    }

    .eca-category-tree-sublink.is-active {
        @apply font-semibold;
        background-color: var(--eca-card);
        color: var(--eca-accent);
    }

    .eca-category-tree-sublink.is-active::before {
        @apply h-1.5 w-1.5;
        background-color: var(--eca-accent);
    }

    .eca-breadcrumb {
        @apply flex flex-wrap items-center gap-1.5 text-xs text-brand-muted;
    }

    .eca-breadcrumb a {
        @apply transition hover:text-brand-accent hover:underline;
    }

    .eca-breadcrumb__sep {
        @apply text-brand-muted/60;
    }

    .eca-product-detail__price {
        @apply text-2xl font-bold text-brand-slate;
    }

    .eca-product-tabs {
        @apply mt-8 border-b;
        border-color: var(--eca-border);
        background: color-mix(in srgb, var(--eca-card) 55%, transparent);
    }

    .eca-product-tabs__nav {
        @apply flex gap-0 overflow-x-auto;
        scrollbar-width: none;
    }

    .eca-product-tabs__nav::-webkit-scrollbar {
        display: none;
    }

    .eca-product-tabs__tab {
        @apply shrink-0 border-b-2 border-transparent px-4 py-3 text-sm font-medium transition;
        color: var(--eca-text-muted);
    }

    .eca-product-tabs__tab--active {
        border-color: var(--eca-accent);
        color: var(--eca-accent);
    }

    .eca-product-tabs__panel {
        @apply py-6 text-sm leading-7;
        background: transparent;
        color: var(--eca-text);
    }

    .eca-detail-prose {
        @apply max-w-none leading-7;
        --tw-prose-body: var(--eca-text);
        --tw-prose-headings: var(--eca-text);
        --tw-prose-lead: var(--eca-text-muted);
        --tw-prose-links: var(--eca-accent);
        --tw-prose-bold: var(--eca-text);
        --tw-prose-counters: var(--eca-text-muted);
        --tw-prose-bullets: var(--eca-text-muted);
        --tw-prose-hr: var(--eca-border);
        --tw-prose-quotes: var(--eca-text);
        --tw-prose-quote-borders: var(--eca-border);
        --tw-prose-captions: var(--eca-text-muted);
        --tw-prose-code: var(--eca-text);
        --tw-prose-pre-code: var(--eca-text);
        --tw-prose-pre-bg: color-mix(in srgb, var(--eca-card) 90%, transparent);
        --tw-prose-th-borders: var(--eca-border);
        --tw-prose-td-borders: var(--eca-border);
        color: var(--eca-text);
    }

    .eca-detail-prose :where(a:hover) {
        color: var(--eca-accent);
        filter: brightness(1.1);
    }

    .eca-section-heading {
        @apply mb-4 flex items-center justify-between   px-1 py-3;
    }

    .eca-section-heading h2 {
        @apply text-xl font-bold;
    }

    .eca-section-heading a {
        @apply text-sm font-semibold text-brand-accent hover:underline;
    }

    .site-footer {
        background-color: var(--eca-footer-main);
        color: var(--eca-text);
        backdrop-filter: blur(16px);
        border-top: 1px solid
            color-mix(in srgb, var(--eca-border) 85%, transparent);
    }

    .site-footer__main {
        @apply py-12 desktop:py-14;
    }

    .site-footer__grid {
        @apply grid gap-10 desktop:grid-cols-12 desktop:gap-8;
    }

    .site-footer__brand {
        @apply flex flex-col gap-4 desktop:col-span-3;
    }

    .site-footer__tagline {
        @apply max-w-sm text-sm leading-relaxed;
        color: var(--eca-text-muted);
    }

    .site-footer__contact {
        @apply space-y-2.5 text-sm;
    }

    .site-footer__contact-link {
        @apply inline-flex items-center gap-2.5 transition;
        color: var(--eca-text-muted);
    }

    .site-footer__contact-link:hover {
        color: var(--eca-primary);
    }

    .site-footer__address {
        @apply flex items-start gap-2.5 text-xs leading-relaxed;
        color: var(--eca-text-muted);
    }

    .site-footer__socials {
        @apply mt-1 flex flex-wrap gap-2;
    }

    .site-footer__col {
        @apply desktop:col-span-3;
    }

    .site-footer__col--actions {
        @apply desktop:col-span-3;
    }

    .site-footer__heading {
        @apply mb-4 flex items-center gap-2 text-sm font-semibold uppercase tracking-widest;
        color: var(--eca-text);
    }

    .site-footer__heading::before {
        content: "";
        @apply inline-block h-0.5 w-3;
        background: var(--eca-primary);
    }

    .site-footer__heading--spaced {
        @apply mt-8;
    }

    .site-footer__links {
        @apply space-y-2 text-sm;
    }

    .site-footer__links a {
        @apply block leading-snug transition;
        color: var(--eca-text-muted);
    }

    .site-footer__links a:hover {
        color: var(--eca-primary);
    }

    .site-footer__link-strong {
        @apply font-semibold;
        color: color-mix(
            in srgb,
            var(--eca-text) 80%,
            var(--eca-primary)
        ) !important;
    }

    .site-footer__quick {
        @apply flex flex-col gap-2;
    }

    .site-footer__quick-primary {
        @apply inline-flex  w-fit items-center justify-center rounded-lg px-3 py-2.5 text-xs font-semibold transition;
        background: color-mix(in srgb, var(--eca-primary) 18%, transparent);
        border: 1px solid
            color-mix(in srgb, var(--eca-primary) 30%, transparent);
        color: var(--eca-text);
    }

    .site-footer__quick-primary:hover {
        background: color-mix(in srgb, var(--eca-primary) 28%, transparent);
    }

    .site-footer__quick-secondary {
        @apply inline-flex w-fit items-center justify-center rounded-lg px-3 py-2 text-xs font-medium transition;
        background: color-mix(in srgb, var(--eca-card) 50%, transparent);
        border: 1px solid color-mix(in srgb, var(--eca-border) 90%, transparent);
        color: var(--eca-text-muted);
    }

    .site-footer__quick-secondary:hover {
        color: var(--eca-text);
        border-color: color-mix(
            in srgb,
            var(--eca-primary) 30%,
            var(--eca-border)
        );
    }

    .site-footer-bottom {
        background-color: var(--eca-footer-bottom);
        border-top: 1px solid var(--eca-border);
    }

    .site-footer-bottom__inner {
        @apply py-5;
    }

    .site-footer-bottom__row {
        @apply flex flex-col gap-2 text-xs sm:flex-row sm:items-center sm:justify-between;
        color: var(--eca-text-muted);
    }

    .site-footer-bottom__disclaimer {
        @apply mt-3 text-center text-[10px] leading-relaxed sm:text-start;
        color: color-mix(in srgb, var(--eca-text-muted) 85%, transparent);
    }

    /* Repair process timeline */
    .site-process {
        @apply relative overflow-hidden border-y py-10 sm:py-14 md:py-20 px-2;
        border-color: color-mix(in srgb, var(--eca-border) 80%, transparent);
     
    }

    .site-process__glow {
        @apply pointer-events-none absolute inset-0;
     
    }

    .site-process__inner {
        @apply relative;
    }

    .site-process__header {
        @apply mb-8 text-center sm:mb-10 md:mb-14;
    }

    .site-process__eyebrow {
        @apply mb-2 text-[10px] font-bold uppercase tracking-[0.22em] sm:mb-3 sm:text-xs sm:tracking-[0.25em];
        color: var(--eca-primary);
    }

    .site-process__title {
        @apply text-xl font-extrabold tracking-tight sm:text-2xl md:text-3xl desktop:text-4xl;
        color: var(--eca-text);
    }

    .site-process__subtitle {
        @apply mx-auto mt-3 max-w-xl px-1 text-sm leading-relaxed sm:mt-4 md:text-base;
        color: var(--eca-text-muted);
    }

    .site-process__timeline {
        @apply relative mx-auto flex max-w-4xl flex-col;
    }

    .site-process__step {
        @apply relative flex gap-3 sm:gap-5 md:gap-8;
        --process-accent: var(--eca-primary);
    }

    .site-process__step[data-accent="blue"] {
        --process-accent: #60a5fa;
    }
    .site-process__step[data-accent="purple"] {
        --process-accent: var(--eca-secondary);
    }
    .site-process__step[data-accent="amber"] {
        --process-accent: var(--eca-warning);
    }
    .site-process__step[data-accent="cyan"] {
        --process-accent: var(--eca-primary);
    }
    .site-process__step[data-accent="green"] {
        --process-accent: var(--eca-success);
    }
    .site-process__step[data-accent="pink"] {
        --process-accent: #f472b6;
    }

    .site-process__rail {
        @apply flex w-11 shrink-0 flex-col items-center sm:w-14 md:w-20;
    }

    .site-process__icon {
        @apply relative z-10 flex h-5 w-11 shrink-0 items-center justify-center rounded-xl transition duration-300 sm:h-14 sm:w-14 sm:rounded-2xl md:h-20 md:w-20;
        color: var(--process-accent);
        background: color-mix(
            in srgb,
            var(--process-accent) 10%,
            var(--eca-card)
        );
        border: 1.5px solid
            color-mix(in srgb, var(--process-accent) 28%, transparent);
        box-shadow: 0 0 20px
            color-mix(in srgb, var(--process-accent) 12%, transparent);
    }

    html.layout-mobile[data-layout-size="md"] .site-process__icon,
    html.layout-lg .site-process__icon {
        border-width: 2px;
    }

    .site-process__icon-svg {
        @apply h-10 w-10 sm:h-10 sm:w-10;
    }

    .site-process__step:hover .site-process__icon {
        transform: scale(1.04);
        background: color-mix(
            in srgb,
            var(--process-accent) 16%,
            var(--eca-card)
        );
    }

    .site-process__connector {
        @apply mt-1.5 w-0.5 min-h-[1.25rem] flex-1 rounded-full sm:mt-2 sm:min-h-[2rem];
        background: linear-gradient(
            to bottom,
            color-mix(in srgb, var(--process-accent) 35%, transparent),
            color-mix(in srgb, var(--eca-border) 40%, transparent)
        );
    }

    .site-process__body {
        @apply min-w-0 flex-1 border-b pb-5 pt-0.5 sm:pb-6 sm:pt-1 md:mb-2 md:pt-3;
        border-color: color-mix(in srgb, var(--eca-border) 70%, transparent);
    }

    .site-process__body--last {
        @apply border-b-0 pb-0;
    }

    .site-process__content {
        @apply flex items-start gap-2 sm:gap-4;
    }

    .site-process__main {
        @apply min-w-0 flex-1;
    }

    .site-process__badge {
        @apply mb-1.5 inline-flex rounded-full px-2 py-0.5 text-[9px] font-bold uppercase tracking-[0.16em] sm:tracking-[0.2em];
        color: var(--process-accent);
        background: color-mix(in srgb, var(--process-accent) 10%, transparent);
        border: 1px solid
            color-mix(in srgb, var(--process-accent) 22%, transparent);
    }

    .site-process__step-title {
        @apply mb-1.5 text-base font-bold leading-snug transition-colors duration-200 sm:mb-2 sm:text-lg;
        color: var(--eca-text);
    }

    .site-process__step:hover .site-process__step-title {
        color: var(--process-accent);
    }

    .site-process__step-desc {
        @apply mb-2.5 text-[13px] leading-relaxed sm:mb-3 sm:text-sm;
        color: var(--eca-text-muted);
    }

    .site-process__chips {
        @apply flex flex-wrap gap-1.5 sm:gap-2;
    }

    .site-process__chip {
        @apply max-w-full rounded-full px-2 py-1 text-[10px] font-medium leading-snug sm:px-2.5;
        color: color-mix(in srgb, var(--process-accent) 85%, var(--eca-text));
        background: color-mix(in srgb, var(--process-accent) 8%, transparent);
        border: 1px solid
            color-mix(in srgb, var(--process-accent) 18%, transparent);
        overflow-wrap: anywhere;
    }

    .site-process__num {
        @apply hidden select-none shrink-0 text-4xl font-black leading-none opacity-[0.08] transition-opacity duration-300 md:block md:text-6xl desktop:text-7xl;
        color: var(--process-accent);
    }

    .site-process__step:hover .site-process__num {
        opacity: 0.12;
    }

    .site-process__cta {
        @apply mx-auto mt-8 flex max-w-4xl flex-col items-stretch justify-between gap-4 rounded-2xl px-4 py-5 text-center sm:mt-10 sm:items-center sm:gap-6 sm:px-6 sm:py-6 sm:text-start md:mt-12 md:flex-row md:px-8;
        background: color-mix(in srgb, var(--eca-card) 70%, transparent);
        border: 1px solid color-mix(in srgb, var(--eca-border) 85%, transparent);
    }

    .site-process__cta-copy {
        @apply min-w-0;
    }

    .site-process__cta-title {
        @apply text-base font-bold sm:text-lg;
        color: var(--eca-text);
    }

    .site-process__cta-sub {
        @apply mt-0.5 text-sm leading-relaxed;
        color: var(--eca-text-muted);
    }

    .site-process__cta-actions {
        @apply flex w-full shrink-0 flex-col items-stretch gap-2.5 sm:w-auto sm:flex-row sm:flex-wrap sm:items-center sm:justify-center md:justify-end;
    }

    .site-process__cta-actions > .site-btn-primary,
    .site-process__cta-actions > .site-btn-outline {
        @apply w-full justify-center sm:w-auto;
    }

    @media (prefers-reduced-motion: reduce) {
        .site-process__icon,
        .site-process__step-title,
        .site-process__num {
            transition: none;
        }

        .site-process__step:hover .site-process__icon {
            transform: none;
        }
    }

    .eca-glass-panel {
        background: var(--eca-modal-glass);
        border: 1px solid var(--eca-border);
        backdrop-filter: blur(20px);
        box-shadow: var(--eca-shadow-card);
    }
 

    .eca-detail-hero {
        @apply relative overflow-hidden rounded-2xl;
    }

    /* Detail blueprint (product + service show) */
    .site-detail-hero {
        @apply grid gap-6 p-4 sm:gap-8 sm:p-5 desktop:grid-cols-12 desktop:items-start desktop:gap-10 desktop:p-6;
    }

    .site-detail-hero__media {
        @apply min-w-0 desktop:col-span-5;
    }

    .site-detail-hero__media--sticky {
        position: static;
        z-index: var(--z-sticky);
    }

    html.layout-lg {
        .site-detail-hero__media--sticky {
            position: sticky;
            top: 6rem;
        }
    }

    .site-detail-hero__info {
        @apply flex min-w-0 flex-col gap-4 desktop:col-span-7 desktop:gap-5;
    }

    .site-detail-hero__title {
        @apply font-bold leading-tight eca-theme-text;
        font-size: clamp(1.75rem, 4vw, 3rem);
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .site-detail-hero__summary {
        @apply max-w-2xl leading-7 eca-theme-text-muted;
        font-size: clamp(0.95rem, 1.5vw, 1.05rem);
    }

    .site-detail-hero__price {
        @apply text-xl font-bold text-brand-accent;
    }

    .site-detail-chips {
        @apply flex flex-wrap gap-2;
    }

    .site-detail-chip {
        @apply inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold eca-theme-text-muted;
        border-color: var(--eca-border);
        background: color-mix(in srgb, var(--eca-card) 70%, transparent);
    }

    .site-detail-chip--accent {
        border-color: color-mix(in srgb, var(--eca-accent) 40%, transparent);
        background: color-mix(in srgb, var(--eca-accent) 14%, transparent);
        color: var(--eca-accent);
    }

    .site-detail-ai {
        @apply rounded-xl border px-4 py-3 text-sm eca-theme-text;
        border-color: var(--eca-border);
        background: color-mix(in srgb, var(--eca-accent) 6%, transparent);
    }

    .site-detail-cta {
        @apply flex flex-wrap gap-3;
    }

    .site-detail-cta > * {
        @apply max-w-full;
        width: auto;
        min-width: 0;
        flex: 0 1 auto;
    }

    @media (max-width: 479px) {
        .site-detail-cta > .site-btn-primary,
        .site-detail-cta > .site-btn-outline,
        .site-detail-cta > button,
        .site-detail-cta > a {
            flex: 1 1 100%;
            justify-content: center;
            text-align: center;
        }
    }

    .site-detail-meta {
        @apply mt-1 divide-y overflow-hidden rounded-2xl border text-sm;
        border-color: var(--eca-border);
        background: color-mix(in srgb, var(--eca-card) 55%, transparent);
    }

    .site-detail-meta__row {
        @apply grid grid-cols-1 gap-1 px-4 py-3 sm:grid-cols-12 sm:items-center sm:gap-4;
    }

    .site-detail-meta__row dt {
        @apply eca-theme-text-muted sm:col-span-5;
    }

    .site-detail-meta__row dd {
        @apply font-semibold eca-theme-text sm:col-span-7 sm:text-end;
    }

    .site-detail-tabs {
        @apply overflow-hidden rounded-2xl border;
        border-color: var(--eca-border);
        background: color-mix(in srgb, var(--eca-card) 55%, transparent);
    }

    .site-detail-tabs__nav {
        @apply flex gap-0 overflow-x-auto border-b;
        border-color: var(--eca-border);
        scrollbar-width: none;
    }

    .site-detail-tabs__nav::-webkit-scrollbar {
        display: none;
    }

    .site-detail-tabs__tab {
        @apply shrink-0 border-b-2 border-transparent px-4 py-3 text-sm font-medium transition;
        color: var(--eca-text-muted);
    }

    .site-detail-tabs__tab--active {
        border-color: var(--eca-accent);
        color: var(--eca-accent);
    }

    .site-detail-tabs__panel {
        @apply px-4 py-6 text-sm leading-7 eca-theme-text sm:px-5;
    }

    .site-detail-specs__row {
        @apply grid gap-1 px-4 py-3 sm:grid-cols-12;
    }

    .site-detail-specs__row dt {
        @apply text-sm font-medium eca-theme-text-muted sm:col-span-4;
    }

    .site-detail-specs__row dd {
        @apply text-sm eca-theme-text sm:col-span-8;
    }

    .site-detail-list {
        @apply list-disc space-y-2 ps-6 eca-theme-text;
    }

    .site-detail-brands {
        @apply flex flex-wrap gap-2;
    }

    .site-detail-brands__item {
        @apply rounded-full border px-3 py-1.5 text-xs font-semibold eca-theme-text;
        border-color: var(--eca-border);
        background: color-mix(in srgb, var(--eca-card) 80%, transparent);
    }

    .site-detail-showcase {
        @apply overflow-hidden rounded-2xl;
    }

    .site-detail-process {
        width: 100vw;
        max-width: 100vw;
        margin-inline: calc(50% - 50vw);
        position: relative;
    }

    .site-process--lazy .site-process__placeholder {
        @apply min-h-[14rem] py-10 sm:min-h-[16rem] sm:py-14 md:min-h-[20rem] md:py-20;
    }

    .site-image-gallery__hero {
        position: relative;
        width: 100%;
        overflow: hidden;
        aspect-ratio: 4 / 3;
        max-height: min(70vh, 28rem);
    }

    html.layout-lg {
        .site-image-gallery__hero {
            aspect-ratio: 3 / 2;
            max-height: min(65vh, 32rem);
        }
    }

    .site-image-gallery__frame,
    .site-image-gallery__hero > video {
        height: 100%;
        width: 100%;
    }

    .site-image-gallery__img,
    .site-image-gallery__img--product,
    .site-image-gallery__img--service {
        @apply block h-full w-full object-contain;
        aspect-ratio: unset;
        max-height: 100%;
        background: color-mix(in srgb, var(--eca-card) 88%, transparent);
    }

    .site-image-gallery__lightbox {
        z-index: var(--z-lightbox);
    }

    .site-image-gallery__nav {
        @apply absolute top-1/2 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full text-lg text-white transition;
        z-index: var(--z-content);
        width: 2.25rem;
        height: 2.25rem;
        flex: none;
        background: rgb(15 23 42 / 0.55);
    }

    .site-image-gallery__nav:hover {
        background: rgb(15 23 42 / 0.75);
    }

    .site-image-gallery__nav--prev {
        inset-inline-start: 0.75rem;
    }

    .site-image-gallery__nav--next {
        inset-inline-end: 0.75rem;
    }

    .site-image-gallery__thumbs {
        @apply mt-3 grid grid-cols-4 gap-2 sm:grid-cols-5;
    }

    .site-image-gallery__thumbs--compact {
        @apply mt-2 grid-cols-5 gap-1.5 sm:grid-cols-6;
    }

    .site-image-gallery--service .site-image-gallery__hero {
        @apply rounded-xl;
    }

    /* Article show — editorial card layout */
    .site-article-page {
        @apply mx-auto px-3 sm:px-4;
    }

    .site-article-page__card {
        @apply mx-auto mt-3   overflow-hidden rounded-2xl border;
        border-color: var(--eca-border);
        background: var(--eca-card);
        box-shadow: var(--eca-shadow-card);
    }

    .site-article-page__breadcrumb {
        @apply flex flex-wrap items-center gap-x-2 gap-y-1 overflow-hidden px-4 py-4 text-sm eca-theme-text-muted sm:px-6;
    }

    .site-article-page__breadcrumb-link {
        @apply shrink-0 font-semibold transition hover:text-brand-accent;
    }

    .site-article-page__breadcrumb-icon {
        @apply h-3.5 w-3.5 shrink-0 opacity-60;
    }

    html:not([lang="fa"]) .site-article-page__breadcrumb-icon {
        transform: scaleX(-1);
    }

    .site-article-page__breadcrumb-current {
        @apply min-w-0 truncate font-medium eca-theme-text;
    }

    .site-article-page__inner {
        @apply px-4 pb-6 sm:px-8 sm:pb-8 desktop:px-10 desktop:pb-10;
    }

    .site-article-page__below {
        @apply mx-auto mt-8 space-y-8 sm:mt-10 desktop:mt-12 desktop:space-y-10;
    }

    .site-article-hero {
        @apply space-y-4;
    }

    .site-article-hero__meta {
        @apply flex flex-wrap gap-2;
    }

    .site-article-hero__title {
        @apply font-bold leading-[1.15] tracking-tight eca-theme-text;
        font-size: clamp(1.5rem, 4.5vw, 2.75rem);
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .site-article-hero__facts {
        @apply flex flex-wrap items-center gap-x-3 gap-y-2 text-sm eca-theme-text-muted;
    }

    .site-article-hero__fact {
        @apply inline-flex items-center gap-2;
    }

    .site-article-hero__fact + .site-article-hero__fact::before {
        content: "";
        display: inline-block;
        width: 0.25rem;
        height: 0.25rem;
        border-radius: 9999px;
        background: color-mix(in srgb, var(--eca-text-muted) 55%, transparent);
        margin-inline-end: 0.75rem;
    }

    .site-article-hero__stats {
        @apply rounded-xl border px-4 py-3;
        border-color: var(--eca-border);
        background: color-mix(
            in srgb,
            var(--eca-card) 80%,
            var(--eca-accent) 4%
        );
    }

    .site-article-hero__cover {
        @apply relative m-0 w-full overflow-hidden border-0 border-b;
        border-color: var(--eca-border);
        aspect-ratio: 16 / 9;
        max-height: min(52vh, 28rem);
    }

    @media (min-width: 640px) {
        .site-article-hero__cover {
            aspect-ratio: 21 / 9;
            max-height: min(56vh, 32rem);
        }
    }

    .site-article-hero__cover-img {
        @apply h-full w-full object-cover;
    }

    .site-article-body {
        @apply mx-auto mt-8 max-w-3xl desktop:mt-10;
    }

    .site-article-body__lead {
        @apply mb-8 border-s-[3px] ps-5 text-base font-medium leading-8 eca-theme-text-muted sm:text-lg;
        border-color: var(--eca-accent);
        font-size: clamp(1.02rem, 1.9vw, 1.2rem);
    }

    .site-article-body__content {
        @apply text-[1rem] leading-8 eca-theme-text sm:text-[1.0625rem] sm:leading-9;
    }

    .site-article-body__content :where(p + p) {
        @apply mt-5;
    }

    .site-article-inline-cta {
        @apply mt-10 flex flex-col gap-5 rounded-2xl border p-5 sm:flex-row sm:items-center sm:justify-between sm:p-6;
        border-color: var(--eca-border);
        background: linear-gradient(
            135deg,
            color-mix(in srgb, var(--eca-card) 92%, var(--eca-accent) 8%) 0%,
            color-mix(in srgb, var(--eca-card) 88%, var(--eca-primary) 12%) 100%
        );
    }

    .site-article-inline-cta__title {
        @apply text-base font-bold eca-theme-text;
    }

    .site-article-inline-cta__sub {
        @apply mt-1.5 max-w-xl text-sm leading-6 eca-theme-text-muted;
    }

    .site-article-inline-cta .site-detail-cta {
        @apply w-full shrink-0 sm:w-auto;
    }

    @media (max-width: 639px) {
        .site-article-inline-cta .site-detail-cta > * {
            flex: 1 1 100%;
            justify-content: center;
            text-align: center;
        }
    }

    .site-article-assistant-cta {
        @apply flex flex-col gap-5 rounded-2xl border p-5 sm:flex-row sm:items-center sm:justify-between sm:p-6;
        border-color: var(--eca-border);
        background: color-mix(
            in srgb,
            var(--eca-card) 75%,
            var(--eca-accent) 8%
        );
        box-shadow: var(--eca-shadow-card);
    }

    .site-article-assistant-cta__title {
        @apply text-base font-bold eca-theme-text sm:text-lg;
    }

    .site-article-assistant-cta__sub {
        @apply mt-1.5 max-w-2xl text-sm leading-6 eca-theme-text-muted;
    }

    .site-article-assistant-cta .site-btn-primary {
        @apply w-full shrink-0 sm:w-auto;
    }

    .site-article-gallery {
        @apply mx-auto mt-8 max-w-3xl desktop:mt-10;
    }

    .site-article-page .site-related-rail {
        @apply mx-0 max-w-none;
    }

    .site-article-page .site-detail-process {
        @apply rounded-2xl overflow-hidden;
    }

    /* Association-style news: cover, title, datetime, then interleaved text/image */
    .news-detail-page {
        @apply mx-auto px-3 sm:px-4;
    }

    .news-detail-page__card {
        @apply overflow-hidden rounded-2xl border bg-white mt-3;
        border-color: var(--eca-border);
        background: var(--eca-card);
    }

    .news-detail-page__breadcrumb {
        @apply flex items-center gap-2 overflow-hidden px-4 py-4 text-sm eca-theme-text-muted sm:px-6;
    }

    .news-detail-page__breadcrumb-link {
        @apply shrink-0 font-semibold hover:text-brand-accent;
    }

    .news-detail-page__breadcrumb-icon {
        @apply h-4 w-4 shrink-0;
    }

    html:not([lang="fa"]) .news-detail-page__breadcrumb-icon {
        transform: scaleX(-1);
    }

    .news-detail-page__breadcrumb-current {
        @apply min-w-0 truncate eca-theme-text;
    }

    .news-detail-page__image {
        @apply w-full object-cover;
        aspect-ratio: 16 / 9;
        max-height: min(52vh, 28rem);
    }

    .news-detail-page__content {
        @apply px-4 py-6 sm:px-8 sm:py-8;
    }

    .news-detail-page__title {
        @apply font-bold leading-tight eca-theme-text;
        font-size: clamp(1.35rem, 3.2vw, 2rem);
        overflow-wrap: anywhere;
    }

    .news-detail-page__meta {
        @apply mt-3 text-sm eca-theme-text-muted;
    }

    .news-detail-page__text {
        @apply mt-6 space-y-4 leading-8 eca-theme-text;
        font-size: clamp(0.98rem, 1.6vw, 1.0625rem);
    }

    .news-detail-page__text img {
        @apply my-4 mx-auto max-w-full rounded-lg;
    }

    .news-detail-page__related {
        @apply mt-10;
    }

    .news-detail-page__related h2 {
        @apply mb-4 text-lg font-bold eca-theme-text;
    }

    .news-list {
        @apply m-0 list-none p-0;
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr;
    }

    html.layout-mobile[data-layout-size="md"] .news-list,
    html.layout-lg .news-list,
    html.layout-xl .news-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.15rem;
    }

    .news-list--home {
        gap: 1.1rem;
    }

    html.layout-lg .news-list--home,
    html.layout-xl .news-list--home {
        gap: 1.25rem;
    }

    .news-list--compact {
        grid-template-columns: 1fr !important;
        gap: 0.85rem;
    }

    .news-list-card {
        @apply m-0 overflow-hidden;
        position: relative;
        isolation: isolate;
        border-radius: 1.15rem;
        border: 1px solid color-mix(in srgb, var(--eca-border) 78%, transparent);
        background:
            linear-gradient(
                165deg,
                color-mix(in srgb, var(--eca-card) 92%, var(--eca-primary) 8%) 0%,
                var(--eca-card) 48%,
                color-mix(in srgb, var(--eca-card) 94%, var(--eca-accent) 6%) 100%
            );
        box-shadow:
            0 1px 0 color-mix(in srgb, white 12%, transparent) inset,
            0 10px 28px color-mix(in srgb, var(--eca-primary) 6%, transparent);
        transition:
            transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            border-color 0.35s ease,
            box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .news-list-card::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        top: 18%;
        bottom: 18%;
        width: 3px;
        border-radius: 999px;
        background: linear-gradient(
            180deg,
            transparent,
            var(--eca-accent),
            var(--eca-primary),
            transparent
        );
        opacity: 0;
        transform: scaleY(0.55);
        transition:
            opacity 0.35s ease,
            transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 2;
    }

    .news-list-card:hover,
    .news-list-card:focus-within {
        transform: translateY(-4px);
        border-color: color-mix(in srgb, var(--eca-primary) 34%, var(--eca-border));
        box-shadow:
            0 1px 0 color-mix(in srgb, white 16%, transparent) inset,
            0 18px 40px color-mix(in srgb, var(--eca-primary) 14%, transparent);
    }

    .news-list-card:hover::before,
    .news-list-card:focus-within::before {
        opacity: 1;
        transform: scaleY(1);
    }

    .news-list-card__link {
        @apply flex h-full flex-col text-inherit no-underline;
        color: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    .news-list-card__media {
        @apply relative shrink-0 overflow-hidden;
        aspect-ratio: 16 / 10;
        background: color-mix(in srgb, var(--eca-surface) 88%, var(--eca-primary) 12%);
    }

    .news-list-card__image {
        @apply h-full w-full object-cover;
        transform: scale(1.01);
        transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .news-list-card:hover .news-list-card__image,
    .news-list-card:focus-within .news-list-card__image {
        transform: scale(1.07);
    }

    .news-list-card__media-glow {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            linear-gradient(
                180deg,
                transparent 42%,
                color-mix(in srgb, var(--eca-surface) 55%, transparent) 100%
            ),
            linear-gradient(
                125deg,
                color-mix(in srgb, var(--eca-primary) 22%, transparent) 0%,
                transparent 46%
            );
        opacity: 0.55;
        transition: opacity 0.35s ease;
    }

    .news-list-card:hover .news-list-card__media-glow,
    .news-list-card:focus-within .news-list-card__media-glow {
        opacity: 0.85;
    }

    .news-list-card__placeholder {
        @apply flex h-full w-full items-center justify-center text-sm font-semibold eca-theme-text-muted;
        background: color-mix(in srgb, var(--eca-card) 78%, var(--eca-primary) 12%);
    }

    .news-list-card__body {
        @apply flex min-w-0 flex-1 flex-col gap-2 p-4 sm:p-5;
    }

    .news-list-card__meta {
        @apply flex flex-wrap items-center gap-2;
    }

    .news-list-card__date {
        @apply inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-bold tracking-wide;
        color: var(--eca-accent);
        background: color-mix(in srgb, var(--eca-accent) 14%, transparent);
        border: 1px solid color-mix(in srgb, var(--eca-accent) 22%, transparent);
    }

    .news-list-card__category {
        @apply inline-flex max-w-full truncate rounded-full px-2.5 py-1 text-[11px] font-semibold;
        color: var(--eca-text-muted);
        background: color-mix(in srgb, var(--eca-surface) 70%, transparent);
        border: 1px solid color-mix(in srgb, var(--eca-border) 70%, transparent);
    }

    .news-list-card__title {
        @apply m-0 text-base font-bold leading-snug eca-theme-text sm:text-[1.05rem];
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        letter-spacing: -0.015em;
        transition: color 0.25s ease;
    }

    .news-list-card:hover .news-list-card__title,
    .news-list-card:focus-within .news-list-card__title {
        color: var(--eca-primary);
    }

    .news-list-card__excerpt {
        @apply m-0 line-clamp-2 text-sm leading-6 eca-theme-text-muted;
    }

    .news-list-card__cta {
        @apply mt-auto inline-flex items-center gap-1.5 pt-1 text-xs font-bold;
        color: var(--eca-primary);
    }

    .news-list-card__cta-icon {
        width: 0.95rem;
        height: 0.95rem;
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }

    [dir="rtl"] .news-list-card__cta-icon {
        transform: scaleX(-1);
    }

    .news-list-card:hover .news-list-card__cta-icon,
    .news-list-card:focus-within .news-list-card__cta-icon {
        transform: translateX(3px);
    }

    [dir="rtl"] .news-list-card:hover .news-list-card__cta-icon,
    [dir="rtl"] .news-list-card:focus-within .news-list-card__cta-icon {
        transform: scaleX(-1) translateX(3px);
    }

    @media (prefers-reduced-motion: reduce) {
        .news-list-card,
        .news-list-card__image,
        .news-list-card__media-glow,
        .news-list-card__cta-icon,
        .news-list-card::before {
            transition: none !important;
        }

        .news-list-card:hover,
        .news-list-card:focus-within {
            transform: none;
        }

        .news-list-card:hover .news-list-card__image,
        .news-list-card:focus-within .news-list-card__image {
            transform: none;
        }
    }

    .eca-stats-bar {
        @apply flex flex-wrap gap-4 py-3;
    }

    .eca-stats-bar__item {
        @apply flex min-w-[4.5rem] flex-col items-center gap-0.5 text-center;
    }

    .eca-stats-bar__icon {
        @apply inline-flex h-5 w-5 shrink-0 items-center justify-center eca-theme-text-muted;
    }

    .eca-stats-bar__action .site-svg-icon {
        @apply h-5 w-5;
    }

    .eca-stats-bar__value {
        @apply text-sm font-bold eca-theme-text;
    }

    .eca-stats-bar__label {
        @apply text-[11px] font-semibold uppercase tracking-wide eca-theme-text-muted;
    }

    .eca-stats-bar__action {
        @apply flex w-full flex-col items-center gap-0.5 rounded-xl border border-transparent px-2   transition duration-150;
        cursor: pointer;
        color: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    .eca-stats-bar__action:hover:not(:disabled) {
        border-color: var(--eca-border);
        background: var(--eca-category-hover-bg);
        color: var(--eca-accent);
    }

    .eca-stats-bar__action:active:not(:disabled) {
        transform: scale(0.97);
        background: var(--eca-category-active-bg);
    }

    .eca-stats-bar__action:focus-visible {
        outline: 2px solid var(--eca-accent);
        outline-offset: 2px;
    }

    .eca-stats-bar__action:disabled {
        cursor: wait;
        opacity: 0.65;
    }

    .eca-stats-bar__like--active,
    .eca-stats-bar__action--active {
        border-color: color-mix(
            in srgb,
            var(--eca-accent) 35%,
            var(--eca-border)
        );
        background: color-mix(in srgb, var(--eca-accent) 12%, transparent);
        color: var(--eca-accent);
    }

    .eca-comment-fab {
        @apply fixed bottom-24 flex items-center gap-2 rounded-full px-4 py-3 text-sm font-semibold shadow-lg wide:bottom-8;
        z-index: var(--z-fab);
        background: var(--eca-modal-glass);
        border: 1px solid var(--eca-border);
        color: var(--eca-text);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        inset-inline-start: 1.25rem;
        inset-inline-end: auto;
    }

    .eca-comment-fab__label {
        @apply hidden sm:inline;
    }

    .eca-comment-modal,
    .eca-auth-modal {
        @apply fixed inset-0 flex items-end justify-center p-0 sm:items-center sm:p-4;
        z-index: var(--z-modal);
    }

    .eca-comment-modal__backdrop,
    .eca-auth-modal__backdrop {
        @apply absolute inset-0 bg-slate-950/60 backdrop-blur-sm;
    }

    .eca-comment-modal__panel {
        @apply relative z-10 flex max-h-[min(90vh,40rem)] w-full flex-col overflow-hidden rounded-t-2xl sm:max-w-lg sm:rounded-2xl;
    }

    .eca-auth-modal__panel {
        @apply relative z-10 w-full max-w-md rounded-2xl p-6;
    }

    .eca-comment-modal__header {
        @apply flex items-center justify-between border-b px-4 py-3;
        border-color: var(--eca-border);
    }

    .eca-comment-modal__sort {
        @apply flex gap-2 border-b px-4 py-2 text-xs font-semibold;
        border-color: var(--eca-border);
    }

    .eca-comment-modal__sort button {
        @apply rounded-lg px-3 py-1.5 eca-theme-text-muted transition;
    }

    .eca-comment-modal__sort button.is-active {
        @apply bg-brand-accent/10 text-brand-accent;
    }

    .eca-comment-modal__list {
        @apply flex-1 overflow-y-auto;
    }

    .eca-comment-item {
        @apply border-b px-4 py-4;
        border-color: var(--eca-border);
    }

    .eca-comment-item__avatar {
        @apply flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-bold;
        background: color-mix(in srgb, var(--eca-primary) 25%, transparent);
        color: var(--eca-text);
    }

    .eca-comment-modal__form {
        @apply border-t p-4;
        border-color: var(--eca-border);
    }

    .eca-comment-modal__input,
    .eca-auth-modal__input {
        @apply w-full rounded-xl border px-4 py-2.5 text-sm;
        border-color: var(--eca-border);
        background: var(--eca-card);
        color: var(--eca-text);
        color-scheme: inherit;
    }

    select.eca-auth-modal__input {
        appearance: auto;
        background-color: var(--eca-card);
        color: var(--eca-text);
    }

    select.eca-auth-modal__input option {
        background-color: var(--eca-card);
        color: var(--eca-text);
    }

    .eca-password-field {
        display: flex;
        align-items: stretch;
        position: relative;
        width: 100%;
        min-height: 2.75rem;
    }

    .eca-password-field .admin-input {
        margin-top: 0;
        min-height: 2.75rem;
        flex: 1 1 auto;
        min-width: 0;
        border-start-end-radius: 0;
        border-end-end-radius: 0;
        border-inline-end-width: 0;
        padding-inline-end: 0.75rem;
    }

    .eca-password-field .eca-auth-modal__input {
        flex: 1 1 auto;
        min-width: 0;
        border-start-end-radius: 0;
        border-end-end-radius: 0;
        border-inline-end-width: 0;
        padding-inline-end: 0.75rem;
    }

    .eca-password-field__input {
        flex: 1 1 auto;
        min-width: 0;
    }

    .eca-password-field__toggle {
        flex: 0 0 2.75rem;
        width: 2.75rem;
        max-width: 2.75rem;
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        overflow: hidden;
        cursor: pointer;
        color: #475569;
        background: #fff;
        border: 1px solid #cbd5e1;
        border-inline-start-width: 0;
        border-start-start-radius: 0;
        border-end-start-radius: 0;
        border-start-end-radius: 0.75rem;
        border-end-end-radius: 0.75rem;
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    }

    .eca-password-field__toggle:hover {
        color: #0f172a;
        background: #f8fafc;
    }

    html[data-theme="dark"] .eca-password-field__toggle {
        color: var(--eca-text-muted);
        background: var(--eca-card);
        border-color: var(--eca-border);
    }

    html[data-theme="dark"] .eca-password-field__toggle:hover {
        color: var(--eca-text);
    }

    .eca-password-field__toggle:focus-visible {
        outline: 2px solid
            color-mix(in srgb, var(--eca-primary) 55%, transparent);
        outline-offset: -2px;
    }

    .eca-password-field__icon,
    .eca-password-field__icon svg,
    .eca-password-field__toggle svg {
        pointer-events: none;
        width: 1.25rem;
        height: 1.25rem;
        max-width: 1.25rem;
        max-height: 1.25rem;
    }

    .eca-password-field__icon--hide,
    .eca-password-field.is-revealed .eca-password-field__icon--show {
        display: none;
    }

    .eca-password-field.is-revealed .eca-password-field__icon--hide {
        display: inline-flex;
    }

    .eca-search-modal__panel {
        background: var(--eca-search-panel);
        border: 1px solid var(--eca-border);
        backdrop-filter: blur(20px);
    }

    .site-engage-glow:hover {
        box-shadow: 0 0 20px
            color-mix(in srgb, var(--eca-accent) 35%, transparent);
    }

    .eca-reading-progress {
        @apply fixed start-0 top-0 h-0.5 w-0 transition-[width] duration-150;
        z-index: var(--z-header);
        background: var(--eca-accent);
    }

    .site-chip {
        @apply inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50/90 px-3 py-2 text-[11px] font-semibold text-brand-slate;
    }

    .site-pressable {
        transition-property:
            transform, background-color, border-color, color, box-shadow;
        transition-duration: 150ms;
        transition-timing-function: ease-out;
    }

    .site-pressable:active {
        transform: scale(0.98);
    }

    .site-lead-sheet {
        @apply relative rounded-3xl border border-white/15 bg-gradient-to-br from-brand-navy via-slate-900 to-brand-navy p-6 text-white shadow-card sm:p-8;
    }

    .site-lead-input {
        @apply mt-2 block w-full rounded-xl border border-white/25 bg-black/35 text-sm text-slate-100 shadow-inner placeholder:text-slate-400 focus:border-blue-400 focus:ring-2 focus:ring-blue-500 focus:ring-offset-0 focus:ring-offset-transparent;
    }

    .site-lead-label {
        @apply text-xs font-semibold uppercase tracking-wide text-slate-300;
    }

    .site-lead-combobox-list {
        @apply absolute z-30 mt-1 max-h-56 w-full list-none overflow-auto rounded-xl border py-1 text-sm shadow-lg;
        border-color: rgba(255, 255, 255, 0.25);
        background-color: rgba(15, 23, 42, 0.97);
        color: rgb(241 245 249);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    }

    .site-lead-combobox-option {
        @apply flex w-full flex-col px-4 py-2 text-start text-slate-100 transition-colors;
    }

    .site-lead-combobox-option:hover,
    .site-lead-combobox-option:focus-visible {
        background-color: rgba(255, 255, 255, 0.08);
    }

    .site-lead-combobox-empty {
        @apply absolute z-30 mt-1 w-full rounded-xl border px-4 py-3 text-xs shadow-lg;
        border-color: rgba(255, 255, 255, 0.25);
        background-color: rgba(15, 23, 42, 0.97);
        color: rgb(148 163 184);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    }

    .site-footer-social {
        @apply inline-flex rounded-lg border px-3 py-1.5 text-xs font-medium transition;
        border-color: var(--eca-border);
        color: var(--eca-text-muted);
    }

    .site-footer-social:hover {
        color: var(--eca-text);
        background: color-mix(in srgb, var(--eca-card) 60%, transparent);
    }

    .site-lead-input[type="text"],
    .site-lead-input[type="email"],
    .site-lead-input[type="tel"],
    textarea.site-lead-input {
        @apply px-4 py-2.5;
    }

    /* Repair ticket card (enterprise) */
    .repair-ticket-card {
        @apply relative overflow-hidden rounded-2xl transition-all duration-300 ease-out;
        background-color: var(--eca-repair-bg);
        border: 1px solid var(--eca-repair-border);
        color: var(--eca-repair-text);
        box-shadow: var(--eca-repair-shadow);
    }

    .repair-ticket-card::before {
        content: "";
        @apply pointer-events-none absolute inset-0 rounded-2xl;
        padding: 1px;
        background: var(--eca-repair-gradient-border);
        -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    .repair-ticket-card:hover {
        @apply -translate-y-1;
    }

    html[data-theme="dark"] .repair-ticket-card:hover,
    html:not([data-theme]) .repair-ticket-card:hover {
        box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.25);
    }

    html[data-theme="light"] .repair-ticket-card:hover {
        box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.2);
    }

    .repair-ticket-card--compact {
        @apply rounded-xl shadow-xl;
    }

    .repair-ticket-card--compact:hover {
        @apply translate-y-0;
    }

    .repair-card-header {
        @apply relative h-12;
        background: var(--eca-repair-header-bg);
    }

    .repair-card-header__inner {
        @apply flex h-full items-center gap-3 p-3;
    }

    .repair-card-header--stack {
        height: auto;
        min-height: 3rem;
    }

    .repair-card-header--stack .repair-card-header__inner {
        @apply h-auto min-h-12 flex-wrap py-2;
    }

    .repair-card-header__meta {
        @apply flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1;
    }

    .repair-card-header__thumb {
        @apply shrink-0;
    }

    .repair-card-header__image,
    .repair-card-header__placeholder {
        @apply h-14 w-14 rounded-2xl object-cover ring-4 ring-indigo-500/30;
    }

    .repair-card-header__placeholder {
        @apply flex items-center justify-center bg-slate-800/80;
    }

    .repair-card-header__device {
        @apply truncate text-sm font-semibold tracking-wide pt-2;
        color: var(--eca-repair-header-title);
    }

    .repair-card-header__id {
        @apply mt-0.5 truncate text-[11px] py-1;
        color: var(--eca-repair-header-sub);
    }

    .repair-card-header__status {
        @apply ms-auto shrink-0 text-end;
    }

    .repair-card-header__date {
        @apply mt-1 block text-[11px];
        color: var(--eca-repair-text-muted);
    }

    .repair-card-badge {
        @apply inline-flex rounded-full border px-2 py-0.5 text-[11px] font-bold uppercase tracking-wide;
    }

    .repair-card-badge--new,
    .repair-card-badge--received {
        @apply border-sky-500/40 bg-sky-500/20 text-sky-300;
    }

    .repair-card-badge--diagnosed {
        @apply border-violet-500/40 bg-violet-500/20 text-violet-300;
    }

    .repair-card-badge--waiting {
        @apply border-amber-500/40 bg-amber-500/20 text-amber-300;
    }

    .repair-card-badge--repairing {
        @apply border-amber-500/40 bg-amber-500/20 text-amber-300;
    }

    .repair-card-badge--completed,
    .repair-card-badge--delivered {
        @apply border-emerald-500/40 bg-emerald-500/20 text-emerald-300;
    }

    .repair-card-body {
        @apply space-y-3 p-3;
    }

    .repair-card-section {
        @apply rounded-xl p-3 backdrop-blur-xl;
    }

    .repair-card-section__title {
        @apply mb-2 text-[11px] font-bold uppercase tracking-wide;
        color: var(--eca-repair-text-muted);
    }

    .repair-card-status-log {
        @apply space-y-2 text-sm;
    }

    .repair-card-status-log__item {
        @apply rounded-lg border px-3 py-2;
        border-color: color-mix(in srgb, var(--eca-border) 85%, transparent);
        background: color-mix(in srgb, var(--eca-card) 88%, transparent);
    }

    .repair-card-status-log__meta {
        @apply flex flex-wrap gap-2;
        color: var(--eca-text-muted);
    }

    .repair-card-status-log__note {
        @apply mt-1.5 text-sm leading-relaxed;
        color: var(--eca-text);
    }

    .repair-card-grid {
        @apply grid grid-cols-2 gap-2;
    }

    .repair-card-grid__item dt {
        @apply text-[11px];
        color: var(--eca-repair-text-muted);
    }

    .repair-card-grid__item dd {
        @apply mt-0.5 text-xs font-medium;
        color: var(--eca-repair-text);
    }

    .repair-card-section--timeline {
        @apply py-2.5;
    }

    .repair-card-timeline {
        @apply relative pt-0;
    }

    .repair-card-timeline__track,
    .repair-card-timeline__progress {
        @apply absolute start-0 end-0 top-5 h-1 rounded-full;
        background-color: var(--eca-repair-track);
    }

    .repair-card-timeline__progress {
        @apply bg-gradient-to-r from-emerald-500 to-indigo-500 transition-all duration-700 ease-out;
        width: calc(var(--repair-progress, 0) * 1%);
    }

    .repair-card-timeline__steps {
        @apply relative m-0 flex list-none justify-between gap-1 p-0;
    }

    .repair-card-timeline--grid {
        @apply space-y-2;
    }

    .repair-card-timeline--grid .repair-card-timeline__track,
    .repair-card-timeline--grid .repair-card-timeline__progress {
        display: none;
    }

    .repair-card-timeline__row {
        @apply relative m-0 grid list-none gap-1 p-0;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .repair-card-timeline__row--tail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        @apply px-1;
    }

    .repair-card-timeline--grid .repair-card-step {
        @apply relative flex min-w-0 flex-col items-center gap-0.5 text-center;
    }

    .repair-card-timeline--grid .repair-card-step:not(:last-child)::after {
        content: "";
        @apply absolute top-3 h-px;
        background-color: var(--eca-repair-track);
        inset-inline-start: calc(50% + 0.75rem);
        width: calc(100% - 1.5rem);
    }

    .repair-card-timeline__row--tail .repair-card-step:not(:last-child)::after {
        width: calc(100% - 1.25rem);
    }

    .repair-card-step {
        @apply flex min-w-0 flex-col items-center gap-1 text-center;
    }

    .repair-card-step__dot {
        @apply relative z-[1] flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[11px] font-bold transition-all duration-700 ease-out;
        background-color: var(--eca-repair-dot-bg);
        color: var(--eca-repair-dot-text);
    }

    .repair-card-timeline:not(.repair-card-timeline--grid)
        .repair-card-step__dot {
        @apply h-8 w-8 text-[11px];
    }

    .repair-card-step--done .repair-card-step__dot {
        @apply bg-emerald-500 text-white shadow-md shadow-emerald-500/40;
    }

    .repair-card-step--active .repair-card-step__dot {
        @apply bg-indigo-600 text-white shadow-lg shadow-indigo-500/50;
    }

    .repair-card-step__label {
        @apply max-w-[3.5rem] truncate text-[11px] leading-tight;
        color: var(--eca-repair-text-muted);
    }

    .repair-card-timeline--grid .repair-card-step__label {
        @apply max-w-none w-full truncate text-[11px] leading-snug;
    }

    .repair-card-issue {
        @apply rounded-xl p-3 text-xs backdrop-blur-xl;
        background-color: var(--eca-repair-panel-bg);
        border: 1px solid var(--eca-repair-panel-border);
        color: var(--eca-repair-text);
    }

    .repair-card-form-panel {
        @apply rounded-xl p-2 backdrop-blur-xl;
    }

    .repair-card-form-panel .site-lead-sheet {
        @apply rounded-xl border-0 bg-transparent p-0 shadow-none;
    }

    .repair-card-form-panel .site-lead-input,
    .repair-card-form-panel input[type="text"],
    .repair-card-form-panel input[type="email"],
    .repair-card-form-panel input[type="tel"],
    .repair-card-form-panel textarea {
        @apply mt-1 text-xs;
        background-color: var(--eca-repair-input-bg);
        border: 1px solid var(--eca-repair-input-border);
        color: var(--eca-repair-text);
    }

    .repair-card-form-panel .site-lead-input::placeholder,
    .repair-card-form-panel input::placeholder,
    .repair-card-form-panel textarea::placeholder {
        color: var(--eca-repair-text-muted);
        opacity: 0.75;
    }

    .repair-card-form-panel .site-lead-label,
    .repair-card-form-panel label {
        @apply text-[11px];
        color: var(--eca-repair-text-muted);
    }

    .repair-card-form-panel .site-lead-combobox-list,
    .repair-card-form-panel .site-lead-combobox-empty {
        background-color: var(--eca-repair-input-bg);
        border-color: var(--eca-repair-input-border);
        color: var(--eca-repair-text);
        box-shadow: var(--eca-repair-shadow);
    }

    .repair-card-form-panel .site-lead-combobox-option {
        color: var(--eca-repair-text);
    }

    .repair-card-form-panel .site-lead-combobox-option:hover,
    .repair-card-form-panel .site-lead-combobox-option:focus-visible {
        background-color: color-mix(
            in srgb,
            var(--eca-primary) 14%,
            transparent
        );
    }

    .repair-card-form-panel .site-lead-form-fields {
        @apply space-y-2.5;
    }

    .repair-card-form-panel .site-btn-primary {
        @apply w-full text-xs;
    }

    .repair-card-form-panel .text-slate-300,
    .repair-card-form-panel .text-brand-muted {
        color: var(--eca-repair-text-muted);
    }

    html[data-theme="light"] .repair-card-badge--new,
    html[data-theme="light"] .repair-card-badge--received {
        @apply text-sky-700;
    }

    html[data-theme="light"] .repair-card-badge--diagnosed {
        @apply text-violet-700;
    }

    html[data-theme="light"] .repair-card-badge--waiting,
    html[data-theme="light"] .repair-card-badge--repairing {
        @apply text-amber-700;
    }

    html[data-theme="light"] .repair-card-badge--completed,
    html[data-theme="light"] .repair-card-badge--delivered {
        @apply text-emerald-700;
    }

    html[data-theme="light"] .repair-card-inline-badge--success {
        @apply text-emerald-700;
    }

    html[data-theme="light"] .repair-card-inline-badge--warning {
        @apply text-amber-700;
    }

    html[data-theme="light"] .repair-card-inline-badge--info {
        @apply text-indigo-700;
    }

    html[data-theme="light"] .repair-card-inline-badge--gold {
        @apply text-yellow-700;
    }

    html[data-theme="light"] .repair-card-cost__label {
        @apply text-emerald-700;
    }

    html[data-theme="light"] .repair-card-cost__value--accent {
        @apply text-emerald-600;
    }

    html[data-theme="light"] .repair-card-header__placeholder {
        @apply bg-slate-200/80 text-slate-600;
    }

    .repair-card-ai-list {
        @apply m-0 list-none space-y-2 p-0;
    }

    .repair-card-ai-list__row {
        @apply flex items-center justify-between gap-2 text-xs;
    }

    .repair-card-ai-list__score {
        @apply font-mono text-[11px];
        color: var(--eca-repair-text-muted);
    }

    .repair-card-ai-bar {
        @apply mt-1 h-2 overflow-hidden rounded-full;
        background-color: var(--eca-repair-track);
    }

    .repair-card-ai-bar__fill {
        @apply block h-full rounded-full transition-all duration-700 ease-out;
        width: calc(var(--repair-fill, 0) * 1%);
    }

    .repair-card-ai-bar--red {
        @apply bg-red-500;
    }

    .repair-card-ai-bar--amber {
        @apply bg-amber-500;
    }

    .repair-card-ai-bar--blue {
        @apply bg-blue-500;
    }

    .repair-card-section--split {
        @apply space-y-3;
    }

    .repair-card-tech {
        @apply flex items-center gap-3;
    }

    .repair-card-tech__avatar {
        @apply h-10 w-10 shrink-0 rounded-full ring-2 ring-indigo-500/40;
    }

    .repair-card-tech__name {
        @apply text-sm font-semibold;
        color: var(--eca-repair-text);
    }

    .repair-card-tech__role {
        @apply text-[11px];
        color: var(--eca-repair-text-muted);
    }

    .repair-card-tech__badges {
        @apply mt-1 flex flex-wrap gap-1;
    }

    .repair-card-inline-badge {
        @apply inline-flex rounded-full px-2 py-0.5 text-[11px] font-semibold;
        border: 1px solid var(--eca-repair-border);
        background-color: var(--eca-repair-section-bg);
        color: var(--eca-repair-text-muted);
    }

    .repair-card-inline-badge--success {
        @apply border-emerald-500/40 bg-emerald-500/20 text-emerald-300;
    }

    .repair-card-inline-badge--warning {
        @apply border-amber-500/40 bg-amber-500/20 text-amber-300;
    }

    .repair-card-inline-badge--info {
        @apply border-indigo-500/40 bg-indigo-500/20 text-indigo-300;
    }

    .repair-card-inline-badge--gold {
        @apply border-yellow-500/40 bg-yellow-500/20 text-yellow-300;
    }

    .repair-card-priority {
        @apply rounded-lg p-2;
        background-color: var(--eca-repair-panel-bg);
        border: 1px solid var(--eca-repair-border);
    }

    .repair-card-priority__label {
        @apply block text-[11px] uppercase;
        color: var(--eca-repair-text-muted);
    }

    .repair-card-priority__value {
        @apply text-sm font-bold;
    }

    .repair-card-priority--low .repair-card-priority__value {
        @apply text-sky-400;
    }

    .repair-card-priority--medium .repair-card-priority__value {
        @apply text-amber-400;
    }

    .repair-card-priority--high .repair-card-priority__value {
        @apply text-red-400;
    }

    .repair-card-priority--critical .repair-card-priority__value {
        @apply text-red-500;
    }

    .repair-card-priority--critical::after {
        content: "";
        @apply ms-2 inline-block h-2 w-2 animate-ping rounded-full bg-red-500;
    }

    .repair-card-cost {
        @apply grid gap-2 rounded-lg border border-emerald-500/20 bg-gradient-to-br from-emerald-500/10 to-emerald-700/10 p-2;
    }

    .repair-card-cost__label {
        @apply block text-[11px] text-emerald-300/80;
    }

    .repair-card-cost__value {
        @apply text-sm font-bold;
        color: var(--eca-repair-text);
    }

    .repair-card-cost__value--accent {
        @apply text-emerald-300;
    }

    .repair-card-cost__profit {
        @apply border-t border-emerald-500/20 pt-2;
    }

    .repair-card-customer {
        @apply flex items-start justify-between gap-2;
    }

    .repair-card-customer__name {
        @apply text-sm font-semibold;
        color: var(--eca-repair-text);
    }

    .repair-card-customer__phone {
        @apply mt-0.5 text-xs;
        color: var(--eca-repair-text-muted);
    }

    .repair-card-parts {
        @apply m-0 list-none space-y-1.5 p-0;
    }

    .repair-card-parts__item {
        @apply flex items-center justify-between gap-2 text-xs;
    }

    .repair-card-sla {
        @apply flex items-center gap-3;
    }

    .repair-card-sla__ring {
        @apply h-12 w-12 shrink-0 rounded-full;
        background: conic-gradient(
            var(--eca-danger) calc(var(--sla-pct, 100) * 1%),
            var(--eca-repair-track) 0
        );
        mask: radial-gradient(farthest-side, transparent 62%, #000 64%);
        -webkit-mask: radial-gradient(farthest-side, transparent 62%, #000 64%);
    }

    .repair-card-sla__label {
        @apply text-[11px] uppercase;
        color: var(--eca-repair-text-muted);
    }

    .repair-card-sla__time {
        @apply font-mono text-lg font-bold;
        color: var(--eca-repair-text);
    }

    .repair-card-actions {
        @apply flex flex-wrap gap-2 pt-3;
        border-top: 1px solid var(--eca-repair-border);
    }

    .repair-card-btn {
        @apply inline-flex items-center justify-center rounded-lg px-3 py-2 text-xs font-semibold text-white transition duration-300 ease-out hover:-translate-y-0.5;
    }

    .repair-card-btn--indigo {
        @apply bg-indigo-600 hover:bg-indigo-500;
    }

    .repair-card-btn--amber {
        @apply bg-amber-600 hover:bg-amber-500;
    }

    .repair-card-btn--cyan {
        @apply bg-cyan-600 hover:bg-cyan-500;
    }

    .repair-card-btn--emerald {
        @apply bg-emerald-600 hover:bg-emerald-500;
    }

    .repair-card-btn--muted {
        @apply bg-slate-700 hover:bg-slate-600;
    }

    .repair-ticket-card:not(.repair-ticket-card--compact) .repair-card-grid {
        @apply sm:grid-cols-2 desktop:grid-cols-4;
    }

    .repair-ticket-card:not(.repair-ticket-card--compact)
        .repair-card-section--split {
        @apply grid gap-3 md:grid-cols-2;
    }

    .admin-shell .repair-ticket-card {
        @apply w-full max-w-none;
    }

    .admin-shell .repair-ticket-card:hover {
        transform: none;
    }

    .site-lead-modal-backdrop {
        @apply fixed inset-0 flex items-end justify-center bg-slate-900/55 p-0;
        z-index: var(--z-modal);
        overscroll-behavior: contain;
    }

    .site-lead-modal-panel {
        @apply flex w-full max-w-lg flex-col overflow-hidden shadow-2xl;
        max-height: min(92dvh, 40rem);
        min-height: 18rem;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-radius: 24px 24px 0 0;
        background: var(--eca-card);
        border: 1px solid color-mix(in srgb, var(--eca-border) 80%, transparent);
    }

    .site-lead-modal-panel__header {
        @apply relative z-10 flex shrink-0 items-start justify-between gap-3 px-5 py-4;
        background: var(--eca-primary);
        color: #fff;
    }

    .site-lead-modal-panel__header-main {
        @apply min-w-0 flex-1;
    }

    .site-lead-modal-panel__title {
        @apply text-[15px] font-bold leading-tight text-white;
    }

    .site-lead-modal-panel__subtitle {
        @apply mt-1 text-[11px] leading-snug text-white/85;
    }

    .site-lead-modal-panel__meta {
        @apply mt-2 flex flex-wrap items-center gap-2;
    }

    .site-lead-modal-panel__status {
        @apply inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[10.5px] font-semibold tracking-wide text-white;
        background: rgb(0 0 0 / 0.18);
    }

    .site-lead-modal-panel__status-dot {
        @apply h-1.5 w-1.5 shrink-0 rounded-full;
        background: #4ade80;
        box-shadow: 0 0 0 2px rgb(74 222 128 / 0.3);
    }

    .site-lead-modal-panel__hours {
        @apply text-[10px] text-white/60;
    }

    .site-lead-modal-panel__close {
        @apply flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-xl leading-none text-white transition;
        background: rgb(255 255 255 / 0.2);
    }

    .site-lead-modal-panel__close:hover {
        background: rgb(255 255 255 / 0.3);
    }

    .site-lead-modal-panel__body {
        @apply flex min-h-0 flex-1 flex-col overflow-hidden;
        min-height: 16rem;
        background: color-mix(in srgb, var(--eca-surface) 55%, var(--eca-card));
    }

    .site-lead-modal-panel__body > .site-assistant {
        @apply flex min-h-0 flex-1 flex-col;
        height: 100%;
    }

    .site-lead-modal-panel__form {
        @apply min-h-0 flex-1 overflow-y-auto p-4;
    }

    .site-lead-modal-panel__footer {
        @apply shrink-0 py-1.5 text-center text-[10px];
        color: var(--eca-text-muted);
        background: var(--eca-card);
        border-top: 1px solid
            color-mix(in srgb, var(--eca-border) 70%, transparent);
    }

    /* Desktop: docked chat widget — logical inline-end */
    html.layout-xl {
        .site-lead-modal-backdrop {
            @apply items-end bg-transparent p-0 pointer-events-none;
            justify-content: flex-end;
            padding-inline-end: 1.5rem;
            padding-bottom: 1.5rem;
        }

        .site-lead-modal-panel {
            @apply pointer-events-auto;
            width: min(23.75rem, calc(100vw - 2rem));
            max-height: calc(100vh - 6rem);
            border-radius: 1rem;
            margin-inline-end: 0;
            box-shadow:
                0 12px 48px rgb(0 0 0 / 0.18),
                0 0 0 1px color-mix(in srgb, var(--eca-border) 40%, transparent);
        }
    }

    @media (min-width: 640px) and (max-width: 1279px) {
        .site-lead-modal-backdrop {
            @apply items-center p-4;
        }

        .site-lead-modal-panel {
            border-radius: 1rem;
        }
    }

    /* Phone: full-screen conversation — never a bottom sheet */
    @media (max-width: 639.98px) {
        .site-lead-modal-backdrop {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100vh;
            height: 100dvh;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: stretch;
            justify-content: stretch;
            overflow: hidden;
        }

        .site-lead-modal-panel {
            position: relative;
            width: 100%;
            max-width: none;
            height: 100vh;
            height: 100dvh;
            max-height: none;
            min-height: 0;
            margin: 0;
            padding-bottom: 0;
            border-radius: 0;
            border: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .site-lead-modal-panel__header {
            flex: 0 0 auto;
            padding-top: max(0.75rem, env(safe-area-inset-top));
        }

        .site-lead-modal-panel__subtitle,
        .site-lead-modal-panel__hours,
        .site-lead-modal-panel__footer {
            display: none;
        }

        .site-lead-modal-panel__body {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .site-lead-modal-panel__body > .site-assistant,
        .site-lead-modal-panel .site-assistant {
            flex: 1 1 auto;
            min-height: 0;
            height: auto;
        }

        .site-lead-modal-panel .site-assistant-room {
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
        }

        .site-lead-modal-panel .site-assistant-room__scroll {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }

        .site-lead-modal-panel .site-assistant-room__footer {
            flex: 0 0 auto;
            padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
        }

        .site-lead-modal-panel .site-assistant-composer__input {
            min-width: 0;
        }

        .site-lead-launcher.is-keyboard-open .site-lead-modal-backdrop {
            top: var(--lead-kb-top, 0px);
            height: var(--lead-kb-height, 100dvh);
            right: 0;
            bottom: auto;
            left: 0;
        }

        .site-lead-launcher.is-keyboard-open .site-lead-modal-panel {
            height: 100%;
            max-height: none;
            min-height: 0;
        }

        .site-lead-launcher.is-keyboard-open .site-assistant-actions {
            display: none;
        }
    }

    .site-lead-modal-panel .site-assistant-room {
        @apply flex h-full min-h-0 flex-1 flex-col rounded-none border-0;
        background: transparent;
    }

    .site-lead-modal-panel .site-assistant {
        @apply flex h-full min-h-0 flex-1 flex-col;
    }

    .site-lead-modal-panel .repair-ticket-card,
    .site-lead-modal-panel .repair-ticket-card::before {
        display: contents;
    }

    .site-lead-modal-panel .repair-ticket-card:hover {
        transform: none;
    }

    /* AI Lead Assistant — chat room */
    .repair-ticket-card--chat {
        @apply overflow-hidden;
    }

    .repair-card-body--chat {
        @apply p-0;
    }

    .repair-card-form-panel--chat {
        @apply border-0 bg-transparent p-0 shadow-none;
    }

    .site-assistant {
        @apply flex h-full min-h-0 flex-col text-sm;
    }

    .site-assistant-room {
        @apply flex min-h-0 flex-1 flex-col overflow-hidden;
        background: color-mix(in srgb, var(--eca-surface) 92%, transparent);
    }

    html[data-theme="light"] .site-assistant-room {
        background: #f8fafc;
    }

    .site-assistant-room__toolbar {
        @apply flex shrink-0 items-center justify-end border-b px-3 py-1.5;
        border-color: color-mix(in srgb, var(--eca-border) 55%, transparent);
    }

    html[data-theme="light"] .site-assistant-room__toolbar {
        border-color: #e2e8f0;
    }

    .site-assistant-room__restart {
        @apply rounded-lg px-2.5 py-1 text-xs font-medium transition;
        color: var(--eca-text-muted);
    }

    .site-assistant-room__restart:hover:not(:disabled) {
        color: var(--brand-accent);
        background: color-mix(in srgb, var(--brand-accent) 12%, transparent);
    }

    .site-assistant-room__restart:disabled {
        @apply cursor-not-allowed opacity-40;
    }

    .site-assistant-room__scroll {
        @apply flex-1 overflow-y-auto overscroll-contain px-3 py-4;
        min-height: 14rem;
        scrollbar-width: thin;
    }

    .site-assistant-room__messages {
        @apply flex flex-col gap-3;
    }

    .site-assistant-room__footer {
        @apply shrink-0 space-y-2 border-t px-3 py-3;
        border-color: color-mix(in srgb, var(--eca-border) 70%, transparent);
        background: color-mix(in srgb, var(--eca-surface) 96%, #000);
    }

    html[data-theme="light"] .site-assistant-room__footer {
        background: #fff;
        border-color: #e2e8f0;
    }

    .site-assistant-row {
        @apply flex w-full;
    }

    .site-assistant-row--stack {
        @apply flex-col gap-2;
    }

    .site-assistant-row--user {
        @apply justify-start;
    }

    .site-assistant-row--assistant {
        @apply justify-end;
    }

    [dir="rtl"] .site-assistant-row--assistant.site-assistant-row--stack {
        @apply items-end;
    }

    [dir="ltr"] .site-assistant-row--assistant.site-assistant-row--stack {
        @apply items-start;
    }

    /* RTL: user on right (start in RTL = right), assistant on left — flip for natural chat */
    [dir="rtl"] .site-assistant-row--user {
        @apply justify-start;
    }

    [dir="rtl"] .site-assistant-row--assistant {
        @apply justify-end;
    }

    [dir="ltr"] .site-assistant-row--user {
        @apply justify-end;
    }

    [dir="ltr"] .site-assistant-row--assistant {
        @apply justify-start;
    }

    .site-assistant-bubble {
        @apply max-w-[88%] px-3.5 py-2.5 leading-relaxed shadow-sm;
    }

    .site-assistant-bubble--user {
        @apply rounded-2xl rounded-ee-md bg-brand-accent text-white;
    }

    .site-assistant-bubble--assistant {
        @apply rounded-2xl rounded-es-md;
        background: color-mix(in srgb, var(--eca-surface-2) 100%, transparent);
        color: var(--eca-text);
    }

    html[data-theme="light"] .site-assistant-bubble--assistant {
        background: #fff;
        color: #0f172a;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
    }

    .site-assistant-bubble--agent {
        @apply rounded-2xl rounded-es-md;
        background: color-mix(in srgb, #065f46 70%, #0f172a);
        color: #ecfdf5;
    }

    html[data-theme="light"] .site-assistant-bubble--agent {
        background: #ecfdf5;
        color: #064e3b;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
    }

    /* Agent = support side (same alignment as assistant), not the site user */
    .site-assistant-row--agent {
        @apply justify-end;
    }

    [dir="rtl"] .site-assistant-row--agent {
        @apply justify-end;
    }

    [dir="ltr"] .site-assistant-row--agent {
        @apply justify-start;
    }

    .site-assistant-row--system {
        @apply justify-center;
    }

    .site-assistant-bubble--system {
        @apply rounded-2xl text-center text-xs opacity-80;
        background: transparent;
        box-shadow: none;
    }

    .site-assistant-caret {
        @apply ms-0.5 inline-block animate-pulse opacity-70;
    }

    .site-assistant-typing {
        @apply flex items-center gap-1.5 px-4 py-3;
    }

    .site-assistant-typing span {
        @apply h-1.5 w-1.5 rounded-full bg-current opacity-50;
        animation: site-assistant-dot 1.2s infinite ease-in-out;
    }

    .site-assistant-typing span:nth-child(2) {
        animation-delay: 0.15s;
    }

    .site-assistant-typing span:nth-child(3) {
        animation-delay: 0.3s;
    }

    @keyframes site-assistant-dot {
        0%,
        80%,
        100% {
            transform: translateY(0);
            opacity: 0.35;
        }
        40% {
            transform: translateY(-3px);
            opacity: 1;
        }
    }

    .site-assistant-chips {
        @apply mt-2 flex max-w-[95%] flex-wrap gap-2;
    }

    .site-assistant-row--assistant .site-assistant-chips {
        @apply w-full;
    }

    [dir="rtl"] .site-assistant-row--assistant .site-assistant-chips {
        @apply justify-end;
    }

    [dir="ltr"] .site-assistant-row--assistant .site-assistant-chips {
        @apply justify-start;
    }

    .site-assistant-chip {
        @apply inline-flex max-w-full flex-col items-stretch gap-0.5 rounded-xl border px-3 py-2 text-start transition;
        border-color: color-mix(in srgb, var(--eca-border) 80%, transparent);
        background: color-mix(in srgb, var(--eca-surface-2) 90%, transparent);
        color: var(--eca-text);
    }

    .site-assistant-chip:hover:not(:disabled):not(.is-disabled) {
        border-color: var(--brand-accent);
        background: color-mix(in srgb, var(--brand-accent) 15%, transparent);
    }

    html[data-theme="light"] .site-assistant-chip {
        background: #fff;
        border-color: #cbd5e1;
        color: #0f172a;
    }

    .site-assistant-chip__parent {
        @apply text-[10px] font-medium leading-tight opacity-55;
    }

    .site-assistant-chip__label {
        @apply text-xs font-bold leading-snug;
    }

    .site-assistant-chip__sub {
        @apply text-[10px] font-normal opacity-60;
    }

    .site-assistant-chip--action {
        @apply items-center;
    }

    .site-assistant-chip--highlight {
        @apply font-bold;
        background: var(--brand-accent);
        border-color: var(--brand-accent);
        color: #fff;
        box-shadow: 0 0 0 3px
            color-mix(in srgb, var(--brand-accent) 35%, transparent);
    }

    .site-assistant-chip--highlight:hover:not(:disabled):not(.is-disabled) {
        background: color-mix(in srgb, var(--brand-accent) 88%, #000);
        border-color: color-mix(in srgb, var(--brand-accent) 88%, #000);
        color: #fff;
    }

    html[data-theme="light"] .site-assistant-chip--highlight {
        background: var(--brand-accent);
        border-color: var(--brand-accent);
        color: #fff;
    }

    .site-assistant-chip.is-disabled,
    .site-assistant-chip:disabled {
        @apply cursor-not-allowed opacity-45;
    }

    .site-assistant-actions {
        @apply flex flex-wrap gap-2;
    }

    .site-assistant-composer {
        @apply flex items-center gap-2 rounded-2xl border px-2 py-1.5;
        border-color: color-mix(in srgb, var(--eca-border) 80%, transparent);
        background: color-mix(in srgb, var(--eca-surface-2) 80%, transparent);
    }

    html[data-theme="light"] .site-assistant-composer {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

    .site-assistant-composer__input {
        @apply min-w-0 flex-1 border-0 bg-transparent px-2 py-2 text-sm outline-none;
        color: var(--eca-text);
    }

    /* iOS zooms inputs under 16px, which shifts the visual viewport off the sheet. */
    html.layout-mobile .site-assistant-composer__input {
        font-size: 16px;
    }

    html[data-theme="light"] .site-assistant-composer__input {
        color: #0f172a;
    }

    .site-assistant-composer__icon,
    .site-assistant-composer__send {
        @apply inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl transition;
        color: var(--eca-text-muted);
    }

    .site-assistant-composer__send {
        @apply bg-brand-accent text-white;
    }

    .site-assistant-composer__send:disabled {
        @apply opacity-40;
    }

    .site-assistant-process {
        @apply max-w-[95%] rounded-2xl border p-3;
        border-color: color-mix(in srgb, var(--eca-border) 80%, transparent);
        background: color-mix(in srgb, var(--eca-surface-2) 85%, transparent);
        color: var(--eca-text);
    }

    html[data-theme="light"] .site-assistant-process {
        background: #fff;
        border-color: #e2e8f0;
        color: #0f172a;
    }

    .site-assistant-process__intro {
        @apply mb-2 text-xs leading-relaxed opacity-80;
    }

    .site-assistant-process__title {
        @apply mb-2 text-xs font-bold uppercase tracking-wide opacity-70;
    }

    .site-assistant-process__list {
        @apply flex flex-col gap-1.5;
    }

    .site-assistant-process__list li {
        @apply flex items-center gap-2 text-[11px];
    }

    .site-assistant-process__n {
        @apply inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-brand-accent/20 text-[10px] font-bold text-brand-accent;
    }

    .site-assistant-product-list {
        @apply flex w-full max-w-[95%] flex-col gap-2;
    }

    .site-assistant-product-card {
        @apply flex w-full items-center gap-3 rounded-2xl border px-2.5 py-2 text-start transition;
        border-color: color-mix(in srgb, var(--eca-border) 80%, transparent);
        background: color-mix(in srgb, var(--eca-surface-2) 85%, transparent);
    }

    .site-assistant-product-card:hover {
        border-color: color-mix(in srgb, var(--brand-accent) 55%, transparent);
    }

    html[data-theme="light"] .site-assistant-product-card {
        background: #fff;
        border-color: #e2e8f0;
    }

    .site-assistant-product-card__img {
        @apply h-12 w-12 shrink-0 rounded-xl object-cover;
    }

    .site-assistant-product-card__body {
        @apply flex min-w-0 flex-1 flex-col gap-0.5;
    }

    .site-assistant-product-card__name {
        @apply line-clamp-2 text-xs font-semibold leading-snug;
    }

    .site-assistant-product-card__price {
        @apply text-[11px] font-bold text-brand-accent;
    }

    .site-assistant-product-detail {
        @apply flex w-full max-w-[95%] flex-col gap-3 rounded-2xl border p-3;
        border-color: color-mix(in srgb, var(--eca-border) 80%, transparent);
        background: color-mix(in srgb, var(--eca-surface-2) 85%, transparent);
    }

    html[data-theme="light"] .site-assistant-product-detail {
        background: #fff;
        border-color: #e2e8f0;
    }

    .site-assistant-product-detail__img {
        @apply mx-auto max-h-40 w-full max-w-[11rem] rounded-xl object-contain;
    }

    .site-assistant-product-detail__text {
        @apply text-sm leading-relaxed;
    }

    .site-assistant-product-detail__actions {
        @apply flex flex-wrap gap-2;
    }

    .site-assistant-summary {
        @apply max-w-[95%] rounded-2xl border p-3;
        border-color: color-mix(in srgb, var(--eca-border) 80%, transparent);
        background: color-mix(in srgb, var(--eca-surface-2) 85%, transparent);
    }

    html[data-theme="light"] .site-assistant-summary {
        background: #fff;
        border-color: #e2e8f0;
    }

    .site-assistant-summary__title {
        @apply mb-2 text-sm font-bold;
    }

    .site-assistant-summary__list {
        @apply grid grid-cols-[auto_1fr] gap-x-3 gap-y-2 text-xs;
    }

    .site-assistant-summary__list dt {
        @apply font-semibold opacity-80;
    }

    .site-assistant-summary__list dd {
        @apply leading-relaxed;
    }

    .site-assistant-summary__actions {
        @apply mt-3 flex flex-wrap gap-2;
    }

    .site-assistant-summary__btn {
        @apply inline-flex flex-1 items-center justify-center gap-1 rounded-xl px-3 py-2 text-xs font-semibold transition;
    }

    .site-assistant-summary__btn--primary {
        @apply bg-brand-accent text-white;
    }

    .site-assistant-summary__btn--muted {
        border: 1px solid color-mix(in srgb, var(--eca-border) 80%, transparent);
        background: transparent;
        color: var(--eca-text);
    }

    html[data-theme="light"] .site-assistant-summary__btn--muted {
        border-color: #cbd5e1;
        color: #0f172a;
    }

    .eca-auth-modal__tabs {
        @apply mb-4 grid grid-cols-2 gap-1 rounded-xl p-1;
        background: color-mix(in srgb, var(--eca-surface-2) 70%, transparent);
    }

    .eca-auth-modal__tabs--single {
        grid-template-columns: 1fr;
    }

    html[data-theme="light"] .eca-auth-modal__tabs {
        background: #f1f5f9;
    }

    .eca-auth-modal__tab {
        @apply rounded-lg px-3 py-2 text-center text-sm font-semibold transition eca-theme-text-muted;
    }

    .eca-auth-modal__tab.is-active {
        @apply bg-brand-accent/15 text-brand-accent shadow-sm;
        background: color-mix(in srgb, var(--brand-accent) 14%, #fff);
    }

    html[data-theme="dark"] .eca-auth-modal__tab.is-active,
    :root:not([data-theme="light"]) .eca-auth-modal__tab.is-active {
        background: color-mix(in srgb, var(--brand-accent) 18%, transparent);
    }

    .eca-auth-modal__switch {
        @apply mt-3 text-center text-xs eca-theme-text-muted;
    }

    .eca-auth-modal__switch button {
        @apply font-semibold text-brand-accent underline-offset-2 hover:underline;
    }

    .eca-auth-modal__remember {
        @apply flex items-center gap-2 text-sm eca-theme-text;
    }

    .eca-auth-modal__captcha {
        @apply flex justify-center overflow-x-auto;
    }

    .site-assistant-otp-card {
        @apply flex w-full max-w-[95%] flex-col gap-2 rounded-2xl border p-3;
        border-color: color-mix(in srgb, var(--eca-border) 80%, transparent);
        background: color-mix(in srgb, var(--eca-surface-2) 85%, transparent);
    }

    html[data-theme="light"] .site-assistant-otp-card {
        background: #fff;
        border-color: #e2e8f0;
    }

    .site-assistant-otp-card__title {
        @apply text-sm font-semibold leading-relaxed;
        color: var(--eca-text);
    }

    html[data-theme="light"] .site-assistant-otp-card__title {
        color: #0f172a;
    }

    .site-assistant-otp-card__mobile {
        @apply text-xs font-mono opacity-70;
    }

    .site-assistant-otp {
        @apply mt-2 w-full max-w-[95%];
    }

    .site-assistant-otp__row {
        @apply flex flex-col gap-2;
    }

    .site-assistant-otp__input {
        @apply w-full rounded-xl border px-3 py-2.5 text-center text-base tracking-[0.35em];
        border-color: color-mix(in srgb, var(--eca-border) 80%, transparent);
        background: transparent;
        color: var(--eca-text);
    }

    html[data-theme="light"] .site-assistant-otp__input {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #0f172a;
    }

    .site-assistant-otp__confirm {
        @apply w-full rounded-xl bg-brand-accent px-3 py-2.5 text-sm font-bold text-white;
    }

    .site-assistant-otp-card__links {
        @apply mt-1 flex flex-col gap-1.5;
    }

    .site-assistant-otp-card__link {
        @apply w-full rounded-lg px-2 py-2 text-center text-xs font-semibold underline-offset-2 hover:underline;
        color: var(--brand-accent);
    }

    .site-assistant-attachment {
        @apply max-h-40 rounded-lg;
    }

    .site-assistant-error {
        @apply mt-2 text-xs text-red-400;
    }

    .admin-shell {
        @apply min-h-screen;
        background: var(--eca-surface);
        color: var(--eca-text);
    }

    html[data-theme="dark"] .admin-shell .text-slate-900,
    html[data-theme="dark"] .admin-shell .text-slate-800,
    html[data-theme="dark"] .admin-shell .text-slate-700 {
        color: var(--eca-text);
    }

    html[data-theme="dark"] .admin-shell .text-slate-600,
    html[data-theme="dark"] .admin-shell .text-slate-500,
    html[data-theme="dark"] .admin-shell .text-slate-400 {
        color: var(--eca-text-muted);
    }

    html[data-theme="dark"] .admin-shell .border-slate-200,
    html[data-theme="dark"] .admin-shell .border-slate-200\/90,
    html[data-theme="dark"] .admin-shell .border-slate-100,
    html[data-theme="dark"] .admin-shell .divide-slate-200 {
        border-color: var(--eca-border);
    }

    html[data-theme="dark"] .admin-shell .bg-white,
    html[data-theme="dark"] .admin-shell .bg-white\/95,
    html[data-theme="dark"] .admin-shell .bg-slate-50,
    html[data-theme="dark"] .admin-shell .bg-slate-50\/80,
    html[data-theme="dark"] .admin-shell .bg-slate-50\/50,
    html[data-theme="dark"] .admin-shell .bg-slate-100 {
        background-color: color-mix(
            in srgb,
            var(--eca-card) 92%,
            var(--eca-surface)
        );
    }

    html[data-theme="dark"] .admin-input {
        background: color-mix(
            in srgb,
            var(--eca-surface, var(--eca-bg)) 55%,
            var(--eca-card)
        );
        border-color: var(--eca-border);
        color: var(--eca-text);
    }

    .admin-topbar {
        border-bottom: 1px solid var(--eca-border);
        background: var(--eca-header-bg, rgba(255, 255, 255, 0.95));
        color: var(--eca-text);
    }

    .admin-topbar__menu {
        @apply rounded-lg   text-sm;
        color: var(--eca-text);
    }

    .admin-topbar__collapse {
        @apply items-center justify-center rounded-lg px-2 py-1 text-sm;
        border: 1px solid var(--eca-border);
        color: var(--eca-text);
        min-width: 2rem;
        min-height: 1.75rem;
    }

    html[dir="rtl"] .admin-topbar__collapse-icon {
        display: inline-block;
        transform: scaleX(-1);
    }

    .admin-topbar__title,
    .admin-page-title {
        @apply text-base font-bold leading-tight;
        color: var(--eca-text);
    }

    .admin-page-title {
        @apply text-xl;
    }

    .admin-page-kicker {
        @apply text-xs font-semibold tracking-wide;
        color: var(--eca-text-muted);
    }

    .admin-page-subtitle {
        @apply mt-1 text-sm;
        color: var(--eca-text-muted);
    }

    .admin-resource-index__body {
        @apply px-0 pb-0;
    }

    .admin-resource-index__body .admin-table-wrap {
        border: 0;
        border-radius: 0;
        border-top: 1px solid var(--eca-border);
    }

    .admin-resource-index__body .admin-table-pagination {
        @apply border-t px-4 py-3 sm:px-6;
        border-color: var(--eca-border);
    }

    .admin-segmented-tabs {
        @apply flex flex-wrap gap-1 border-b px-3 pt-3 sm:px-4;
        border-color: var(--eca-border);
    }

    .admin-segmented-tabs__item {
        @apply inline-flex items-center gap-2 rounded-t-lg px-3 py-2.5 text-sm font-semibold transition;
        color: var(--eca-text-muted);
    }

    .admin-segmented-tabs__item:hover {
        color: var(--eca-text);
        background: color-mix(in srgb, var(--eca-primary) 6%, transparent);
    }

    .admin-segmented-tabs__item.is-active {
        color: var(--eca-text);
        box-shadow: inset 0 -2px 0 var(--eca-primary);
    }

    .admin-segmented-tabs__count {
        @apply inline-flex min-w-[1.5rem] items-center justify-center rounded-full px-1.5 py-0.5 text-[0.65rem] font-bold;
        background: color-mix(in srgb, var(--eca-primary) 10%, var(--eca-card));
        color: var(--eca-text-muted);
    }

    .admin-segmented-tabs__item.is-active .admin-segmented-tabs__count {
        background: color-mix(in srgb, var(--eca-primary) 16%, var(--eca-card));
        color: var(--eca-text);
    }

    .admin-list-toolbar {
        @apply flex flex-wrap items-center gap-3 px-4 py-3 sm:px-6;
        background: color-mix(in srgb, var(--eca-card) 92%, var(--eca-primary) 8%);
        border-bottom: 1px solid var(--eca-border);
    }

    .admin-list-toolbar__search {
        @apply relative min-w-[12rem] flex-1;
    }

    .admin-list-toolbar__icon {
        @apply pointer-events-none absolute inset-y-0 start-3 inline-flex items-center;
        color: var(--eca-text-muted);
    }

    .admin-list-toolbar__input {
        @apply w-full ps-10;
    }

    .admin-thumb {
        @apply h-12 w-12 shrink-0 rounded-xl object-cover;
        aspect-ratio: 1 / 1;
        background: color-mix(in srgb, var(--eca-border) 55%, transparent);
    }

    .admin-thumb--empty {
        @apply inline-flex items-center justify-center text-xs;
        color: var(--eca-text-muted);
    }

    .admin-cell-title {
        @apply block max-w-[18rem] overflow-hidden text-ellipsis whitespace-nowrap font-medium sm:max-w-[28rem];
    }

    .admin-row-actions {
        @apply relative inline-flex justify-end;
    }

    .admin-row-actions__trigger {
        @apply inline-flex h-8 w-8 items-center justify-center rounded-lg border transition;
        border-color: var(--eca-border);
        background: var(--eca-card);
        color: var(--eca-text-muted);
    }

    .admin-row-actions__trigger:hover,
    .admin-row-actions__trigger[aria-expanded='true'] {
        color: var(--eca-text);
        border-color: color-mix(in srgb, var(--eca-primary) 35%, var(--eca-border));
        background: color-mix(in srgb, var(--eca-primary) 8%, var(--eca-card));
    }

    .admin-row-actions__menu {
        position: fixed;
        z-index: 60;
        min-width: 10.5rem;
        padding: 0.35rem;
        border-radius: 0.85rem;
        border: 1px solid var(--eca-border);
        background: var(--eca-card);
        box-shadow: 0 14px 30px -16px rgba(15, 23, 42, 0.35);
    }

    .admin-row-actions__item {
        display: block;
        width: 100%;
        padding: 0.55rem 0.75rem;
        border: 0;
        border-radius: 0.55rem;
        background: transparent;
        text-align: start;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--eca-text);
        cursor: pointer;
        text-decoration: none;
    }

    .admin-row-actions__item:hover {
        background: color-mix(in srgb, var(--eca-primary) 8%, transparent);
    }

    .admin-row-actions__item--danger {
        color: #b91c1c;
    }

    .admin-row-actions__item--danger:hover {
        background: color-mix(in srgb, #ef4444 10%, transparent);
    }

    .admin-empty {
        @apply py-8 text-center;
        color: var(--eca-text-muted);
    }

    .admin-topbar__user {
        @apply text-sm;
        color: var(--eca-text-muted);
    }

    .admin-topbar-account {
        position: relative;
        flex-shrink: 0;
    }

    .admin-topbar-account__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        border-radius: 999px;
    }

    .admin-topbar-account__btn:focus-visible {
        outline: 2px solid var(--eca-primary);
        outline-offset: 2px;
    }

    .admin-topbar-account__avatar {
        display: inline-flex;
        width: 1.75rem;
        height: 1.75rem;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 999px;
        font-size: 0.65rem;
        font-weight: 700;
        line-height: 1;
        background: var(--eca-category-hover-bg, var(--eca-border));
        color: var(--eca-text);
        box-shadow: inset 0 0 0 1px var(--eca-border);
    }

    .admin-topbar-account__avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .admin-topbar-account__menu {
        position: absolute;
        top: calc(100% + 0.45rem);
        inset-inline-end: 0;
        z-index: 40;
        width: 12.5rem;
        padding: 0.5rem 0.15rem 0.25rem;
        border-radius: 0.85rem;
        border: 1px solid var(--eca-border);
        background: var(--eca-card);
        box-shadow: 0 14px 30px -16px rgba(15, 23, 42, 0.35);
    }

    .admin-topbar-account__meta {
        padding: 0.15rem 0.75rem 0.55rem;
        border-bottom: 1px solid var(--eca-border);
    }

    .admin-topbar-account__name {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--eca-text);
    }

    .admin-topbar-account__role {
        margin-top: 0.1rem;
        font-size: 0.65rem;
        color: var(--eca-text-muted);
    }

    .admin-topbar-account__logout {
        display: block;
        width: 100%;
        margin-top: 0.2rem;
        padding: 0.45rem 0.75rem;
        border: 0;
        background: transparent;
        text-align: start;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--eca-text-muted);
        cursor: pointer;
        border-radius: 0.5rem;
    }

    .admin-topbar-account__logout:hover {
        color: var(--eca-accent);
        background: color-mix(in srgb, var(--eca-accent) 8%, transparent);
    }

    .admin-complaint-desk {
        @apply mx-auto flex w-full flex-col gap-5;
    }

    .admin-complaint-desk__card {
        @apply w-full;
    }

    .admin-complaint-thread {
        @apply rounded-2xl p-4 sm:p-5;
        background: var(--eca-repair-bg, var(--eca-card));
        border: 1px solid var(--eca-repair-border, var(--eca-border));
        color: var(--eca-repair-text, var(--eca-text));
        box-shadow: var(--eca-repair-shadow, var(--eca-shadow-card));
    }

    .admin-complaint-thread__head {
        @apply mb-4 flex flex-wrap items-start justify-between gap-3;
    }

    .admin-complaint-thread__title {
        @apply text-base font-bold;
        color: var(--eca-repair-text, var(--eca-text));
    }

    .admin-complaint-thread__subtitle {
        @apply mt-1 text-xs font-semibold;
        color: var(--eca-repair-text-muted, var(--eca-text-muted));
    }

    .admin-complaint-thread__chips {
        @apply flex flex-wrap gap-1.5;
    }

    .admin-complaint-thread__chip {
        @apply inline-flex max-w-full items-center rounded-full px-2.5 py-1 text-[11px] font-semibold;
        border: 1px solid var(--eca-repair-border, var(--eca-border));
        background: var(
            --eca-repair-section-bg,
            color-mix(in srgb, var(--eca-card) 88%, transparent)
        );
        color: var(--eca-repair-text, var(--eca-text));
    }

    .admin-complaint-thread__chip--state {
        border-color: color-mix(
            in srgb,
            var(--eca-warning) 35%,
            var(--eca-repair-border, var(--eca-border))
        );
        background: color-mix(
            in srgb,
            var(--eca-warning) 12%,
            var(--eca-repair-bg, var(--eca-card))
        );
    }

    .admin-complaint-thread__list {
        @apply max-h-[28rem] overflow-y-auto pe-1;
    }

    .admin-complaint-thread__media {
        @apply mt-1 max-h-64 w-full rounded-xl object-contain;
        background: color-mix(
            in srgb,
            var(--eca-repair-section-bg) 80%,
            transparent
        );
    }

    .admin-complaint-thread__composer {
        @apply mt-5 border-t pt-4;
        border-color: var(--eca-repair-border, var(--eca-border));
    }

    .admin-complaint-thread__form {
        @apply flex flex-col gap-3 sm:flex-row sm:items-end;
    }

    .admin-complaint-thread .eca-auth-modal__input {
        background: var(--eca-repair-input-bg, var(--eca-card));
        border-color: var(--eca-repair-input-border, var(--eca-border));
        color: var(--eca-repair-text, var(--eca-text));
    }

    .admin-complaint-thread .eca-request-thread__bubble {
        background: var(--eca-repair-section-bg, var(--eca-card));
        border-color: var(--eca-repair-border, var(--eca-border));
        color: var(--eca-repair-text, var(--eca-text));
    }

    .admin-complaint-thread
        .eca-request-thread__row--user
        .eca-request-thread__bubble {
        background: color-mix(
            in srgb,
            var(--eca-accent) 16%,
            var(--eca-repair-bg, var(--eca-card))
        );
    }

    .admin-complaint-thread
        .eca-request-thread__row--agent
        .eca-request-thread__bubble {
        background: color-mix(
            in srgb,
            var(--eca-success) 16%,
            var(--eca-repair-bg, var(--eca-card))
        );
    }

    .admin-complaint-thread__history {
        @apply mt-4 overflow-hidden rounded-2xl border text-xs;
        border-color: var(--eca-border);
        background: color-mix(
            in srgb,
            var(--eca-card) 88%,
            var(--eca-bg, transparent)
        );
        color: var(--eca-repair-text-muted, var(--eca-text-muted));
    }

    .admin-complaint-thread__history-summary {
        @apply flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-3 font-semibold;
        color: var(--eca-text);
    }

    .admin-complaint-thread__history-summary::-webkit-details-marker {
        display: none;
    }

    .admin-complaint-thread__history-summary-main {
        @apply inline-flex min-w-0 items-center gap-2;
    }

    .admin-complaint-thread__history-icon {
        @apply inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[11px];
        background: color-mix(in srgb, var(--eca-accent) 14%, transparent);
        color: var(--eca-accent);
    }

    .admin-complaint-thread__history-count {
        @apply shrink-0 rounded-full px-2.5 py-0.5 text-[11px] font-bold;
        background: color-mix(in srgb, var(--eca-border) 55%, transparent);
        color: var(--eca-text-muted);
    }

    .admin-complaint-thread__history-list {
        @apply m-0 list-none space-y-2 border-t px-3 py-3;
        border-color: var(--eca-border);
    }

    .admin-complaint-thread__history-item {
        @apply flex items-start gap-3 rounded-xl border px-3 py-2.5;
        border-color: var(--eca-border);
        background: var(--eca-card);
    }

    .admin-complaint-thread__history-step {
        @apply mt-0.5 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[11px] font-bold;
        background: color-mix(in srgb, var(--eca-accent) 12%, transparent);
        color: var(--eca-accent);
    }

    .admin-complaint-thread__history-body {
        @apply min-w-0 flex-1 space-y-1.5;
    }

    .admin-complaint-thread__history-flow {
        @apply flex flex-wrap items-center gap-1.5 text-[12px] font-semibold;
        color: var(--eca-text);
    }

    .admin-complaint-thread__history-state {
        @apply max-w-full break-words rounded-md px-2 py-0.5;
        background: color-mix(in srgb, var(--eca-border) 40%, transparent);
    }

    .admin-complaint-thread__history-state--to {
        background: color-mix(in srgb, var(--eca-accent) 14%, transparent);
        color: var(--eca-accent);
    }

    .admin-complaint-thread__history-arrow {
        @apply opacity-50;
    }

    .admin-complaint-thread__history-meta {
        @apply flex flex-wrap items-center gap-1.5;
    }

    .admin-complaint-thread__history-pill {
        @apply max-w-full break-words rounded-full px-2 py-0.5 text-[10px] font-semibold;
        background: color-mix(in srgb, var(--eca-accent) 10%, transparent);
        color: var(--eca-text);
    }

    .admin-complaint-thread__history-pill--muted {
        background: color-mix(in srgb, var(--eca-border) 50%, transparent);
        color: var(--eca-text-muted);
    }

    .admin-complaint-thread__history-time {
        @apply text-[10px] font-medium;
        color: var(--eca-text-muted);
        direction: ltr;
    }

    .admin-sidebar {
        @apply fixed inset-y-0 z-40 flex flex-col overflow-hidden;
        inset-inline-start: 0;
        width: 16rem;
        height: 100%;
        height: 100dvh;
        background: var(--eca-card);
        color: var(--eca-text);
        border-inline-end: 1px solid var(--eca-border);
        text-align: start;
        transition:
            transform 0.2s ease,
            width 0.2s ease;
    }

    .admin-sidebar__inner {
        @apply flex min-h-0 flex-1 flex-col gap-3 overflow-hidden   py-6;
    }

    .admin-sidebar-workspace {
        @apply flex shrink-0 items-start gap-1 pb-4;
        border-bottom: 1px solid var(--eca-border);
        padding: 0 10px;
    }

    .admin-sidebar-workspace__title {
        @apply truncate text-sm font-bold;
        color: var(--eca-text);
    }

    .admin-sidebar-workspace__meta {
        @apply mt-0.5 flex flex-wrap items-center gap-1 text-[11px] leading-tight;
        color: var(--eca-text-muted);
    }

    .admin-sidebar-close {
        @apply ms-auto shrink-0;
        color: var(--eca-text-muted);
    }

    .admin-sidebar-close:hover {
        color: var(--eca-text);
    }

    .admin-sidebar-nav {
        @apply flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto overscroll-contain text-sm;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: var(--eca-scrollbar-thumb) transparent;
    }

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

    .admin-sidebar-nav::-webkit-scrollbar-track {
        margin-block: 0.35rem;
        background: transparent;
    }

    .admin-sidebar-nav::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: var(--eca-scrollbar-thumb);
    }

    .admin-sidebar-nav::-webkit-scrollbar-thumb:hover {
        background: var(--eca-scrollbar-thumb-hover);
    }

    .admin-sidebar-group:not(:has(.admin-sidebar-link)):not(:has(.admin-sidebar-tree)) {
        display: none;
    }

    .admin-sidebar-group__title {
        @apply px-3 text-[11px] font-bold tracking-wide;
        color: var(--eca-text-muted);
    }

    .admin-sidebar-group__items {
        @apply mt-1 flex flex-col gap-1;
    }

    .admin-sidebar-tree {
        @apply flex flex-col gap-0.5;
    }

    .admin-sidebar-tree__toggle {
        @apply flex w-full items-center gap-2 rounded-lg px-3 py-2 text-start text-sm transition;
        color: var(--eca-text);
        font-weight: 700;
        line-height: 1.25;
        overflow-wrap: anywhere;
        background: transparent;
        border: 0;
        cursor: pointer;
    }

    .admin-sidebar-tree__toggle:hover {
        background: var(--eca-category-hover-bg);
        color: var(--eca-accent);
    }

    .admin-sidebar-tree__toggle--active,
    .admin-sidebar-tree__toggle--open.admin-sidebar-tree__toggle--active {
        background: color-mix(in srgb, var(--eca-category-active-bg) 70%, transparent);
        color: var(--eca-accent);
    }

    .admin-sidebar-tree__chevron {
        @apply ms-auto shrink-0 text-[10px] leading-none transition-transform;
        color: var(--eca-text-muted);
    }

    .admin-sidebar-tree__toggle--open .admin-sidebar-tree__chevron {
        transform: rotate(180deg);
    }

    .admin-sidebar-tree__children {
        @apply ms-3 flex flex-col gap-0.5 border-s ps-2;
        border-color: color-mix(in srgb, var(--eca-border) 80%, transparent);
    }

    .admin-sidebar-tree__children .admin-sidebar-link {
        @apply py-1.5 text-[13px] font-semibold;
    }

    .admin-sidebar-link {
        @apply flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition;
        color: var(--eca-text);
        font-weight: 700;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .admin-sidebar-link:hover {
        background: var(--eca-category-hover-bg);
        color: var(--eca-accent);
    }

    .admin-sidebar-link-active {
        background: var(--eca-category-active-bg);
        color: var(--eca-accent);
    }

    .admin-sidebar-link-active:hover {
        background: var(--eca-category-active-bg);
        color: var(--eca-accent);
    }

    .admin-sidebar-link__icon {
        @apply shrink-0;
        color: inherit;
    }

    .admin-sidebar-badge {
        @apply ms-auto inline-flex min-w-[1.25rem] items-center justify-center rounded-full bg-brand-warmth px-1.5 py-0.5 text-[11px] font-bold text-white;
    }

    .admin-main {
        min-height: 100vh;
        transition: margin-inline-start 0.2s ease;
    }

    @media (min-width: 1024px) {
        .admin-sidebar {
            width: var(--admin-sidebar-width);
            transform: none;
        }

        .admin-main {
            margin-inline-start: var(--admin-sidebar-width);
        }

        html[data-admin-sidebar="collapsed"] {
            --admin-sidebar-width: 4.5rem;
        }

        html[data-admin-sidebar="collapsed"] .admin-sidebar-workspace__text,
        html[data-admin-sidebar="collapsed"] .admin-sidebar-group__title,
        html[data-admin-sidebar="collapsed"] .admin-sidebar-label,
        html[data-admin-sidebar="collapsed"] .admin-sidebar-badge,
        html[data-admin-sidebar="collapsed"] .admin-sidebar-tree__chevron,
        html[data-admin-sidebar="collapsed"] .admin-sidebar-tree__children {
            @apply sr-only;
        }

        html[data-admin-sidebar="collapsed"] .admin-sidebar-link,
        html[data-admin-sidebar="collapsed"] .admin-sidebar-tree__toggle {
            @apply justify-center px-2;
        }

        html[data-admin-sidebar="collapsed"] .admin-sidebar-workspace {
            @apply justify-center;
        }
    }

    @media (max-width: 1023px) {
        .admin-main {
            margin-inline-start: 0;
        }
    }

    .admin-card {
        @apply rounded-2xl border p-4 shadow-card sm:p-6;
        border-color: var(--eca-border);
        background: var(--eca-card);
        color: var(--eca-text);
    }

    .admin-summary-strip {
        @apply grid grid-cols-4 gap-3;
    }

    .admin-filter-toggle {
        @apply inline-flex items-center justify-center gap-2 rounded-xl border px-4 py-2 text-sm font-semibold shadow-sm transition;
        border-color: color-mix(in srgb, var(--eca-primary) 35%, var(--eca-border));
        background: var(--eca-card);
        color: var(--eca-text);
    }

    .admin-filter-toggle:hover {
        border-color: var(--eca-primary);
        background: color-mix(in srgb, var(--eca-primary) 8%, var(--eca-card));
    }

    .admin-filter-toggle.is-active {
        border-color: var(--eca-primary);
        background: color-mix(in srgb, var(--eca-primary) 12%, var(--eca-card));
        color: var(--eca-primary);
    }

    .admin-filter-panel[x-cloak] {
        display: none !important;
    }

    .admin-filter-panel__card {
        @apply p-4 sm:p-5;
    }

    .admin-filter-form {
        @apply w-full;
    }

    .admin-card.admin-resource-index {
        @apply flex flex-col gap-0 p-0 sm:p-0;
        overflow: hidden;
    }

    .admin-table-wrap {
        @apply overflow-x-auto rounded-xl border;
        border-color: var(--eca-border);
    }

    .admin-table {
        @apply min-w-full divide-y divide-slate-200 text-sm;
    }

    @media (max-width: 767px) {
        .admin-table-wrap--responsive .admin-table thead {
            display: none;
        }

        .admin-table-wrap--responsive .admin-table tbody tr {
            @apply mb-4 block rounded-xl border border-slate-200 bg-white p-4 shadow-sm;
        }

        .admin-table-wrap--responsive .admin-table tbody td {
            @apply flex items-center justify-between gap-3 border-0 px-0 py-2 text-sm;
        }

        .admin-table-wrap--responsive .admin-table tbody td::before {
            content: attr(data-label);
            @apply text-xs font-semibold uppercase text-slate-500;
        }
    }

    .admin-badge {
        @apply inline-flex rounded-full px-2.5 py-0.5 text-xs font-semibold;
        background: color-mix(
            in srgb,
            var(--eca-card) 80%,
            var(--eca-primary) 20%
        );
        color: var(--eca-text);
    }

    .admin-table th {
        @apply px-4 py-3 text-start text-xs font-semibold uppercase tracking-wide;
        background: color-mix(
            in srgb,
            var(--eca-card) 88%,
            var(--eca-primary) 12%
        );
        color: var(--eca-text-muted);
    }

    .admin-table td {
        @apply px-4 py-3 align-middle;
        color: var(--eca-text);
    }

    .admin-input {
        @apply mt-1 block min-h-11 w-full rounded-xl border px-3 py-2.5 text-sm shadow-sm;
        border-color: var(--eca-border);
        background: color-mix(
            in srgb,
            var(--eca-surface, var(--eca-bg)) 88%,
            var(--eca-card)
        );
        color: var(--eca-text);
    }

    textarea.admin-input.admin-input--prose-sm {
        min-height: 8rem;
        resize: vertical;
        field-sizing: content;
        max-height: 50vh;
    }

    textarea.admin-input.admin-input--prose {
        min-height: 16rem;
        resize: vertical;
        field-sizing: content;
        max-height: 70vh;
    }

    .admin-tag-input {
        @apply mt-1 rounded-xl border px-2 py-2;
        border-color: var(--eca-border);
        background: color-mix(
            in srgb,
            var(--eca-surface, var(--eca-bg)) 88%,
            var(--eca-card)
        );
    }

    .admin-tag-input__chips {
        @apply flex flex-wrap gap-1.5;
    }

    .admin-tag-chip {
        @apply inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-semibold;
        background: color-mix(in srgb, var(--eca-accent) 12%, var(--eca-card));
        color: var(--eca-text);
        border: 1px solid
            color-mix(in srgb, var(--eca-accent) 22%, var(--eca-border));
    }

    .admin-tag-chip button {
        @apply leading-none opacity-70 hover:opacity-100;
    }

    .admin-tag-input__field {
        @apply mt-1 w-full border-0 bg-transparent p-1.5 text-sm outline-none;
        color: var(--eca-text);
    }

    .admin-input:focus {
        border-color: var(--eca-accent);
        outline: none;
        box-shadow: 0 0 0 3px
            color-mix(in srgb, var(--eca-accent) 22%, transparent);
    }

    .admin-input::placeholder {
        color: var(--eca-text-muted);
        opacity: 0.85;
    }

    select.admin-input {
        background-image: none;
    }

    .admin-option-tile {
        @apply flex items-start justify-between gap-3 rounded-2xl border px-4 py-3;
        border-color: var(--eca-border);
        background: color-mix(
            in srgb,
            var(--eca-surface, var(--eca-bg)) 70%,
            var(--eca-card)
        );
        color: var(--eca-text);
    }

    .admin-option-tile:hover {
        border-color: color-mix(
            in srgb,
            var(--eca-accent) 35%,
            var(--eca-border)
        );
        background: color-mix(in srgb, var(--eca-accent) 6%, var(--eca-card));
    }

    .admin-repeater-row {
        @apply grid gap-3 rounded-2xl border p-3 md:grid-cols-12;
        border-color: var(--eca-border);
        background: color-mix(
            in srgb,
            var(--eca-surface, var(--eca-bg)) 72%,
            var(--eca-card)
        );
    }

    .admin-ghost-btn {
        @apply rounded-xl border px-3 py-1.5 text-sm font-medium transition;
        border-color: var(--eca-border);
        background: color-mix(
            in srgb,
            var(--eca-surface, var(--eca-bg)) 80%,
            var(--eca-card)
        );
        color: var(--eca-text);
    }

    .admin-ghost-btn:hover {
        background: color-mix(in srgb, var(--eca-accent) 8%, var(--eca-card));
        border-color: color-mix(
            in srgb,
            var(--eca-accent) 30%,
            var(--eca-border)
        );
    }

    .admin-danger-btn {
        @apply w-full rounded-xl border px-2 py-2 text-sm transition;
        border-color: color-mix(in srgb, #e11d48 35%, var(--eca-border));
        background: color-mix(in srgb, #e11d48 8%, var(--eca-card));
        color: #e11d48;
    }

    .admin-danger-btn:hover {
        background: color-mix(in srgb, #e11d48 16%, var(--eca-card));
    }

    .admin-icon-picker {
        @apply grid gap-2;
        grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    }

    .admin-icon-picker__item {
        @apply flex flex-col items-center gap-2 rounded-2xl border px-3 py-3 text-center transition;
        border-color: var(--eca-border);
        background: color-mix(
            in srgb,
            var(--eca-surface, var(--eca-bg)) 72%,
            var(--eca-card)
        );
        color: var(--eca-text);
    }

    .admin-icon-picker__item:hover {
        border-color: color-mix(
            in srgb,
            var(--eca-accent) 40%,
            var(--eca-border)
        );
        background: color-mix(in srgb, var(--eca-accent) 8%, var(--eca-card));
    }

    .admin-icon-picker__item.is-selected {
        border-color: var(--eca-accent);
        background: color-mix(in srgb, var(--eca-accent) 14%, var(--eca-card));
        box-shadow: 0 0 0 3px
            color-mix(in srgb, var(--eca-accent) 18%, transparent);
    }

    .admin-icon-picker__glyph {
        @apply inline-flex h-10 w-10 items-center justify-center rounded-xl;
        background: color-mix(in srgb, var(--eca-accent) 12%, transparent);
        color: var(--eca-accent);
    }

    .admin-icon-picker__item.is-selected .admin-icon-picker__glyph {
        background: color-mix(in srgb, var(--eca-accent) 22%, transparent);
    }

    .admin-icon-picker__label {
        @apply text-[11px] font-semibold leading-snug;
        color: var(--eca-text);
    }

    .admin-icon-picker__preview {
        @apply flex items-center gap-3 rounded-2xl border px-3 py-3;
        border-color: var(--eca-border);
        background: color-mix(
            in srgb,
            var(--eca-surface, var(--eca-bg)) 65%,
            var(--eca-card)
        );
    }

    .admin-icon-picker__preview-glyph {
        @apply inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-xl;
        background: color-mix(in srgb, var(--eca-accent) 14%, transparent);
        color: var(--eca-accent);
    }

    .admin-icon-picker__preview-title {
        @apply text-xs font-semibold;
        color: var(--eca-text-muted);
    }

    .admin-icon-picker__preview-name {
        @apply mt-0.5 text-sm font-bold;
        color: var(--eca-text);
    }

    .eca-password-field + .eca-password-field,
    .admin-label + .eca-password-field {
        @apply mt-1;
    }

    .admin-label {
        @apply text-xs font-semibold uppercase tracking-wide text-slate-500;
    }

    .admin-jdp {
        position: relative;
        width: 100%;
    }

    .admin-jdp__trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        width: 100%;
        text-align: start;
        cursor: pointer;
    }

    .admin-jdp__value {
        flex: 1;
        min-width: 0;
        font-variant-numeric: tabular-nums;
        color: var(--eca-text);
    }

    .admin-jdp__value.is-placeholder {
        color: var(--eca-text-muted);
    }

    .admin-jdp__icon {
        display: inline-flex;
        color: var(--eca-text-muted);
        flex-shrink: 0;
    }

    .admin-jdp__layer {
        position: relative;
        z-index: 90;
    }

    .admin-jdp__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: color-mix(in srgb, var(--eca-text) 32%, transparent);
    }

    .admin-jdp__panel {
        position: fixed;
        z-index: 91;
        box-sizing: border-box;
        padding: 0.85rem;
        border-radius: 1.25rem;
        border: 1px solid var(--eca-border);
        background: var(--eca-card);
        color: var(--eca-text);
        box-shadow: 0 22px 50px -18px rgba(15, 23, 42, 0.35);
    }

    .admin-jdp__panel.is-sheet {
        inset-inline: 0.75rem;
        bottom: 0.75rem;
        top: auto;
        width: auto;
        max-height: min(82vh, 36rem);
        overflow: auto;
    }

    .admin-jdp__anim {
        transition:
            opacity 150ms ease,
            transform 150ms ease;
    }

    .admin-jdp__anim-from {
        opacity: 0;
        transform: translateY(8px);
    }

    .admin-jdp__anim-to {
        opacity: 1;
        transform: translateY(0);
    }

    .admin-jdp__nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .admin-jdp__nav-btn {
        display: inline-flex;
        width: 2.25rem;
        height: 2.25rem;
        align-items: center;
        justify-content: center;
        border-radius: 0.85rem;
        border: 1px solid var(--eca-border);
        background: color-mix(
            in srgb,
            var(--eca-card) 88%,
            var(--eca-primary) 12%
        );
        color: var(--eca-text);
        font-size: 1.15rem;
        line-height: 1;
    }

    .admin-jdp__nav-btn:hover {
        border-color: var(--eca-primary);
        color: var(--eca-primary);
    }

    .admin-jdp__nav-selects {
        display: flex;
        min-width: 0;
        flex: 1;
        gap: 0.4rem;
    }

    .admin-jdp__select {
        min-width: 0;
        flex: 1;
        height: 2.25rem;
        border-radius: 0.85rem;
        border: 1px solid var(--eca-border);
        background: var(--eca-card);
        color: var(--eca-text);
        font-size: 0.82rem;
        font-weight: 700;
        padding-inline: 0.4rem;
    }

    .admin-jdp__week,
    .admin-jdp__grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 0.2rem;
    }

    .admin-jdp__week {
        margin-bottom: 0.35rem;
    }

    .admin-jdp__week span {
        display: flex;
        height: 1.75rem;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--eca-text-muted);
    }

    .admin-jdp__day {
        aspect-ratio: 1;
        min-height: 2.15rem;
        border-radius: 0.8rem;
        border: 0;
        background: transparent;
        color: var(--eca-text);
        font-size: 0.85rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

    .admin-jdp__day:not(.is-empty):hover {
        background: color-mix(in srgb, var(--eca-accent) 12%, transparent);
    }

    .admin-jdp__day.is-empty {
        visibility: hidden;
        pointer-events: none;
    }

    .admin-jdp__day.is-friday:not(.is-selected) {
        color: var(--eca-accent);
    }

    .admin-jdp__day.is-today:not(.is-selected) {
        box-shadow: inset 0 0 0 1.5px var(--eca-primary);
        color: var(--eca-primary);
    }

    .admin-jdp__day.is-selected {
        background: var(--eca-accent);
        color: #fff;
        box-shadow: 0 8px 18px -10px var(--eca-accent);
    }

    .admin-jdp__time {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: end;
        gap: 0.5rem;
        margin-top: 0.85rem;
        padding-top: 0.85rem;
        border-top: 1px solid var(--eca-border);
    }

    .admin-jdp__time-field {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 0.3rem;
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--eca-text-muted);
    }

    .admin-jdp__time-field select {
        height: 2.4rem;
        border-radius: 0.85rem;
        border: 1px solid var(--eca-border);
        background: var(--eca-card);
        color: var(--eca-text);
        font-size: 0.9rem;
        font-weight: 700;
        padding-inline: 0.5rem;
    }

    .admin-jdp__time-sep {
        padding-bottom: 0.55rem;
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--eca-text-muted);
    }

    .admin-jdp__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-top: 0.85rem;
    }

    .admin-jdp__chip {
        min-height: 2.1rem;
        padding: 0 0.8rem;
        border-radius: 999px;
        border: 1px solid var(--eca-border);
        background: color-mix(
            in srgb,
            var(--eca-card) 86%,
            var(--eca-primary) 14%
        );
        color: var(--eca-text);
        font-size: 0.75rem;
        font-weight: 700;
    }

    .admin-jdp__chip--primary {
        margin-inline-start: auto;
        border-color: var(--eca-accent);
        background: var(--eca-accent);
        color: #fff;
    }

    @media (max-width: 640px) {
        .admin-jdp__backdrop {
            background: color-mix(in srgb, var(--eca-text) 48%, transparent);
        }

        .admin-jdp__day {
            min-height: 2.5rem;
        }
    }

    .admin-media-dropzone {
        @apply flex cursor-pointer flex-col items-center justify-center rounded-2xl border-2 border-dashed border-slate-300 bg-slate-50/80 px-4 py-10 text-center transition hover:border-brand-accent hover:bg-brand-accent/5;
    }

    .admin-media-dropzone.is-dragover {
        @apply border-brand-accent bg-brand-accent/10;
    }

    .admin-media-grid {
        @apply grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4;
    }

    .admin-media-card {
        @apply relative aspect-square overflow-hidden rounded-xl border border-slate-200 bg-slate-100 shadow-sm;
    }

    .admin-media-card__media {
        @apply h-full w-full object-cover;
    }

    .admin-media-card__remove {
        @apply absolute end-1.5 top-1.5 z-10 inline-flex h-8 w-8 items-center justify-center rounded-lg bg-slate-900/85 text-sm font-bold text-white shadow transition hover:bg-red-600;
    }

    .btn {
        @apply inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-semibold transition;
    }

    .btn-primary {
        @apply bg-brand-accent text-white hover:bg-brand-accentHover;
    }

    .btn-muted {
        @apply border border-slate-300 bg-white text-slate-700 hover:bg-slate-50;
    }

    .btn-danger {
        @apply bg-red-600 text-white hover:bg-red-700;
    }

    .admin-btn-primary {
        @apply inline-flex items-center justify-center rounded-xl bg-eca-success px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-600;
    }

    .admin-btn-danger {
        @apply inline-flex items-center justify-center rounded-xl bg-eca-danger px-4 py-2 text-sm font-semibold text-white hover:bg-red-700;
    }

    .lead-settings-chip {
        @apply inline-flex max-w-full items-center gap-1.5 rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 text-xs font-medium;
    }

    .lead-settings-chip-remove {
        @apply -me-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-slate-400 transition hover:bg-red-100 hover:text-red-600;
    }

    .admin-btn-muted {
        @apply inline-flex items-center justify-center rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50;
    }

    .admin-actions {
        @apply flex flex-wrap items-center justify-end gap-2;
    }

    .admin-btn-action {
        @apply inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-semibold shadow-sm transition duration-150 focus:outline-none focus:ring-2 focus:ring-offset-1 min-w-[90px];
    }
    .admin-btn-action-view {
        @apply border-slate-200 bg-white text-slate-700 hover:border-brand-navy hover:bg-brand-navy hover:text-white focus:ring-brand-navy;
    }

    .admin-btn-action-edit {
        @apply border-blue-200 bg-blue-50 text-blue-700 hover:border-brand-accent hover:bg-brand-accent hover:text-white focus:ring-brand-accent;
    }

    .admin-btn-action-delete {
        @apply border-red-200 bg-red-50 text-red-700 hover:border-red-600 hover:bg-red-600 hover:text-white focus:ring-red-500;
    }

    .admin-btn-action-toggle {
        @apply border-amber-200 bg-amber-50 text-amber-900 hover:border-amber-500 hover:bg-amber-500 hover:text-white focus:ring-amber-400;
    }

    .admin-table td.admin-table-actions {
        @apply w-px whitespace-nowrap text-end;
    }

    .admin-category-tree__toggle-col {
        width: 2.75rem;
        padding-inline: 0.5rem;
    }

    .admin-category-tree__toggle {
        @apply inline-flex h-9 w-9 items-center justify-center rounded-xl border transition;
        border-color: var(--eca-border);
        background: color-mix(in srgb, var(--eca-card) 88%, var(--eca-primary) 12%);
        color: var(--eca-text);
    }

    .admin-category-tree__toggle:hover {
        border-color: color-mix(in srgb, var(--eca-accent) 40%, var(--eca-border));
        background: color-mix(in srgb, var(--eca-accent) 12%, var(--eca-card));
    }

    .admin-category-tree__toggle--empty {
        visibility: hidden;
        pointer-events: none;
    }

    .admin-category-tree__chevron {
        @apply inline-flex transition-transform duration-200;
        transform: rotate(-90deg);
    }

    .admin-category-tree__chevron--open {
        transform: rotate(0deg);
    }

    [dir='ltr'] .admin-category-tree__chevron {
        transform: rotate(-90deg);
    }

    [dir='ltr'] .admin-category-tree__chevron--open {
        transform: rotate(0deg);
    }

    .admin-category-tree__row--root > td {
        background: color-mix(in srgb, var(--eca-card) 92%, var(--eca-primary) 8%);
        font-weight: 600;
    }

    .admin-category-tree__row--clickable {
        cursor: pointer;
    }

    .admin-category-tree__row--clickable:hover > td {
        background: color-mix(in srgb, var(--eca-accent) 10%, var(--eca-card));
    }

    .admin-category-tree__row--child > td {
        background: color-mix(
            in srgb,
            var(--eca-surface, var(--eca-bg)) 70%,
            var(--eca-card)
        );
    }

    .admin-category-tree__name {
        @apply flex flex-wrap items-center gap-2;
        padding-inline-start: calc(var(--category-depth, 0) * 0.75rem);
    }

    .admin-category-tree__badge {
        @apply inline-flex rounded-full px-2 py-0.5 text-[11px] font-semibold;
        background: color-mix(in srgb, var(--eca-accent) 14%, var(--eca-card));
        color: var(--eca-text-muted);
        border: 1px solid
            color-mix(in srgb, var(--eca-accent) 22%, var(--eca-border));
    }

    .admin-category-tree__children-cell {
        padding: 0 !important;
        border-bottom: 0;
    }

    .admin-category-tree__children {
        margin: 0.35rem 0.75rem 0.85rem;
        border: 1px dashed
            color-mix(in srgb, var(--eca-accent) 28%, var(--eca-border));
        border-radius: 0.9rem;
        background: color-mix(
            in srgb,
            var(--eca-surface, var(--eca-bg)) 82%,
            var(--eca-card)
        );
        overflow: hidden;
    }

    .admin-category-tree__nested {
        @apply min-w-full divide-y divide-slate-200 text-sm;
        width: 100%;
    }

    .admin-category-tree__nested .admin-category-tree__row--child > td {
        font-weight: 400;
    }

    .admin-category-tree__nested .admin-category-tree__toggle-col {
        width: 2.75rem;
    }

    @media (max-width: 767px) {
        .admin-table-wrap--responsive
            .admin-category-tree
            .admin-category-tree__children-cell {
            display: block;
            padding: 0 !important;
        }

        .admin-table-wrap--responsive
            .admin-category-tree
            .admin-category-tree__children-cell::before {
            content: none;
        }

        .admin-table-wrap--responsive
            .admin-category-tree
            .admin-category-tree__toggle-col::before {
            content: none;
        }

        .admin-table-wrap--responsive .admin-category-tree__children {
            margin: 0.5rem 0 0;
        }

        .admin-table-wrap--responsive
            .admin-category-tree__nested
            .admin-category-tree__row {
            @apply mb-3 block rounded-xl border border-slate-200 bg-white p-3 shadow-sm;
        }
    }
}

html.layout-mobile {
    .site-section-sticky-heading,
    .site-category-tabs-shell,
    .site-mobile-bottom-nav-shell,
    .eca-account-sticky-top {
        backdrop-filter: blur(20px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-skeleton::after {
        animation: none;
    }

    .eca-smart-card:hover {
        transform: none;
    }

    .site-progressive-media img,
    .site-motion [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto;
    }
}

@keyframes site-skeleton-shimmer {
    100% {
        transform: translate3d(100%, 0, 0);
    }
}