:root {
    color-scheme: dark;
    --bg: #11161d;
    --bg-soft: rgba(20, 26, 34, 0.8);
    --panel: rgba(24, 30, 39, 0.88);
    --panel-strong: rgba(31, 39, 50, 0.96);
    --panel-muted: rgba(27, 34, 44, 0.94);
    --border: rgba(181, 191, 202, 0.16);
    --border-strong: rgba(93, 179, 184, 0.34);
    --text: #f4f1ec;
    --text-soft: #a6acb5;
    --accent: #5db3b8;
    --accent-strong: #84cfd0;
    --accent-contrast: #0e161c;
    --brand-signal: #d2334d;
    --brand-signal-strong: #e45a72;
    --error-bg: rgba(184, 63, 63, 0.12);
    --error-border: rgba(184, 63, 63, 0.28);
    --error-text: #ff8f8f;
    --error-text-strong: #ffb6bc;
    --error-panel-bg: rgba(120, 10, 10, 0.18);
    --error-accent: #d9627d;
    --overlay-backdrop: rgba(10, 12, 16, 0.62);
    --modal-backdrop: rgba(12, 14, 19, 0.74);
    --shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    --sort-menu-bg: #1b212a;
    --skeleton-base: rgba(255, 255, 255, 0.09);
    --skeleton-shine: rgba(255, 255, 255, 0.2);
    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shell: calc(100% - 32px);
    --workspace-gap: 18px;
    --sticky-top: 14px;
    --search-panel-sticky-height: 86px;
    --surface-blur: blur(16px);
    --search-blur: blur(18px);
    --drawer-blur: blur(18px);
    --modal-backdrop-blur: blur(10px);
    --glass-surface: color-mix(in srgb, var(--panel) 84%, transparent);
    --glass-surface-strong: color-mix(in srgb, var(--panel-strong) 80%, transparent);
    --glass-control-surface: color-mix(in srgb, var(--panel) 78%, transparent);
    --overlay-surface: var(--glass-surface);
    --overlay-surface-strong: var(--glass-surface-strong);
    --overlay-control-surface: var(--glass-control-surface);
    --overlay-border: var(--border);
    --overlay-shadow: var(--shadow);
    --overlay-backdrop-radial: radial-gradient(circle at top, color-mix(in srgb, var(--accent) 18%, transparent), transparent 38%);
    --overlay-radius: 28px;
    --overlay-padding: 16px;
    --overlay-dialog-max-height: calc(100dvh - 32px);
}

html[data-theme='light'] {
    color-scheme: light;
    --bg: #f1ece6;
    --bg-soft: rgba(255, 252, 248, 0.82);
    --panel: rgba(255, 255, 255, 0.8);
    --panel-strong: rgba(255, 255, 255, 0.88);
    --panel-muted: rgba(244, 239, 234, 0.86);
    --border: rgba(78, 84, 94, 0.14);
    --border-strong: rgba(93, 179, 184, 0.28);
    --text: #20242b;
    --text-soft: #757b86;
    --accent: #2e8f95;
    --accent-strong: #55aeb0;
    --accent-contrast: #f7fffd;
    --brand-signal: #d2334d;
    --brand-signal-strong: #e45a72;
    --error-bg: rgba(184, 63, 63, 0.08);
    --error-border: rgba(184, 63, 63, 0.22);
    --error-text: #b84343;
    --error-text-strong: #b84343;
    --error-panel-bg: rgba(184, 63, 63, 0.08);
    --error-accent: #b84343;
    --overlay-backdrop: rgba(32, 36, 43, 0.14);
    --modal-backdrop: rgba(32, 36, 43, 0.24);
    --shadow: 0 18px 42px rgba(32, 36, 43, 0.1);
    --sort-menu-bg: #ffffff;
    --skeleton-base: rgba(32, 36, 43, 0.1);
    --skeleton-shine: rgba(32, 36, 43, 0.18);
}

html[data-transparency='off'] {
    --bg-soft: rgb(10, 19, 31);
    --panel: rgb(11, 20, 33);
    --panel-strong: rgb(17, 30, 47);
    --panel-muted: rgb(14, 24, 38);
    --surface-blur: none;
    --search-blur: none;
    --drawer-blur: none;
    --modal-backdrop-blur: none;
    --glass-surface: var(--panel);
    --glass-surface-strong: var(--panel-strong);
    --glass-control-surface: var(--panel);
    --overlay-surface: var(--glass-surface);
    --overlay-surface-strong: var(--glass-surface-strong);
    --overlay-control-surface: var(--glass-control-surface);
}

html[data-theme='light'][data-transparency='off'] {
    --bg-soft: rgb(255, 252, 247);
    --panel: rgb(255, 255, 255);
    --panel-strong: rgb(255, 255, 255);
    --panel-muted: rgb(246, 242, 235);
}

html[data-transparency='off'] .pro2-search-panel {
    background: var(--panel);
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

html[data-transparency='off'] .pro2-results-toolbar,
html[data-transparency='off'] .pro2-scroll-top-button {
    background: var(--panel-strong);
}

html[data-transparency='off'] .pro2-close-button,
html[data-transparency='off'] .pro2-mobile-close,
html[data-transparency='off'] .pro2-access-modal__close {
    background: var(--panel);
}

html[data-transparency='off'] .pro2-access-modal {
    --pro2-auth-surface: var(--panel-strong);
    --pro2-auth-surface-border: var(--border);
    --pro2-auth-input-bg: var(--panel);
    --pro2-auth-input-border: var(--border);
    --pro2-auth-close-bg: var(--panel);
    --pro2-auth-close-border: var(--border);
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/Manrope-variable.woff2') format('woff2');
}

body {
    background:
        radial-gradient(circle at top left, rgba(93, 179, 184, 0.14), transparent 24%),
        radial-gradient(circle at 24% 0%, rgba(210, 51, 77, 0.08), transparent 18%),
        radial-gradient(circle at 82% 10%, rgba(214, 214, 214, 0.08), transparent 18%),
        linear-gradient(180deg, var(--bg) 0%, #0d1117 100%);
    color: var(--text);
    font-family: 'Manrope', sans-serif;
}

html[data-theme='light'] body {
    background:
        radial-gradient(circle at top left, rgba(93, 179, 184, 0.11), transparent 22%),
        radial-gradient(circle at 26% 0%, rgba(210, 51, 77, 0.07), transparent 18%),
        radial-gradient(circle at 86% 10%, rgba(198, 184, 156, 0.18), transparent 22%),
        radial-gradient(circle at 48% 0%, rgba(255, 255, 255, 0.3), transparent 28%),
        linear-gradient(180deg, var(--bg) 0%, #e7dfd8 100%);
}

html[data-theme='light'] .pro2-access-modal {
    --pro2-auth-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(246, 242, 235, 0.82));
    --pro2-auth-surface-border: rgba(24, 43, 72, 0.1);
    --pro2-auth-muted: var(--text-soft);
    --pro2-auth-input-bg: rgba(255, 255, 255, 0.82);
    --pro2-auth-input-border: rgba(24, 43, 72, 0.12);
    --pro2-auth-input-text: var(--text);
    --pro2-auth-close-bg: rgba(255, 255, 255, 0.74);
    --pro2-auth-close-border: rgba(24, 43, 72, 0.12);
    --pro2-auth-close-text: var(--text);
}

html[data-theme='light'] .pro2-profile-settings-modal {
    --pro2-auth-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(246, 242, 235, 0.82));
    --pro2-auth-surface-border: rgba(24, 43, 72, 0.1);
    --pro2-auth-muted: var(--text-soft);
    --pro2-auth-input-bg: rgba(255, 255, 255, 0.82);
    --pro2-auth-input-border: rgba(24, 43, 72, 0.12);
    --pro2-auth-input-text: var(--text);
    --pro2-auth-close-bg: rgba(255, 255, 255, 0.74);
    --pro2-auth-close-border: rgba(24, 43, 72, 0.12);
    --pro2-auth-close-text: var(--text);
}

html[data-theme='light'][data-transparency='off'] .pro2-access-modal {
    --pro2-auth-surface: var(--panel-strong);
    --pro2-auth-surface-border: var(--border);
    --pro2-auth-muted: var(--text-soft);
    --pro2-auth-input-bg: var(--panel);
    --pro2-auth-input-border: var(--border);
    --pro2-auth-input-text: var(--text);
    --pro2-auth-close-bg: var(--panel);
    --pro2-auth-close-border: var(--border);
    --pro2-auth-close-text: var(--text);
}

html[data-theme='light'][data-transparency='off'] .pro2-profile-settings-modal {
    --pro2-auth-surface: var(--panel-strong);
    --pro2-auth-surface-border: var(--border);
    --pro2-auth-muted: var(--text-soft);
    --pro2-auth-input-bg: var(--panel);
    --pro2-auth-input-border: var(--border);
    --pro2-auth-input-text: var(--text);
    --pro2-auth-close-bg: var(--panel);
    --pro2-auth-close-border: var(--border);
    --pro2-auth-close-text: var(--text);
}

html[data-theme='light'] .pro2-panel,
html[data-theme='light'] .pro2-card,
html[data-theme='light'] .pro2-roadmap,
html[data-theme='light'] .pro2-locked__card,
html[data-theme='light'] .pro2-product-item,
html[data-theme='light'] .pro2-brand-item,
html[data-theme='light'] .pro2-metric,
html[data-theme='light'] .pro2-inline-metrics > div,
html[data-theme='light'] .pro2-status > div {
    border-color: color-mix(in srgb, var(--border) 90%, rgba(255, 255, 255, 0.55));
    box-shadow:
        0 14px 30px rgba(21, 34, 53, 0.07),
        0 2px 8px rgba(21, 34, 53, 0.04);
}

html[data-theme='light'] .pro2-search-panel {
    border-color: color-mix(in srgb, var(--accent) 14%, var(--border));
    background:
        radial-gradient(circle at top left, rgba(210, 51, 77, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08)),
        var(--glass-surface);
    box-shadow:
        0 16px 34px rgba(32, 36, 43, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

html[data-theme='light'] .pro2-sidebar,
html[data-theme='light'] .pro2-context-sidebar,
html[data-theme='light'] .pro2-results-toolbar {
    box-shadow:
        0 16px 34px rgba(32, 36, 43, 0.08),
        0 2px 10px rgba(32, 36, 43, 0.03);
}

html[data-theme='light'] .pro2-topbar__brand-rail {
    border-color: color-mix(in srgb, var(--border) 82%, rgba(255, 255, 255, 0.42));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.08)),
        var(--glass-surface);
    box-shadow:
        0 14px 28px rgba(32, 36, 43, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

html[data-theme='light'] .pro2-sidebar,
html[data-theme='light'] .pro2-context-sidebar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 22%),
        var(--glass-surface);
}

html[data-theme='light'] .pro2-results-toolbar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.1)),
        var(--glass-surface-strong);
}

html[data-theme='light'] .pro2-drawer__inner {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 22%),
        var(--glass-surface);
}

html[data-theme='light'] .pro2-product-item__thumb,
html[data-theme='light'] .pro2-brand-item__logo {
    border-color: color-mix(in srgb, var(--border) 88%, rgba(255, 255, 255, 0.6));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(244, 239, 231, 0.46));
}

html[data-theme='light'] .pro2-image-skeleton {
    box-shadow: inset 0 0 0 1px rgba(24, 43, 72, 0.06);
}

html[data-theme='light'] .pro2-inline-cart-control {
    background: rgba(88, 209, 201, 0.12);
    border-color: rgba(88, 209, 201, 0.46);
    color: color-mix(in srgb, var(--accent-strong) 62%, #1f3f4b);
}

html[data-theme='light'] .pro2-inline-cart-control__button {
    background: rgba(255, 255, 255, 0.82);
    color: #3d8f98;
    box-shadow: inset 0 0 0 1px rgba(24, 43, 72, 0.06);
}

html[data-theme='light'] .pro2-inline-cart-control__button:hover,
html[data-theme='light'] .pro2-inline-cart-control__button:focus-visible {
    background: rgba(255, 255, 255, 0.96);
    color: #236d75;
}

html[data-theme='light'] .pro2-inline-cart-control__value:hover,
html[data-theme='light'] .pro2-inline-cart-control__value:focus-visible {
    background: rgba(255, 255, 255, 0.58);
    color: #236d75;
}

html[data-theme='light'] .pro2-cart-item__qty:hover,
html[data-theme='light'] .pro2-cart-item__qty:focus-visible {
    background: transparent;
    color: var(--text);
}