/* DM Sans — variable font (single file поддерживает все веса 100-900).
 * Раньше было 4 @font-face block'а ссылающихся на 4 идентичных woff2 файла
 * (md5 одинаковый для 400/500/600/700) — browser качал 4 копии впустую.
 * Сейчас 2 block'а: latin (95% западного контента) + latin-ext (Эст.
 * Европейский, fetched только если страница имеет такие chars). */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/dm-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/dm-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Unbounded';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/unbounded-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Unbounded';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/unbounded-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Unbounded';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/unbounded-700.woff2') format('woff2');
}

:root {
    
    --bg-page: #f7f8fa;
    --bg-card: #ffffff;
    --bg-card-alt: #f0f3f7;
    --bg-hero: #edf1f7;
    --bg-card-rgb: 255,255,255;
    --logo-strip-bg: #dde3ed;
    --logo-strip-bg-top: #eaeff6;

    --text-primary: #1a2332;
    --text-secondary: #586577;
    --text-muted: #8893a2;

    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-soft: #eff6ff;

    --success: #059669;
    --warning: #d97706;
    --danger: #dc2626;

    
    --brand-green: #059669;
    --brand-mountain: #1e3a8a;

    --border: #e2e6eb;
    --border-light: #f0f3f7;

    --rating-excellent: #059669;
    --rating-good: #0d9488; 
    --rating-average: #d97706;
    --rating-poor: #dc2626;

    
    --font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 48px;
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;
    --letter-spacing-tight: -0.02em;

    
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 999px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --container-max: 1280px;
    --container-padding: 24px;
    --gap: 24px;
    --gap-sm: 16px;
}

[data-theme="dark"] {
    --bg-page: #0d1117;
    --bg-card: #161b22;
    --bg-card-alt: #1c2129;
    --bg-hero: #131820;
    --bg-card-rgb: 22,27,34;
    --logo-strip-bg: #242a36;
    --logo-strip-bg-top: #2c3343;

    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --text-muted: #6e7681;

    --accent: #58a6ff;
    --accent-hover: #79b8ff;
    --accent-soft: #0d2240;

    --success: #3fb950;
    --warning: #d29922;
    --danger: #f85149;

    --border: #30363d;
    --border-light: #21262d;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: var(--line-height-tight); color: var(--text-primary); }
h1 {
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: var(--font-size-2xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}
h2 { font-size: var(--font-size-xl); margin-top: 2rem; margin-bottom: 12px; }
h3 { font-size: var(--font-size-lg); font-weight: 600; margin-top: 1.5rem; margin-bottom: 8px; }
h4 { font-size: var(--font-size-base); font-weight: 600; margin-top: 1.25rem; margin-bottom: 6px; }

p { margin-bottom: 1rem; line-height: var(--line-height-relaxed); }
a { color: var(--accent); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.5rem; margin-bottom: 1rem; }
li { margin-bottom: 0.25rem; }
strong { font-weight: 600; }
hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: var(--font-size-sm); }
th { font-weight: 600; background: var(--bg-card-alt); }

.site-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); }

main { max-width: var(--container-max); margin: 0 auto; padding: var(--gap) var(--container-padding); }

.site-layout {
    display: grid;
    gap: var(--gap);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}
.site-layout > main { padding: 0; max-width: none; }
.site-layout--sidebar-right { grid-template-columns: 1fr 300px; }
.site-layout--sidebar-left { grid-template-columns: 300px 1fr; }

@media (max-width: 1024px) {
    .site-layout--sidebar-right,
    .site-layout--sidebar-left { grid-template-columns: 1fr; }
}

.card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 32px 40px;
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--gap);
}
@media (max-width: 768px) {
    .card { padding: 20px; }
}
.card:last-child { margin-bottom: 0; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 68px;
    background: var(--bg-card);
    border-bottom: 1px solid transparent;
    transition: height 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.site-header--scrolled {
    height: 58px;
    background: rgba(var(--bg-card-rgb), 0.85);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 12px 32px -16px rgba(30, 64, 175, 0.10);
}

.site-header__aurora {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(420px 140px at 90% 0%, rgba(254, 215, 170, 0.22), transparent 60%),
        radial-gradient(520px 140px at 10% 0%, rgba(125, 211, 252, 0.14), transparent 60%);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.22s ease;
}
[data-theme="dark"] .site-header__aurora {
    background:
        radial-gradient(420px 140px at 90% 0%, rgba(251, 191, 36, 0.08), transparent 60%),
        radial-gradient(520px 140px at 10% 0%, rgba(14, 116, 144, 0.18), transparent 60%);
}
.site-header--scrolled .site-header__aurora { opacity: 0.72; }

.site-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 6px;
    background-color: rgba(30, 58, 138, 0.18);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 12' preserveAspectRatio='none'><path d='M0,12 L0,7 L40,4 L90,8 L140,3 L200,7 L260,2 L330,6 L400,3 L470,7 L540,2 L610,5 L680,2 L750,6 L820,3 L890,7 L960,3 L1030,6 L1100,2 L1160,5 L1200,3 L1200,12 Z' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 12' preserveAspectRatio='none'><path d='M0,12 L0,7 L40,4 L90,8 L140,3 L200,7 L260,2 L330,6 L400,3 L470,7 L540,2 L610,5 L680,2 L750,6 L820,3 L890,7 L960,3 L1030,6 L1100,2 L1160,5 L1200,3 L1200,12 Z' fill='black'/></svg>");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
    transition: background-color 0.22s ease;
}
[data-theme="dark"] .site-header::after {
    background-color: rgba(148, 197, 255, 0.14);
}
.site-header--scrolled::after { background-color: rgba(30, 58, 138, 0.28); }
[data-theme="dark"] .site-header--scrolled::after { background-color: rgba(148, 197, 255, 0.22); }

#header-sentinel { height: 1px; margin-top: -1px; pointer-events: none; }

.site-header__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    height: 100%;
    display: flex;
    align-items: center;
    gap: 24px;
}

.site-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-primary);
    flex-shrink: 0;
}
.site-brand__logo { height: 28px; width: auto; }
.site-brand__wordmark {
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 19px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--text-primary);
    transition: color 0.15s ease;
}
.site-brand:hover .site-brand__wordmark {
    color: color-mix(in srgb, var(--text-primary) 88%, rgba(251, 146, 60, 1) 12%);
}
[data-theme="dark"] .site-brand:hover .site-brand__wordmark {
    color: color-mix(in srgb, var(--text-primary) 85%, rgba(251, 191, 36, 1) 15%);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    justify-content: center;
}
.site-nav > a,
.site-nav__group > .site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    color: var(--text-secondary);
    background-color: transparent;
    transition: color 0.18s ease, background-color 0.18s ease;
}
.site-nav > a:hover,
.site-nav__group > .site-nav__link:hover,
.site-nav__group:hover > .site-nav__link {
    color: var(--brand-mountain);
}

[data-theme="dark"] .site-nav > a,
[data-theme="dark"] .site-nav__group > .site-nav__link {
    color: color-mix(in srgb, var(--text-secondary) 80%, white 20%);
}
[data-theme="dark"] .site-nav > a:hover,
[data-theme="dark"] .site-nav__group > .site-nav__link:hover,
[data-theme="dark"] .site-nav__group:hover > .site-nav__link {
    color: #cbe1ff;
}

/* Active / expanded: only a brand-colored text shift. No pill background
   (the hover color change is the single visual cue requested by design). */
.site-nav > a.is-active,
.site-nav__group.is-active > .site-nav__link,
.site-nav__group[data-expanded="true"] > .site-nav__link {
    color: var(--brand-mountain);
}
[data-theme="dark"] .site-nav > a.is-active,
[data-theme="dark"] .site-nav__group.is-active > .site-nav__link,
[data-theme="dark"] .site-nav__group[data-expanded="true"] > .site-nav__link {
    color: #cbe1ff;
}

/* Nav icons inherit text color (line-art SVGs use stroke="currentColor") */
.site-nav > a .nav-icon,
.site-nav__group > .site-nav__link .nav-icon {
    color: currentColor;
    opacity: 0.8;
    transition: opacity 0.18s ease;
}
.site-nav > a:hover .nav-icon,
.site-nav__group > .site-nav__link:hover .nav-icon,
.site-nav > a.is-active .nav-icon,
.site-nav__group.is-active > .site-nav__link .nav-icon,
.site-nav__group[data-expanded="true"] > .site-nav__link .nav-icon {
    opacity: 1;
}

.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.nav-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

[data-theme="dark"] .nav-icon svg [stroke="#1e3a8a"] { stroke: #94c5ff; }

.nav-icon--logo,
.nav-icon--avatar {
    width: 20px;
    height: 20px;
    overflow: hidden;
    background: transparent;
}
.nav-icon--logo { border-radius: 5px; }
.nav-icon--avatar { border-radius: 50%; }
.nav-icon--logo img,
.nav-icon--avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}
.nav-icon--logo img { object-fit: contain; }
[data-theme="dark"] .nav-icon svg [fill="#1e3a8a"] { fill: #94c5ff; }
[data-theme="dark"] .nav-icon svg [fill="#059669"] { fill: #10b981; }
[data-theme="dark"] .nav-icon svg [stroke="#059669"] { stroke: #10b981; }

.nav-dropdown { position: relative; }
.nav-dropdown__chevron {
    width: 10px; height: 10px;
    transition: transform 0.2s;
    opacity: 0.5;
}
.nav-dropdown__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 200px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s, transform 0.18s;
    z-index: 110;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown.is-expanded .nav-dropdown__menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.nav-dropdown:hover .nav-dropdown__chevron { transform: rotate(180deg); }
.nav-dropdown__menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
    transition: background 0.12s, color 0.12s;
}
.nav-dropdown__menu a:hover { background: var(--bg-card-alt); color: var(--text-primary); }
.nav-child-icon { width: 14px; height: 14px; opacity: 0.6; }

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.site-action-btn,
.site-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.55);
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s ease, border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
[data-theme="dark"] .site-action-btn,
[data-theme="dark"] .site-login-btn {
    border-color: rgba(148, 163, 184, 0.14);
    background: rgba(255, 255, 255, 0.04);
}
.site-action-btn:hover,
.site-login-btn:hover {
    color: var(--text-primary);
    border-color: rgba(254, 215, 170, 0.70);
    background: color-mix(in srgb, rgba(254, 215, 170, 1) 14%, rgba(255, 255, 255, 0.8));
    transform: translateY(-1px);
}
[data-theme="dark"] .site-action-btn:hover,
[data-theme="dark"] .site-login-btn:hover {
    border-color: rgba(251, 191, 36, 0.45);
    background: color-mix(in srgb, rgba(251, 191, 36, 1) 10%, rgba(255, 255, 255, 0.05));
}
.site-action-btn svg,
.site-login-btn svg { width: 18px; height: 18px; display: block; }

.site-user-nav {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 3px 12px 3px 3px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.2s ease;
    position: relative;
}
[data-theme="dark"] .site-user-nav {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.04);
}
.site-user-nav:hover {
    border-color: transparent;
    background:
        linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
        linear-gradient(135deg, rgba(254, 215, 170, 0.85), rgba(125, 211, 252, 0.85)) border-box;
    box-shadow: 0 6px 18px -10px rgba(30, 64, 175, 0.28);
}
[data-theme="dark"] .site-user-nav:hover {
    background:
        linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
        linear-gradient(135deg, rgba(251, 191, 36, 0.6), rgba(125, 211, 252, 0.5)) border-box;
}
.site-user-nav__avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: block; }
.site-user-nav__fallback {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(254, 215, 170, 0.55), rgba(125, 211, 252, 0.45));
    color: var(--text-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 13px;
    font-family: 'Unbounded', 'DM Sans', sans-serif;
    letter-spacing: 0.02em;
}
[data-theme="dark"] .site-user-nav__fallback {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.45), rgba(14, 116, 144, 0.55));
}
.site-user-label { display: none; }
@media (min-width: 768px) { .site-user-label { display: inline; } }

.site-logout-btn:hover { color: var(--danger); border-color: rgba(239, 68, 68, 0.45); }

.site-cms-btns {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    margin-left: 4px;
    
    margin-right: calc(-1 * var(--container-padding) + 15px);
    flex-shrink: 0;
    order: 10;
}
.site-cms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    color: var(--text-muted);
    transition: color 150ms var(--ease-premium), border-color 150ms var(--ease-premium), background 150ms var(--ease-premium);
}
.site-cms-btn:hover {
    color: var(--text-primary);
    border-color: rgba(125, 211, 252, 0.55);
    background: color-mix(in srgb, rgba(125, 211, 252, 1) 12%, transparent);
}
[data-theme="dark"] .site-cms-btn:hover {
    border-color: rgba(14, 116, 144, 0.55);
    background: color-mix(in srgb, rgba(14, 116, 144, 1) 18%, transparent);
}
.site-cms-btn svg { width: 16px; height: 16px; }

@media (max-width: 768px) {
    
    .site-cms-btns { margin-right: calc(-1 * var(--container-padding) + 10px); gap: 2px; }
    .site-cms-btn { width: 28px; height: 28px; border-radius: 7px; }
    .site-cms-btn svg { width: 14px; height: 14px; }
}

.site-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 10px;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0;
    transition: border-color 0.18s ease, background 0.18s ease;
}
[data-theme="dark"] .site-burger {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.14);
}
.site-burger:hover {
    border-color: rgba(254, 215, 170, 0.70);
    background: color-mix(in srgb, rgba(254, 215, 170, 1) 14%, rgba(255, 255, 255, 0.8));
}
[data-theme="dark"] .site-burger:hover {
    border-color: rgba(251, 191, 36, 0.45);
    background: color-mix(in srgb, rgba(251, 191, 36, 1) 10%, rgba(255, 255, 255, 0.05));
}
.site-burger__icon { display: inline-flex; align-items: center; justify-content: center; }
.site-burger__icon svg { width: 20px; height: 20px; display: block; }

.site-burger .site-burger__icon--close { display: none; }
.site-burger.is-open .site-burger__icon--open { display: none; }
.site-burger.is-open .site-burger__icon--close { display: inline-flex; }

@media (max-width: 768px) {
    
    html, body { overflow-x: clip; }

    .site-burger { display: flex; }
    .site-nav { display: none; }
    
    .site-cms-btns { display: none !important; }

    
    .site-header { height: 60px; }
    .site-header__inner { gap: 10px; padding: 0 12px; min-width: 0; }
    
    .site-header__actions { gap: 6px; margin-left: auto; }
    .site-action-btn, .site-login-btn, .site-burger {
        width: 34px; height: 34px; border-radius: 9px;
    }
    .site-action-btn svg, .site-login-btn svg, .site-burger__icon svg {
        width: 17px; height: 17px;
    }
    .site-user-nav { padding: 2px 3px; gap: 0; }
    .site-user-nav__avatar, .site-user-nav__fallback {
        width: 28px; height: 28px;
    }
    .site-brand__wordmark {
        font-size: 15px;
        letter-spacing: 0.02em;
    }
    .site-brand__logo { height: 22px; }
    
    .site-header__body {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        max-width: 100vw;
        background: var(--bg-card);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-md);
        padding: 12px var(--container-padding);
    }
    .site-header__body.is-open { display: block; }
    .site-header__body .site-nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }
    .site-header__body .site-nav > a {
        padding: 12px 14px;
        font-size: 13.5px;
        letter-spacing: 0.04em;
        justify-content: flex-start;
        gap: 12px;
    }

    .site-header__body .site-nav .nav-icon {
        width: 20px;
        height: 20px;
    }

    /* Drawer links inherit default text-secondary from desktop rules.
       Hover/active/expanded states also inherit (brand-mountain text-color)
       — no pill backgrounds on mobile, same minimalist pattern as desktop. */
    .site-header__body .site-nav > a::before,
    .site-header__body .site-nav__group > .site-nav__link::before { display: none; }

    /* ─── Submenu groups inside the mobile drawer ─────────────── */
    .site-header__body .site-nav__group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        gap: 0;
        padding: 0;
        border-radius: 10px;
    }
    /* Kill full-group overlay: on mobile we tint only the header row */
    .site-header__body .site-nav__group::before { display: none; }

    .site-header__body .site-nav__group > .site-nav__link {
        flex: 1 1 auto;
        min-width: 0;
        padding: 12px 14px;
        border-radius: 10px 0 0 10px;
        transition: background 0.18s ease;
    }
    .site-header__body .site-nav__group > .site-nav__chevron-btn {
        flex: 0 0 auto;
        width: 40px;
        height: auto;
        align-self: stretch;
        padding: 0 10px;
        border-radius: 0 10px 10px 0;
        transition: background 0.18s ease;
    }

    /* Expanded-state: no pill background. The text-color shift (inherited from
       desktop rules: .site-nav__group[data-expanded="true"] > .site-nav__link
       → brand-mountain) + chevron rotate(180°) are the only visual cues. */

    /* Submenu takes full width of drawer as a new flex row.
       Higher-specificity selector needed to beat base rule
       `.site-nav__group[data-expanded="true"] .site-nav__submenu-wrap { transform: translate3d(-50%,0,0) }`
       that lives OUTSIDE a media query (still applies on mobile). */
    .site-header__body .site-nav__submenu-wrap,
    .site-header__body .site-nav__group[data-expanded="true"] .site-nav__submenu-wrap {
        position: static;
        transform: none;
        flex: 0 0 100%;
        width: 100%;
        pointer-events: none;
        overflow: hidden;
        transition: opacity 180ms var(--ease-premium, ease),
                    max-height 220ms var(--ease-premium, ease),
                    padding 220ms var(--ease-premium, ease);
    }
    .site-header__body .site-nav__submenu-wrap {
        opacity: 0;
        max-height: 0;
        padding: 0;
    }
    .site-header__body .site-nav__group[data-expanded="true"] .site-nav__submenu-wrap {
        opacity: 1;
        max-height: 1200px;
        padding: 4px 0 2px 18px;
        pointer-events: auto;
    }

    /* Drawer submenu card: remove floating popover styling */
    .site-header__body .site-nav__submenu {
        min-width: 0;
        width: 100%;
        margin: 0;
        padding: 4px;
        background: color-mix(in srgb, var(--brand-mountain) 3%, var(--bg-card));
        border: 1px solid var(--border-light);
        border-radius: 10px;
        box-shadow: none;
    }
    .site-header__body .site-nav__submenu::before { display: none; }

    .site-header__body .site-nav .site-nav__submenu a {
        padding: 10px 12px;
        font-size: 11.5px;
        white-space: normal;
        border-radius: 8px;
    }
}

.gamblers-hero {
    background: var(--bg-hero);
    padding: 48px 0 40px;
    margin-bottom: var(--gap);
}
.gamblers-hero .site-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); }
.gamblers-hero__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-tight);
    max-width: 640px;
    margin-bottom: 12px;
}
.gamblers-hero__text {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    max-width: 560px;
    margin-bottom: 20px;
}
.gamblers-hero__authors {
    display: flex;
    align-items: center;
    gap: 12px;
}
.gamblers-hero__author-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    object-fit: cover;
}
.gamblers-hero__author-avatar--fallback {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px;
    border: 2px solid var(--bg-card);
}
.gamblers-hero__author-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

.gamblers-section {
    padding: 32px 0 8px;
    max-width: var(--container-max);
    margin: 0 auto;
}
.gamblers-section__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    margin-bottom: 20px;
    padding: 0 var(--container-padding);
}
.gamblers-section__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin: 0;
    flex: 0 0 100%;
}
.gamblers-section__lead {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 4px 0 0;
    flex: 1 1 100%;
    max-width: 720px;
}
.gamblers-section__caption {
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    white-space: nowrap;
}
.gamblers-section__footer {
    padding: 12px var(--container-padding) 0;
    text-align: right;
}
.gamblers-section__link {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.gamblers-picks { display: flex; flex-direction: column; gap: 12px; padding: 0 var(--container-padding); }

.gamblers-pick {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.gamblers-pick:hover { box-shadow: var(--shadow-md); }

.gamblers-pick__number {
    position: absolute;
    top: -8px; left: 8px;
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--accent);
    opacity: 0.1;
    line-height: 1;
    pointer-events: none;
}
.gamblers-pick__logo {
    width: 56px; height: 56px;
    border-radius: var(--radius-sm);
    object-fit: contain;
    background: var(--bg-card-alt);
    flex-shrink: 0;
}
.gamblers-pick__body { min-width: 0; }
.gamblers-pick__name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
}
.gamblers-pick__name:hover { color: var(--accent); }
.gamblers-pick__scores {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin: 2px 0 6px;
}
.gamblers-pick__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.gamblers-pick__editorial {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-style: italic;
    margin-top: 6px;
    line-height: 1.4;
}
.gamblers-pick__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
.gamblers-pick__score {
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1;
}
.gamblers-pick__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    background: var(--accent);
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}
.gamblers-pick__cta:hover { background: var(--accent-hover); color: #fff; }

@media (max-width: 640px) {
    .gamblers-pick {
        grid-template-columns: 48px 1fr;
        gap: 12px;
    }
    .gamblers-pick__right {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.gamblers-slot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    padding: 0 var(--container-padding);
}
.gamblers-slot-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.15s, transform 0.15s;
}
.gamblers-slot-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.gamblers-slot-card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--bg-card-alt);
}
.gamblers-slot-card__body { padding: 16px; }
.gamblers-slot-card__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-primary);
    text-decoration: none;
    display: block;
}
.gamblers-slot-card__title:hover { color: var(--accent); }
.gamblers-slot-card__info {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.gamblers-slot-card__score { font-weight: 700; }

@media (max-width: 1024px) { .gamblers-slot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .gamblers-slot-grid { grid-template-columns: 1fr; } }

.gamblers-latest {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
    padding: 0 var(--container-padding);
}
.gamblers-latest-card {
    display: flex;
    gap: 16px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.gamblers-latest-card:hover { box-shadow: var(--shadow-md); }
.gamblers-latest-card__image {
    width: 140px;
    min-height: 100px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-card-alt);
}
.gamblers-latest-card__body { padding: 16px 16px 16px 0; display: flex; flex-direction: column; justify-content: center; }
.gamblers-latest-card__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    margin-bottom: 6px;
    line-height: 1.3;
}
.gamblers-latest-card__title:hover { color: var(--accent); }
.gamblers-latest-card__meta {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .gamblers-latest { grid-template-columns: 1fr; }
    .gamblers-latest-card__image { width: 100px; }
}

:root {
    --rating-excellent: #059669;
    --rating-good: #0d9488; 
    --rating-average: #d97706;
    --rating-poor: #dc2626;
}
[data-theme="dark"] {
    --rating-excellent: #3fb950;
    --rating-good: #2dd4bf; 
    --rating-average: #d29922;
    --rating-poor: #f85149;
}

.rating-color--excellent, .rating-tone--excellent { --tone-color: var(--rating-excellent); color: var(--rating-excellent); }
.rating-color--good, .rating-tone--good { --tone-color: var(--rating-good); color: var(--rating-good); }
.rating-color--average, .rating-tone--average { --tone-color: var(--rating-average); color: var(--rating-average); }
.rating-color--poor, .rating-tone--poor { --tone-color: var(--rating-poor); color: var(--rating-poor); }

.hero-review {
    position: relative;
    padding: 32px 0 40px;
    margin-bottom: 40px;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 6px 18px -6px rgba(30, 64, 175, 0.10),
        0 28px 56px -24px rgba(30, 64, 175, 0.18);
    isolation: isolate;
}
[data-theme="dark"] .hero-review {
    border-color: rgba(148, 163, 184, 0.10);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 28px 56px -24px rgba(0, 0, 0, 0.55);
}
.hero-review__bg {
    position: absolute;
    inset: 0;
    background:
        
        radial-gradient(900px 360px at 88% -10%, rgba(254, 215, 170, 0.45), transparent 55%),
        
        radial-gradient(700px 280px at 20% -5%, rgba(255, 255, 255, 0.75), transparent 60%),
        
        linear-gradient(180deg, transparent 45%, rgba(255, 255, 255, 0.35) 55%, transparent 65%),
        
        radial-gradient(1400px 560px at 15% 10%, rgba(125, 211, 252, 0.28), transparent 55%),
        
        radial-gradient(800px 320px at 55% 108%, rgba(191, 219, 254, 0.32), transparent 60%),
        var(--bg-hero);
    z-index: -1;
}
[data-theme="dark"] .hero-review__bg {
    background:
        radial-gradient(900px 360px at 88% -10%, rgba(251, 191, 36, 0.10), transparent 55%),
        radial-gradient(700px 280px at 20% -5%, rgba(148, 197, 255, 0.08), transparent 60%),
        linear-gradient(180deg, transparent 45%, rgba(148, 197, 255, 0.05) 55%, transparent 65%),
        radial-gradient(1400px 560px at 15% 10%, rgba(14, 116, 144, 0.35), transparent 55%),
        radial-gradient(800px 320px at 55% 108%, rgba(29, 78, 216, 0.24), transparent 60%),
        var(--bg-hero);
}

.hero-review::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    background-color: rgba(30, 64, 175, 0.09);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='0'/><stop offset='.55' stop-color='%23fff' stop-opacity='.55'/><stop offset='1' stop-color='%23fff' stop-opacity='1'/></linearGradient></defs><path d='M0,300 L0,90 L80,40 L170,70 L260,20 L360,75 L460,35 L560,78 L660,25 L770,68 L880,38 L990,72 L1100,30 L1200,60 L1200,300 Z' fill='url(%23g)'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='0'/><stop offset='.55' stop-color='%23fff' stop-opacity='.55'/><stop offset='1' stop-color='%23fff' stop-opacity='1'/></linearGradient></defs><path d='M0,300 L0,90 L80,40 L170,70 L260,20 L360,75 L460,35 L560,78 L660,25 L770,68 L880,38 L990,72 L1100,30 L1200,60 L1200,300 Z' fill='url(%23g)'/></svg>");
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    pointer-events: none;
    z-index: 0;
}

.hero-review::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    background-color: rgba(30, 58, 138, 0.15);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'><defs><linearGradient id='g2' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='0'/><stop offset='.4' stop-color='%23fff' stop-opacity='.5'/><stop offset='1' stop-color='%23fff' stop-opacity='1'/></linearGradient></defs><path d='M0,200 L0,110 L90,50 L170,100 L260,30 L360,90 L460,45 L560,95 L660,35 L770,80 L880,55 L990,85 L1100,40 L1200,70 L1200,200 Z' fill='url(%23g2)'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'><defs><linearGradient id='g2' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='0'/><stop offset='.4' stop-color='%23fff' stop-opacity='.5'/><stop offset='1' stop-color='%23fff' stop-opacity='1'/></linearGradient></defs><path d='M0,200 L0,110 L90,50 L170,100 L260,30 L360,90 L460,45 L560,95 L660,35 L770,80 L880,55 L990,85 L1100,40 L1200,70 L1200,200 Z' fill='url(%23g2)'/></svg>");
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    pointer-events: none;
    z-index: 0;
}
[data-theme="dark"] .hero-review::before {
    background-color: rgba(148, 197, 255, 0.08);
}
[data-theme="dark"] .hero-review::after {
    background-color: rgba(186, 230, 253, 0.10);
}

.hero-review__snow-field {
    position: absolute;
    top: 0;
    right: 0;
    width: 58%;
    height: 78%;
    z-index: 1;
    pointer-events: none;
    
    -webkit-mask-image: linear-gradient(to top right,
        transparent 6%,
        rgba(0,0,0,0.15) 32%,
        rgba(0,0,0,0.50) 62%,
        rgba(0,0,0,0.90) 88%,
        #000 100%);
    mask-image: linear-gradient(to top right,
        transparent 6%,
        rgba(0,0,0,0.15) 32%,
        rgba(0,0,0,0.50) 62%,
        rgba(0,0,0,0.90) 88%,
        #000 100%);
}
.hero-review__flake {
    position: absolute;
    top: var(--t);
    right: var(--r);
    width: calc(44px * var(--s, 1));
    height: calc(44px * var(--s, 1));
    background-color: rgba(37, 99, 235, 0.42);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round'><g><line x1='50' y1='8' x2='50' y2='92'/><line x1='50' y1='16' x2='44' y2='22'/><line x1='50' y1='16' x2='56' y2='22'/><line x1='50' y1='30' x2='44' y2='36'/><line x1='50' y1='30' x2='56' y2='36'/><line x1='50' y1='84' x2='44' y2='78'/><line x1='50' y1='84' x2='56' y2='78'/><line x1='50' y1='70' x2='44' y2='64'/><line x1='50' y1='70' x2='56' y2='64'/><line x1='13' y1='29' x2='87' y2='71'/><line x1='13' y1='71' x2='87' y2='29'/><line x1='22' y1='34' x2='18' y2='27'/><line x1='22' y1='34' x2='29' y2='38'/><line x1='78' y1='66' x2='82' y2='73'/><line x1='78' y1='66' x2='71' y2='62'/><line x1='22' y1='66' x2='18' y2='73'/><line x1='22' y1='66' x2='29' y2='62'/><line x1='78' y1='34' x2='82' y2='27'/><line x1='78' y1='34' x2='71' y2='38'/></g></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round'><g><line x1='50' y1='8' x2='50' y2='92'/><line x1='50' y1='16' x2='44' y2='22'/><line x1='50' y1='16' x2='56' y2='22'/><line x1='50' y1='30' x2='44' y2='36'/><line x1='50' y1='30' x2='56' y2='36'/><line x1='50' y1='84' x2='44' y2='78'/><line x1='50' y1='84' x2='56' y2='78'/><line x1='50' y1='70' x2='44' y2='64'/><line x1='50' y1='70' x2='56' y2='64'/><line x1='13' y1='29' x2='87' y2='71'/><line x1='13' y1='71' x2='87' y2='29'/><line x1='22' y1='34' x2='18' y2='27'/><line x1='22' y1='34' x2='29' y2='38'/><line x1='78' y1='66' x2='82' y2='73'/><line x1='78' y1='66' x2='71' y2='62'/><line x1='22' y1='66' x2='18' y2='73'/><line x1='22' y1='66' x2='29' y2='62'/><line x1='78' y1='34' x2='82' y2='27'/><line x1='78' y1='34' x2='71' y2='38'/></g></svg>");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    transform: rotate(var(--rot, 0deg));
    animation: flake-spin var(--dur, 90s) linear infinite;
    animation-direction: var(--dir, normal);
}
[data-theme="dark"] .hero-review__flake {
    background-color: rgba(186, 230, 253, 0.38);
}
.svg-defs { position: absolute; pointer-events: none; }
.hero-review__flake:nth-child(1)  { --t:2%;  --r:5%;  --s:1.25; --rot:10deg;  --dur:75s;  }
.hero-review__flake:nth-child(2)  { --t:8%;  --r:20%; --s:0.95; --rot:-25deg; --dur:90s;  --dir:reverse; }
.hero-review__flake:nth-child(3)  { --t:1%;  --r:35%; --s:0.75; --rot:18deg;  --dur:110s; }
.hero-review__flake:nth-child(4)  { --t:14%; --r:50%; --s:0.55; --rot:-8deg;  --dur:100s; --dir:reverse; }
.hero-review__flake:nth-child(5)  { --t:19%; --r:9%;  --s:1.05; --rot:32deg;  --dur:85s;  }
.hero-review__flake:nth-child(6)  { --t:24%; --r:26%; --s:0.85; --rot:-15deg; --dur:120s; }
.hero-review__flake:nth-child(7)  { --t:16%; --r:42%; --s:0.62; --rot:5deg;   --dur:95s;  --dir:reverse; }
.hero-review__flake:nth-child(8)  { --t:30%; --r:54%; --s:0.48; --rot:22deg;  --dur:130s; }
.hero-review__flake:nth-child(9)  { --t:38%; --r:7%;  --s:0.92; --rot:-30deg; --dur:105s; --dir:reverse; }
.hero-review__flake:nth-child(10) { --t:44%; --r:22%; --s:0.72; --rot:12deg;  --dur:115s; }
.hero-review__flake:nth-child(11) { --t:36%; --r:40%; --s:0.52; --rot:-20deg; --dur:125s; --dir:reverse; }
.hero-review__flake:nth-child(12) { --t:50%; --r:11%; --s:0.58; --rot:-18deg; --dur:98s;  }
.hero-review__flake:nth-child(13) { --t:58%; --r:26%; --s:0.5;  --rot:28deg;  --dur:140s; --dir:reverse; }
.hero-review__flake:nth-child(14) { --t:62%; --r:42%; --s:0.42; --rot:-5deg;  --dur:150s; }
.hero-review__flake:nth-child(15) { --t:70%; --r:18%; --s:0.44; --rot:15deg;  --dur:160s; --dir:reverse; }
@keyframes flake-spin {
    from { transform: rotate(var(--rot, 0deg)); }
    to   { transform: rotate(calc(var(--rot, 0deg) + 360deg)); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-review__flake {
        animation: none !important;
    }
}

.hero-review__container {
    position: relative;
    z-index: 2;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}
.hero-review__breadcrumbs {
    margin-bottom: 20px;
}

.hero-review__top {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.hero-review__brand {
    display: flex;
    gap: 20px;
    align-items: center;
    flex: 1;
    min-width: 280px;
}
.hero-review__logo-wrap {
    width: 96px;
    height: 96px;
    border-radius: 20px;
    background: #fff;
    padding: 10px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 10px 30px -8px rgba(15,23,42,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
[data-theme="dark"] .hero-review__logo-wrap { background: #161b22; box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 30px -8px rgba(0,0,0,0.4); }
.hero-review__logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}
.hero-review__heading {
    min-width: 0;
}
.hero-review__kicker {
    display: inline-block;
    align-self: flex-start;
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 8.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: color-mix(in srgb, var(--text-secondary) 90%, transparent);
    padding: 2px 7px;
    margin: 0 0 6px;
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 22%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-card), var(--brand-mountain) 3%);
}
[data-theme="dark"] .hero-review__kicker {
    color: color-mix(in srgb, var(--text-secondary) 95%, white 5%);
    background: color-mix(in srgb, var(--bg-card), var(--brand-mountain) 8%);
    border-color: color-mix(in srgb, var(--brand-mountain) 35%, var(--border));
}
.hero-review__title {
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: clamp(26px, 3.6vw, 38px);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0 0 12px;
}
.hero-review__byline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.hero-review__author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-card);
    box-shadow: 0 1px 2px rgba(15,23,42,0.08);
}
.hero-review__author-avatar--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* нейтральный slate wash одинаков для casino-review и slot-review —
       даёт общий «редакторский» тон второстепенного элемента, не тянет за
       brand-accent'ами (которые у моделей разные). */
    background: #e2e8f0;
    color: #475569;
    font-weight: 600;
    font-size: 11px;
}
[data-theme="dark"] .hero-review__author-avatar--fallback {
    background: #334155;
    color: #cbd5e1;
}
.hero-review__byline a {
    color: var(--text-primary);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}
.hero-review__byline a:hover { color: var(--accent); }
.hero-review__byline-role { color: var(--text-muted); }

.hero-review__byline-role::before {
    content: '· ';
    color: var(--text-muted);
    opacity: 0.6;
    margin-right: 2px;
}
.hero-review__byline-sep { color: var(--text-muted); opacity: 0.6; }
.hero-review__byline-date { color: var(--text-muted); }

.hero-review__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-mountain) 100%);
    color: #fff;
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 12px;
    text-decoration: none;
    box-shadow:
        0 4px 14px -4px rgba(30, 58, 138, 0.45),
        0 1px 2px rgba(5, 150, 105, 0.20);
    transition: transform 200ms var(--ease-premium), box-shadow 200ms var(--ease-premium), background 300ms var(--ease-premium);
    flex-shrink: 0;
    align-self: flex-start;
    position: relative;
    overflow: hidden;
}

.hero-review__cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.15) 50%, transparent 70%);
    opacity: 0;
    transition: opacity 280ms var(--ease-premium);
    pointer-events: none;
}
.hero-review__cta:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow:
        0 8px 22px -4px rgba(30, 58, 138, 0.55),
        0 3px 8px rgba(5, 150, 105, 0.25);
}
.hero-review__cta:hover::before { opacity: 1; }
[data-theme="dark"] .hero-review__cta {
    background: linear-gradient(135deg, #10b981 0%, #3b5bd4 100%);
    box-shadow:
        0 4px 14px -4px rgba(59, 91, 212, 0.50),
        0 1px 2px rgba(16, 185, 129, 0.25);
}
[data-theme="dark"] .hero-review__cta:hover {
    box-shadow:
        0 8px 24px -4px rgba(59, 91, 212, 0.62),
        0 3px 8px rgba(16, 185, 129, 0.32);
}
.hero-review__cta-icon { transition: transform 200ms var(--ease-premium); position: relative; }
.hero-review__cta:hover .hero-review__cta-icon { transform: translateX(3px); }

.hero-review__ratings {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.hero-review__rating {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(15,23,42,0.04);
    position: relative;
}
[data-theme="dark"] .hero-review__rating { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 2px rgba(0,0,0,0.2); }

.hero-radial {
    position: relative;
    width: 104px;
    height: 104px;
    flex-shrink: 0;
}
.hero-radial svg { transform: rotate(0deg); }
.hero-radial__track {
    stroke: var(--border-light);
}
[data-theme="dark"] .hero-radial__track { stroke: var(--border); }
.hero-radial__fill {
    stroke: var(--tone-color, var(--accent));
    transition: stroke-dasharray 800ms var(--ease-premium);
}
.hero-radial__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}
.hero-radial__value {
    font-size: 28px;
    font-weight: 700;
    color: var(--tone-color, var(--accent));
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.hero-radial__max {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 2px;
    letter-spacing: 0.02em;
}

.hero-review__stars-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 104px;
    flex-shrink: 0;
}
.hero-stars {
    position: relative;
    display: inline-block;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 2px;
    --rating-pct: 0%;
}
.hero-stars__bg,
.hero-stars__fg {
    display: block;
}
.hero-stars__bg {
    color: color-mix(in srgb, var(--brand-mountain) 16%, transparent);
}
[data-theme="dark"] .hero-stars__bg {
    color: color-mix(in srgb, #94c5ff 22%, transparent);
}
.hero-stars__fg {
    position: absolute;
    top: 0; left: 0;
    width: var(--rating-pct);
    overflow: hidden;
    white-space: nowrap;
    
    background-image: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-mountain) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .hero-stars__fg {
    background-image: linear-gradient(135deg, #10b981 0%, #94c5ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
.hero-review__stars-value {
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.hero-review__stars-value span {
    color: var(--text-muted);
    font-size: 12px;
}

.hero-review__rating--visitor {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}
.hero-player__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.hero-player__headline {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
.hero-player__label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.hero-player__score-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.hero-player__avg {
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--brand-mountain);
    line-height: 1;
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .hero-player__avg { color: #cfe0ff; }
.hero-player__avg-max {
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.hero-player__avg-empty {
    color: var(--text-muted);
    font-size: 20px;
    font-weight: 500;
}
.hero-player__score-row .hero-stars {
    font-size: 18px;
    letter-spacing: 1px;
}
.hero-player__subtext {
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: -0.005em;
}

.hero-player__trending {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 8px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--brand-green) 18%, transparent) 0%,
        color-mix(in srgb, var(--brand-mountain) 14%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--brand-green) 40%, transparent);
    border-radius: 100px;
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-mountain);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    
}
.hero-player__trending svg {
    color: var(--brand-green);
    flex-shrink: 0;
}
.hero-player__trending::before {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: heroBadgeShimmer 5s ease-in-out infinite 1.5s;
    pointer-events: none;
}
[data-theme="dark"] .hero-player__trending {
    background: linear-gradient(135deg,
        color-mix(in srgb, #10b981 22%, transparent) 0%,
        color-mix(in srgb, #94c5ff 16%, transparent) 100%);
    border-color: color-mix(in srgb, #10b981 50%, transparent);
    color: #cfe0ff;
}
[data-theme="dark"] .hero-player__trending svg { color: #10b981; }
[data-theme="dark"] .hero-player__trending::before {
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
}

.hero-player__head-aux {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.hero-player__head-aux > * { align-self: flex-end; }

.hero-player__reviews-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    background: color-mix(in srgb, var(--brand-mountain) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 18%, transparent);
    border-radius: 100px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-decoration: none;
    color: color-mix(in srgb, var(--brand-mountain) 88%, var(--text-primary));
    transition: background 180ms var(--ease-premium, ease-out),
                border-color 180ms,
                color 180ms,
                transform 180ms;
}
.hero-player__reviews-pill-icon {
    flex-shrink: 0;
    color: color-mix(in srgb, var(--brand-green) 70%, var(--brand-mountain));
}
.hero-player__reviews-pill-arrow {
    flex-shrink: 0;
    margin-left: 2px;
    transition: transform 180ms var(--ease-premium, ease-out);
    opacity: 0.7;
}
.hero-player__reviews-pill:hover,
.hero-player__reviews-pill:focus-visible {
    background: color-mix(in srgb, var(--brand-mountain) 10%, transparent);
    border-color: color-mix(in srgb, var(--brand-mountain) 32%, transparent);
    color: var(--brand-mountain);
    outline: none;
}
.hero-player__reviews-pill:hover .hero-player__reviews-pill-arrow,
.hero-player__reviews-pill:focus-visible .hero-player__reviews-pill-arrow {
    transform: translateX(2px);
    opacity: 1;
}
.hero-player__reviews-pill:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-green) 45%, transparent);
}
[data-theme="dark"] .hero-player__reviews-pill {
    background: color-mix(in srgb, #94c5ff 10%, transparent);
    border-color: color-mix(in srgb, #94c5ff 22%, transparent);
    color: #cfe0ff;
}
[data-theme="dark"] .hero-player__reviews-pill-icon {
    color: color-mix(in srgb, #10b981 70%, #94c5ff);
}
[data-theme="dark"] .hero-player__reviews-pill:hover,
[data-theme="dark"] .hero-player__reviews-pill:focus-visible {
    background: color-mix(in srgb, #94c5ff 16%, transparent);
    border-color: color-mix(in srgb, #94c5ff 40%, transparent);
    color: #e4eeff;
}

.hero-player__chips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.hero-player__chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: linear-gradient(135deg,
        rgba(30, 64, 175, 0.13) 0%,
        rgba(125, 211, 252, 0.10) 55%,
        rgba(30, 58, 138, 0.07) 100%);
    border: 1px solid rgba(30, 64, 175, 0.22);
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.2;
    color: var(--text-secondary);
    overflow: hidden;
    animation: heroChipIn 520ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: calc(var(--chip-delay, 0) * 70ms);
}
.hero-player__chip::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, transparent 100%);
    pointer-events: none;
    border-radius: 7px 7px 0 0;
}
.hero-player__chip > * { position: relative; z-index: 1; }
.hero-player__chip svg {
    color: #3b82f6;
    flex-shrink: 0;
}
.hero-player__chip strong {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-right: 3px;
}
[data-theme="dark"] .hero-player__chip {
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.18) 0%,
        rgba(20, 184, 166, 0.08) 55%,
        rgba(29, 78, 216, 0.10) 100%);
    border-color: rgba(148, 197, 255, 0.25);
}
[data-theme="dark"] .hero-player__chip svg { color: #60a5fa; }
[data-theme="dark"] .hero-player__chip::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 100%);
}

.hero-player__vote {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 7%, transparent) 0%,
        rgba(125, 211, 252, 0.08) 100%);
    border: 1px dashed color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 8px;
    font-size: 11.5px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}
.hero-player__vote--guest {
    justify-content: space-between;
}
.hero-player__vote-label {
    letter-spacing: -0.005em;
}
.hero-player__vote .hero-vote-form__stars {
    margin-left: auto;
}

html.js-ready .hero-vote-form--inline .hero-vote-form__btn { display: none; }

.hero-player__pointer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    margin-right: 2px;
    transform-origin: left center;
    
    animation: heroHandTap 3.2s cubic-bezier(0.32, 0, 0.67, 0) infinite;
    transition: opacity 400ms var(--ease-premium);
}
.hero-player__vote .hero-vote-form__stars { margin-left: 0; }
.hero-player__hand {
    width: 28px;
    height: 28px;
    display: block;
    filter: drop-shadow(0 2px 3px rgba(30, 58, 138, 0.28));
    
}
.hero-player__bubble {
    position: relative;
    font-family: 'Comic Sans MS', 'Trebuchet MS', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #0f172a;
    
    background: linear-gradient(135deg, #e0f2fe 0%, #e0f2fe 65%, #fde68a 125%);
    border: 1.5px solid #1e3a8a;
    border-radius: 10px;
    padding: 2px 9px 3px;
    box-shadow: 2px 2px 0 rgba(30, 58, 138, 0.22);
    white-space: nowrap;
    transform: rotate(-3deg);
    animation: heroBubbleBob 3.2s ease-in-out infinite;
}

.hero-player__bubble::after {
    content: '';
    position: absolute;
    top: 55%;
    right: -8px;
    width: 0; height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #1e3a8a;
    transform: translateY(-50%);
}
.hero-player__bubble::before {
    content: '';
    position: absolute;
    top: 55%;
    right: -5.5px;
    width: 0; height: 0;
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
    border-left: 6px solid #e0f2fe;
    transform: translateY(-50%);
    z-index: 1;
}
[data-theme="dark"] .hero-player__bubble {
    background: linear-gradient(135deg, #0c4a6e 0%, #1e3a8a 65%, #854d0e 125%);
    border-color: #93c5fd;
    color: #f0f9ff;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .hero-player__bubble::after { border-left-color: #93c5fd; }
[data-theme="dark"] .hero-player__bubble::before { border-left-color: #1e3a8a; }
@keyframes heroHandTap {
    0%, 55%, 100%  { transform: translateX(0); }
    60%            { transform: translateX(5px); }
    65%            { transform: translateX(1px); }
    70%            { transform: translateX(5px); }
    75%            { transform: translateX(1px); }
    80%            { transform: translateX(5px); }
    85%            { transform: translateX(1px); }
}
@keyframes heroBubbleBob {
    0%, 100% { transform: rotate(-3deg) translateY(0); }
    50%      { transform: rotate(-2deg) translateY(-1.5px); }
}
.hero-player__pointer.is-hiding {
    opacity: 0;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .hero-player__hand,
    .hero-player__bubble { animation: none; }
}
@media (max-width: 640px) {
    .hero-player__bubble { display: none; }
    .hero-player__hand { width: 22px; height: 22px; }
}

.hero-vote-form--inline {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hero-review__rating-meta {
    flex: 1;
    min-width: 0;
}
.hero-review__rating-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.hero-review__rating-sub {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    letter-spacing: -0.005em;
}

.hero-review__rating--expert:has(.hero-rating-chips) {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "radial summary"
        "chips  chips";
    gap: 14px 16px;
    align-items: center;
}
.hero-review__rating--expert:has(.hero-spark) {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "radial summary spark"
        "chips  chips   chips";
}
.hero-review__rating--expert:has(.hero-rating-chips) .hero-radial {
    grid-area: radial;
    width: 84px;
    height: 84px;
}
.hero-review__rating--expert:has(.hero-rating-chips) .hero-radial svg {
    width: 100%;
    height: 100%;
}
.hero-review__rating--expert:has(.hero-rating-chips) .hero-radial__value {
    font-size: 24px;
}
.hero-review__rating--expert:has(.hero-rating-chips) .hero-radial__max {
    font-size: 10px;
}
.hero-rating-summary__text {
    grid-area: summary;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.hero-rating-summary__label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hero-rating-summary__verdict-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px 5px 9px;
    background: linear-gradient(135deg,
        rgba(30, 64, 175, 0.16) 0%,
        rgba(30, 64, 175, 0.10) 55%,
        color-mix(in srgb, var(--tone-color) 14%, transparent) 100%);
    border: 1px solid rgba(30, 64, 175, 0.28);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    align-self: flex-start;
    margin-top: 2px;
}
.hero-rating-summary__verdict-badge svg {
    color: var(--tone-color);
    flex-shrink: 0;
}
.hero-rating-summary__verdict-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%);
    transform: skewX(-20deg);
    animation: heroBadgeShimmer 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes heroBadgeShimmer {
    0%, 88%, 100% { left: -60%; }
    96%           { left: 120%; }
}
[data-theme="dark"] .hero-rating-summary__verdict-badge {
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.22) 0%,
        rgba(30, 64, 175, 0.14) 55%,
        color-mix(in srgb, var(--tone-color) 16%, transparent) 100%);
    border-color: rgba(148, 197, 255, 0.35);
}
[data-theme="dark"] .hero-rating-summary__verdict-badge::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 100%);
}

.hero-rating-summary__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
    font-size: 11px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}
.hero-rating-summary__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: -0.005em;
}
.hero-rating-summary__meta-item svg {
    color: var(--text-muted);
    flex-shrink: 0;
}
.hero-rating-summary__meta-dot {
    color: var(--text-muted);
    opacity: 0.5;
}

.hero-spark {
    grid-area: spark;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
    min-width: 112px;
    justify-self: end;
    align-self: start;
    padding-top: 2px;
    margin-right: 28px;
}
.hero-spark__label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: right;
}
.hero-spark__bars {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 4px;
    height: 42px;
}
.hero-spark__bar {
    width: 11px;
    height: var(--h, 50%);
    background: linear-gradient(180deg,
        var(--tone-color) 0%,
        color-mix(in srgb, var(--tone-color) 35%, transparent) 100%);
    border-radius: 2px 2px 0 0;
    transform-origin: bottom center;
    box-shadow: 0 1px 3px -1px color-mix(in srgb, var(--tone-color) 50%, transparent);
    animation:
        heroSparkRiseIn 700ms cubic-bezier(0.22, 0.61, 0.36, 1) both,
        heroSparkBreathe 3.6s ease-in-out infinite;
    animation-delay:
        calc(var(--bar-delay, 0) * 80ms),
        calc(var(--bar-delay, 0) * 220ms + 900ms);
}
.hero-spark__meta {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}
.hero-spark__meta strong {
    color: var(--text-primary);
    font-weight: 700;
}
@keyframes heroSparkRiseIn {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}
@keyframes heroSparkBreathe {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(1.06); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-spark__bar {
        animation: none;
    }
}
.hero-rating-chips {
    grid-area: chips;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.hero-rating-chip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 7px 10px 8px;
    
    background: linear-gradient(135deg,
        rgba(30, 64, 175, 0.13) 0%,
        rgba(125, 211, 252, 0.10) 55%,
        rgba(30, 58, 138, 0.07) 100%);
    border: 1px solid rgba(30, 64, 175, 0.22);
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.2;
    overflow: hidden;
    transition: transform 180ms var(--ease-premium), box-shadow 180ms var(--ease-premium);
    animation: heroChipIn 520ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: calc(var(--chip-delay, 0) * 70ms);
}

.hero-rating-chip::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    border-radius: 7px 7px 0 0;
}
.hero-rating-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -4px rgba(30, 64, 175, 0.28);
}
.hero-rating-chip__name,
.hero-rating-chip__score {
    position: relative;
    z-index: 1;
}
.hero-rating-chip__name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--text-secondary);
    letter-spacing: -0.005em;
}
.hero-rating-chip__ic {
    color: var(--tone-color);
    opacity: 0.85;
    flex-shrink: 0;
}
.hero-rating-chip__name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hero-rating-chip__score {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--tone-color);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .hero-rating-chip {
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.18) 0%,
        rgba(20, 184, 166, 0.08) 55%,
        rgba(29, 78, 216, 0.10) 100%);
    border-color: rgba(148, 197, 255, 0.25);
}
[data-theme="dark"] .hero-rating-chip::before {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.06) 0%,
        transparent 100%);
}
@keyframes heroChipIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-rating-chip { animation: none; }
}

.hero-vote-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 140px;
    align-items: stretch;
}
.hero-vote-form__stars {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 2px;
}
.hero-vote-form__stars input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.hero-vote-form__stars label {
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    
    color: color-mix(in srgb, var(--brand-mountain) 42%, transparent);
    transition: color 180ms;
}

.hero-vote-form__stars label > span { display: contents; }
[data-theme="dark"] .hero-vote-form__stars label {
    color: color-mix(in srgb, #94c5ff 48%, transparent);
}

.hero-vote-form__stars label:hover,
.hero-vote-form__stars label:hover ~ label,
.hero-vote-form__stars input:checked ~ label {
    background-image: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-mountain) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .hero-vote-form__stars label:hover,
[data-theme="dark"] .hero-vote-form__stars label:hover ~ label,
[data-theme="dark"] .hero-vote-form__stars input:checked ~ label {
    background-image: linear-gradient(135deg, #10b981 0%, #94c5ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.hero-vote-form__btn {
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 500;
    background: #0f172a;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 200ms var(--ease-premium), transform 150ms;
    letter-spacing: -0.005em;
}
[data-theme="dark"] .hero-vote-form__btn { background: #f8fafc; color: #0f172a; }
.hero-vote-form__btn:hover { background: #1e293b; transform: translateY(-1px); }
[data-theme="dark"] .hero-vote-form__btn:hover { background: #ffffff; }
.hero-vote-form__login {
    font-size: 12px;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    align-self: center;
}

.hero-review__facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 20px 24px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.85) 70%,
        color-mix(in srgb, var(--brand-mountain) 14%, rgba(255, 255, 255, 0.7)) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 16px;
    position: relative;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.hero-review__skirt { display: none; }
[data-theme="dark"] .hero-review__facts {
    background: linear-gradient(180deg,
        rgba(22, 27, 37, 0.85) 0%,
        rgba(22, 27, 37, 0.78) 70%,
        color-mix(in srgb, var(--brand-mountain) 32%, rgba(22, 27, 37, 0.70)) 100%);
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.hero-review__facts::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(400px 140px at 92% 0%, rgba(254, 215, 170, 0.12), transparent 70%),
        radial-gradient(500px 160px at 8% 100%, rgba(125, 211, 252, 0.08), transparent 70%);
    pointer-events: none;
}
.hero-review__facts > * { position: relative; }

.hero-fact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 18px;
    min-width: 0;
    position: relative;
}

.hero-fact:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0; top: 15%; bottom: 15%;
    width: 1px;
    background: linear-gradient(180deg,
        transparent,
        color-mix(in srgb, var(--brand-mountain) 25%, transparent) 20%,
        color-mix(in srgb, var(--brand-green) 25%, transparent) 80%,
        transparent);
}
.hero-fact__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-green); /* nordic default — emerald; warm-palette override ниже */
}
[data-theme="dark"] .hero-fact__icon { color: var(--brand-green); }
.hero-fact__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

[data-theme="dark"] .hero-fact__icon svg [stroke="#1e3a8a"] { stroke: #94c5ff; }
[data-theme="dark"] .hero-fact__icon svg [fill="#1e3a8a"] { fill: #94c5ff; }
[data-theme="dark"] .hero-fact__icon svg [fill="#059669"] { fill: #10b981; }
[data-theme="dark"] .hero-fact__icon svg [stroke="#059669"] { stroke: #10b981; }

.hero-fact__body { min-width: 0; }
.hero-fact__label {
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.25;
    margin-bottom: 6px;
    color: var(--brand-green);
}
[data-theme="dark"] .hero-fact__label { color: #10b981; }
.hero-fact__value {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--brand-mountain);
    letter-spacing: -0.005em;
    line-height: 1.25;
}
[data-theme="dark"] .hero-fact__value { color: #cfe0ff; }

@media (min-width: 769px) and (max-width: 900px) {
    .hero-review__ratings { grid-template-columns: 1fr; }
    .hero-review__facts {
        grid-template-columns: repeat(2, 1fr);
        padding: 16px 18px;
        gap: 6px 0;
    }
    .hero-fact { padding: 8px 14px; }
    .hero-fact:not(:first-child)::before { display: none; }
    .hero-fact:nth-child(even)::before {
        display: block;
        content: '';
        position: absolute;
        left: 0; top: 15%; bottom: 15%;
        width: 1px;
        background: linear-gradient(180deg,
            transparent,
            color-mix(in srgb, var(--brand-mountain) 25%, transparent) 20%,
            color-mix(in srgb, var(--brand-green) 25%, transparent) 80%,
            transparent);
    }
}

@media (max-width: 768px) {
    
    .hero-review {
        padding: 12px 0 16px;
        border-radius: 0;
        
        margin-top: calc(-1 * var(--gap));
        margin-bottom: 0;
        margin-left: calc(-1 * var(--container-padding));
        margin-right: calc(-1 * var(--container-padding));
        box-shadow: none;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }
    
    .hero-review__skirt {
        display: block;
        position: relative;
        z-index: 1;
        height: 28px;
        margin: -2px calc(-1 * var(--container-padding)) 24px;
        background-color: #cad5eb;
        background-image: linear-gradient(180deg,
            #cad5eb 0%,
            rgba(202, 213, 235, 0.75) 45%,
            rgba(202, 213, 235, 0.35) 80%,
            transparent 100%);
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'><path d='M0,0 L0,4 L40,14 L90,6 L140,18 L200,10 L260,22 L330,12 L400,18 L470,8 L540,22 L610,14 L680,22 L750,10 L820,16 L890,8 L960,18 L1030,12 L1100,22 L1160,14 L1200,18 L1200,0 Z' fill='black'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'><path d='M0,0 L0,4 L40,14 L90,6 L140,18 L200,10 L260,22 L330,12 L400,18 L470,8 L540,22 L610,14 L680,22 L750,10 L820,16 L890,8 L960,18 L1030,12 L1100,22 L1160,14 L1200,18 L1200,0 Z' fill='black'/></svg>");
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        pointer-events: none;
    }
    [data-theme="dark"] .hero-review__skirt {
        background-color: #23324c;
        background-image: linear-gradient(180deg,
            #23324c 0%,
            rgba(35, 50, 76, 0.75) 45%,
            rgba(35, 50, 76, 0.35) 80%,
            transparent 100%);
    }
    .hero-review::before,
    .hero-review::after { height: 18%; opacity: 0.6; }
    .hero-review__snow-field { display: none; }
    .hero-review__container { padding: 0 14px; }
    .hero-review__breadcrumbs { margin-bottom: 10px; font-size: 12px; }

    
    .hero-review__top {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-bottom: 16px;
        flex-wrap: nowrap;
    }
    .hero-review__brand {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "title  title"
            "logo   kicker"
            "logo   byline";
        column-gap: 14px;
        row-gap: 0;
        align-items: stretch;
        text-align: left;
        min-width: 0;
        width: 100%;
    }

    .hero-review__heading { display: contents; }
    .hero-review__kicker {
        grid-area: kicker;
        justify-self: start;
        align-self: end;
        font-size: 8px;
        letter-spacing: 0.1em;
        padding: 2px 6px;
        margin: 0 0 5px;
    }
    .hero-review__byline {
        align-self: start;
        margin: 0;
    }
    .hero-review__title {
        grid-area: title;
        font-size: 22px;
        letter-spacing: -0.005em;
        line-height: 1.2;
        margin: 0 0 10px;
    }
    .hero-review__logo-wrap {
        grid-area: logo;
        width: 94px;
        height: 94px;
        align-self: center;
        border-radius: 16px;
        padding: 8px;
        box-shadow: 0 1px 2px rgba(15,23,42,0.06), 0 6px 18px -6px rgba(30, 58, 138, 0.14);
    }
    
    .hero-review__byline {
        grid-area: byline;
        align-self: center;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 8px;
        row-gap: 3px;
        font-size: 12.5px;
        line-height: 1.35;
        text-align: left;
    }
    .hero-review__byline-text {
        order: 1;
        min-width: 0;
    }
    .hero-review__author-avatar,
    .hero-review__author-avatar--fallback {
        order: 2;
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }
    
    .hero-review__byline-role {
        order: 3;
        flex-basis: 100%;
        font-size: 12px;
    }
    .hero-review__byline-role::before { content: none; }
    .hero-review__byline-sep { display: none; }
    .hero-review__byline-date {
        order: 4;
        flex-basis: 100%;
        font-size: 11.5px;
    }
    .hero-review__cta {
        width: 100%;
        justify-content: center;
        padding: 13px 20px;
        font-size: 12.5px;
        letter-spacing: 0.04em;
    }

    
    .hero-review__ratings {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 12px;
    }
    .hero-review__rating {
        padding: 14px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.62);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-color: rgba(148, 163, 184, 0.16);
        gap: 12px;
        flex-wrap: nowrap;
        align-items: flex-start;
    }
    [data-theme="dark"] .hero-review__rating {
        background: rgba(22, 27, 37, 0.62);
        border-color: rgba(148, 163, 184, 0.12);
    }

    
    .hero-review__rating--expert {
        display: flex !important;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        padding: 12px;
    }
    .hero-review__rating--expert .hero-radial {
        flex: 0 0 76px;
        width: 76px;
        height: 76px;
    }
    .hero-review__rating--expert .hero-radial__value { font-size: 22px; }
    .hero-review__rating--expert .hero-radial__max { font-size: 10px; }

    .hero-review__rating--expert .hero-rating-summary__text {
        flex: 1 1 160px;
        min-width: 0;
        gap: 4px;
    }
    .hero-rating-summary__label { font-size: 9.5px; letter-spacing: 0.10em; margin-bottom: 2px; }
    .hero-rating-summary__verdict-badge {
        font-size: 12px;
        padding: 5px 10px 5px 9px;
        letter-spacing: 0.01em;
    }
    .hero-rating-summary__verdict-badge svg { width: 13px; height: 13px; }
    .hero-rating-summary__meta {
        font-size: 10.5px;
        gap: 4px 6px;
        margin-top: 3px;
        flex-wrap: wrap;
    }

    
    .hero-review__rating--expert .hero-spark {
        flex: 0 0 100%;
        margin: 0;
        padding: 8px 10px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        border: 1px solid rgba(148, 163, 184, 0.14);
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }
    [data-theme="dark"] .hero-review__rating--expert .hero-spark {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(148, 163, 184, 0.10);
    }
    .hero-spark__label {
        writing-mode: horizontal-tb !important;
        transform: none !important;
        font-size: 9px;
        letter-spacing: 0.08em;
        white-space: nowrap;
        margin: 0;
    }
    .hero-spark__bars { height: 24px; gap: 2px; flex: 1; min-width: 0; }
    .hero-spark__bar { flex: 1; }
    .hero-spark__meta {
        font-size: 9px;
        white-space: nowrap;
        display: inline-flex;
        flex-direction: row !important;
        gap: 8px;
    }
    .hero-spark__meta strong { font-weight: 700; }

    
    .hero-review__rating--expert .hero-rating-chips {
        flex: 0 0 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }
    .hero-rating-chip {
        padding: 6px 8px;
        font-size: 11px;
    }
    .hero-rating-chip__label { font-size: 10.5px; }
    .hero-rating-chip__score { font-size: 11.5px; }
    .hero-rating-chip__ic { width: 12px; height: 12px; }

    
    .hero-review__rating--visitor {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        display: flex !important;
        padding: 18px 12px 12px;
        position: relative;
    }
    .hero-player__trending {
        position: absolute;
        top: 12px;
        right: 12px;
        margin: 0;
        font-size: 10px;
        z-index: 2;
    }
    
    .hero-player__head-aux {
        align-items: center;
    }
    .hero-player__head-aux > * { align-self: center; }
    
    .hero-player__head {
        display: block !important;
        padding-top: 0;
    }
    .hero-player__headline {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .hero-player__label {
        font-size: 9.5px;
        letter-spacing: 0.10em;
        text-align: left;
        align-self: flex-start;
    }
    
    .hero-player__score-row {
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 15px;
    }
    .hero-player__subtext {
        font-size: 14px;
        margin: 0 0 15px;
        text-align: center;
    }
    .hero-player__avg { font-size: 40px; }
    .hero-player__avg-max { font-size: 18px; }
    .hero-player__score-row .hero-stars { font-size: 28px; }

    
    .hero-player__chips {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        width: 100%;
    }
    .hero-player__chip {
        padding: 7px 10px;
        font-size: 10.5px;
        min-width: 0;
        
        justify-content: flex-start;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
    }
    .hero-player__chip svg { width: 12px; height: 12px; flex-shrink: 0; }
    .hero-player__chip-label { font-size: 9px; }
    
    .hero-player__chip > span {
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 16px), transparent);
        mask-image: linear-gradient(to right, black calc(100% - 16px), transparent);
    }
    .hero-vote-form {
        width: 100%;
        padding: 0;
    }
    .hero-player__bubble { display: none; }
    .hero-player__hand { width: 22px; height: 22px; }
    
    .hero-player__vote {
        padding: 10px 12px;
        gap: 6px 10px;
        justify-content: center;
    }
    
    .hero-player__vote:has(.hero-player__pointer) .hero-player__vote-label {
        flex-basis: 100%;
        text-align: center;
    }
    .hero-player__pointer {
        margin-left: 0;
        margin-right: 0;
    }
    .hero-player__vote .hero-vote-form__stars {
        margin-left: 0;
    }

    
    .hero-review__facts {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 4px 14px;
        border-radius: 14px;
    }
    .hero-fact {
        padding: 12px 2px;
        gap: 12px;
        border-top: 1px solid color-mix(in srgb, var(--brand-mountain) 12%, transparent);
    }
    .hero-fact:first-child { border-top: none; }
    
    .hero-fact:not(:first-child)::before,
    .hero-fact:nth-child(even)::before {
        display: none !important;
    }
    .hero-fact__icon { width: 24px; height: 24px; }
    .hero-fact__label {
        font-size: 9.5px;
        letter-spacing: 0.10em;
        margin-bottom: 4px;
    }
    .hero-fact__value {
        font-size: 14px;
        line-height: 1.35;
    }
    [data-theme="dark"] .hero-fact {
        border-top-color: color-mix(in srgb, #94c5ff 18%, transparent);
    }
}

@media (max-width: 340px) {
    .hero-review__rating--expert .hero-rating-chips {
        grid-template-columns: 1fr;
    }
}

.rating-breakdown {
    padding: 28px 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 32px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(15,23,42,0.04);
}
[data-theme="dark"] .rating-breakdown { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 2px rgba(0,0,0,0.2); }
.rating-breakdown__header { margin-bottom: 20px; }
.rating-breakdown__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.rating-breakdown__title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}
.rating-breakdown__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 32px;
}
@media (max-width: 640px) {
    .rating-breakdown { padding: 20px; }
    .rating-breakdown__grid { grid-template-columns: 1fr; gap: 14px; }
}

.rating-bar {}
.rating-bar__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.rating-bar__name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
}
.rating-bar__score {
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--tone-color, var(--accent));
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.rating-bar__score span {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 12px;
}
.rating-bar__track {
    height: 4px;
    background: var(--border-light);
    border-radius: 2px;
    overflow: hidden;
}
.rating-bar__fill {
    display: block;
    height: 100%;
    width: var(--rating-pct, 0%);
    background: linear-gradient(90deg, var(--tone-color, var(--accent)) 0%, var(--tone-color, var(--accent-hover)) 100%);
    border-radius: 2px;
    transition: width 800ms var(--ease-premium);
}

.payment-methods {
    position: relative;
    padding: 30px 34px 28px;
    background:
        radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--brand-mountain) 5%, transparent) 0%, transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.96) 0%, color-mix(in srgb, var(--brand-mountain) 3%, rgba(255,255,255,0.92)) 100%);
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 12%, var(--border));
    border-radius: 20px;
    margin: 0 0 28px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        0 1px 2px rgba(15,23,42,0.04),
        0 14px 40px -22px rgba(30,58,138,0.16);
    overflow: hidden;
}
.payment-methods::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--brand-mountain) 0%,
        var(--accent) 50%,
        var(--brand-green) 100%);
    opacity: 0.85;
}
[data-theme="dark"] .payment-methods {
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(59,130,246,0.10) 0%, transparent 60%),
        linear-gradient(180deg, rgba(22,27,34,0.92) 0%, rgba(15,23,42,0.96) 100%);
    border-color: rgba(148,197,255,0.20);
}

.payment-methods__header { margin-bottom: 22px; }
.payment-methods__label {
    display: block;
    font-family: 'Unbounded', var(--font-family);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand-green);
    margin-bottom: 6px;
}
[data-theme="dark"] .payment-methods__label { color: #10b981; }
.payment-methods__title {
    font-family: 'Unbounded', var(--font-family);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--text-primary);
}

.payment-methods__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.payment-methods__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 14px;
    min-height: 84px;
    background: rgba(255,255,255,0.65);
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 10%, var(--border-light));
    border-radius: 14px;
    transition:
        border-color 220ms var(--ease-premium),
        transform 220ms var(--ease-premium),
        box-shadow 220ms var(--ease-premium),
        background 220ms var(--ease-premium);
    overflow: hidden;
    isolation: isolate;
}
[data-theme="dark"] .payment-methods__card {
    background: rgba(255,255,255,0.04);
    border-color: rgba(148,197,255,0.14);
}

.payment-methods__card::after {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(115deg,
        transparent 0%,
        rgba(255,255,255,0.55) 50%,
        transparent 100%);
    transform: skewX(-18deg);
    transition: left 650ms var(--ease-premium);
    pointer-events: none;
    z-index: 1;
}
.payment-methods__card:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -10px rgba(30,58,138,0.25);
    background: rgba(255,255,255,0.88);
}
[data-theme="dark"] .payment-methods__card:hover {
    background: rgba(59,130,246,0.10);
    box-shadow: 0 10px 24px -10px rgba(0,0,0,0.5);
}
.payment-methods__card:hover::after { left: 130%; }

.payment-methods__card-logo {
    width: 44px;
    height: 30px;
    background: var(--text-muted);
    opacity: 0.85;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/></svg>");
    transition: transform 200ms var(--ease-premium);
    z-index: 2;
}
.payment-methods__card:hover .payment-methods__card-logo {
    transform: scale(1.08);
    opacity: 1;
}
.payment-methods__card[data-slug="swish"] .payment-methods__card-logo { background: #5a2fa0; }
.payment-methods__card[data-slug="trustly"] .payment-methods__card-logo { background: #0ee06e; }
.payment-methods__card[data-slug="visa"] .payment-methods__card-logo { background: #1a1f71; }
.payment-methods__card[data-slug="mastercard"] .payment-methods__card-logo { background: #eb001b; }
.payment-methods__card[data-slug="skrill"] .payment-methods__card-logo { background: #862165; }
.payment-methods__card[data-slug="neteller"] .payment-methods__card-logo { background: #00ac41; }
.payment-methods__card[data-slug*="krypto"] .payment-methods__card-logo,
.payment-methods__card[data-slug*="crypto"] .payment-methods__card-logo,
.payment-methods__card[data-slug="bitcoin"] .payment-methods__card-logo { background: #f7931a; }
.payment-methods__card[data-slug="ethereum"] .payment-methods__card-logo { background: #627eea; }
.payment-methods__card[data-slug="neosurf"] .payment-methods__card-logo { background: #1c3762; }
.payment-methods__card[data-slug="zimpler"] .payment-methods__card-logo { background: #ff5a3c; }
.payment-methods__card[data-slug="paysafecard"] .payment-methods__card-logo { background: #003087; }
.payment-methods__card-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    letter-spacing: -0.005em;
    z-index: 2;
}

.payment-methods__footer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px dashed color-mix(in srgb, var(--brand-mountain) 18%, var(--border));
}
.payment-methods__stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--brand-green) 6%, rgba(255,255,255,0.55));
    border: 1px solid color-mix(in srgb, var(--brand-green) 18%, transparent);
    border-radius: 12px;
}
[data-theme="dark"] .payment-methods__stat {
    background: rgba(16,185,129,0.06);
    border-color: rgba(16,185,129,0.20);
}
.payment-methods__stat-label {
    font-family: 'Unbounded', var(--font-family);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-green);
}
[data-theme="dark"] .payment-methods__stat-label { color: #10b981; }
.payment-methods__stat-value {
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .payment-methods { padding: 22px 18px 20px; border-radius: 16px; }
    .payment-methods__title { font-size: 20px; }
    .payment-methods__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .payment-methods__card { padding: 14px 8px; min-height: 74px; }
    .payment-methods__card-logo { width: 36px; height: 24px; }
    .payment-methods__card-name { font-size: 11px; }
    .payment-methods__footer { grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 18px; }
    .payment-methods__stat { padding: 10px 12px; }
    .payment-methods__stat-value { font-size: 15px; }
}
@media (max-width: 420px) {
    .payment-methods__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .payment-methods__card,
    .payment-methods__card::after,
    .payment-methods__card-logo { transition: none; }
}

.review-article {
    max-width: 800px;
    margin: 0 auto 28px;
}
.review-article .page-content-block {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Bottom CTA bar — унифицирован для desktop+mobile, заменяет старую casino-sticky.
   Desktop: centered 800px width (align с article column), bottom 16px от viewport,
            rounded corners + collapse-button справа.
   Mobile: full-width edge-to-edge bottom bar.
   Collapsed: bar slides left, остаётся только collapse-handle справа viewport. */
.mobile-cta {
    position: fixed;
    bottom: 16px;
    left: 50%;
    z-index: 90;
    width: min(calc(100% - 32px), 800px);
    padding: 14px 16px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.94) 0%,
        color-mix(in srgb, var(--brand-mountain) 6%, rgba(255, 255, 255, 0.86)) 100%);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 14%, var(--border));
    border-radius: 18px;
    box-shadow:
        0 8px 24px -8px rgba(30, 58, 138, 0.22),
        0 2px 6px rgba(30, 58, 138, 0.08);
    transform: translate(-50%, calc(100% + 32px));
    opacity: 0;
    transition: transform 380ms var(--ease-premium), opacity 250ms ease;
}
.mobile-cta.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
}
/* Collapsed state: bar slides левее, остаётся только handle (collapse btn flipped) справа */
.mobile-cta.is-collapsed {
    transform: translate(calc(-100% + 56px), 0);
    left: 0;
    opacity: 1;
}
.mobile-cta.is-collapsed .mobile-cta__inner > *:not(.mobile-cta__collapse) {
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}
.mobile-cta.is-collapsed .mobile-cta__collapse {
    pointer-events: auto;
}
.mobile-cta.is-collapsed .mobile-cta__collapse svg {
    transform: rotate(180deg);
}

.mobile-cta__inner {
    display: flex;
    gap: 12px;
    align-items: center;
    max-width: var(--container-max);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.mobile-cta__logo {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--bg-card-alt);
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    overflow: hidden;
}
.mobile-cta__logo img { width: 100%; height: 100%; object-fit: contain; }

.mobile-cta__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mobile-cta__head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.mobile-cta__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-mountain);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.005em;
    flex: 0 1 auto;
    min-width: 0;
}
.mobile-cta__score {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    background: linear-gradient(135deg, var(--brand-green) 0%, color-mix(in srgb, var(--brand-green) 75%, var(--brand-mountain)) 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.mobile-cta__bonus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.3;
    min-width: 0;
}
.mobile-cta__bonus svg {
    flex-shrink: 0;
    color: var(--brand-green);
}
.mobile-cta__bonus span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Slot specs (RTP + max-win) — chips inline под name на desktop */
.mobile-cta__specs {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.mobile-cta__spec {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.mobile-cta__spec svg {
    color: var(--brand-green);
    flex-shrink: 0;
    opacity: 0.85;
}

/* CTA-button text variants: full на desktop, short на mobile (≤640) */
.mobile-cta__btn-text--short { display: none; }

.mobile-cta__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-mountain) 100%);
    color: #fff;
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 11px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow:
        0 4px 12px -3px rgba(30, 58, 138, 0.42),
        0 1px 2px rgba(5, 150, 105, 0.20);
    transition: transform 200ms var(--ease-premium), box-shadow 200ms var(--ease-premium);
}
.mobile-cta__btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.15) 50%, transparent 70%);
    opacity: 0;
    transition: opacity 280ms var(--ease-premium);
    pointer-events: none;
}
.mobile-cta__btn:hover,
.mobile-cta__btn:active {
    color: #fff;
    transform: translateY(-1px);
    box-shadow:
        0 6px 16px -3px rgba(30, 58, 138, 0.52),
        0 2px 4px rgba(5, 150, 105, 0.26);
}
.mobile-cta__btn:hover::before,
.mobile-cta__btn:active::before { opacity: 1; }
.mobile-cta__btn-icon {
    transition: transform 200ms var(--ease-premium);
    flex-shrink: 0;
    position: relative;
}
.mobile-cta__btn:hover .mobile-cta__btn-icon,
.mobile-cta__btn:active .mobile-cta__btn-icon { transform: translateX(3px); }

/* Collapse-button: square 36×36, neutral icon, transitions chevron rotation */
.mobile-cta__collapse {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 18%, var(--border));
    background: var(--bg-card);
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.mobile-cta__collapse:hover {
    background: color-mix(in srgb, var(--brand-mountain) 8%, var(--bg-card));
    color: var(--brand-mountain);
}
.mobile-cta__collapse svg {
    transition: transform 250ms var(--ease-premium);
}
[data-theme="dark"] .mobile-cta__collapse {
    background: color-mix(in srgb, var(--brand-mountain) 14%, rgba(13, 17, 23, 0.7));
    border-color: rgba(148, 197, 255, 0.18);
    color: #cfe0ff;
}

[data-theme="dark"] .mobile-cta {
    background: linear-gradient(180deg,
        rgba(13, 17, 23, 0.90) 0%,
        color-mix(in srgb, var(--brand-mountain) 22%, rgba(13, 17, 23, 0.84)) 100%);
    box-shadow:
        0 -4px 18px -6px rgba(0, 0, 0, 0.5),
        0 -1px 2px rgba(148, 197, 255, 0.08);
}
[data-theme="dark"] .mobile-cta::before {
    background-color: rgba(148, 197, 255, 0.22);
}
[data-theme="dark"] .mobile-cta::after {
    background:
        radial-gradient(300px 100px at 90% 0%, rgba(251, 191, 36, 0.06), transparent 70%),
        radial-gradient(400px 100px at 10% 100%, rgba(14, 116, 144, 0.12), transparent 70%);
}
[data-theme="dark"] .mobile-cta__name { color: #cfe0ff; }
[data-theme="dark"] .mobile-cta__score::before { color: #10b981; }
[data-theme="dark"] .mobile-cta__btn {
    background: linear-gradient(135deg, #10b981 0%, #3b5bd4 100%);
    box-shadow:
        0 4px 14px -3px rgba(59, 91, 212, 0.48),
        0 1px 2px rgba(16, 185, 129, 0.22);
}
[data-theme="dark"] .mobile-cta__btn:hover,
[data-theme="dark"] .mobile-cta__btn:active {
    box-shadow:
        0 6px 18px -3px rgba(59, 91, 212, 0.58),
        0 2px 4px rgba(16, 185, 129, 0.30);
}

/* Body padding-bottom когда bar visible — чтобы footer/контент не уходили под bar */
body.has-mobile-cta { padding-bottom: 100px; }

/* Hide старую sticky-info-card на всех viewport — заменена унифицированным bottom-bar */
.casino-sticky { display: none !important; }

/* Mobile (≤640): edge-to-edge bottom bar (без bottom margin), full width.
   Collapse-button + bonus скрыты — на mobile bar всегда visible. Layout:
   logo | (name [row1], score [row2]) | compact CTA. */
@media (max-width: 640px) {
    .mobile-cta {
        bottom: 0;
        width: 100%;
        border-radius: 14px 14px 0 0;
        border-bottom: none;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    }
    .mobile-cta.is-collapsed {
        transform: translate(0, 0);
    }
    .mobile-cta.is-collapsed .mobile-cta__inner > *:not(.mobile-cta__collapse) {
        opacity: 1;
        pointer-events: auto;
    }
    .mobile-cta__collapse { display: none; }
    .mobile-cta__bonus { display: none; }
    .mobile-cta__specs { display: none; }
    .mobile-cta__btn-text--full { display: none; }
    .mobile-cta__btn-text--short { display: inline; }

    /* Name + score переносятся в две строки: name row 1, score row 2 */
    .mobile-cta__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .mobile-cta__name {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.25;
    }

    /* CTA уже по ширине — меньше padding-x */
    .mobile-cta__btn {
        padding: 10px 14px;
        font-size: 11px;
    }

    body.has-mobile-cta { padding-bottom: 88px; }
}

.review-layout {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.review-layout__main { max-width: 800px; margin: 0 auto; padding: 0; }
.review-layout__content { max-width: 800px; margin: 0 auto; }
.review-layout__content .page-content-block { line-height: var(--line-height-relaxed); }

@media (max-width: 768px) {
    .review-layout {
        padding: 0 14px;
        margin-left: calc(-1 * var(--container-padding));
        margin-right: calc(-1 * var(--container-padding));
    }
    .review-article {
        max-width: 100%;
        margin: 0 0 24px;
    }
    .review-article .page-content-block,
    .page-content-block {
        max-width: 100%;
    }
}

@media (min-width: 1100px) {
    .review-layout:has(> .review-layout__sidebar) {
        display: grid;
        grid-template-columns: minmax(0, 800px) 1fr;
        gap: 40px;
        align-items: start;
    }
    .review-layout:has(> .review-layout__sidebar) .review-layout__main { margin: 0; }
}

.toc {
    position: relative;
    margin: 0 0 32px;
    padding: 16px 20px 14px;
    border-radius: 14px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.96) 0%,
        color-mix(in srgb, var(--brand-mountain) 5%, rgba(255, 255, 255, 0.88)) 100%);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    overflow: hidden;
}
.toc::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(240px 100px at 92% 0%, rgba(16, 185, 129, 0.08), transparent 70%),
        radial-gradient(320px 120px at 8% 100%, rgba(125, 211, 252, 0.05), transparent 70%);
    border-radius: inherit;
}
.toc > * { position: relative; }
[data-theme="dark"] .toc {
    background: linear-gradient(180deg,
        rgba(22, 27, 37, 0.88) 0%,
        color-mix(in srgb, var(--brand-mountain) 22%, rgba(22, 27, 37, 0.72)) 100%);
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.toc summary,
.toc__title {
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-green);
    cursor: pointer;
    padding: 4px 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
[data-theme="dark"] .toc summary,
[data-theme="dark"] .toc__title { color: #10b981; }
.toc summary::-webkit-details-marker,
.toc summary::marker { display: none; content: ''; }

.toc summary::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--brand-green), var(--brand-mountain));
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / contain;
    transform: rotate(-90deg);
    transition: transform 220ms var(--ease-premium);
}
.toc details[open] summary::after { transform: rotate(0deg); }
[data-theme="dark"] .toc summary::after {
    background: linear-gradient(135deg, #10b981, #94c5ff);
}

.toc__list {
    list-style: none;
    padding: 12px 0 2px;
    margin: 10px 0 0;
    border-top: 1px solid color-mix(in srgb, var(--brand-mountain) 14%, transparent);
    counter-reset: toc-counter;
}
[data-theme="dark"] .toc__list {
    border-top-color: color-mix(in srgb, var(--brand-mountain) 28%, transparent);
}

.toc__item {
    margin: 0;
    counter-increment: toc-counter;
}
.toc__item a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 0 7px 0;
    color: var(--text-secondary);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14.5px;
    line-height: 1.4;
    text-decoration: none;
    transition: color 200ms var(--ease-premium), transform 200ms var(--ease-premium);
}
.toc__item a::before {
    content: counter(toc-counter, decimal-leading-zero);
    flex-shrink: 0;
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--brand-green);
    min-width: 22px;
    transition: color 200ms var(--ease-premium);
}
[data-theme="dark"] .toc__item a { color: var(--text-secondary); }
[data-theme="dark"] .toc__item a::before { color: #10b981; }
.toc__item a:hover {
    color: var(--brand-mountain);
    transform: translateX(2px);
}
.toc__item a:hover::before {
    color: var(--brand-mountain);
}
[data-theme="dark"] .toc__item a:hover {
    color: #cfe0ff;
}
[data-theme="dark"] .toc__item a:hover::before {
    color: #94c5ff;
}
.toc__item.is-active a {
    color: var(--brand-mountain);
    font-weight: 500;
}
.toc__item.is-active a::before {
    color: var(--brand-green);
    font-weight: 600;
}

.toc__item--l1 a { padding-left: 28px; font-size: 13.5px; }
.toc__item--l2 a { padding-left: 48px; font-size: 13px; opacity: 0.88; }
.toc__item--l1 a::before,
.toc__item--l2 a::before { font-size: 10px; min-width: 18px; }

@media (max-width: 640px) {
    .toc { padding: 14px 16px 12px; margin-bottom: 24px; }
    .toc__item a { font-size: 14px; padding: 8px 0; }
    .toc__item--l1 a { padding-left: 22px; }
    .toc__item--l2 a { padding-left: 40px; }
}

.page-intro-block {
    position: relative;
    margin: 0 0 32px;
    padding: 24px 28px 26px;
    border-radius: 14px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.96) 0%,
        color-mix(in srgb, var(--brand-mountain) 3%, rgba(255, 255, 255, 0.92)) 100%);
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    overflow: hidden;
}

.page-intro-block::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--brand-green), var(--brand-mountain));
    pointer-events: none;
}

.page-intro-block::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(280px 100px at 95% 0%, rgba(16, 185, 129, 0.06), transparent 70%),
        radial-gradient(320px 120px at 5% 100%, rgba(125, 211, 252, 0.04), transparent 70%);
    border-radius: inherit;
}
.page-intro-block > * { position: relative; }

[data-theme="dark"] .page-intro-block {
    background: linear-gradient(180deg,
        rgba(22, 27, 37, 0.88) 0%,
        color-mix(in srgb, var(--brand-mountain) 22%, rgba(22, 27, 37, 0.72)) 100%);
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .page-intro-block::before {
    background: linear-gradient(180deg, #10b981, #94c5ff);
}

.page-intro-block__label {
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-green);
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.page-intro-block__label::after {
    content: '';
    flex: 1;
    min-width: 40px;
    height: 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand-green) 35%, transparent), transparent);
}
[data-theme="dark"] .page-intro-block__label { color: #10b981; }
[data-theme="dark"] .page-intro-block__label::after {
    background: linear-gradient(90deg, color-mix(in srgb, #10b981 40%, transparent), transparent);
}

.page-intro-block__pullquote {
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.45;
    font-style: italic;
    color: var(--brand-mountain);
    margin: 0 0 18px;
    padding: 0 0 0 26px;
    position: relative;
    letter-spacing: -0.005em;
}
.page-intro-block__pullquote::before {
    content: '\201C'; 
    position: absolute;
    left: 0;
    top: -4px;
    font-family: 'Unbounded', serif;
    font-size: 32px;
    line-height: 1;
    color: var(--brand-green);
    font-style: normal;
}
[data-theme="dark"] .page-intro-block__pullquote { color: #cfe0ff; }
[data-theme="dark"] .page-intro-block__pullquote::before { color: #10b981; }

.page-intro-block__body {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--text-secondary);
}
.page-intro-block__para { margin: 0 0 14px; }
.page-intro-block__para:last-child { margin-bottom: 0; }

.page-intro-block__para--lead::first-letter {
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 0.95;
    float: left;
    margin: 4px 10px 0 0;
    color: var(--brand-green);
    letter-spacing: -0.02em;
}
[data-theme="dark"] .page-intro-block__para--lead::first-letter { color: #10b981; }

@media (max-width: 768px) {
    .page-intro-block {
        padding: 16px 14px 18px;
        margin-bottom: 24px;
    }
    .page-intro-block__label {
        font-size: 10.5px;
        margin-bottom: 12px;
    }
    .page-intro-block__pullquote {
        font-size: 16px;
        padding-left: 22px;
        margin-bottom: 14px;
    }
    .page-intro-block__pullquote::before { font-size: 26px; }
    .page-intro-block__body {
        font-size: 15.5px;
        line-height: 1.6;
    }
    .page-intro-block__para--lead::first-letter {
        font-size: 36px;
        margin: 2px 8px 0 0;
    }
}

.page-pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 32px 0;
}
.page-pros-cons__col {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px 24px;
    transition: border-color 200ms var(--ease-premium);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(15,23,42,0.03);
}
[data-theme="dark"] .page-pros-cons__col { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 2px rgba(0,0,0,0.2); }
.page-pros-cons__col--pros { background: var(--wb-tip-bg); border-color: var(--wb-tip-border); }
.page-pros-cons__col--cons { background: rgba(220, 38, 38, 0.04); border-color: rgba(220, 38, 38, 0.16); }
[data-theme="dark"] .page-pros-cons__col--cons { background: rgba(248, 81, 73, 0.08); border-color: rgba(248, 81, 73, 0.22); }

.page-pros-cons__col h3 {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.page-pros-cons__col--pros h3 { color: var(--wb-tip-fg); }
.page-pros-cons__col--cons h3 { color: var(--danger); }
[data-theme="dark"] .page-pros-cons__col--cons h3 { color: #f85149; }

.page-pros-cons__col h3::before {
    content: "";
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}
.page-pros-cons__col--pros h3::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12l5 5L20 6'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12l5 5L20 6'/></svg>");
}
.page-pros-cons__col--cons h3::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l12 12M18 6L6 18'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l12 12M18 6L6 18'/></svg>");
}

.page-pros-cons__col ul { list-style: none; padding: 0; margin: 0; }
.page-pros-cons__col li {
    padding: 7px 0 7px 26px;
    position: relative;
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: var(--text-primary);
}
.page-pros-cons__col li + li { border-top: 1px solid rgba(15, 23, 42, 0.05); }
[data-theme="dark"] .page-pros-cons__col li + li { border-top-color: rgba(255, 255, 255, 0.05); }
.page-pros-cons__col li::before {
    position: absolute;
    left: 0; top: 10px;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: center / 14px 14px no-repeat;
    mask: center / 14px 14px no-repeat;
}
.page-pros-cons__col--pros li { color: var(--text-primary); }
.page-pros-cons__col--pros li::before {
    color: var(--wb-tip-fg);
    background-color: var(--wb-tip-fg);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12l5 5L20 6'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12l5 5L20 6'/></svg>");
}
.page-pros-cons__col--cons li::before {
    background-color: var(--danger);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l12 12M18 6L6 18'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l12 12M18 6L6 18'/></svg>");
}
[data-theme="dark"] .page-pros-cons__col--cons li::before { background-color: #f85149; }

@media (max-width: 640px) { .page-pros-cons { grid-template-columns: 1fr; gap: 12px; } }

.page-verdict-block {
    position: relative;
    margin: 16px 0 28px;
    padding: 26px 32px 28px;
    border-radius: 20px;
    background:
        radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--brand-mountain) 5%, transparent) 0%, transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.96) 0%, color-mix(in srgb, var(--brand-mountain) 3%, rgba(255,255,255,0.92)) 100%);
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 12%, var(--border));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        0 1px 2px rgba(15,23,42,0.04),
        0 14px 40px -22px rgba(30,58,138,0.14);
    overflow: hidden;
}
.page-verdict-block::before {
    
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    width: auto;
    height: 3px;
    background: linear-gradient(90deg,
        var(--brand-mountain) 0%,
        var(--accent) 50%,
        var(--brand-green) 100%);
    opacity: 0.85;
    -webkit-mask: none;
    mask: none;
}
[data-theme="dark"] .page-verdict-block {
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(59,130,246,0.10) 0%, transparent 60%),
        linear-gradient(180deg, rgba(22,27,34,0.92) 0%, rgba(15,23,42,0.96) 100%);
    border-color: rgba(148,197,255,0.20);
}
.page-verdict-block__title {
    font-family: 'Unbounded', var(--font-family);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 14px;
    color: var(--brand-green);
}
[data-theme="dark"] .page-verdict-block__title { color: #10b981; }
.page-verdict-block__text {
    font-family: var(--font-family);
    font-size: 15.5px;
    line-height: 1.7;
    letter-spacing: -0.005em;
    color: var(--text-primary);
    font-style: normal;
    font-weight: 400;
}
.page-verdict-block__text br + br {
    
    line-height: 1.7em;
    display: block;
    content: "";
    margin-top: 0.6em;
}

@media (max-width: 720px) {
    .page-verdict-block { padding: 22px 20px 24px; border-radius: 16px; margin: 12px 0 20px; }
    .page-verdict-block__text { font-size: 14.5px; line-height: 1.65; }
}

.page-rating-block {
    position: relative;
    display: grid;
    grid-template-columns: minmax(180px, 240px) 1fr;
    gap: 32px;
    align-items: stretch;
    background:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--brand-mountain) 6%, transparent) 0%, transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,0.96) 0%, color-mix(in srgb, var(--brand-mountain) 3%, rgba(255,255,255,0.92)) 100%);
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 14%, var(--border));
    border-radius: 20px;
    padding: 32px 36px;
    margin: 28px 0;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        0 1px 2px rgba(15,23,42,0.04),
        0 14px 40px -22px rgba(30,58,138,0.18);
    overflow: hidden;
}
.page-rating-block::before {
    
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--brand-mountain) 0%,
        var(--accent) 38%,
        var(--brand-green) 75%,
        var(--rating-excellent) 100%);
    opacity: 0.85;
}
[data-theme="dark"] .page-rating-block {
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(59,130,246,0.10) 0%, transparent 55%),
        linear-gradient(180deg, rgba(22,27,34,0.92) 0%, rgba(15,23,42,0.96) 100%);
    border-color: rgba(148,197,255,0.20);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 14px 40px -22px rgba(0,0,0,0.55);
}

.page-rating-block__score {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    padding: 0;
    border: 0;
    margin: 0;
    position: relative;
}
.page-rating-block__score::before {
    content: 'Editor Score';
    font-family: 'Unbounded', var(--font-family);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand-green);
    margin-bottom: 4px;
}
[data-theme="dark"] .page-rating-block__score::before { color: #10b981; }
.page-rating-block__value {
    font-family: 'Unbounded', var(--font-family);
    font-size: 76px;
    font-weight: 600;
    line-height: 0.92;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--brand-mountain) 0%, var(--accent) 50%, var(--brand-green) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    display: inline-block;
    animation: rating-pop 700ms var(--ease-premium) both;
}
@keyframes rating-pop {
    0%   { opacity: 0; transform: translateY(8px) scale(0.92); }
    60%  { opacity: 1; transform: translateY(0) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.page-rating-block__max {
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--text-muted);
    letter-spacing: -0.01em;
    margin-left: 2px;
    align-self: flex-end;
    margin-bottom: 12px;
}

.page-rating-block__score::after {
    content: '';
    width: 56px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand-green), var(--accent));
    margin-top: 6px;
    box-shadow: 0 1px 6px -1px color-mix(in srgb, var(--brand-green) 50%, transparent);
}

.page-rating-block__criteria {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: center;
    width: 100%;
}
.page-rating-block__crit {
    display: grid;
    grid-template-columns: minmax(120px, 160px) 1fr 38px;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    padding: 4px 0;
}
.page-rating-block__crit-name {
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: -0.005em;
}
.page-rating-block__crit-bar {
    position: relative;
    height: 6px;
    background: color-mix(in srgb, var(--brand-mountain) 8%, var(--border-light));
    border-radius: 99px;
    overflow: hidden;
}
.page-rating-block__crit-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg,
        var(--brand-mountain) 0%,
        var(--accent) 60%,
        var(--brand-green) 100%);
    border-radius: 99px;
    box-shadow: 0 0 8px -2px color-mix(in srgb, var(--accent) 50%, transparent);
    
    transform-origin: left center;
    animation: crit-fill 900ms var(--ease-premium) both;
}
@keyframes crit-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
.page-rating-block__crit-score {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13px;
    text-align: right;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.page-rating-block__visitor {
    grid-column: 1 / -1;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--brand-green) 22%, transparent);
    background: color-mix(in srgb, var(--brand-green) 6%, transparent);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    justify-self: start;
}
.page-rating-block__visitor::before {
    content: '★';
    color: #f59e0b;
    font-size: 14px;
    line-height: 1;
}
.page-rating-block__visitor strong { color: var(--text-primary); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; }
.page-rating-block__visitor-count { color: var(--text-muted); font-family: var(--font-mono); }

@media (max-width: 720px) {
    .page-rating-block {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 22px 20px;
    }
    .page-rating-block__score { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px; }
    .page-rating-block__score::before { width: 100%; }
    .page-rating-block__score::after { width: 40px; height: 2px; margin-top: 0; align-self: center; margin-left: 8px; }
    .page-rating-block__value { font-size: 56px; }
    .page-rating-block__max { font-size: 14px; margin-bottom: 8px; }
    .page-rating-block__crit { grid-template-columns: minmax(100px, 1fr) 1.5fr 32px; gap: 10px; font-size: 12px; }
    .page-rating-block__visitor { padding: 10px 14px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .page-rating-block__value,
    .page-rating-block__crit-fill { animation: none; }
}

.page-info-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 32px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.page-info-table__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--border-light);
    transition: background 150ms;
}
.page-info-table__row:last-child { border-bottom: none; }
.page-info-table__row:hover { background: var(--bg-card-alt); }
.page-info-table__icon {
    width: 20px; height: 20px;
    flex-shrink: 0;
    opacity: 0.55;
    color: var(--accent);
}
.page-info-table__label {
    color: var(--text-muted);
    min-width: 140px;
    font-size: var(--font-size-sm);
    letter-spacing: 0.01em;
}
.page-info-table__value {
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    letter-spacing: -0.005em;
}

.page-author-bio-block {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 24px 28px;
    margin: 40px 0 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(15,23,42,0.03);
}
[data-theme="dark"] .page-author-bio-block { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 2px rgba(0,0,0,0.2); }

.page-author-bio-block__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border);
    background: var(--bg-card-alt);
}
.page-author-bio-block__avatar--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.01em;
}

.page-author-bio-block__body {
    flex: 1;
    min-width: 0;
}

.page-author-bio-block__label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.page-author-bio-block__name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}
.page-author-bio-block__role {
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 2px;
}

.page-author-bio-block__text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 10px;
}

.page-author-bio-block__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    letter-spacing: -0.005em;
    transition: color 200ms var(--ease-premium);
}
.page-author-bio-block__link:hover { color: var(--accent-hover); }
.page-author-bio-block__arrow {
    display: inline-block;
    transition: transform 200ms var(--ease-premium);
}
.page-author-bio-block__link:hover .page-author-bio-block__arrow { transform: translateX(4px); }

@media (max-width: 640px) {
    .page-author-bio-block {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }
    .page-author-bio-block__avatar { width: 56px; height: 56px; }
}

.page-generic-block {
    margin: 28px 0;
    max-width: 800px;
}
.page-generic-block h3 {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.page-generic-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.page-generic-block ul li {
    padding: 8px 0 8px 20px;
    position: relative;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--text-secondary);
}
.page-generic-block ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    width: 8px;
    height: 1.5px;
    background: var(--accent);
    border-radius: 1px;
}
.page-generic-block p {
    font-size: var(--font-size-sm);
    line-height: 1.65;
    color: var(--text-secondary);
}

.page-content-block {
    line-height: var(--line-height-relaxed);
    max-width: 800px;
}

.page-content-block h2 {
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    margin: 3rem 0 1rem;
    border-top: none;
}
.page-content-block h2:first-child {
    margin-top: 0;
}

.page-content-block h3 {
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 2rem 0 0.75rem;
}

.page-content-block h4 {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 1.5rem 0 0.5rem;
    letter-spacing: -0.005em;
    line-height: 1.35;
}

.page-content-block h5 {
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-green);
    margin: 1.25rem 0 0.5rem;
    line-height: 1.3;
}
[data-theme="dark"] .page-content-block h5 { color: #10b981; }

@media (max-width: 768px) {
    .page-content-block h2 { font-size: 22px; margin-top: 2.5rem; }
    .page-content-block h3 { font-size: 17px; margin-top: 1.75rem; }
    .page-content-block h4 { font-size: 15.5px; }
}

.page-content-block p { color: var(--text-secondary); }

.page-content-block > p:last-child:has(> br:only-child) { display: none; }
.page-content-block > p:empty { display: none; }
.page-content-block > p:last-child { margin-bottom: 0; }
.page-content-block blockquote {
    border-left: 3px solid var(--accent);
    padding: 12px 20px;
    margin: 24px 0;
    color: var(--text-secondary);
    font-style: italic;
    background: var(--bg-card-alt);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.page-content-block { counter-reset: figure-counter; }

.page-content-block figure.content-media {
    margin: 40px auto 32px;
    max-width: 100%;
    position: relative;
    counter-increment: figure-counter;
}
.page-content-block figure.content-media.align-left { margin-left: 0; margin-right: auto; }
.page-content-block figure.content-media.align-right { margin-left: auto; margin-right: 0; }
.page-content-block figure.content-media.align-center { margin-left: auto; margin-right: auto; }

.page-content-block figure.content-media::after {
    content: '';
    position: absolute;
    inset: -14px -14px 40px -14px;
    z-index: 0;
    background:
        radial-gradient(400px 120px at 90% 10%, rgba(16, 185, 129, 0.06), transparent 70%),
        radial-gradient(500px 160px at 10% 90%, rgba(125, 211, 252, 0.05), transparent 70%);
    opacity: 0;
    transition: opacity 400ms var(--ease-premium);
    pointer-events: none;
    border-radius: 22px;
}
.page-content-block figure.content-media:hover::after { opacity: 1; }

.page-content-block figure.content-media picture,
.page-content-block figure.content-media > img {
    display: block;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-card);
    position: relative;
    z-index: 1;
}
.page-content-block figure.content-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 12px 24px -12px rgba(15, 23, 42, 0.14);
    transition:
        box-shadow 360ms var(--ease-premium),
        transform 360ms var(--ease-premium),
        border-color 360ms var(--ease-premium);
    position: relative;
    z-index: 1;
}

.page-content-block figure.content-media:has(figcaption:not(:empty)) img,
.page-content-block figure.content-media:has(figcaption:not(:empty)) picture,
.page-content-block figure.content-media:has(figcaption:not(:empty)) > img {
    border-radius: 14px 14px 0 0;
}
.page-content-block figure.content-media:has(figcaption:not(:empty)) img {
    border-bottom: none;
}
.page-content-block figure.content-media:hover img {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--brand-mountain) 25%, rgba(148, 163, 184, 0.16));
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.06),
        0 24px 44px -18px color-mix(in srgb, var(--brand-mountain) 45%, rgba(15, 23, 42, 0.18)),
        0 8px 16px -8px color-mix(in srgb, var(--brand-green) 20%, transparent);
}

.page-content-block figure.content-media:hover figcaption { transform: translateY(-3px); }
[data-theme="dark"] .page-content-block figure.content-media img {
    border-color: rgba(148, 163, 184, 0.14);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 12px 24px -12px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .page-content-block figure.content-media:hover img {
    border-color: color-mix(in srgb, #94c5ff 25%, rgba(148, 163, 184, 0.14));
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.4),
        0 24px 44px -18px color-mix(in srgb, #94c5ff 30%, rgba(0, 0, 0, 0.55)),
        0 8px 16px -8px color-mix(in srgb, #10b981 25%, transparent);
}

.page-content-block figure.content-media figcaption {
    position: relative;
    z-index: 2;
    margin-top: 0;
    padding: 12px 16px;
    
    background:
        radial-gradient(320px 90px at 92% 25%, rgba(254, 215, 170, 0.22), transparent 70%),
        radial-gradient(360px 110px at 8% 75%, rgba(125, 211, 252, 0.14), transparent 70%),
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.85) 70%,
            color-mix(in srgb, var(--brand-mountain) 14%, rgba(255, 255, 255, 0.7)) 100%);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-top: none;
    border-radius: 0 0 14px 14px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-secondary);
    font-style: italic;
    letter-spacing: -0.003em;
    transition: transform 360ms var(--ease-premium);
}

.page-content-block figure.content-media figcaption::before {
    content: 'FIG. ' counter(figure-counter, decimal-leading-zero);
    display: inline;
    margin-right: 10px;
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--brand-green);
    text-transform: uppercase;
    font-style: normal;
    vertical-align: 1px;
}
[data-theme="dark"] .page-content-block figure.content-media figcaption {
    background:
        radial-gradient(320px 90px at 92% 25%, rgba(254, 215, 170, 0.08), transparent 70%),
        radial-gradient(360px 110px at 8% 75%, rgba(125, 211, 252, 0.10), transparent 70%),
        linear-gradient(180deg,
            rgba(22, 27, 37, 0.85) 0%,
            rgba(22, 27, 37, 0.78) 70%,
            color-mix(in srgb, var(--brand-mountain) 32%, rgba(22, 27, 37, 0.70)) 100%);
    border-color: rgba(148, 163, 184, 0.12);
    color: var(--text-secondary);
}
[data-theme="dark"] .page-content-block figure.content-media figcaption::before { color: #10b981; }

.page-content-block figure.content-media figcaption:empty { display: none; }

@media (max-width: 768px) {
    .page-content-block figure.content-media { margin: 32px auto 24px; }
    .page-content-block figure.content-media figcaption {
        font-size: 13px;
        padding: 10px 14px;
    }
    .page-content-block figure.content-media figcaption::before {
        font-size: 9.5px;
        margin-right: 8px;
    }
}

.page-content-block img:not(figure img):not(picture img) {
    display: block;
    width: 100%;
    max-width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px -12px rgba(15, 23, 42, 0.12);
    margin: 32px auto;
}

.page-content-block ul {
    list-style: none;
    padding-left: 16px;
    margin: 20px 0;
    color: var(--text-secondary);
}
.page-content-block ol {
    list-style: decimal outside;
    padding-left: 40px;
    margin: 20px 0;
    color: var(--text-secondary);
}
.page-content-block ul ul,
.page-content-block ul ol,
.page-content-block ol ul,
.page-content-block ol ol {
    margin: 10px 0 10px 0;
}
.page-content-block li {
    position: relative;
    margin-bottom: 10px;
    line-height: 1.65;
}
.page-content-block li:last-child { margin-bottom: 0; }

.page-content-block ul > li {
    padding-left: 24px;
}
.page-content-block ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 12px;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-green), var(--brand-mountain));
    border-radius: 2px;
}
[data-theme="dark"] .page-content-block ul > li::before {
    background: linear-gradient(90deg, #10b981, #94c5ff);
}

.page-content-block ul ul > li::before {
    width: 8px;
    background: color-mix(in srgb, var(--brand-mountain) 55%, transparent);
}
[data-theme="dark"] .page-content-block ul ul > li::before {
    background: color-mix(in srgb, #94c5ff 55%, transparent);
}

.page-content-block ol > li::marker {
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--brand-green);
    letter-spacing: 0.02em;
}
[data-theme="dark"] .page-content-block ol > li::marker { color: #10b981; }

.page-content-block ol ol {
    padding-left: 32px;
}
.page-content-block ol ol > li::marker {
    font-size: 12px;
    font-weight: 400;
    color: color-mix(in srgb, var(--brand-mountain) 75%, transparent);
}
[data-theme="dark"] .page-content-block ol ol > li::marker {
    color: color-mix(in srgb, #94c5ff 75%, transparent);
}

:root {
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
    --font-serif: 'Fraunces', 'Crimson Pro', Georgia, 'Times New Roman', serif;
    --ease-premium: cubic-bezier(0.4, 0, 0.2, 1);

    
    --wb-info-fg: var(--brand-mountain);
    --wb-info-tint: rgba(30, 58, 138, 0.08);

    --wb-warning-fg: #b45309;
    --wb-warning-tint: rgba(217, 119, 6, 0.10);

    --wb-tip-fg: var(--brand-green);
    --wb-tip-tint: rgba(5, 150, 105, 0.08);

    --wb-quote-rule: #0f172a;
}
[data-theme="dark"] {
    --wb-info-fg: #94c5ff;
    --wb-info-tint: rgba(148, 197, 255, 0.10);

    --wb-warning-fg: #fbbf24;
    --wb-warning-tint: rgba(251, 191, 36, 0.10);

    --wb-tip-fg: #10b981;
    --wb-tip-tint: rgba(16, 185, 129, 0.10);

    --wb-quote-rule: #f8fafc;
}

:root {
    --icon-info: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6.5a2.5 2.5 0 0 1 2.5-2.5h11a2.5 2.5 0 0 1 2.5 2.5v8a2.5 2.5 0 0 1-2.5 2.5H12l-3.5 3v-3H6.5A2.5 2.5 0 0 1 4 14.5z'/><circle cx='12' cy='10.5' r='1' fill='black' stroke='none'/></svg>");

    --icon-warning: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M8.5 3h7L20 7.5v9L15.5 21h-7L4 16.5v-9z'/><path d='M12 8v4.5'/><circle cx='12' cy='16' r='0.9' fill='black' stroke='none'/></svg>");

    --icon-tip: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3.5'/><path d='M12 3v2.5M12 18.5V21M3 12h2.5M18.5 12H21'/><path d='M5.7 5.7l1.8 1.8M16.5 16.5l1.8 1.8M18.3 5.7l-1.8 1.8M5.7 18.3l1.8-1.8'/></svg>");

    --icon-quote: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M10 8H6v3.5a2.5 2.5 0 0 0 2.5 2.5'/><path d='M18 8h-4v3.5a2.5 2.5 0 0 0 2.5 2.5'/><circle cx='6' cy='16.5' r='0.5' fill='black' stroke='none'/><circle cx='14' cy='16.5' r='0.5' fill='black' stroke='none'/></svg>");

    --icon-lock: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='10' width='16' height='11' rx='2.5'/><path d='M8 10V7a4 4 0 0 1 8 0v3'/><circle cx='12' cy='15.5' r='1.5' fill='black' stroke='none' opacity='0.2'/><path d='M12 14v3'/></svg>");

    --icon-eye: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12c3-4 6-6 9-6s6 2 9 6c-3 4-6 6-9 6s-6-2-9-6z'/><circle cx='12' cy='12' r='0.8' fill='black' stroke='none'/><circle cx='5.5' cy='12' r='0.4' fill='black' stroke='none' opacity='0.6'/><circle cx='18.5' cy='12' r='0.4' fill='black' stroke='none' opacity='0.6'/></svg>");
}

.wb {
    position: relative;
    display: block;
    padding: 16px 20px 18px;
    margin: 28px 0;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background:
        radial-gradient(320px 100px at 92% 15%, var(--wb-tint, transparent), transparent 70%),
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.85) 70%,
            color-mix(in srgb, var(--brand-mountain) 8%, rgba(255, 255, 255, 0.7)) 100%);
    font-size: var(--font-size-sm);
    line-height: 1.65;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 10px 22px -14px rgba(15, 23, 42, 0.10);
    overflow: hidden;
}

.wb::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--wb-accent-from, var(--brand-green)), var(--wb-accent-to, var(--brand-mountain)));
    pointer-events: none;
}
[data-theme="dark"] .wb {
    background:
        radial-gradient(320px 100px at 92% 15%, var(--wb-tint, transparent), transparent 70%),
        linear-gradient(180deg,
            rgba(22, 27, 37, 0.85) 0%,
            rgba(22, 27, 37, 0.78) 70%,
            color-mix(in srgb, var(--brand-mountain) 24%, rgba(22, 27, 37, 0.70)) 100%);
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.25),
        0 10px 22px -14px rgba(0, 0, 0, 0.40);
}

.wb__icon { display: none; }

.wb--info { --icon-svg: var(--icon-info); }
.wb--warning { --icon-svg: var(--icon-warning); }
.wb--tip { --icon-svg: var(--icon-tip); }
.wb__body { min-width: 0; }
.wb__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 8px;
    line-height: 1;
}

.wb__title::before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--icon-svg, none) center / 13px 13px no-repeat;
    mask: var(--icon-svg, none) center / 13px 13px no-repeat;
}
.wb__body p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.65;
}
[data-theme="dark"] .wb__body p { color: var(--text-secondary); }

.wb--info {
    --wb-accent-from: var(--brand-mountain);
    --wb-accent-to: #3b5bd4;
    --wb-tint: var(--wb-info-tint);
}
.wb--info .wb__icon,
.wb--info .wb__title { color: var(--wb-info-fg); }
[data-theme="dark"] .wb--info {
    --wb-accent-from: #94c5ff;
    --wb-accent-to: #3b5bd4;
}

.wb--warning {
    --wb-accent-from: #d97706;
    --wb-accent-to: #b45309;
    --wb-tint: var(--wb-warning-tint);
}
.wb--warning .wb__icon,
.wb--warning .wb__title { color: var(--wb-warning-fg); }
[data-theme="dark"] .wb--warning {
    --wb-accent-from: #fbbf24;
    --wb-accent-to: #d97706;
}

.wb--tip {
    --wb-accent-from: var(--brand-green);
    --wb-accent-to: #047857;
    --wb-tint: var(--wb-tip-tint);
}
.wb--tip .wb__icon,
.wb--tip .wb__title { color: var(--wb-tip-fg); }
[data-theme="dark"] .wb--tip {
    --wb-accent-from: #10b981;
    --wb-accent-to: #047857;
}

@media (max-width: 768px) {
    .wb {
        padding: 14px 16px 16px;
    }
    .wb__title {
        margin-bottom: 6px;
    }
}

.wb--quote {
    display: block;
    position: relative;
    grid-template-columns: unset;
    margin: 36px 0;
    padding: 22px 24px 22px 30px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background:
        radial-gradient(340px 110px at 92% 15%, rgba(254, 215, 170, 0.18), transparent 70%),
        radial-gradient(380px 130px at 8% 85%, rgba(125, 211, 252, 0.12), transparent 70%),
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.85) 70%,
            color-mix(in srgb, var(--brand-mountain) 10%, rgba(255, 255, 255, 0.7)) 100%);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 10px 22px -14px rgba(15, 23, 42, 0.12);
    overflow: visible;
    --wb-accent-from: var(--brand-green);
    --wb-accent-to: var(--brand-mountain);
}

.wb--quote::after {
    content: '\201C';
    position: absolute;
    top: 4px;
    left: 16px;
    font-family: 'Unbounded', Georgia, serif;
    font-size: 44px;
    line-height: 1;
    font-weight: 600;
    color: var(--brand-green);
    pointer-events: none;
}
[data-theme="dark"] .wb--quote {
    background:
        radial-gradient(340px 110px at 92% 15%, rgba(254, 215, 170, 0.06), transparent 70%),
        radial-gradient(380px 130px at 8% 85%, rgba(125, 211, 252, 0.10), transparent 70%),
        linear-gradient(180deg,
            rgba(22, 27, 37, 0.85) 0%,
            rgba(22, 27, 37, 0.78) 70%,
            color-mix(in srgb, var(--brand-mountain) 26%, rgba(22, 27, 37, 0.70)) 100%);
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.25),
        0 10px 22px -14px rgba(0, 0, 0, 0.40);
}
[data-theme="dark"] .wb--quote::after { color: #10b981; }

.wb--quote .wb__icon { display: none; }
.wb--quote .wb__title { display: none; }
.wb--quote .wb__body {
    padding-top: 18px; 
}
.wb--quote .wb__body p {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.55;
    letter-spacing: -0.005em;
    color: var(--brand-mountain);
    margin: 0;
    max-width: 640px;
}
[data-theme="dark"] .wb--quote .wb__body p { color: #cfe0ff; }

@media (max-width: 768px) {
    .wb--quote {
        margin: 28px 0;
        padding: 18px 18px 18px 22px;
    }
    .wb--quote::after {
        font-size: 36px;
        top: 2px;
        left: 12px;
    }
    .wb--quote .wb__body { padding-top: 14px; }
    .wb--quote .wb__body p { font-size: 15.5px; }
}

.faq {
    margin: 32px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: none;
}
.faq__item {
    position: relative;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.85) 70%,
        color-mix(in srgb, var(--brand-mountain) 6%, rgba(255, 255, 255, 0.7)) 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: border-color 240ms var(--ease-premium), box-shadow 240ms var(--ease-premium);
    overflow: hidden;
}
.faq__item:hover {
    border-color: color-mix(in srgb, var(--brand-mountain) 25%, rgba(148, 163, 184, 0.16));
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px -12px color-mix(in srgb, var(--brand-mountain) 20%, rgba(15, 23, 42, 0.12));
}
.faq__item[open] {
    border-color: color-mix(in srgb, var(--brand-green) 30%, rgba(148, 163, 184, 0.16));
}
[data-theme="dark"] .faq__item {
    background: linear-gradient(180deg,
        rgba(22, 27, 37, 0.85) 0%,
        rgba(22, 27, 37, 0.78) 70%,
        color-mix(in srgb, var(--brand-mountain) 20%, rgba(22, 27, 37, 0.70)) 100%);
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .faq__item[open] {
    border-color: color-mix(in srgb, #10b981 35%, rgba(148, 163, 184, 0.12));
}

.faq__item summary {
    padding: 16px 20px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 15.5px;
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: color 200ms var(--ease-premium);
}
.faq__item summary:hover { color: var(--brand-mountain); }
.faq__item summary::-webkit-details-marker,
.faq__item summary::marker { display: none; content: ''; }

.faq__item summary::after {
    content: '';
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    background:
        linear-gradient(var(--brand-green), var(--brand-green)) center / 9px 1.5px no-repeat,
        linear-gradient(var(--brand-green), var(--brand-green)) center / 1.5px 9px no-repeat,
        color-mix(in srgb, var(--brand-green) 10%, transparent);
    transition: transform 280ms var(--ease-premium), background 240ms;
}
.faq__item[open] summary { color: var(--brand-mountain); }
.faq__item[open] summary::after {
    transform: rotate(45deg);
    background:
        linear-gradient(var(--brand-mountain), var(--brand-mountain)) center / 9px 1.5px no-repeat,
        linear-gradient(var(--brand-mountain), var(--brand-mountain)) center / 1.5px 9px no-repeat,
        color-mix(in srgb, var(--brand-mountain) 10%, transparent);
}
[data-theme="dark"] .faq__item summary { color: var(--text-primary); }
[data-theme="dark"] .faq__item summary:hover,
[data-theme="dark"] .faq__item[open] summary { color: #cfe0ff; }
[data-theme="dark"] .faq__item summary::after {
    background:
        linear-gradient(#10b981, #10b981) center / 9px 1.5px no-repeat,
        linear-gradient(#10b981, #10b981) center / 1.5px 9px no-repeat,
        color-mix(in srgb, #10b981 15%, transparent);
}
[data-theme="dark"] .faq__item[open] summary::after {
    background:
        linear-gradient(#94c5ff, #94c5ff) center / 9px 1.5px no-repeat,
        linear-gradient(#94c5ff, #94c5ff) center / 1.5px 9px no-repeat,
        color-mix(in srgb, #94c5ff 15%, transparent);
}

.faq__item p {
    margin: 0;
    padding: 0 20px 18px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-secondary);
    border-top: 1px solid color-mix(in srgb, var(--brand-mountain) 10%, transparent);
    padding-top: 14px;
    margin-top: 2px;
}
[data-theme="dark"] .faq__item p {
    border-top-color: color-mix(in srgb, var(--brand-mountain) 22%, transparent);
}

@media (max-width: 768px) {
    .faq { gap: 8px; margin: 28px 0; }
    .faq__item summary { padding: 14px 16px; font-size: 14.5px; }
    .faq__item summary::after { width: 18px; height: 18px; }
    .faq__item p { padding: 12px 16px 16px; font-size: 14px; }
}

.cta {
    margin: 32px 0;
}
.cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    background: #0f172a;
    color: #ffffff;
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    letter-spacing: -0.005em;
    transition: background 200ms var(--ease-premium), transform 150ms var(--ease-premium);
}
[data-theme="dark"] .cta__btn {
    background: #f8fafc;
    color: #0f172a;
}
.cta__btn::after {
    content: "→";
    font-size: 15px;
    line-height: 1;
    transition: transform 200ms var(--ease-premium);
}
.cta__btn:hover {
    background: #1e293b;
    color: #ffffff;
}
[data-theme="dark"] .cta__btn:hover { background: #ffffff; color: #0f172a; }
.cta__btn:hover::after { transform: translateX(4px); }

/* Spoiler в card-стиле, согласован с info/tip/warning/quote.
   Нейтральная slate-палитра отличает spoiler от смысловых widgets,
   но визуально остаётся в одной системе (border, padding, radius). */
.spoiler {
    margin: 24px 0;
    background: color-mix(in srgb, var(--brand-mountain) 3%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 14%, var(--border));
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 220ms var(--ease-premium), box-shadow 220ms var(--ease-premium);
}
.spoiler:hover {
    border-color: color-mix(in srgb, var(--brand-mountain) 26%, var(--border));
    box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--brand-mountain) 28%, transparent);
}
[data-theme="dark"] .spoiler {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(148, 197, 255, 0.12);
}
[data-theme="dark"] .spoiler:hover {
    border-color: rgba(148, 197, 255, 0.24);
}

.spoiler__title {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-family: 'Unbounded', var(--font-family);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    list-style: none;
    padding: 14px 18px;
    transition: color 200ms var(--ease-premium), background 200ms var(--ease-premium);
    user-select: none;
}
.spoiler__title::-webkit-details-marker,
.spoiler__title::marker { display: none; }

/* Иконка-плашка слева в стиле info/tip/warning «icon chip» */
.spoiler__title::before {
    content: "";
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    background:
        var(--icon-eye) center / 14px 14px no-repeat,
        color-mix(in srgb, var(--brand-mountain) 10%, transparent);
    background-blend-mode: normal;
    -webkit-mask-composite: source-over;
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 18%, transparent);
}
[data-theme="dark"] .spoiler__title::before {
    background: var(--icon-eye) center / 14px 14px no-repeat, rgba(148, 197, 255, 0.10);
    border-color: rgba(148, 197, 255, 0.20);
}

/* Chevron справа, поворачивается при открытом state */
.spoiler__title::after {
    content: "";
    margin-left: auto;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-color: currentColor;
    opacity: 0.5;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") center / contain no-repeat;
    transition: transform 240ms var(--ease-premium), opacity 200ms ease;
}
.spoiler[open] > .spoiler__title::after {
    transform: rotate(180deg);
    opacity: 0.85;
}
.spoiler__title:hover { background: color-mix(in srgb, var(--brand-mountain) 4%, transparent); }
[data-theme="dark"] .spoiler__title:hover { background: rgba(148, 197, 255, 0.04); }

.spoiler__body {
    padding: 4px 18px 16px;
    font-size: var(--font-size-sm);
    line-height: 1.65;
    color: var(--text-secondary);
    border-top: 1px dashed color-mix(in srgb, var(--brand-mountain) 12%, var(--border));
    margin-top: 0;
    padding-top: 14px;
    animation: spoilerReveal 300ms var(--ease-premium);
}
[data-theme="dark"] .spoiler__body {
    border-top-color: rgba(148, 197, 255, 0.10);
}
.spoiler__body p { margin: 0 0 12px; }
.spoiler__body p:last-child { margin-bottom: 0; }
.spoiler__body ol,
.spoiler__body ul {
    margin: 0 0 12px;
    padding-left: 22px;
}
.spoiler__body ol:last-child,
.spoiler__body ul:last-child { margin-bottom: 0; }
.spoiler__body li {
    margin: 0 0 8px;
    padding-left: 4px;
    line-height: 1.6;
}
.spoiler__body li:last-child { margin-bottom: 0; }
.spoiler__body li::marker {
    color: var(--brand-green);
    font-weight: 700;
}
.spoiler__body strong { color: var(--text-primary); font-weight: 600; }
.spoiler__body em { color: var(--text-primary); }
@keyframes spoilerReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.hidden-text {
    margin: 24px 0;
    padding: 20px 24px;
    border-radius: 12px;
    font-size: var(--font-size-sm);
    line-height: 1.65;
}
.hidden-text--visible {
    background: var(--wb-tip-bg);
    border: 1px solid var(--wb-tip-border);
    color: var(--text-primary);
}
.hidden-text--visible p { margin: 0; }
.hidden-text--locked {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-card-alt);
    border: 1px dashed var(--border);
    color: var(--text-muted);
}
.hidden-text__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    position: relative;
    opacity: 0.55;
}
.hidden-text__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: currentColor;
    -webkit-mask: var(--icon-lock) center / 22px 22px no-repeat;
    mask: var(--icon-lock) center / 22px 22px no-repeat;
}
.hidden-text__msg a {
    color: var(--accent);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.hidden-text__msg a:hover { text-decoration-thickness: 2px; }

.card-widget {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    margin: 24px 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 200ms var(--ease-premium),
                box-shadow 200ms var(--ease-premium),
                transform 200ms var(--ease-premium);
}
.card-widget:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 24px -12px rgba(37, 99, 235, 0.35);
    transform: translateY(-2px);
    color: var(--text-primary);
}
.card-widget__img,
.card-widget__no-img {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: contain;
    background: var(--bg-card-alt);
    flex-shrink: 0;
}
.card-widget__no-img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 0;
    position: relative;
}
.card-widget__no-img::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 24px;
    height: 24px;
    background-color: var(--text-muted);
    opacity: 0.45;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}
.card-widget__no-img[data-card-type="casino-card"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><ellipse cx='12' cy='12' rx='9' ry='4'/><path d='M3 12v4c0 2.2 4 4 9 4s9-1.8 9-4v-4'/><path d='M8 12v4M12 13v4M16 12v4'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><ellipse cx='12' cy='12' rx='9' ry='4'/><path d='M3 12v4c0 2.2 4 4 9 4s9-1.8 9-4v-4'/><path d='M8 12v4M12 13v4M16 12v4'/></svg>");
}
.card-widget__no-img[data-card-type="slot-card"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='5' width='16' height='14' rx='2.5'/><path d='M8 10v4M12 9v6M16 10v4'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='5' width='16' height='14' rx='2.5'/><path d='M8 10v4M12 9v6M16 10v4'/></svg>");
}
.card-widget__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}
.card-widget__label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.card-widget__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.card-widget--missing {
    padding: 14px 18px;
    background: rgba(220, 38, 38, 0.04);
    border: 1px dashed rgba(220, 38, 38, 0.3);
    color: var(--danger);
    font-size: var(--font-size-sm);
    font-style: italic;
    border-radius: 12px;
    margin: 24px 0;
}

.list-widget {
    margin: 32px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: transparent;
}
.list-widget__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border-light);
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 200ms var(--ease-premium),
                padding 200ms var(--ease-premium);
}
.list-widget__item:last-child { border-bottom: none; }
.list-widget__item:hover {
    color: var(--text-primary);
    transform: translateX(4px);
}
.list-widget__num {
    min-width: 32px;
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.list-widget__item:hover .list-widget__num { color: var(--accent); }
.list-widget__img {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: contain;
    background: var(--bg-card-alt);
    flex-shrink: 0;
}
.list-widget__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.list-widget__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.005em;
}
.list-widget__bonus {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* ============================================================
   slot-list — премиум горизонтальная таблица слотов
   ============================================================ */
.slot-list {
    margin: 32px 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-card);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 6px 20px -12px rgba(0, 0, 0, 0.06);
}

/* desktop grid: [logo][title][rtp][max][vol][cta] */
.slot-list__head,
.slot-list__row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 90px 110px 130px 28px;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
}

.slot-list__head {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-card-alt) 100%, transparent) 0%,
        color-mix(in srgb, var(--bg-card-alt) 55%, transparent) 100%
    );
    border-bottom: 1px solid var(--border);
    padding-top: 11px;
    padding-bottom: 11px;
}

.slot-list__h {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
/* SLOT header стоит над названием (колонка title) */
.slot-list__h--slot { grid-column: 2; }
.slot-list__h--rtp,
.slot-list__h--max { text-align: center; }
.slot-list__h--vol { text-align: left; padding-left: 14px; }

.slot-list__row {
    text-decoration: none;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
    position: relative;
    transition: background 200ms var(--ease-premium, ease);
}
.slot-list__row:last-child { border-bottom: none; }
.slot-list__row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--brand-green);
    opacity: 0;
    transition: opacity 200ms var(--ease-premium, ease);
}
@media (hover: hover) {
    .slot-list__row:hover {
        background: var(--bg-card-alt);
        color: var(--text-primary);
    }
    .slot-list__row:hover::before { opacity: 1; }
}
.slot-list__row:focus-visible {
    outline: 2px solid var(--brand-green);
    outline-offset: -2px;
}
/* specs wrapper — на desktop прозрачен, дети идут в grid row; на mobile это flex-контейнер */
.slot-list__specs { display: contents; }

.slot-list__logo {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--bg-card-alt);
    overflow: hidden;
    flex-shrink: 0;
}
.slot-list__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.slot-list__logo-fallback {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-muted) 25%, transparent);
}

.slot-list__title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    line-height: 1.3;
}
.slot-list__date-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-bottom: 3px;
    padding: 2px 7px 2px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-green) 10%, transparent);
    color: color-mix(in srgb, var(--brand-green) 85%, var(--text-primary) 15%);
    font-family: var(--font-sans, inherit);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.slot-list__date-icon {
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    stroke-width: 1.6;
}
.slot-list__date-text {
    line-height: 1;
}
.slot-list__title-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slot-list__title-provider {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Title-top: expert + visitor + date — компактная meta-строка над названием.
   nowrap чтобы chips ВСЕГДА в одной строке. Year даты прячется на узких экранах. */
.slot-list__title-top {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
    margin-bottom: 2px;
    min-width: 0;
}
.slot-list__title-top > * { flex-shrink: 0; }

/* Inline date — subtle pill в серых тонах, в тон scores но без brand-цвета */
.slot-list__date {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-muted) 18%, transparent);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.01em;
    line-height: 1.4;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .slot-list__date {
    background: rgba(148, 163, 184, 0.06);
    border-color: rgba(148, 163, 184, 0.16);
}
.slot-list__date-year { white-space: nowrap; }
.slot-list__score {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.slot-list__score svg { width: 10px; height: 10px; }
.slot-list__score--expert {
    background: color-mix(in srgb, var(--brand-green) 14%, transparent);
    color: var(--brand-green);
    border: 1px solid color-mix(in srgb, var(--brand-green) 24%, transparent);
}
.slot-list__score--visitor {
    background: color-mix(in srgb, var(--brand-mountain) 8%, transparent);
    color: var(--brand-mountain);
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 18%, transparent);
}
[data-theme="dark"] .slot-list__score--visitor {
    color: #94c5ff;
    border-color: rgba(148, 197, 255, 0.20);
    background: rgba(148, 197, 255, 0.08);
}
.slot-list__score svg { flex-shrink: 0; }

.slot-list__spec {
    font-size: 13px;
    color: var(--text-primary);
    position: relative;
    min-width: 0;
}
/* Spec-label (icon + text): на desktop скрыт (header колонки делают ту же работу),
   на mobile показывается сверху плашки. */
.slot-list__spec-label {
    display: none;
    align-items: center;
    gap: 4px;
    font-family: var(--font-sans, inherit);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    line-height: 1.1;
}
.slot-list__spec-label > svg {
    flex-shrink: 0;
    color: color-mix(in srgb, var(--brand-green) 80%, var(--text-muted) 20%);
    opacity: 0.9;
}
.slot-list__spec-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.slot-list__spec-icon {
    flex-shrink: 0;
    color: color-mix(in srgb, var(--brand-green) 80%, var(--text-muted) 20%);
    opacity: 0.9;
}
.slot-list__spec--rtp,
.slot-list__spec--max { text-align: center; }
.slot-list__spec--rtp .slot-list__spec-value,
.slot-list__spec--max .slot-list__spec-value { display: inline-flex; justify-content: center; }
.slot-list__spec--rtp,
.slot-list__spec--max { display: flex; justify-content: center; }
.slot-list__spec--vol { padding-left: 14px; }
.slot-list__spec--vol .slot-list__spec-value {
    font-family: var(--font-sans, inherit);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: -0.005em;
}
.slot-list__vol-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-muted) 18%, transparent);
}
.slot-list__spec--vol[data-vol="low"] .slot-list__vol-dot {
    background: #22c55e;
    box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 22%, transparent);
}
.slot-list__spec--vol[data-vol="medium"] .slot-list__vol-dot {
    background: #eab308;
    box-shadow: 0 0 0 3px color-mix(in srgb, #eab308 22%, transparent);
}
.slot-list__spec--vol[data-vol="medium-high"] .slot-list__vol-dot {
    background: #f97316;
    box-shadow: 0 0 0 3px color-mix(in srgb, #f97316 22%, transparent);
}
.slot-list__spec--vol[data-vol="high"] .slot-list__vol-dot {
    background: #ef4444;
    box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 22%, transparent);
}
.slot-list__spec--vol[data-vol="very-high"] .slot-list__vol-dot {
    background: #dc2626;
    box-shadow: 0 0 0 3px color-mix(in srgb, #dc2626 28%, transparent);
}

.slot-list__cta {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: transform 200ms var(--ease-premium, ease),
                color 200ms var(--ease-premium, ease);
}
.slot-list__cta::after {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
}
@media (hover: hover) {
    .slot-list__row:hover .slot-list__cta {
        color: var(--brand-green);
        transform: translateX(3px);
    }
    .slot-list__row:hover .slot-list__num { color: var(--brand-green); }
}

/* mobile: независимые карточки */
@media (max-width: 680px) {
    .slot-list {
        margin: 24px 0;
        border: none;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        overflow: visible;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .slot-list__head { display: none; }
    .slot-list__row {
        position: relative;
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        grid-template-areas:
            "logo title"
            "specs specs";
        align-items: center;
        column-gap: 12px;
        row-gap: 14px;
        padding: 14px 44px 14px 14px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 4px 16px -10px rgba(0, 0, 0, 0.06);
    }
    .slot-list__row::before {
        top: 14px;
        bottom: 14px;
        border-radius: 2px;
    }
    .slot-list__logo { grid-area: logo; width: 56px; height: 56px; }
    .slot-list__title {
        grid-area: title;
        align-self: center;
        gap: 3px;
    }
    .slot-list__title-name {
        white-space: normal;
        font-size: 16px;
        overflow: visible;
        text-overflow: clip;
    }
    .slot-list__title-provider {
        font-size: 12px;
    }
    .slot-list__specs {
        grid-area: specs;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px;
        width: 100%;
        min-width: 0;
    }
    .slot-list__spec,
    .slot-list__spec--rtp,
    .slot-list__spec--max,
    .slot-list__spec--vol {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;
        padding: 5px 9px;
        border-radius: 6px;
        background: var(--bg-card-alt);
        text-align: left;
        min-width: 0;
        max-width: 100%;
        flex: 0 1 auto;
        line-height: 1.2;
    }
    /* Label на mobile остаётся скрытым — иконка + значение в одну строку */
    .slot-list__spec-label { display: none; }
    .slot-list__spec-icon { display: inline-flex; }
    .slot-list__spec-value {
        font-size: 12px;
        white-space: nowrap;
        line-height: 1.2;
    }
    .slot-list__spec--vol { padding-left: 9px; }
    .slot-list__spec--vol .slot-list__spec-value { font-size: 12px; }
    .slot-list__cta {
        display: flex;
        position: absolute;
        top: 50%;
        right: 14px;
        transform: translateY(-50%);
        width: 22px;
        height: 22px;
        color: var(--text-muted);
    }
}

.interactions {
    margin-top: 32px;
    padding: 28px 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(15,23,42,0.03);
}
[data-theme="dark"] .interactions { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 2px rgba(0,0,0,0.2); }
.interactions:empty { display: none; }
.interactions__title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.interactions__title + .interactions__rating-summary { margin-top: 0; }
.interactions__rating-summary {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: 16px;
}
.interactions__rating-summary strong {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    font-weight: 500;
}
.interactions__hint {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: 16px;
}
.interactions__hint a {
    color: var(--accent);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.interactions__empty {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 16px;
}

.rating-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
    margin-bottom: 0;
}
.rating-form__label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.rating-form__select {
    padding: 8px 32px 8px 12px;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238893a2' stroke-width='1.5' stroke-linecap='round'><path d='M3 5l3 3 3-3'/></svg>") no-repeat right 10px center;
    background-size: 12px 12px;
    color: var(--text-primary);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color 150ms var(--ease-premium);
}
.rating-form__select:hover { border-color: var(--accent); }
.rating-form__select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.rating-form__btn {
    padding: 9px 20px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    background: #0f172a;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 200ms var(--ease-premium), transform 150ms;
    letter-spacing: -0.005em;
}
[data-theme="dark"] .rating-form__btn { background: #f8fafc; color: #0f172a; }
.rating-form__btn:hover { background: #1e293b; transform: translateY(-1px); }
[data-theme="dark"] .rating-form__btn:hover { background: #ffffff; }
.rating-form__saved {
    font-size: var(--font-size-xs);
    color: var(--success);
    font-weight: 500;
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}

.comments {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
.comments__item {
    margin-bottom: 0;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-light);
}
.comments__item:last-child { border-bottom: none; }
.comments__row { display: flex; gap: 12px; }
.comments__avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.comments__avatar--initials {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    flex-shrink: 0;
}
.comments__content { flex: 1; min-width: 0; }
.comments__meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.comments__author { font-size: var(--font-size-sm); font-weight: 600; }
.comments__time { font-size: var(--font-size-xs); color: var(--text-muted); }
.comments__body { font-size: var(--font-size-sm); line-height: 1.6; color: var(--text-secondary); }

.comment-form { margin-top: 16px; }
.comment-form textarea {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
    resize: vertical;
    min-height: 80px;
    margin-bottom: 10px;
}
.comment-form textarea:focus { outline: none; border-color: var(--accent); }
.comment-form button {
    padding: 8px 20px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s;
}
.comment-form button:hover { background: var(--accent-hover); }

.page-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: 16px;
}
.page-meta__item { display: inline-flex; align-items: center; gap: 4px; }
.page-meta__icon { width: 14px; height: 14px; opacity: 0.6; }
.page-meta__sep { color: var(--border); margin: 0 2px; }

.page-author-line {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: 16px;
}
.page-author-line__prefix { color: var(--text-muted); }

.breadcrumbs {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: 12px;
}
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.breadcrumbs li { display: inline-flex; align-items: center; }
.breadcrumbs a { color: var(--text-muted); text-decoration: none; transition: color 0.15s; display: inline-flex; align-items: center; gap: 5px; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs__sep { padding: 0 4px; opacity: 0.4; font-size: 12px; }
.breadcrumbs__home-icon { flex-shrink: 0; opacity: 0.85; transform: translateY(-2px); }
.breadcrumbs a:hover .breadcrumbs__home-icon { opacity: 1; }

/* Mobile: одна строка с горизонтальным скроллом и fade — как у hero-chips */
@media (max-width: 768px) {
    .breadcrumbs ol {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-right: 32px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
        mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
    }
    .breadcrumbs ol::-webkit-scrollbar { display: none; }
    .breadcrumbs li { flex-shrink: 0; white-space: nowrap; }
}

.access-denied {
    text-align: center;
    padding: 48px 24px;
}
.access-denied__icon { font-size: 48px; margin-bottom: 16px; }
.access-denied__title { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: 8px; }
.access-denied__text { color: var(--text-secondary); margin-bottom: 20px; }
.access-denied__btn {
    display: inline-block;
    padding: 10px 24px;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 0.15s;
}
.access-denied__btn:hover { background: var(--accent-hover); color: #fff; }

.site-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.site-sidebar .rating-block,
.site-sidebar .card {
    margin-bottom: 0;
}

.rating-block {
    margin-bottom: 0;
}
.rating-block__title {
    font-size: var(--font-size-base);
    font-weight: 700;
    margin-bottom: 12px;
}
.rating-block__empty { font-size: var(--font-size-sm); color: var(--text-muted); }
.rating-block__list { list-style: none; padding: 0; margin: 0; counter-reset: rlist; }
.rating-block__item {
    counter-increment: rlist;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
}
.rating-block__item:last-child { border-bottom: none; }
.rating-block__item::before {
    content: counter(rlist);
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--accent);
    min-width: 20px;
    text-align: center;
}
.rating-block__thumb { flex-shrink: 0; }
.rating-block__thumb img {
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    object-fit: contain;
    background: var(--bg-card-alt);
}
.rating-block__body { min-width: 0; flex: 1; }
.rating-block__link {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    line-height: 1.3;
}
.rating-block__link:hover { color: var(--accent); }
.rating-block__entity-score {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.site-footer {
    position: relative;
    background: var(--bg-card);
    margin-top: 64px;
    padding: 56px 0 28px;
    overflow: hidden;
    border-top: 1px solid transparent; 
}

.site-footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 7px;
    background-color: rgba(30, 58, 138, 0.22);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 12' preserveAspectRatio='none'><path d='M0,0 L0,5 L40,8 L90,4 L140,9 L200,5 L260,10 L330,6 L400,9 L470,5 L540,10 L610,7 L680,10 L750,6 L820,9 L890,5 L960,9 L1030,6 L1100,10 L1160,7 L1200,9 L1200,0 Z' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 12' preserveAspectRatio='none'><path d='M0,0 L0,5 L40,8 L90,4 L140,9 L200,5 L260,10 L330,6 L400,9 L470,5 L540,10 L610,7 L680,10 L750,6 L820,9 L890,5 L960,9 L1030,6 L1100,10 L1160,7 L1200,9 L1200,0 Z' fill='black'/></svg>");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
}
[data-theme="dark"] .site-footer::before {
    background-color: rgba(148, 197, 255, 0.18);
}

.site-footer__aurora {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(520px 160px at 10% 100%, rgba(125, 211, 252, 0.14), transparent 60%),
        radial-gradient(420px 140px at 90% 100%, rgba(254, 215, 170, 0.20), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
[data-theme="dark"] .site-footer__aurora {
    background:
        radial-gradient(520px 160px at 10% 100%, rgba(14, 116, 144, 0.18), transparent 60%),
        radial-gradient(420px 140px at 90% 100%, rgba(251, 191, 36, 0.08), transparent 60%);
}

[data-theme="dark"] .site-footer {
    background: var(--bg-card);
}

.site-footer__inner {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 4px;
}
.site-footer__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-family: var(--font-family);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 999px;
    transition: color 0.18s, background 0.18s;
}
.site-footer__link:hover {
    color: var(--brand-green);
    background: color-mix(in srgb, var(--brand-green) 8%, transparent);
}
.site-footer__link-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
}
.site-footer__link-icon svg { width: 100%; height: 100%; }

.site-footer__avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--bg-card);
    box-shadow: 0 0 0 1.5px rgba(5, 150, 105, 0.35);
    flex-shrink: 0;
}
.site-footer__link--author {
    padding-left: 6px; 
    font-weight: 600;
}
.site-footer__link--author:hover .site-footer__avatar {
    box-shadow: 0 0 0 1.5px var(--brand-green);
}

.site-footer__disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    max-width: 720px;
    padding: 20px 24px;
    background: color-mix(in srgb, var(--brand-mountain) 3%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 10%, var(--border-light));
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
[data-theme="dark"] .site-footer__disclaimer {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(148, 197, 255, 0.14);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.site-footer__age {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 3px 8px rgba(30, 58, 138, 0.18));
}

.site-footer__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-secondary);
}
[data-theme="dark"] .site-footer__text { color: var(--text-muted); }

.site-footer__copyright {
    font-family: var(--font-mono), monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    opacity: 0.72;
}

@media (max-width: 720px) {
    .site-footer { padding: 44px 0 24px; margin-top: 40px; }
    .site-footer__inner { gap: 22px; }
    .site-footer__nav { gap: 4px; }
    .site-footer__link { padding: 6px 10px; font-size: 13px; }
    .site-footer__disclaimer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 22px 18px;
        gap: 14px;
    }
    .site-footer__text { font-size: 12.5px; }
}

.auth-modal,
.profile-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    padding: 16px;
}

.auth-modal[hidden],
.profile-modal[hidden] { display: none !important; }
.auth-modal.is-open,
.profile-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.auth-modal__card,
.profile-modal__card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px;
    position: relative;
}

.auth-modal__tabs,
.profile-modal__tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.auth-modal__tab,
.profile-modal__tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 4px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
    white-space: nowrap;
}
.profile-modal__tab svg { flex-shrink: 0; }
.auth-modal__tab.is-active,
.profile-modal__tab.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.auth-modal__close,
.profile-modal__close {
    position: absolute;
    top: 12px; right: 12px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
}
.auth-modal__close:hover,
.profile-modal__close:hover { color: var(--text-primary); background: var(--bg-card-alt); }

.auth-modal__form label,
.profile-modal__form label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: 4px;
    color: var(--text-secondary);
}
.auth-modal__form input,
.profile-modal__form input {
    width: 100%;
    padding: 10px 12px;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
    margin-bottom: 14px;
}
.auth-modal__form input:focus,
.profile-modal__form input:focus { outline: none; border-color: var(--accent); }

.auth-modal__submit,
.profile-modal__submit {
    width: 100%;
    padding: 10px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 12px;
}
.auth-modal__submit:hover,
.profile-modal__submit:hover { background: var(--accent-hover); }
.auth-modal__submit:disabled { opacity: 0.6; cursor: not-allowed; }

.auth-modal__error {
    background: rgba(220,38,38,0.08);
    color: var(--danger);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    margin-bottom: 14px;
}

.auth-modal__switch {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    text-align: center;
}
.auth-modal__switch button {
    background: none; border: none;
    color: var(--accent); cursor: pointer;
    font-size: inherit; font-weight: 500;
}

.auth-modal__oauth {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.auth-modal__oauth a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
}
.auth-modal__oauth a:hover { background: var(--bg-card-alt); border-color: var(--text-muted); }
.auth-modal__oauth svg { width: 18px; height: 18px; flex-shrink: 0; }

.auth-modal__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
.auth-modal__divider::before,
.auth-modal__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.profile-modal__msg {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    margin-bottom: 12px;
}
.profile-modal__msg--ok { background: rgba(5,150,105,0.1); color: var(--success); }
.profile-modal__msg--err { background: rgba(220,38,38,0.08); color: var(--danger); }

.profile-modal__avatar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    cursor: pointer;
}
.profile-modal__avatar-img {
    width: 56px; height: 56px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--accent-soft);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 20px;
}
.profile-modal__info { font-size: var(--font-size-sm); }
.profile-modal__info strong { display: block; font-size: var(--font-size-base); margin-bottom: 2px; }
.profile-modal__info span { color: var(--text-muted); }

.pm-activity-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: var(--font-size-sm);
}
.pm-activity-item:last-child { border-bottom: none; }
.pm-activity-item__title a { color: var(--text-primary); font-weight: 500; }
.pm-activity-item__title a:hover { color: var(--accent); }
.pm-activity-item__text { color: var(--text-secondary); margin-top: 4px; line-height: 1.4; }
.pm-activity-item__meta { text-align: right; flex-shrink: 0; }
.pm-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-full);
}
.pm-badge--approved { background: rgba(5,150,105,0.1); color: var(--success); }
.pm-badge--rejected { background: rgba(220,38,38,0.06); color: var(--danger); }
.pm-badge--pending { background: rgba(217,119,6,0.1); color: var(--warning); }
.pm-date { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.pm-stars { color: var(--warning); }
.pm-hint { font-size: var(--font-size-xs); color: var(--text-muted); }

.auth-modal__field {
    position: relative;
    margin-bottom: 14px;
}
.auth-modal__icon {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.auth-modal__field input {
    padding: 12px 14px 12px 40px;
    margin-bottom: 0;
}
.auth-modal__hint {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    text-align: center;
    margin-top: 12px;
}
.auth-modal__link {
    background: none; border: none;
    color: var(--accent); cursor: pointer;
    font-size: inherit; font-weight: 500;
}
.auth-modal__backdrop,
.profile-modal__backdrop {
    position: absolute;
    inset: 0;
}

.pm-profile-card {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.pm-avatar {
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}
.pm-avatar__img {
    width: 56px; height: 56px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--accent-soft);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 20px;
}
.pm-avatar__overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
    color: #fff;
}
.pm-avatar:hover .pm-avatar__overlay { opacity: 1; }

.pm-avatar-remove {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: var(--font-size-xs);
    color: var(--danger);
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin-bottom: 16px;
}
.pm-avatar-remove:hover { background: rgba(220,38,38,0.05); }

.pm-profile-info { flex: 1; min-width: 0; }
.pm-profile-name { font-weight: 600; font-size: var(--font-size-base); }
.pm-profile-email { font-size: var(--font-size-sm); color: var(--text-secondary); }
.pm-profile-role {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-full);
    background: var(--accent-soft);
    color: var(--accent);
    margin-top: 4px;
}

.pm-form { margin-bottom: 16px; }
.pm-label { display: block; font-size: var(--font-size-sm); font-weight: 500; margin-bottom: 4px; }
.pm-form .pm-hint { font-size: var(--font-size-xs); color: var(--text-muted); margin-bottom: 8px; }
.pm-inline-edit {
    display: flex;
    gap: 8px;
}
.pm-inline-edit input {
    flex: 1;
    padding: 8px 12px;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
}
.pm-inline-edit input:focus { outline: none; border-color: var(--accent); }
.pm-btn-save {
    padding: 8px 16px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.pm-btn-save:hover { background: var(--accent-hover); }

.pm-logout {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    text-decoration: none;
    border-top: 1px solid var(--border);
    margin-top: 16px;
}
.pm-logout:hover { color: var(--danger); }

.pm-pw-notice {
    padding: 10px 14px;
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: 16px;
}
.pm-empty {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 24px 0;
}

.profile-modal__panel { padding: 4px 0; }

.site-toast {
    position: fixed;
    top: 72px; right: 16px;
    z-index: 300;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: var(--font-size-sm);
    max-width: 380px;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.25s, transform 0.25s;
}
.site-toast.is-visible { opacity: 1; transform: translateX(0); }
.site-toast--success .site-toast__icon { color: var(--success); }
.site-toast--error .site-toast__icon { color: var(--danger); }
.site-toast__text { flex: 1; }
.site-toast__close {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; cursor: pointer;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
}
.site-toast__close:hover { color: var(--text-primary); background: var(--bg-card-alt); }

.featured-image {
    margin: 16px 0;
}
.featured-image picture { display: block; }
.featured-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

.author-page {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}
.author-page__inner {
    max-width: 800px;
    margin: 0 auto;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 40px 48px;
    box-shadow: var(--shadow-sm);
}
@media (max-width: 768px) {
    /* Mobile: убираем белую подложку, делаем как listing-article — контент во всю ширину контейнера.
       Снимаем лишний padding с .author-page, т.к. <main> уже даёт container-padding (избегаем double-gap). */
    .author-page {
        padding: 0;
    }
    .author-page__inner {
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        padding: 16px 0 24px;
    }
}

.author-page__header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
}
/* Avatar c gradient-ring (premium personal-page touch) */
.author-page__avatar {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    padding: 4px;
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-mountain) 100%);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 14px 36px -16px color-mix(in srgb, var(--brand-mountain) 45%, transparent);
}
[data-theme="dark"] .author-page__avatar {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 14px 36px -16px rgba(0, 0, 0, 0.6);
}

/* Стилизованные figure-фотки внутри author-content (отличаются от review-pages —
   персонализированы: чуть смещены, мягкая тень, accent-quote под caption). */
.author-page__content figure.content-media {
    margin: 32px 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 40px -20px rgba(30, 64, 175, 0.16);
    transition: transform 0.3s ease;
}
.author-page__content figure.content-media:hover {
    transform: translateY(-2px);
}
.author-page__content figure.content-media img {
    width: 100%;
    height: auto;
    display: block;
}
.author-page__content figure.content-media figcaption {
    position: relative;
    padding: 14px 18px 14px 26px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--brand-mountain) 4%, var(--bg-card)) 0%,
        var(--bg-card) 100%);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-secondary);
    font-style: italic;
    border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.author-page__content figure.content-media figcaption::before {
    content: "";
    position: absolute;
    top: 14px; left: 12px; bottom: 14px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--brand-green), var(--brand-mountain));
}

/* Author-recent-reviews widget — внутри author-content */
.author-recent {
    margin: 36px 0;
    padding: 24px 24px 20px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--brand-green) 4%, var(--bg-card)) 0%,
        var(--bg-card) 100%);
    border: 1px solid color-mix(in srgb, var(--brand-green) 18%, var(--border));
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.author-recent__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed color-mix(in srgb, var(--brand-green) 25%, transparent);
}
.author-recent__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand-green), var(--brand-mountain));
    color: #fff;
    flex-shrink: 0;
    align-self: center;
}
.author-recent__heading,
.author-page__content .author-recent__heading {
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0;
    padding: 0;
    border: 0;
    align-self: center;
}
.author-recent__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 640px) {
    .author-recent { padding: 18px 16px; margin: 28px 0; }
    .author-recent__grid { grid-template-columns: 1fr; }
}
.author-recent__card {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.author-recent__card:hover {
    color: inherit;
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--brand-green) 35%, var(--border));
    box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--brand-mountain) 30%, transparent);
}
.author-recent__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-card-alt);
    flex-shrink: 0;
    align-self: center;
}
.author-recent__logo img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; display: block; }
.author-recent__logo-fallback {
    display: block;
    width: 100%; height: 100%;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--brand-green) 8%, var(--bg-card-alt)),
        color-mix(in srgb, var(--brand-mountain) 6%, var(--bg-card-alt)));
}
.author-recent__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.author-recent__head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.author-recent__badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.author-recent__badge--casino {
    background: color-mix(in srgb, var(--brand-mountain) 14%, var(--bg-card));
    color: var(--brand-mountain);
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 25%, transparent);
}
.author-recent__badge--slot {
    background: color-mix(in srgb, var(--brand-green) 14%, var(--bg-card));
    color: var(--brand-green);
    border: 1px solid color-mix(in srgb, var(--brand-green) 28%, transparent);
}
.author-recent__date {
    font-size: 10.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.author-recent__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.author-recent__score {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: linear-gradient(135deg, var(--brand-green), color-mix(in srgb, var(--brand-green) 75%, var(--brand-mountain)));
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    align-self: flex-start;
    margin-top: 2px;
}
.author-recent__arrow {
    color: var(--text-muted);
    transition: color 0.18s ease, transform 0.18s ease;
    align-self: center;
}
.author-recent__card:hover .author-recent__arrow {
    color: var(--brand-green);
    transform: translateX(3px);
}
.author-recent__body { align-self: center; }
.author-page__intro { flex: 1; min-width: 0; }
.author-page__name {
    font-size: var(--font-size-xl);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: 6px;
}
.author-page__lead {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

.author-page__content {
    max-width: none;
}
.author-page__content h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

@media (max-width: 640px) {
    .author-page__header {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    .author-page__avatar { width: 96px; height: 96px; }
}

.page-404 {
    text-align: center;
    padding: 64px 24px;
}
.page-404__code {
    font-size: 72px;
    font-weight: 700;
    color: var(--accent);
    opacity: 0.2;
    line-height: 1;
    margin-bottom: 8px;
}
.page-404__title { margin-bottom: 12px; }
.page-404__text { color: var(--text-secondary); margin-bottom: 24px; }
.page-404__links {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.page-404__link {
    padding: 8px 20px;
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: background 0.15s;
}
.page-404__link:hover { background: var(--accent-hover); color: #fff; }
.page-404__link--secondary {
    background: var(--bg-card-alt);
    color: var(--text-primary);
}
.page-404__link--secondary:hover { background: var(--border); color: var(--text-primary); }

.reviews {
    position: relative;
    background:
        radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--brand-mountain) 5%, transparent) 0%, transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.96) 0%, color-mix(in srgb, var(--brand-mountain) 3%, rgba(255,255,255,0.92)) 100%);
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 12%, var(--border));
    border-radius: 20px;
    padding: 32px 36px 30px;
    margin: 0 0 28px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        0 1px 2px rgba(15,23,42,0.04),
        0 14px 40px -22px rgba(30,58,138,0.16);
    overflow: hidden;
}
.reviews::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--brand-mountain) 0%,
        var(--accent) 50%,
        var(--brand-green) 100%);
    opacity: 0.85;
}
[data-theme="dark"] .reviews {
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(59,130,246,0.10) 0%, transparent 60%),
        linear-gradient(180deg, rgba(22,27,34,0.92) 0%, rgba(15,23,42,0.96) 100%);
    border-color: rgba(148,197,255,0.20);
}
.reviews__header {
    margin-bottom: 24px;
}
.reviews__label {
    font-family: 'Unbounded', var(--font-family);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand-green);
    display: block;
    margin-bottom: 6px;
}
[data-theme="dark"] .reviews__label { color: #10b981; }
.reviews__title {
    font-family: 'Unbounded', var(--font-family);
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.015em;
    margin: 0;
    display: flex;
    align-items: center; 
    gap: 10px;
    flex-wrap: wrap;
}

.reviews__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 8px;
    margin-left: 6px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-mountain) 130%);
    border-radius: 7px;
    box-shadow: 0 1px 3px -1px color-mix(in srgb, var(--brand-mountain) 35%, transparent);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    vertical-align: middle;
}
[data-theme="dark"] .reviews__count {
    background: linear-gradient(135deg, #10b981 0%, #1e40af 130%);
}

.reviews__empty {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 38px 28px 34px;
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--brand-green) 7%, transparent), transparent 65%),
        linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--brand-mountain) 3%, #ffffff) 100%);
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 12%, var(--border-light));
    border-radius: 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(15, 23, 42, 0.03);
    margin-bottom: 24px;
}
[data-theme="dark"] .reviews__empty {
    background:
        radial-gradient(90% 60% at 50% 0%, rgba(16, 185, 129, 0.10), transparent 65%),
        linear-gradient(180deg, rgba(22, 27, 34, 0.92) 0%, rgba(15, 23, 42, 0.96) 100%);
    border-color: rgba(148, 197, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.reviews__empty-accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-green) 0%, var(--accent) 50%, var(--brand-mountain) 100%);
    opacity: 0.85;
}
.reviews__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin-bottom: 16px;
    color: var(--brand-green);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--brand-green) 14%, transparent) 0%,
        color-mix(in srgb, var(--brand-mountain) 10%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--brand-green) 22%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] .reviews__empty-icon {
    color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(59, 130, 246, 0.10) 100%);
    border-color: rgba(16, 185, 129, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.reviews__empty-title {
    font-family: 'Unbounded', var(--font-family);
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    margin: 0 0 6px;
}
.reviews__empty-hint {
    margin: 0;
    max-width: 380px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-secondary);
}

.reviews__list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.review-item {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg,
        rgba(125, 211, 252, 0.06) 0%,
        rgba(30, 64, 175, 0.04) 100%);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    transition: border-color 200ms var(--ease-premium), box-shadow 200ms var(--ease-premium);
}
.review-item:hover {
    border-color: rgba(30, 64, 175, 0.22);
    box-shadow: 0 4px 12px -6px rgba(30, 64, 175, 0.14);
}
[data-theme="dark"] .review-item {
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.10) 0%,
        rgba(29, 78, 216, 0.06) 100%);
    border-color: rgba(148, 197, 255, 0.16);
}
.review-item__avatar-wrap { flex-shrink: 0; }
.review-item__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

img.review-item__avatar {
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 0 1.5px rgba(5, 150, 105, 0.35), 0 6px 14px -6px rgba(15, 23, 42, 0.18);
}

.review-item__avatar--initial {
    font-family: 'Unbounded', ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.02em;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 6px 16px -6px rgba(30, 58, 138, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    background: linear-gradient(135deg, #059669 0%, #1e3a8a 100%);
    position: relative;
    overflow: hidden;
}
.review-item__avatar--initial::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.22), transparent 55%);
    pointer-events: none;
}
.review-item__avatar--initial[data-variant="a"] {
    background: linear-gradient(135deg, #059669 0%, #5fd4b3 100%);
}
.review-item__avatar--initial[data-variant="b"] {
    background: linear-gradient(135deg, #1e3a8a 0%, #3fb8a6 100%);
}
.review-item__avatar--initial[data-variant="c"] {
    background: linear-gradient(135deg, #3fb8a6 0%, #1e3a8a 100%);
}
.review-item__body { flex: 1; min-width: 0; }

.review-item__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 6px;
}
.review-item__head-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.review-item__name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}
.review-item__badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px 2px 5px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.review-item__badge--verified {
    background: color-mix(in srgb, var(--rating-excellent) 10%, transparent);
    color: var(--rating-excellent);
    border: 1px solid color-mix(in srgb, var(--rating-excellent) 22%, transparent);
}
.review-item__badge--guest {
    background: color-mix(in srgb, var(--text-muted) 8%, transparent);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
}
.review-item__date {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-top: 3px; 
}
.review-item__stars {
    position: relative;
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 2px;
    margin-bottom: 6px;
    --rating-pct: 0%;
}
.review-item__stars-bg {
    display: block;
    color: color-mix(in srgb, var(--brand-mountain) 16%, transparent);
}
[data-theme="dark"] .review-item__stars-bg {
    color: color-mix(in srgb, #94c5ff 22%, transparent);
}
.review-item__stars-fg {
    position: absolute;
    top: 0; left: 0;
    width: var(--rating-pct);
    overflow: hidden;
    white-space: nowrap;
    
    background-image: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-mountain) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .review-item__stars-fg {
    background-image: linear-gradient(135deg, #10b981 0%, #94c5ff 100%);
}
.review-item__text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary);
    letter-spacing: -0.005em;
}

.review-form {
    background: linear-gradient(135deg,
        rgba(254, 215, 170, 0.08) 0%,
        rgba(125, 211, 252, 0.10) 55%,
        rgba(30, 64, 175, 0.06) 100%);
    border: 1px solid rgba(30, 64, 175, 0.22);
    border-radius: 14px;
    padding: 22px 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    overflow: hidden;
}
.review-form::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--rating-excellent));
    opacity: 0.8;
}
[data-theme="dark"] .review-form {
    background: linear-gradient(135deg,
        rgba(251, 146, 60, 0.08) 0%,
        rgba(59, 130, 246, 0.10) 55%,
        rgba(29, 78, 216, 0.08) 100%);
    border-color: rgba(148, 197, 255, 0.24);
}
.review-form__header { margin-bottom: 4px; }
.review-form__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}
.review-form__subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}
.review-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.review-form__field--half { flex: 1; }
.review-form__row { display: flex; gap: 12px; }
.review-form__label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.review-form__stars {
    display: inline-flex;
    flex-direction: row-reverse;
    font-size: 24px;
    line-height: 1;
    align-self: flex-start;
}
.review-form__stars input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.review-form__stars label {
    cursor: pointer;
    
    color: color-mix(in srgb, var(--brand-mountain) 42%, transparent);
    transition: color 150ms, background 150ms, transform 120ms;
}
[data-theme="dark"] .review-form__stars label {
    color: color-mix(in srgb, #94c5ff 48%, transparent);
}

.review-form__stars label > span { display: contents; }

.review-form__stars label:hover,
.review-form__stars label:hover ~ label,
.review-form__stars input:checked ~ label {
    background-image: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-mountain) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .review-form__stars label:hover,
[data-theme="dark"] .review-form__stars label:hover ~ label,
[data-theme="dark"] .review-form__stars input:checked ~ label {
    background-image: linear-gradient(135deg, #10b981 0%, #94c5ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.review-form__stars label:hover { transform: scale(1.15); }
.review-form__stars-hint {
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: -2px;
}
.review-form__identity {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.45);
    border: 1px dashed rgba(30, 64, 175, 0.22);
    border-radius: 10px;
}
[data-theme="dark"] .review-form__identity {
    background: rgba(15, 23, 42, 0.35);
    border-color: rgba(148, 197, 255, 0.20);
}
.review-form__identity-hint {
    font-size: 11px;
    color: var(--text-secondary);
    margin: 0;
    font-style: italic;
}
.review-form__logged-as {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--rating-excellent) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--rating-excellent) 18%, transparent);
    border-radius: 8px;
}
.review-form__logged-as strong {
    color: var(--text-primary);
    font-weight: 700;
}
.review-form__input,
.review-form__textarea {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--text-primary);
    transition: border-color 150ms, box-shadow 150ms;
}
.review-form__input:focus,
.review-form__textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.review-form__textarea {
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
    line-height: 1.55;
}
.review-form__hint {
    font-size: 10.5px;
    color: var(--text-muted);
    font-style: italic;
}
.review-form__submit {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.005em;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 14px -4px rgba(37, 99, 235, 0.45);
    transition: transform 180ms var(--ease-premium), box-shadow 180ms var(--ease-premium);
}
.review-form__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px -4px rgba(37, 99, 235, 0.55);
}
.review-form__submit:disabled {
    opacity: 0.7;
    cursor: wait;
    transform: none;
    box-shadow: none;
}

@media (max-width: 720px) {
    .review-item { padding: 14px; gap: 10px; }
    .review-item__avatar,
    .review-item__avatar--initial { width: 38px; height: 38px; font-size: 15px; }
    .review-item__head { gap: 8px; }
    .review-item__date { font-size: 10px; padding-top: 4px; }
    .review-form__row { flex-direction: column; gap: 14px; }
    .review-form__stars { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .review-item,
    .review-form__submit,
    .review-form__stars label { transition: none; }
}

.page-pros-cons,
.page-rating-block,
.page-author-bio-block,
.page-verdict-block,
.page-intro-block,
.page-info-table,
.page-generic-block,
.payment-methods,
.reviews,
.review-aux {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.review-aux {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin: 28px auto 32px;
}

.review-aux > .payment-methods,
.review-aux > .reviews { margin: 0; }

.review-aux > * {
    opacity: 0;
    transform: translateY(14px);
    animation: aux-block-reveal 600ms var(--ease-premium) forwards;
}
.review-aux > *:nth-child(1) { animation-delay: 50ms; }
.review-aux > *:nth-child(2) { animation-delay: 180ms; }
.review-aux > *:nth-child(3) { animation-delay: 310ms; }
@keyframes aux-block-reveal {
    to { opacity: 1; transform: translateY(0); }
}

.review-article > .page-rating-block,
.review-article > .page-pros-cons,
.review-article > .page-author-bio-block,
.review-article > .page-verdict-block {
    opacity: 0;
    transform: translateY(14px);
    animation: aux-block-reveal 600ms var(--ease-premium) 80ms forwards;
}

@media (prefers-reduced-motion: reduce) {
    .review-aux > *,
    .review-article > .page-rating-block,
    .review-article > .page-pros-cons,
    .review-article > .page-author-bio-block,
    .review-article > .page-verdict-block { opacity: 1; transform: none; animation: none; }
}

.reviews .review-item {
    background: rgba(255,255,255,0.62);
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 10%, var(--border-light));
    box-shadow: 0 1px 2px rgba(15,23,42,0.03);
    transition:
        border-color 220ms var(--ease-premium),
        transform 220ms var(--ease-premium),
        box-shadow 220ms var(--ease-premium);
}
[data-theme="dark"] .reviews .review-item {
    background: rgba(255,255,255,0.04);
    border-color: rgba(148,197,255,0.14);
}
.reviews .review-item:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 38%, transparent);
    box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 10px 24px -10px rgba(30,58,138,0.20);
}

.reviews .review-form {
    background:
        radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--brand-green) 7%, transparent) 0%, transparent 55%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--brand-mountain) 4%, rgba(255,255,255,0.55)) 0%,
            color-mix(in srgb, var(--brand-mountain) 8%, rgba(255,255,255,0.40)) 100%);
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 18%, transparent);
    border-radius: 16px;
    padding: 26px 28px;
}
[data-theme="dark"] .reviews .review-form {
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(16,185,129,0.08) 0%, transparent 55%),
        linear-gradient(180deg, rgba(59,130,246,0.06) 0%, rgba(29,78,216,0.10) 100%);
    border-color: rgba(148,197,255,0.22);
}
.reviews .review-form::before {
    
    height: 3px;
    background: linear-gradient(90deg,
        var(--brand-mountain) 0%,
        var(--accent) 50%,
        var(--brand-green) 100%);
    opacity: 1;
}
.reviews .review-form__title {
    font-family: 'Unbounded', var(--font-family);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.reviews .review-form__submit {
    background: linear-gradient(135deg, var(--brand-mountain) 0%, var(--accent) 55%, var(--brand-green) 110%);
    box-shadow: 0 6px 18px -6px rgba(30,58,138,0.45);
    padding: 13px 26px;
    font-family: 'Unbounded', var(--font-family);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.reviews .review-form__submit:hover {
    box-shadow: 0 10px 26px -6px rgba(30,58,138,0.55);
}

@media (max-width: 720px) {
    .review-aux { gap: 18px; margin: 22px 0 24px; }

    
    .reviews,
    [data-theme="dark"] .reviews {
        background: none;
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding: 4px 0 0;
        overflow: visible;
    }
    .reviews::before { display: none; }
    .reviews__header {
        position: relative;
        margin-bottom: 24px;
        padding-left: 12px;
    }
    .reviews__header::before {
        content: '';
        position: absolute;
        left: 0;
        top: 4px;
        bottom: 4px;
        width: 3px;
        border-radius: 2px;
        background: linear-gradient(180deg, var(--brand-green) 0%, var(--brand-mountain) 100%);
    }
    .reviews__title { font-size: 22px; }

    
    .reviews .review-form { padding: 20px 18px; border-radius: 14px; }
    .reviews .review-form__submit { padding: 12px 20px; font-size: 12px; width: 100%; justify-content: center; align-self: stretch; }
}

.review-article > .page-pros-cons {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96) 0%, color-mix(in srgb, var(--brand-mountain) 3%, rgba(255,255,255,0.92)) 100%);
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 12%, var(--border));
    border-radius: 20px;
    padding: 26px 28px;
    margin: 28px 0;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        0 1px 2px rgba(15,23,42,0.04),
        0 14px 40px -22px rgba(30,58,138,0.14);
    position: relative;
    overflow: hidden;
}
.review-article > .page-pros-cons::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--rating-excellent) 0%,
        var(--rating-excellent) 50%,
        var(--danger) 50%,
        var(--danger) 100%);
    opacity: 0.7;
}
[data-theme="dark"] .review-article > .page-pros-cons {
    background: linear-gradient(180deg, rgba(22,27,34,0.92) 0%, rgba(15,23,42,0.96) 100%);
    border-color: rgba(148,197,255,0.18);
}

.review-article > .page-author-bio-block {
    border-radius: 20px;
    padding: 24px 28px;
    margin: 28px 0;
    background:
        radial-gradient(140% 100% at 100% 0%, color-mix(in srgb, var(--brand-mountain) 5%, transparent) 0%, transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.96) 0%, color-mix(in srgb, var(--brand-mountain) 3%, rgba(255,255,255,0.92)) 100%);
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 12%, var(--border));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        0 1px 2px rgba(15,23,42,0.04);
    position: relative;
    overflow: hidden;
}
.review-article > .page-author-bio-block::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-mountain), var(--brand-green));
    opacity: 0.8;
}
[data-theme="dark"] .review-article > .page-author-bio-block {
    background: linear-gradient(180deg, rgba(22,27,34,0.92) 0%, rgba(15,23,42,0.96) 100%);
    border-color: rgba(148,197,255,0.18);
}

@media (max-width: 720px) {
    .review-article > .page-pros-cons,
    .review-article > .page-author-bio-block { padding: 20px 18px; border-radius: 16px; margin: 20px 0; }
}

.payments {
    position: relative;
    margin: 28px auto;
    max-width: 720px;
    padding: 30px 34px 28px;
    border-radius: 20px;
    background:
        radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--brand-mountain) 5%, transparent) 0%, transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.96) 0%, color-mix(in srgb, var(--brand-mountain) 3%, rgba(255,255,255,0.92)) 100%);
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 12%, var(--border));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        0 1px 2px rgba(15,23,42,0.04),
        0 14px 40px -22px rgba(30,58,138,0.16);
    overflow: hidden;
}
.payments::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--brand-mountain) 0%,
        var(--accent) 50%,
        var(--brand-green) 100%);
    opacity: 0.85;
}
[data-theme="dark"] .payments {
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(59,130,246,0.10) 0%, transparent 60%),
        linear-gradient(180deg, rgba(22,27,34,0.92) 0%, rgba(15,23,42,0.96) 100%);
    border-color: rgba(148,197,255,0.20);
}

.payments__header {
    margin-bottom: 18px;
}

.payments .payments__title {
    display: block;
    font-family: 'Unbounded', var(--font-family);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand-green);
    margin: 0;
    border: 0;
}
[data-theme="dark"] .payments .payments__title { color: #10b981; }

.payments__section {
    margin-bottom: 22px;
}
.payments__section:last-of-type { margin-bottom: 0; }
.payments__section-title {
    font-family: 'Unbounded', var(--font-family);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brand-mountain);
    padding-left: 10px;
    border-left: 3px solid var(--brand-green);
}
[data-theme="dark"] .payments__section-title { color: #93c5fd; }

.payments__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    cursor: pointer;
    padding: 4px 0;
    margin-bottom: 12px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.payments__summary::-webkit-details-marker { display: none; }

.payments__summary-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 7px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-mountain) 130%);
    border-radius: 6px;
    box-shadow: 0 1px 3px -1px color-mix(in srgb, var(--brand-mountain) 35%, transparent);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
[data-theme="dark"] .payments__summary-count {
    background: linear-gradient(135deg, #10b981 0%, #1e40af 130%);
}

.payments__summary-chev {
    margin-left: auto;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--brand-mountain);
    transition: transform 240ms var(--ease-premium), color 200ms;
}
.payments__summary:hover .payments__summary-chev {
    color: var(--accent);
}
.payments__section[open] .payments__summary-chev {
    transform: rotate(180deg);
}
[data-theme="dark"] .payments__summary-chev { color: #93c5fd; }
[data-theme="dark"] .payments__summary:hover .payments__summary-chev { color: #60a5fa; }
.payments__details-body {
    
    display: block;
}

@media (min-width: 721px) {
    .payments .payments__summary { display: none; }
}

.payments__table-wrap {
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 10%, var(--border-light));
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,0.6);
}
[data-theme="dark"] .payments__table-wrap {
    background: rgba(255,255,255,0.03);
    border-color: rgba(148,197,255,0.14);
}

.payments__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.payments__table thead th {
    padding: 10px 14px;
    text-align: left;
    font-family: 'Unbounded', var(--font-family);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--brand-mountain) 4%, rgba(248,250,252,0.7));
    border-bottom: 1px solid color-mix(in srgb, var(--brand-mountain) 10%, var(--border-light));
}
[data-theme="dark"] .payments__table thead th {
    background: rgba(15,23,42,0.4);
    border-bottom-color: rgba(148,197,255,0.12);
}
.payments__table tbody tr {
    transition: background 200ms var(--ease-premium);
}
.payments__table tbody tr:not(:last-child) {
    border-bottom: 1px solid color-mix(in srgb, var(--brand-mountain) 6%, var(--border-light));
}
[data-theme="dark"] .payments__table tbody tr:not(:last-child) {
    border-bottom-color: rgba(148,197,255,0.08);
}
.payments__table tbody tr:hover {
    background: color-mix(in srgb, var(--brand-mountain) 4%, transparent);
}
[data-theme="dark"] .payments__table tbody tr:hover {
    background: rgba(59,130,246,0.06);
}
.payments__table td {
    padding: 12px 14px;
    color: var(--text-secondary);
    vertical-align: middle;
}
.payment-row__cell {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    font-size: 13px;
}

.payment-row__method {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 140px;
}
.payment-row__name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13.5px;
}
.payment-method {
    display: inline-block;
    flex-shrink: 0;
    width: 44px;
    height: 30px;
    background-image: url('icons/payments/_default.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.08), inset 0 0 0 1px rgba(255,255,255,0.4);
    vertical-align: middle;
}

.payment-method[data-slug="visa"]        { background-image: url('icons/payments/visa.svg'); }
.payment-method[data-slug="mastercard"]  { background-image: url('icons/payments/mastercard.svg'); }
.payment-method[data-slug="skrill"]      { background-image: url('icons/payments/skrill.svg'); }
.payment-method[data-slug="neteller"]    { background-image: url('icons/payments/neteller.svg'); }
.payment-method[data-slug="bitcoin"]     { background-image: url('icons/payments/bitcoin.svg'); }
.payment-method[data-slug="btc"]         { background-image: url('icons/payments/bitcoin.svg'); }
.payment-method[data-slug="ethereum"]    { background-image: url('icons/payments/ethereum.svg'); }
.payment-method[data-slug="eth"]         { background-image: url('icons/payments/ethereum.svg'); }
.payment-method[data-slug="litecoin"]    { background-image: url('icons/payments/litecoin.svg'); }
.payment-method[data-slug="ltc"]         { background-image: url('icons/payments/litecoin.svg'); }
.payment-method[data-slug="usdt"]        { background-image: url('icons/payments/usdt.svg'); }
.payment-method[data-slug="tether"]      { background-image: url('icons/payments/usdt.svg'); }
.payment-method[data-slug="neosurf"]     { background-image: url('icons/payments/neosurf.svg'); }
.payment-method[data-slug="paysafecard"] { background-image: url('icons/payments/paysafecard.svg'); }
.payment-method[data-slug="swish"]       { background-image: url('icons/payments/swish.svg'); }
.payment-method[data-slug="trustly"]     { background-image: url('icons/payments/trustly.svg'); }
.payment-method[data-slug="zimpler"]     { background-image: url('icons/payments/zimpler.svg'); }
.payment-method[data-slug="kryptovalutor"],
.payment-method[data-slug="krypto"],
.payment-method[data-slug="crypto"]      { background-image: url('icons/payments/crypto.svg'); }

.payment-row__mobile-label {
    display: none;
    font-family: 'Unbounded', var(--font-family);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 8px;
}

.payments__footer {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed color-mix(in srgb, var(--brand-mountain) 18%, var(--border));
    flex-wrap: wrap;
}
.payments__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: color-mix(in srgb, var(--brand-green) 6%, rgba(255,255,255,0.55));
    border: 1px solid color-mix(in srgb, var(--brand-green) 18%, transparent);
    border-radius: 99px;
    font-size: 12.5px;
}
[data-theme="dark"] .payments__chip {
    background: rgba(16,185,129,0.06);
    border-color: rgba(16,185,129,0.20);
}
.payments__chip[data-kind="kyc"] {
    background: color-mix(in srgb, var(--warning) 6%, rgba(255,255,255,0.55));
    border-color: color-mix(in srgb, var(--warning) 22%, transparent);
}
[data-theme="dark"] .payments__chip[data-kind="kyc"] {
    background: rgba(217,119,6,0.08);
    border-color: rgba(217,119,6,0.25);
}
.payments__chip-label {
    font-family: 'Unbounded', var(--font-family);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-green);
}
[data-theme="dark"] .payments__chip-label { color: #10b981; }
.payments__chip[data-kind="kyc"] .payments__chip-label { color: var(--warning); }
.payments__chip-value {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--text-primary);
    font-size: 12.5px;
    letter-spacing: -0.01em;
}

@media (max-width: 720px) {
    .payments {
        padding: 22px 18px 22px;
        border-radius: 16px;
        margin: 22px 0;
    }
    .payments .payments__title { font-size: 11px; }
    .payments__table-wrap {
        border: 0;
        background: transparent;
        border-radius: 0;
    }
    .payments__table,
    .payments__table thead,
    .payments__table tbody,
    .payments__table tr,
    .payments__table td { display: block; }
    .payments__table thead { display: none; }
    .payments__table tbody tr {
        margin-bottom: 12px;
        padding: 14px;
        background: rgba(255,255,255,0.65);
        border: 1px solid color-mix(in srgb, var(--brand-mountain) 10%, var(--border-light));
        border-radius: 12px;
    }
    .payments__table tbody tr:not(:last-child) { border-bottom: 1px solid color-mix(in srgb, var(--brand-mountain) 10%, var(--border-light)); }
    [data-theme="dark"] .payments__table tbody tr {
        background: rgba(255,255,255,0.04);
        border-color: rgba(148,197,255,0.14);
    }
    
    .payments__table tbody tr td.payment-row__method {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
        padding-bottom: 8px;
        border-bottom: 1px dashed color-mix(in srgb, var(--brand-mountain) 12%, var(--border-light));
    }
    
    .payment-row__method .payment-method {
        width: 32px;
        height: 22px;
        border-radius: 4px;
    }
    .payment-row__name { font-size: 14px; }
    .payment-row__cell {
        padding: 4px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .payment-row__mobile-label { display: inline-block; }
    .payments__footer { gap: 8px; }
    .payments__chip { padding: 6px 12px; font-size: 11.5px; }
}

.casino-sticky {
    position: fixed;
    left: 24px;
    top: 50%;
    width: 260px;
    padding: 20px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 14%, var(--border));
    border-radius: 20px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 20px 48px -24px rgba(30, 58, 138, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    overflow: hidden;
    z-index: 40;

    opacity: 0;
    transform: translate3d(-24px, -50%, 0) scale(0.97);
    transition:
        opacity 460ms var(--ease-premium),
        transform 520ms var(--ease-premium),
        box-shadow 280ms var(--ease-premium);
    pointer-events: none;
    will-change: transform, opacity;
}
.casino-sticky[data-state="visible"] {
    opacity: 1;
    transform: translate3d(0, -50%, 0) scale(1);
    pointer-events: auto;
}
.casino-sticky[data-state="leaving"] {
    opacity: 0;
    transform: translate3d(-16px, -50%, 0) scale(0.98);
    pointer-events: none;
    transition-duration: 280ms, 320ms;
}
.casino-sticky:hover {
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 26px 58px -22px rgba(30, 58, 138, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] .casino-sticky {
    background: rgba(22, 27, 34, 0.96);
    border-color: rgba(148, 197, 255, 0.18);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 20px 48px -24px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.casino-sticky__aurora {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(280px 120px at 50% 0%, rgba(5, 150, 105, 0.09), transparent 60%),
        radial-gradient(200px 80px at 100% 100%, rgba(30, 58, 138, 0.06), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
[data-theme="dark"] .casino-sticky__aurora {
    background:
        radial-gradient(280px 120px at 50% 0%, rgba(16, 185, 129, 0.14), transparent 60%),
        radial-gradient(200px 80px at 100% 100%, rgba(59, 130, 246, 0.10), transparent 60%);
}

.casino-sticky__accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-green) 0%, var(--accent) 50%, var(--brand-mountain) 100%);
    opacity: 0.88;
    z-index: 2;
}

.casino-sticky__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-muted);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    z-index: 3;
    transition: background 160ms ease, color 160ms ease;
}
.casino-sticky__close:hover {
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
    color: var(--text-primary);
}

.casino-sticky > *:not(.casino-sticky__aurora):not(.casino-sticky__accent):not(.casino-sticky__close) {
    position: relative;
    z-index: 1;
}

.casino-sticky__top {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
}
.casino-sticky__logo {
    grid-column: 1;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.10), inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}
.casino-sticky__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 14px; 
}

.casino-sticky__score {
    grid-column: 2;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0;
    background: none;
    box-shadow: none;
    color: var(--text-primary);
}
.casino-sticky__score-label {
    font-family: 'Unbounded', var(--font-family);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand-green);
    opacity: 0.82;
}
.casino-sticky__score-body {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}
.casino-sticky__score-value {
    font-family: 'Unbounded', var(--font-family);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-mountain) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.casino-sticky__score-max {
    font-family: var(--font-mono), monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 1px;
}

.casino-sticky__score[data-level="average"] .casino-sticky__score-value,
.casino-sticky__score[data-level="poor"] .casino-sticky__score-value {
    background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
.casino-sticky__score[data-level="average"] .casino-sticky__score-label,
.casino-sticky__score[data-level="poor"] .casino-sticky__score-label {
    color: #d97706;
}

.casino-sticky__name {
    font-family: 'Unbounded', var(--font-family);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.casino-sticky__facts {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0 0;
}
.casino-sticky__fact {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.casino-sticky__fact-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Unbounded', var(--font-family);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-green);
    opacity: 0.82;
}
[data-theme="dark"] .casino-sticky__fact-label { color: #10b981; }
.casino-sticky__fact-label svg { flex-shrink: 0; opacity: 0.9; }
.casino-sticky__fact-value {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.casino-sticky__fact--hero {
    position: relative;
    padding: 12px 14px 13px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--brand-green) 11%, transparent) 0%,
        color-mix(in srgb, var(--brand-mountain) 6%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--brand-green) 22%, transparent);
    border-radius: 12px;
    gap: 5px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 4px 12px -6px color-mix(in srgb, var(--brand-green) 28%, transparent);
}
[data-theme="dark"] .casino-sticky__fact--hero {
    background: linear-gradient(135deg,
        rgba(16, 185, 129, 0.14) 0%,
        rgba(59, 130, 246, 0.08) 100%);
    border-color: rgba(16, 185, 129, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 4px 12px -6px rgba(16, 185, 129, 0.24);
}
.casino-sticky__fact--hero .casino-sticky__fact-label {
    opacity: 1;
    font-size: 9px;
    color: var(--brand-green);
}
.casino-sticky__fact--hero .casino-sticky__fact-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.015em;
    line-height: 1.35;
}

.casino-sticky__fact-sparkle {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    color: var(--brand-green);
    opacity: 0.35;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--brand-green) 55%, transparent));
}
[data-theme="dark"] .casino-sticky__fact-sparkle { color: #10b981; opacity: 0.5; }

.casino-sticky__fact--plain {
    padding: 10px 12px 11px;
    background: color-mix(in srgb, var(--brand-mountain) 3%, var(--bg-card));
    border: 1px solid var(--border-light);
    border-radius: 12px;
    gap: 4px;
}
[data-theme="dark"] .casino-sticky__fact--plain {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(148, 197, 255, 0.10);
}
.casino-sticky__fact--plain .casino-sticky__fact-label {
    opacity: 0.75;
}
.casino-sticky__fact--plain .casino-sticky__fact-value {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.35;
}

.casino-sticky__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    font-family: 'Unbounded', var(--font-family);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-mountain) 100%);
    border-radius: 12px;
    text-decoration: none;
    box-shadow:
        0 6px 14px -4px color-mix(in srgb, var(--brand-mountain) 45%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 180ms var(--ease-premium), box-shadow 240ms var(--ease-premium), background-position 400ms ease;
    background-size: 160% 160%;
    background-position: 0% 0%;
    position: relative;
    overflow: hidden;
}
.casino-sticky__cta:hover {
    transform: translateY(-1px);
    background-position: 100% 100%;
    box-shadow:
        0 12px 26px -6px color-mix(in srgb, var(--brand-mountain) 60%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
    color: #fff;
}
.casino-sticky__cta:active { transform: translateY(0); }
.casino-sticky__cta svg { transition: transform 220ms var(--ease-premium); }
.casino-sticky__cta:hover svg { transform: translateX(3px); }
.casino-sticky__cta::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
    transform: skewX(-18deg);
    transition: left 650ms var(--ease-premium);
    pointer-events: none;
}
.casino-sticky__cta:hover::after { left: 110%; }

.casino-sticky__footnote {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-align: center;
    opacity: 0.72;
}

/* WIDE: позиционируем sticky-card относительно центрированного контента.
   Формула: 360 (half-content) + 60 (visual gap) + 260 (sidebar) = 680px от центра.
   На viewport ≥1408 даёт gap ровно 60px. На 1336-1407 clamp держит left:24px
   (gap уменьшается до 24px на 1336). Ниже 1336 — bar-mode. */
@media (min-width: 1336px) {
    .casino-sticky {
        left: max(24px, calc(50% - 680px));
    }
}

/* NARROW: 769-1335px — превращаем sidebar в горизонтальную плашку снизу.
   Компоновка: logo + score + name + bonus-chip + CTA. Скрываем aurora,
   plain-facts, footnote. Welcome-bonus показываем как inline-pill. */
@media (max-width: 1335px) and (min-width: 769px) {
    .casino-sticky {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        transform: translate3d(0, 100%, 0) scale(1);
        z-index: 60;
    }
    .casino-sticky[data-state="visible"] {
        transform: translate3d(0, 0, 0) scale(1);
    }
    .casino-sticky[data-state="leaving"] {
        transform: translate3d(0, 100%, 0) scale(1);
    }
    body.has-casino-sticky-bar {
        padding-bottom: 88px;
    }
    /* scroll-top button над bar (как для mobile-cta) */
    body.has-casino-sticky-bar .scroll-top {
        bottom: 100px;
    }

    /* Скрываем декоративные/громоздкие элементы для bar-mode */
    .casino-sticky__aurora,
    .casino-sticky__footnote,
    .casino-sticky__fact--plain {
        display: none !important;
    }
    .casino-sticky__close {
        top: 2px;
        right: 4px;
        width: 22px;
        height: 22px;
    }
    .casino-sticky__accent {
        bottom: auto;
        top: 0;
        height: 2px;
    }

    /* Компактная top-секция (logo + score) в горизонтали */
    .casino-sticky__top {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .casino-sticky__logo {
        width: 48px;
        height: 48px;
        margin: 0;
    }
    .casino-sticky__logo img {
        width: 48px;
        height: 48px;
    }
    /* Score: компактный label сверху + крупное число (визуальный fokus #2) */
    .casino-sticky__score {
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        background: transparent;
        border: 0;
        gap: 1px;
    }
    .casino-sticky__score-label {
        font-size: 8.5px;
        letter-spacing: 0.14em;
        margin-bottom: 0;
        opacity: 0.7;
    }
    .casino-sticky__score-body {
        gap: 1px;
        align-items: baseline;
    }
    .casino-sticky__score-value {
        font-size: 26px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.02em;
    }
    .casino-sticky__score-max {
        font-size: 11px;
        opacity: 0.55;
    }

    /* Brand-name: визуальный fokus #1 - крупнее, weight 700, accent color */
    .casino-sticky__name {
        margin: 0;
        padding-left: 14px;
        margin-left: 4px;
        border-left: 1px solid color-mix(in srgb, var(--brand-mountain) 14%, transparent);
        font-size: 18px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -0.015em;
        color: var(--brand-mountain);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-shrink: 0;
        max-width: 240px;
    }
    [data-theme="dark"] .casino-sticky__name {
        color: #e2e8f0;
        border-left-color: rgba(148, 197, 255, 0.18);
    }

    /* Facts wrapper — занимает оставшееся место и центрирует pill горизонтально */
    .casino-sticky__facts {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
        margin: 0;
        gap: 0;
    }
    /* Welcome-bonus как горизонтальная pill: размер по содержимому, центрируется в slot */
    .casino-sticky__fact--hero {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 8px 14px;
        max-width: 100%;
        min-width: 0;
        border-radius: 999px;
    }
    .casino-sticky__fact--hero .casino-sticky__fact-sparkle {
        position: static;
        flex-shrink: 0;
        opacity: 0.55;
    }
    .casino-sticky__fact--hero .casino-sticky__fact-label {
        display: none;
    }
    .casino-sticky__fact--hero .casino-sticky__fact-value {
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    /* CTA-кнопка справа, не сжимается */
    .casino-sticky__cta {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 12px 20px;
        font-size: 12px;
    }
}

/* MOBILE: скрываем sticky-card полностью, mobile-cta берёт CTA на себя */
@media (max-width: 768px) {
    .casino-sticky { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .casino-sticky { transition: opacity 120ms linear; }
    .casino-sticky__cta,
    .casino-sticky__cta svg,
    .casino-sticky__cta::after { transition: none; }
}

.site-nav__group {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    border-radius: 10px;
}
/* Legacy full-group background overlay disabled: the new nav relies on
   text-color shifts only (no pill/background for hover/active/expanded). */
.site-nav__group::before { display: none; }
.site-nav__group > * { position: relative; z-index: 1; }

.site-nav__group > .site-nav__link {
    padding-right: 6px;
}
.site-nav__group > .site-nav__link::before {
    display: none; 
}

.site-nav__chevron-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 30px;
    padding: 0 4px 0 2px;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    color: var(--brand-mountain);
    transition: color 0.18s ease;
}
[data-theme="dark"] .site-nav__chevron-btn { color: #94c5ff; }
.site-nav__chevron-btn svg { transition: transform 220ms var(--ease-premium); }
.site-nav__chevron-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.site-nav__submenu-wrap {
    position: absolute;
    top: 100%;
    left: 50%;
    padding-top: 20px; 
    transform: translate3d(-50%, -6px, 0);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms var(--ease-premium), transform 260ms var(--ease-premium);
    z-index: 90;
}

.site-nav__group:hover .site-nav__submenu-wrap,
.site-nav__group:focus-within .site-nav__submenu-wrap,
.site-nav__group[data-expanded="true"] .site-nav__submenu-wrap {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(-50%, 0, 0);
}

.site-nav__submenu {
    position: relative;
    min-width: 220px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 1);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
[data-theme="dark"] .site-nav__submenu {
    background: #161b22;
    border-color: rgba(148, 197, 255, 0.14);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* No arrow triangle in Stitch-style dropdown */
.site-nav__submenu::before { display: none; }

.site-nav__submenu li { list-style: none; margin: 0; }

.site-nav .site-nav__submenu a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 10px;
    white-space: nowrap;
    color: var(--text-secondary);
    background-color: transparent;
    transition: color 0.18s ease, background-color 0.18s ease;
}
[data-theme="dark"] .site-nav .site-nav__submenu a {
    color: color-mix(in srgb, var(--text-secondary) 80%, white 20%);
}

.site-nav .site-nav__submenu a:hover,
.site-nav .site-nav__submenu a:focus-visible,
.site-nav .site-nav__submenu a.is-active {
    color: var(--brand-mountain);
}
[data-theme="dark"] .site-nav .site-nav__submenu a:hover,
[data-theme="dark"] .site-nav .site-nav__submenu a:focus-visible,
[data-theme="dark"] .site-nav .site-nav__submenu a.is-active {
    color: #cbe1ff;
}

.site-nav .site-nav__submenu a .nav-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    
}
.site-nav .site-nav__submenu a .nav-icon svg {
    width: 100%;
    height: 100%;
}

/* Mobile submenu rules consolidated into the main @media (max-width: 768px) block
   above (search for "Submenu groups inside the mobile drawer"). */

.scroll-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    cursor: pointer;
    box-shadow:
        0 6px 16px -6px rgba(15, 23, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 16px, 0) scale(0.9);
    transition: opacity 320ms var(--ease-premium), transform 360ms var(--ease-premium), box-shadow 240ms var(--ease-premium);
    z-index: 80;
    overflow: hidden;
    will-change: opacity, transform;
}
.scroll-top[data-state="visible"] {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
}
.scroll-top:hover {
    transform: translate3d(0, -2px, 0) scale(1);
    background: #cbd5e1;
    border-color: #94a3b8;
    box-shadow:
        0 10px 22px -6px rgba(15, 23, 42, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] .scroll-top {
    color: #94a3b8;
    background: #1e293b;
    border-color: #334155;
    box-shadow:
        0 6px 16px -6px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .scroll-top:hover {
    background: #334155;
    border-color: #475569;
    box-shadow:
        0 10px 22px -6px rgba(0, 0, 0, 0.62),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.scroll-top:active {
    transform: translate3d(0, 0, 0) scale(0.96);
}
.scroll-top svg {
    width: 20px;
    height: 20px;
    transition: transform 220ms var(--ease-premium);
}
.scroll-top:hover svg {
    transform: translateY(-2px);
}

.scroll-top::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 55%);
    pointer-events: none;
    opacity: 0.7;
}

.scroll-top::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid rgba(148, 163, 184, 0.40);
    opacity: 0;
    transition: opacity 240ms ease;
}
[data-theme="dark"] .scroll-top::before { border-color: rgba(100, 116, 139, 0.45); }
.scroll-top:hover::before { opacity: 1; }

@media (max-width: 720px) {
    .scroll-top {
        right: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px;
    }
    .scroll-top svg { width: 18px; height: 18px; }
    /* Поднимаем над mobile-cta только когда она active (review pages с ref_link) */
    body.has-mobile-cta .scroll-top { bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-top { transition: opacity 120ms linear; }
    .scroll-top svg, .scroll-top::before { transition: none; }
}


/* =============================================================
   Related Casinos — премиум горизонтальная таблица
   (аналог slot-list, но без header)
   ============================================================= */
.related-casino-list-wrap {
    position: relative;
    margin: 3rem 0 2rem;
    padding: 2rem 0 0;
    border-top: 1px solid var(--border);
}
.related-casino-list-wrap__heading {
    font: 600 1.5rem/1.3 "Unbounded", sans-serif;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
    letter-spacing: -0.01em;
}
.related-casino-list-wrap__description {
    margin: 0 0 1.25rem;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 760px;
}
@media (max-width: 680px) {
    .related-casino-list-wrap__description {
        font-size: 13px;
        line-height: 1.5;
        margin: 0 0 1rem;
    }
}
.related-casino-list {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-card);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 6px 20px -12px rgba(0, 0, 0, 0.06);
}

/* Inline-widget casino-list-widget внутри content-блока: добавить vertical margin
   (на where-to-play он внутри .related-casino-list-wrap, который уже имеет margin). */
.page-content-block > .related-casino-list,
.page-content-block .related-casino-list:not(.related-casino-list-wrap > *) {
    margin: 24px 0 32px;
}

/* desktop row: [logo][heading (name + updated)][score circle][specs wrapper][cta] */
.related-casino-list__row {
    display: grid;
    grid-template-columns: 72px minmax(140px, 1fr) minmax(0, 2fr) 28px;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    text-decoration: none;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
    position: relative;
    transition: background 200ms var(--ease-premium, ease);
}
.related-casino-list__row--with-score {
    grid-template-columns: 72px minmax(140px, 1fr) 48px minmax(0, 2fr) 28px;
}
.related-casino-list__row:last-child { border-bottom: none; }
.related-casino-list__row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--brand-green);
    opacity: 0;
    transition: opacity 200ms var(--ease-premium, ease);
}
@media (hover: hover) {
    .related-casino-list__row:hover {
        background: var(--bg-card-alt);
        color: var(--text-primary);
    }
    .related-casino-list__row:hover::before { opacity: 1; }
}
.related-casino-list__row:focus-visible {
    outline: 2px solid var(--brand-green);
    outline-offset: -2px;
}

/* Logo — без embedded score */
.related-casino-list__logo {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--bg-card-alt);
    overflow: hidden;
    flex-shrink: 0;
    align-self: center;
}
.related-casino-list__logo img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
}
.related-casino-list__logo-fallback {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-muted) 25%, transparent);
}

/* Score — прогресс-ring вокруг числа (чем выше оценка, тем больше заполнен) */
.related-casino-list__score {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    align-self: center;
    flex-shrink: 0;
}
.related-casino-list__score-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.related-casino-list__score-track {
    stroke: color-mix(in srgb, var(--brand-green) 15%, var(--bg-card-alt));
}
.related-casino-list__score-fill {
    stroke: var(--brand-green);
    transition: stroke-dashoffset 400ms var(--ease-premium, ease);
}
.related-casino-list__score-value {
    position: relative;
    z-index: 1;
    font-family: 'Unbounded', var(--font-sans, sans-serif);
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-green);
    letter-spacing: -0.01em;
    line-height: 1;
}
[data-theme="dark"] .related-casino-list__score-track {
    stroke: color-mix(in srgb, var(--brand-green) 20%, var(--bg-card-alt));
}
[data-theme="dark"] .related-casino-list__score-value {
    color: color-mix(in srgb, var(--brand-green) 85%, white 15%);
}

/* Heading column: name + updated */
.related-casino-list__heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    line-height: 1.25;
    align-self: center;
}
.related-casino-list__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.related-casino-list__license-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.related-casino-list__license-icon {
    flex-shrink: 0;
    color: color-mix(in srgb, var(--brand-green) 75%, var(--text-muted) 25%);
    opacity: 0.9;
}
.related-casino-list__license-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.related-casino-list__updated {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.01em;
    white-space: nowrap;
    min-width: 0;
}
.related-casino-list__updated-icon {
    flex-shrink: 0;
    opacity: 0.8;
}
.related-casino-list__updated-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    opacity: 0.85;
}
.related-casino-list__updated-value {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Specs wrapper: on desktop — flex nowrap, plates всегда в 1 строку */
.related-casino-list__specs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    align-self: center;
    min-width: 0;
}
.related-casino-list__spec {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 5px 11px;
    border-radius: 8px;
    background: var(--bg-card-alt);
    text-align: left;
    min-width: 0;
    line-height: 1.2;
    flex: 0 0 auto;
}
/* Bonus shrinkable: занимает свободное место но с ellipsis */
.related-casino-list__spec--bonus {
    flex: 1 1 auto;
    max-width: 280px;
    min-width: 0;
}
.related-casino-list__spec-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    line-height: 1.1;
}
.related-casino-list__spec-icon {
    flex-shrink: 0;
    opacity: 0.85;
}
.related-casino-list__spec-value {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
/* Desktop: license показана inline в heading, pill в specs скрыта */
@media (min-width: 681px) {
    .related-casino-list__spec--license { display: none; }
}
/* Mobile: license в scrolling specs, inline-версия скрыта */
@media (max-width: 680px) {
    .related-casino-list__license-inline { display: none; }
}

/* Bonus — акцентная подсветка (primary spec) */
.related-casino-list__spec--bonus {
    background: color-mix(in srgb, var(--brand-green) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-green) 22%, transparent);
}
.related-casino-list__spec--bonus .related-casino-list__spec-label {
    color: color-mix(in srgb, var(--brand-green) 85%, var(--text-primary) 15%);
}
.related-casino-list__spec--bonus .related-casino-list__spec-icon {
    opacity: 1;
}
.related-casino-list__spec--bonus .related-casino-list__spec-value {
    font-weight: 600;
    color: var(--text-primary);
}

/* CTA стрелка → */
.related-casino-list__cta {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    color: var(--text-muted);
    transition: transform 200ms var(--ease-premium, ease),
                color 200ms var(--ease-premium, ease);
}
.related-casino-list__cta::after {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
}
@media (hover: hover) {
    .related-casino-list__row:hover .related-casino-list__cta {
        color: var(--brand-green);
        transform: translateX(3px);
    }
}

/* mobile: независимые карточки */
@media (max-width: 680px) {
    .related-casino-list {
        border: none;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        overflow: visible;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .related-casino-list__row {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        grid-template-areas:
            "logo heading"
            "specs specs";
        align-items: center;
        column-gap: 12px;
        row-gap: 14px;
        padding: 14px 44px 14px 14px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 4px 16px -10px rgba(0, 0, 0, 0.06);
    }
    .related-casino-list__row--with-score {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        grid-template-areas:
            "logo heading score"
            "specs specs specs";
    }
    .related-casino-list__row::before {
        top: 14px;
        bottom: 14px;
        border-radius: 2px;
    }
    .related-casino-list__logo { grid-area: logo; }
    .related-casino-list__heading { grid-area: heading; }
    .related-casino-list__score {
        grid-area: score;
        width: 42px;
        height: 42px;
        font-size: 12.5px;
    }
    .related-casino-list__name { font-size: 16px; white-space: normal; overflow: visible; text-overflow: clip; }
    .related-casino-list__specs {
        grid-area: specs;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: calc(100% + 14px);
        margin-right: -14px;
        padding-right: 32px;
        gap: 8px;
        mask-image: linear-gradient(to right, black calc(100% - 38px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 38px), transparent 100%);
        scroll-snap-type: x proximity;
    }
    .related-casino-list__specs::-webkit-scrollbar { display: none; }
    .related-casino-list__spec,
    .related-casino-list__spec--bonus {
        flex: 0 0 auto;
        max-width: 260px;
        scroll-snap-align: start;
    }
    .related-casino-list__cta {
        position: absolute;
        top: 50%;
        right: 14px;
        transform: translateY(-50%);
        width: 22px;
        height: 22px;
    }
    @media (hover: hover) {
        .related-casino-list__row:hover .related-casino-list__cta {
            transform: translateY(-50%) translateX(2px);
        }
    }
}

/* WHERE TO PLAY — использует тот же неймспейс .related-casino-list*
   что и related-casinos. Стили смотреть в секции Related Casinos выше. */

/* =========================================================================
   SLOT REVIEW - hero provider chip, cover, features, demo, where-to-play,
   related-slots. See docs/superpowers/specs/2026-04-20-slot-review-design.md
   ========================================================================= */

.hero-review__facts:has(.hero-fact:nth-child(5)) {
    grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1000px) {
    .hero-review__facts:has(.hero-fact:nth-child(5)) {
        grid-template-columns: repeat(3, 1fr);
    }
    .hero-review__facts:has(.hero-fact:nth-child(5)) .hero-fact { padding: 8px 14px; }
    .hero-review__facts:has(.hero-fact:nth-child(5)) .hero-fact::before { display: none; }
}
@media (max-width: 560px) {
    .hero-review__facts:has(.hero-fact:nth-child(5)) {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* kicker-row: плашка Slotrecension + plashka провайдера в одну линию */
.hero-review__kicker-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.hero-review__kicker-row .hero-review__kicker {
    margin: 0;
}

/* На мобильном меняем порядок: provider chip - первым, kicker - вторым */
@media (max-width: 720px) {
    .hero-review__kicker-row .hero-review__provider-chip { order: 0; }
    .hero-review__kicker-row .hero-review__kicker { order: 1; }
}

/* Chip провайдера - одинаковая высота с kicker'ом, compact */
.hero-review__provider-chip {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-card), var(--brand-mountain) 3%);
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 22%, var(--border));
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
    line-height: 1;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    max-width: fit-content;
}
/* Provider-chip - не кликабельный (страницы провайдеров не существует на этом
   сайте). Hover/focus-эффекты убраны, чтобы не создавать false affordance. */
[data-theme="dark"] .hero-review__provider-chip {
    background: color-mix(in srgb, var(--bg-card), var(--brand-mountain) 8%);
    border-color: color-mix(in srgb, var(--brand-mountain) 35%, var(--border));
}
.hero-review__provider-chip-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-width: 18px;
    padding: 0 5px;
    background: var(--provider-bg, var(--brand-green));
    color: var(--provider-fg, #ffffff);
    font-family: 'Unbounded', 'DM Sans', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.hero-review__provider-chip-name {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px 2px 7px;
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 8.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: color-mix(in srgb, var(--text-secondary) 90%, transparent);
}
[data-theme="dark"] .hero-review__provider-chip-name {
    color: color-mix(in srgb, var(--text-secondary) 95%, white 5%);
}

.slot-features {
    margin: 0 0 28px;
    padding: 24px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid rgba(148, 163, 184, 0.14);
}
[data-theme="dark"] .slot-features {
    border-color: rgba(148, 163, 184, 0.1);
}
.slot-features__heading {
    font-family: 'Unbounded', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    margin: 0 0 20px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.slot-features__grid {
    display: grid;
    /* Desktop: 2 колонки в 800px article (minmax 320 → fits 2). */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
/* Mobile: 1 колонка — auto-fit с 320px пробивал viewport <340px (после padding). */
@media (max-width: 640px) {
    .slot-features__grid { grid-template-columns: 1fr; }
}
/* Base nordic palette — emerald accent, neutral border.
   Warm-override ниже (.review-article--warm) даёт gold+violet гамму. */
.slot-feature {
    display: flex;
    gap: 14px;
    padding: 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand-green) 4%, var(--bg-card));
    border: 1px solid rgba(148, 163, 184, 0.14);
    transition: transform 0.18s ease, border-color 0.18s ease;
}
.slot-feature:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--brand-green) 35%, transparent);
}
[data-theme="dark"] .slot-feature {
    background: color-mix(in srgb, var(--brand-green) 8%, var(--bg-card-alt));
    border-color: rgba(148, 163, 184, 0.1);
}
.slot-feature__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand-green) 16%, transparent);
    color: var(--brand-green);
}
[data-theme="dark"] .slot-feature__icon {
    background: color-mix(in srgb, var(--brand-green) 22%, transparent);
    color: var(--brand-green);
}

/* Warm palette — применяется когда slot-review выбран в «warm» */
.review-article--warm .slot-feature {
    background: linear-gradient(135deg, rgba(196, 138, 43, 0.06) 0%, rgba(90, 61, 163, 0.03) 100%);
    border-color: rgba(122, 90, 208, 0.14);
}
.review-article--warm .slot-feature:hover {
    border-color: rgba(196, 138, 43, 0.35);
}
[data-theme="dark"] .review-article--warm .slot-feature {
    background: linear-gradient(135deg, rgba(224, 169, 75, 0.10) 0%, rgba(168, 150, 224, 0.06) 100%);
    border-color: rgba(168, 150, 224, 0.16);
}
.review-article--warm .slot-feature__icon {
    background: linear-gradient(180deg, #FBF1DD 0%, #F5E3BF 100%);
    color: #7A4E0F;
    box-shadow: inset 0 0 0 1px rgba(196, 138, 43, 0.20);
}
[data-theme="dark"] .review-article--warm .slot-feature__icon {
    background: linear-gradient(180deg, rgba(224, 169, 75, 0.20) 0%, rgba(107, 74, 19, 0.30) 100%);
    color: #E0A94B;
    box-shadow: inset 0 0 0 1px rgba(224, 169, 75, 0.22);
}
.slot-feature__icon svg {
    width: 22px;
    height: 22px;
}
.slot-feature__body { min-width: 0; }
.slot-feature__title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--text-primary);
    line-height: 1.25;
}
.slot-feature__description {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.slot-demo {
    margin: 0 0 28px;
    scroll-margin-top: 24px;
}
.slot-demo__heading {
    font-family: 'Unbounded', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    margin: 0 0 16px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.slot-demo__frame {
    position: relative;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: #0d1117;
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.18), 0 1px 2px rgba(15, 23, 42, 0.05);
}
.slot-demo__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #0d1117;
    position: absolute;
    inset: 0;
}
.slot-demo__poster {
    position: absolute;
    inset: 0;
    background-color: #0d1117;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: filter 0.22s ease;
}
.slot-demo__poster::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Radial spotlight: локальное затемнение в центре (где CTA), края картинки
       остаются практически нетронутыми (5% alpha). В отличие от linear-gradient
       создаёт кинематографичный focal point и не съедает детали постера по периметру. */
    background: radial-gradient(ellipse 65% 62% at center, rgba(13, 17, 23, 0.58) 0%, rgba(13, 17, 23, 0.38) 42%, rgba(13, 17, 23, 0.14) 78%, rgba(13, 17, 23, 0.05) 100%);
    transition: background 0.22s ease;
}
.slot-demo__frame:hover .slot-demo__poster::before {
    background: radial-gradient(ellipse 65% 62% at center, rgba(13, 17, 23, 0.72) 0%, rgba(13, 17, 23, 0.48) 42%, rgba(13, 17, 23, 0.2) 78%, rgba(13, 17, 23, 0.08) 100%);
}
.slot-demo__play {
    position: relative;
    z-index: 2;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 28px;
    background: transparent;
    border: 0;
    color: #ffffff;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.18s ease;
}
.slot-demo__play:hover { transform: scale(1.05); }
.slot-demo__play-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 999px;
    background: var(--brand-green, #059669);
    color: #ffffff;
    /* Layered shadow:
       1. 0 0 0 3px white halo - чётко отделяет кнопку от любого фона (как score badge)
       2. 0 0 0 10px rgba(green) - мягкое зелёное кольцо
       3. 0 18px 44px rgba(green) - drop-shadow под кнопкой
       Эта layered техника работает на любом цвете картинки одновременно. */
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.92),
        0 0 0 10px rgba(5, 150, 105, 0.25),
        0 18px 44px rgba(5, 150, 105, 0.5);
    animation: slot-demo-pulse 2.4s ease-in-out infinite;
}
@keyframes slot-demo-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 3px rgba(255, 255, 255, 0.92),
            0 0 0 10px rgba(5, 150, 105, 0.25),
            0 18px 44px rgba(5, 150, 105, 0.5);
    }
    50% {
        box-shadow:
            0 0 0 3px rgba(255, 255, 255, 0.92),
            0 0 0 16px rgba(5, 150, 105, 0.12),
            0 18px 48px rgba(5, 150, 105, 0.62);
    }
}
.slot-demo__play-label {
    font-family: 'Unbounded', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.04em;
    /* Glass-pill: semi-transparent background + blur делает текст читаемым
       на любом фоне, не требуя затемнения картинки. Fallback text-shadow
       для браузеров без backdrop-filter (IE, старые Android). */
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(13, 17, 23, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.slot-demo__fullscreen {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 10px;
    background: rgba(13, 17, 23, 0.72);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.14);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.18s ease, width 0.18s ease, height 0.18s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: auto;
}
.slot-demo__fullscreen:hover,
.slot-demo__fullscreen:focus-visible {
    background: rgba(13, 17, 23, 0.92);
}
.slot-demo__fullscreen:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.65);
    outline-offset: 2px;
}
/* Show on desktop when loaded + hovered frame, OR when is-mouse-active (fullscreen) */
.slot-demo__frame.is-loaded:hover .slot-demo__fullscreen,
.slot-demo__frame.is-loaded.is-mouse-active .slot-demo__fullscreen {
    opacity: 1;
    transform: translateY(0);
}
/* Icon toggle: enter visible by default, exit visible in fullscreen */
.slot-demo__fullscreen-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.slot-demo__fullscreen-icon--exit { display: none; }
.slot-demo__frame.is-fullscreen .slot-demo__fullscreen-icon--enter { display: none; }
.slot-demo__frame.is-fullscreen .slot-demo__fullscreen-icon--exit { display: inline-flex; }
/* In fullscreen - крупнее, заметнее на любом game-UI */
.slot-demo__frame.is-fullscreen .slot-demo__fullscreen {
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(13, 17, 23, 0.82);
}
.slot-demo__frame.is-fullscreen .slot-demo__fullscreen-icon--exit svg {
    width: 22px;
    height: 22px;
}
/* Touch devices (mobile): кнопка всегда видна после загрузки (нет :hover) */
@media (hover: none), (max-width: 640px) {
    .slot-demo__frame.is-loaded .slot-demo__fullscreen {
        opacity: 1;
        transform: translateY(0);
    }
    /* Safe area inset для notch/dynamic-island в fullscreen */
    .slot-demo__frame.is-fullscreen .slot-demo__fullscreen {
        top: calc(12px + env(safe-area-inset-top, 0));
        right: calc(12px + env(safe-area-inset-right, 0));
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }
    .slot-demo__frame.is-fullscreen .slot-demo__fullscreen-icon--exit svg {
        width: 24px;
        height: 24px;
    }
}
.slot-demo__disclaimer {
    margin: 12px 0 0;
    font-size: 12.5px;
    color: var(--text-muted);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .slot-demo__play-bubble { animation: none; }
}

/* Related slots — использует namespace .slot-list*
   (см. секцию «slot-list» выше), только без шапки таблицы. */
.related-slots-wrap {
    margin: 32px 0 0;
    box-sizing: border-box;
}
.related-slots-wrap__heading {
    font-family: 'Unbounded', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 22px;
    margin: 0 0 20px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

/* ============================================================
   Slot-review hero — палитра-only override (фон + горы + снежинки).
   Scope: .hero-review--warm (только slot-review страницы).
   Все остальные элементы hero (лого, заголовок, CTA, rating, facts)
   наследуют casino-review стили без изменений — переделка только фона.
   Источник палитры: /slot-hero-handoff/slot-hero-tokens.css
   ============================================================ */

.hero-review--warm .hero-review__bg {
    background:
        /* gold glow top-right */
        radial-gradient(700px 350px at 85% -10%, rgba(224, 169, 75, 0.30), transparent 60%),
        /* violet glow bottom-left */
        radial-gradient(600px 500px at -5% 120%, rgba(90, 61, 163, 0.20), transparent 60%),
        /* warm sand diagonal */
        linear-gradient(165deg, #EFE9F7 0%, #F6E7D6 55%, #F7F1EB 100%);
}
[data-theme="dark"] .hero-review--warm .hero-review__bg {
    background:
        radial-gradient(700px 350px at 85% -10%, rgba(224, 169, 75, 0.14), transparent 60%),
        radial-gradient(600px 500px at -5% 120%, rgba(122, 90, 208, 0.18), transparent 60%),
        linear-gradient(165deg, #1a1328 0%, #2a1f3a 55%, #1a1820 100%);
}

/* горы (наши SVG-маски, перекрашены): дальний слой — gold, ближний — violet */
.hero-review--warm::before {
    background-color: rgba(196, 138, 43, 0.22);
}
.hero-review--warm::after {
    background-color: rgba(58, 42, 99, 0.28);
}
[data-theme="dark"] .hero-review--warm::before {
    background-color: rgba(224, 169, 75, 0.12);
}
[data-theme="dark"] .hero-review--warm::after {
    background-color: rgba(122, 90, 208, 0.16);
}

/* снежинки: тот же SVG-flake, чередование violet / light-violet / gold */
.hero-review--warm .hero-review__flake:nth-child(1)  { background-color: rgba(196, 138, 43, 0.45); }
.hero-review--warm .hero-review__flake:nth-child(2)  { background-color: rgba(90, 61, 163, 0.40); }
.hero-review--warm .hero-review__flake:nth-child(3)  { background-color: rgba(196, 138, 43, 0.40); }
.hero-review--warm .hero-review__flake:nth-child(4)  { background-color: rgba(122, 90, 208, 0.42); }
.hero-review--warm .hero-review__flake:nth-child(5)  { background-color: rgba(90, 61, 163, 0.38); }
.hero-review--warm .hero-review__flake:nth-child(6)  { background-color: rgba(224, 169, 75, 0.38); }
.hero-review--warm .hero-review__flake:nth-child(7)  { background-color: rgba(122, 90, 208, 0.38); }
.hero-review--warm .hero-review__flake:nth-child(8)  { background-color: rgba(196, 138, 43, 0.35); }
.hero-review--warm .hero-review__flake:nth-child(9)  { background-color: rgba(90, 61, 163, 0.36); }
.hero-review--warm .hero-review__flake:nth-child(10) { background-color: rgba(224, 169, 75, 0.32); }
.hero-review--warm .hero-review__flake:nth-child(11) { background-color: rgba(122, 90, 208, 0.32); }
.hero-review--warm .hero-review__flake:nth-child(12) { background-color: rgba(196, 138, 43, 0.30); }
.hero-review--warm .hero-review__flake:nth-child(13) { background-color: rgba(90, 61, 163, 0.30); }
.hero-review--warm .hero-review__flake:nth-child(14) { background-color: rgba(224, 169, 75, 0.28); }
.hero-review--warm .hero-review__flake:nth-child(15) { background-color: rgba(122, 90, 208, 0.28); }
[data-theme="dark"] .hero-review--warm .hero-review__flake:nth-child(odd)  { background-color: rgba(224, 169, 75, 0.28); }
[data-theme="dark"] .hero-review--warm .hero-review__flake:nth-child(even) { background-color: rgba(160, 130, 220, 0.28); }

/* fact icons используют currentColor (line-art из /slot-hero-handoff/icons/)
   задаём цвет в тон палитре slot-hero: тёплый gold-ink */
.hero-review--warm .hero-fact__icon { color: #7A4E0F; }
[data-theme="dark"] .hero-review--warm .hero-fact__icon { color: #E0A94B; }

/* h1 heading — градиент в violet-палитре (#1B0F3E → #4B2E8C) */
.hero-review--warm .hero-review__title {
    background: linear-gradient(180deg, #1B0F3E 0%, #2E1A5C 60%, #4B2E8C 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
[data-theme="dark"] .hero-review--warm .hero-review__title {
    background: linear-gradient(180deg, #E8DCFF 0%, #C9B5F2 60%, #A896E0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* facts — в mauve-taupe гамме: label светлее, value темнее */
.hero-review--warm .hero-fact__label { color: #A38B82; }
.hero-review--warm .hero-fact__value { color: #4B3A35; }
[data-theme="dark"] .hero-review--warm .hero-fact__label { color: #C8B0A4; }
[data-theme="dark"] .hero-review--warm .hero-fact__value { color: #F2E9E3; }

/* ============================================================
   Rating + player-score блоки: переключаем brand-green/mountain
   и rating-tone-* на палитру гор (violet + gold). Всё, что в hero
   использует var(--brand-*) или var(--rating-*) — переключится.
   Остальное — точечные hardcoded-оверрайды ниже.
   ============================================================ */
.hero-review--warm {
    /* Гамма «нижнего цвета гор» — тёплый mauve / dusty taupe.
       Именно такой оттенок получается когда deep-violet #3A2A63 @ 28%
       накладывается на warm-sand фон. Никаких голубых, синих или чистых
       фиолетовых акцентов — всё в семействе розово-коричнево-серого. */
    --brand-green: #B89A8A;       /* dusty tawny-rose (warm highlight) */
    --brand-mountain: #6B5550;    /* deep taupe-brown (headline / тени) */
    --accent: #8B6F68;            /* mauve-taupe (основной акцент) */
    --accent-hover: #6B5550;
    --accent-soft: #EFE5DF;       /* warm wash для soft backgrounds */
    --rating-excellent: #8B6F68;  /* 8.9 ring + excellent chips */
    --rating-good: #A38B82;
    --rating-average: #B89A8A;
    --rating-poor: #8A7D6F;
}
[data-theme="dark"] .hero-review--warm {
    --brand-green: #D4BAA8;
    --brand-mountain: #D4C0B8;
    --accent: #C8B0A4;
    --accent-hover: #E0CCC0;
    --accent-soft: rgba(139, 111, 104, 0.18);
    --rating-excellent: #C8B0A4;
    --rating-good: #B59E92;
    --rating-average: #D4BAA8;
    --rating-poor: #9A8A7A;
}

/* hero-rating-chip — тёплая mauve-taupe wash подложка */
.hero-review--warm .hero-rating-chip {
    background: linear-gradient(135deg,
        rgba(163, 139, 130, 0.14) 0%,
        rgba(239, 229, 223, 0.55) 55%,
        rgba(139, 111, 104, 0.10) 100%);
    border-color: rgba(139, 111, 104, 0.24);
}
.hero-review--warm .hero-rating-chip:hover {
    box-shadow: 0 4px 12px -4px rgba(107, 85, 80, 0.25);
}
[data-theme="dark"] .hero-review--warm .hero-rating-chip {
    background: linear-gradient(135deg,
        rgba(212, 186, 168, 0.14) 0%,
        rgba(107, 85, 80, 0.12) 55%,
        rgba(200, 176, 164, 0.12) 100%);
    border-color: rgba(200, 176, 164, 0.22);
}

/* hero-player__chip (45 läsare, Verifierade, Senast 5h) — mauve+warm wash */
.hero-review--warm .hero-player__chip {
    background: linear-gradient(135deg,
        rgba(163, 139, 130, 0.14) 0%,
        rgba(239, 229, 223, 0.50) 55%,
        rgba(184, 154, 138, 0.10) 100%);
    border-color: rgba(139, 111, 104, 0.22);
}
.hero-review--warm .hero-player__chip svg { color: #8B6F68; }
[data-theme="dark"] .hero-review--warm .hero-player__chip {
    background: linear-gradient(135deg,
        rgba(212, 186, 168, 0.14) 0%,
        rgba(107, 85, 80, 0.12) 55%,
        rgba(200, 176, 164, 0.10) 100%);
    border-color: rgba(200, 176, 164, 0.22);
}
[data-theme="dark"] .hero-review--warm .hero-player__chip svg { color: #C8B0A4; }

/* hero-player__vote (Din röst: 5/5) — тёплая mauve wash вместо sky-blue */
.hero-review--warm .hero-player__vote {
    background: linear-gradient(135deg,
        rgba(163, 139, 130, 0.10) 0%,
        rgba(239, 229, 223, 0.50) 100%);
    border-color: rgba(139, 111, 104, 0.28);
}
[data-theme="dark"] .hero-review--warm .hero-player__vote {
    background: linear-gradient(135deg,
        rgba(200, 176, 164, 0.12) 0%,
        rgba(107, 85, 80, 0.12) 100%);
    border-color: rgba(200, 176, 164, 0.22);
}

/* акценты в user-rating карточке: общая оценка, звёзды, POPULÄR pill */

/* Score "5.0" — gold-ink в тон 8.9 в expert-ring */
.hero-review--warm .hero-player__avg { color: #6B4A13; }
[data-theme="dark"] .hero-review--warm .hero-player__avg { color: #F4CD7E; }

/* "/5" — gold ink подпись, как подсказка уровня */
.hero-review--warm .hero-player__avg-max { color: #C48A2B; }
[data-theme="dark"] .hero-review--warm .hero-player__avg-max { color: #E0A94B; }

/* звёзды рядом со score — тёплый gold градиент (было mauve/muted) */
.hero-review--warm .hero-player__score-row .hero-stars__fg {
    background-image: linear-gradient(135deg, #E0A94B 0%, #C48A2B 100%);
}
[data-theme="dark"] .hero-review--warm .hero-player__score-row .hero-stars__fg {
    background-image: linear-gradient(135deg, #F4CD7E 0%, #E0A94B 100%);
}

/* POPULÄR pill — gold wash с gold-ink текстом и gold иконкой */
.hero-review--warm .hero-player__trending {
    background: linear-gradient(135deg, #FBF1DD 0%, #F5E3BF 100%);
    border-color: rgba(196, 138, 43, 0.45);
    color: #6B4A13;
}
.hero-review--warm .hero-player__trending svg { color: #C48A2B; }
[data-theme="dark"] .hero-review--warm .hero-player__trending {
    background: linear-gradient(135deg, rgba(196, 138, 43, 0.22) 0%, rgba(107, 74, 19, 0.25) 100%);
    border-color: rgba(224, 169, 75, 0.45);
    color: #E0A94B;
}
[data-theme="dark"] .hero-review--warm .hero-player__trending svg { color: #E0A94B; }

/* ============================================================
   Verdict (Sammanfattning) + Reviews section slot-review —
   scope: .review-layout--warm (захватывает и main, и aux). Палитра
   gold + violet вместо emerald + navy.
   ============================================================ */

/* Variable overrides — переключают все descendant-элементы, использующие
   var(--brand-green)/--brand-mountain/--accent/--wb-*-fg, на slot-палитру.
   Это одним махом переключает: spoilers, faq, widget-tip, pull-quote,
   where-to-play-card score и т.д. */
.review-layout--warm {
    --brand-green: #C48A2B;
    --brand-mountain: #5A3DA3;
    --accent: #8B6F68;
    --accent-hover: #5A3DA3;
    --accent-soft: #FBF1DD;
    --rating-excellent: #C48A2B;
    --rating-good: #A896E0;
    --rating-average: #8B6F68;
    --rating-poor: #6B4A13;
    --wb-info-fg: #5A3DA3;
    --wb-tip-fg: #C48A2B;
}
[data-theme="dark"] .review-layout--warm {
    --brand-green: #E0A94B;
    --brand-mountain: #A896E0;
    --accent: #C8B0A4;
    --accent-hover: #E8DCFF;
    --accent-soft: rgba(224, 169, 75, 0.18);
    --rating-excellent: #E0A94B;
    --rating-good: #A896E0;
    --rating-average: #C8B0A4;
    --rating-poor: #8A7D5F;
    --wb-info-fg: #A896E0;
    --wb-tip-fg: #E0A94B;
}

/* page-verdict-block (Sammanfattning) */
.review-layout--warm .page-verdict-block::before {
    background: linear-gradient(90deg, #5A3DA3 0%, #8B6F68 50%, #C48A2B 100%);
}
[data-theme="dark"] .review-layout--warm .page-verdict-block::before {
    background: linear-gradient(90deg, #A896E0 0%, #C8B0A4 50%, #E0A94B 100%);
}
.review-layout--warm .page-verdict-block__title { color: #8B6F68; }
[data-theme="dark"] .review-layout--warm .page-verdict-block__title { color: #C8B0A4; }

/* reviews — header + gradient top strip + count badge */
.review-layout--warm .reviews::before {
    background: linear-gradient(90deg, #5A3DA3 0%, #8B6F68 50%, #C48A2B 100%);
}
[data-theme="dark"] .review-layout--warm .reviews::before {
    background: linear-gradient(90deg, #A896E0 0%, #C8B0A4 50%, #E0A94B 100%);
}
.review-layout--warm .reviews__label { color: #8B6F68; }
[data-theme="dark"] .review-layout--warm .reviews__label { color: #C8B0A4; }
.review-layout--warm .reviews__count {
    background: linear-gradient(135deg, #C48A2B 0%, #5A3DA3 130%);
    box-shadow: 0 1px 3px -1px rgba(90, 61, 163, 0.4);
}
[data-theme="dark"] .review-layout--warm .reviews__count {
    background: linear-gradient(135deg, #E0A94B 0%, #A896E0 130%);
}

/* reviews__empty — icon + accent strip */
.review-layout--warm .reviews__empty-accent {
    background: linear-gradient(90deg, #C48A2B 0%, #8B6F68 50%, #5A3DA3 100%);
}
[data-theme="dark"] .review-layout--warm .reviews__empty-accent {
    background: linear-gradient(90deg, #E0A94B 0%, #C8B0A4 50%, #A896E0 100%);
}
.review-layout--warm .reviews__empty-icon {
    color: #7A4E0F;
    background: linear-gradient(135deg, rgba(196, 138, 43, 0.18) 0%, rgba(122, 90, 208, 0.12) 100%);
    border-color: rgba(196, 138, 43, 0.30);
}
[data-theme="dark"] .review-layout--warm .reviews__empty-icon {
    color: #E0A94B;
    background: linear-gradient(135deg, rgba(224, 169, 75, 0.18) 0%, rgba(168, 150, 224, 0.12) 100%);
    border-color: rgba(224, 169, 75, 0.32);
}

/* review-form — background + top strip + stars + submit */
.review-layout--warm .review-form {
    background: linear-gradient(135deg,
        rgba(251, 241, 221, 0.45) 0%,
        rgba(168, 150, 224, 0.08) 55%,
        rgba(90, 61, 163, 0.04) 100%);
    border-color: rgba(122, 90, 208, 0.22);
}
[data-theme="dark"] .review-layout--warm .review-form {
    background: linear-gradient(135deg,
        rgba(224, 169, 75, 0.08) 0%,
        rgba(168, 150, 224, 0.10) 55%,
        rgba(90, 61, 163, 0.06) 100%);
    border-color: rgba(168, 150, 224, 0.24);
}
.review-layout--warm .review-form::before {
    background: linear-gradient(90deg, #C48A2B 0%, #5A3DA3 100%);
}
[data-theme="dark"] .review-layout--warm .review-form::before {
    background: linear-gradient(90deg, #E0A94B 0%, #A896E0 100%);
}
/* stars — gold→violet gradient на checked/hover */
.review-layout--warm .review-form__stars label:hover,
.review-layout--warm .review-form__stars label:hover ~ label,
.review-layout--warm .review-form__stars input:checked ~ label {
    background-image: linear-gradient(135deg, #C48A2B 0%, #5A3DA3 100%);
}
[data-theme="dark"] .review-layout--warm .review-form__stars label:hover,
[data-theme="dark"] .review-layout--warm .review-form__stars label:hover ~ label,
[data-theme="dark"] .review-layout--warm .review-form__stars input:checked ~ label {
    background-image: linear-gradient(135deg, #E0A94B 0%, #A896E0 100%);
}
/* submit button — тот же violet-градиент, что hero-CTA slot */
.review-layout--warm .reviews .review-form__submit {
    background: linear-gradient(135deg, #7A5AD0 0%, #2E1A5C 100%);
    box-shadow: 0 6px 18px -6px rgba(46, 26, 92, 0.50);
}
.review-layout--warm .reviews .review-form__submit:hover {
    box-shadow: 0 10px 26px -6px rgba(46, 26, 92, 0.65);
}
[data-theme="dark"] .review-layout--warm .reviews .review-form__submit {
    background: linear-gradient(135deg, #A896E0 0%, #3A2A63 100%);
    box-shadow: 0 6px 18px -6px rgba(58, 42, 99, 0.55);
}

/* ============================================================
   Контент-блоки slot-review: перекраска «зелёных» бренд-элементов
   (intro-pullquote, toc, slot-demo play-button) в slot-палитру
   (gold + violet). Scope: .review-article--warm.
   ============================================================ */

/* page-intro-block (Redaktörens ord) ───────────────────── */
.review-article--warm .page-intro-block::before {
    background: linear-gradient(180deg, #C48A2B, #5A3DA3);
}
[data-theme="dark"] .review-article--warm .page-intro-block::before {
    background: linear-gradient(180deg, #E0A94B, #A896E0);
}
.review-article--warm .page-intro-block::after {
    background:
        radial-gradient(280px 100px at 95% 0%, rgba(196, 138, 43, 0.08), transparent 70%),
        radial-gradient(320px 120px at 5% 100%, rgba(122, 90, 208, 0.06), transparent 70%);
}
.review-article--warm .page-intro-block__label { color: #8B6F68; }
.review-article--warm .page-intro-block__label::after {
    background: linear-gradient(90deg, rgba(139, 111, 104, 0.45), transparent);
}
[data-theme="dark"] .review-article--warm .page-intro-block__label { color: #C8B0A4; }
[data-theme="dark"] .review-article--warm .page-intro-block__label::after {
    background: linear-gradient(90deg, rgba(200, 176, 164, 0.45), transparent);
}
.review-article--warm .page-intro-block__pullquote { color: #3A2A63; }
.review-article--warm .page-intro-block__pullquote::before { color: #C48A2B; }
[data-theme="dark"] .review-article--warm .page-intro-block__pullquote { color: #E8DCFF; }
[data-theme="dark"] .review-article--warm .page-intro-block__pullquote::before { color: #E0A94B; }
/* dropcap в body (первая буква "G" зелёная в casino — переводим в gold) */
.review-article--warm .page-intro-block__body::first-letter,
.review-article--warm .page-intro-block__para:first-of-type::first-letter { color: #C48A2B; }
[data-theme="dark"] .review-article--warm .page-intro-block__body::first-letter,
[data-theme="dark"] .review-article--warm .page-intro-block__para:first-of-type::first-letter { color: #E0A94B; }

/* toc (Innehåll) ───────────────────── */
.review-article--warm .toc::before {
    background:
        radial-gradient(240px 100px at 92% 0%, rgba(196, 138, 43, 0.10), transparent 70%),
        radial-gradient(320px 120px at 8% 100%, rgba(122, 90, 208, 0.06), transparent 70%);
}
.review-article--warm .toc summary,
.review-article--warm .toc__title { color: #8B6F68; }
[data-theme="dark"] .review-article--warm .toc summary,
[data-theme="dark"] .review-article--warm .toc__title { color: #C8B0A4; }
.review-article--warm .toc summary::after {
    background: linear-gradient(135deg, #C48A2B, #5A3DA3);
}
[data-theme="dark"] .review-article--warm .toc summary::after {
    background: linear-gradient(135deg, #E0A94B, #A896E0);
}
.review-article--warm .toc__list {
    border-top-color: rgba(139, 111, 104, 0.25);
}
.review-article--warm .toc__item a::before { color: #C48A2B; }
[data-theme="dark"] .review-article--warm .toc__item a::before { color: #E0A94B; }
.review-article--warm .toc__item a:hover { color: #3A2A63; }
.review-article--warm .toc__item a:hover::before { color: #5A3DA3; }
[data-theme="dark"] .review-article--warm .toc__item a:hover { color: #E8DCFF; }
[data-theme="dark"] .review-article--warm .toc__item a:hover::before { color: #C9B5F2; }
.review-article--warm .toc__item.is-active a { color: #3A2A63; }
.review-article--warm .toc__item.is-active a::before { color: #C48A2B; }
[data-theme="dark"] .review-article--warm .toc__item.is-active a { color: #E8DCFF; }
[data-theme="dark"] .review-article--warm .toc__item.is-active a::before { color: #E0A94B; }

/* slot-demo play-button ───────────────────── */
.review-article--warm .slot-demo__play-bubble {
    background: #7A5AD0;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.92),
        0 0 0 10px rgba(122, 90, 208, 0.28),
        0 18px 44px rgba(90, 61, 163, 0.55);
    animation: slot-demo-pulse-slot 2.4s ease-in-out infinite;
}
@keyframes slot-demo-pulse-slot {
    0%, 100% {
        box-shadow:
            0 0 0 3px rgba(255, 255, 255, 0.92),
            0 0 0 10px rgba(122, 90, 208, 0.28),
            0 18px 44px rgba(90, 61, 163, 0.55);
    }
    50% {
        box-shadow:
            0 0 0 3px rgba(255, 255, 255, 0.92),
            0 0 0 16px rgba(122, 90, 208, 0.14),
            0 18px 48px rgba(90, 61, 163, 0.65);
    }
}
[data-theme="dark"] .review-article--warm .slot-demo__play-bubble {
    background: #A896E0;
    box-shadow:
        0 0 0 3px rgba(20, 25, 44, 0.82),
        0 0 0 10px rgba(168, 150, 224, 0.25),
        0 18px 44px rgba(168, 150, 224, 0.45);
}

/* ============================================================
   Sticky-card и mobile-cta для slot-review — палитра slot-hero
   (violet + gold + warm mauve). Scoped через .casino-sticky--warm
   и .mobile-cta--warm. Остальные стили наследуются от базового
   .casino-sticky и .mobile-cta.
   ============================================================ */
.casino-sticky--warm {
    border-color: rgba(122, 90, 208, 0.20);
    background: linear-gradient(180deg, #ffffff 0%, #FBF6EE 100%);
    box-shadow:
        0 1px 2px rgba(27, 15, 62, 0.04),
        0 20px 48px -24px rgba(58, 42, 99, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .casino-sticky--warm {
    background: linear-gradient(180deg, #1e1428 0%, #1a1424 100%);
    border-color: rgba(168, 150, 224, 0.18);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 20px 48px -24px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.casino-sticky--warm .casino-sticky__aurora {
    background:
        radial-gradient(260px 160px at 85% 0%, rgba(224, 169, 75, 0.26), transparent 65%),
        radial-gradient(280px 200px at 10% 100%, rgba(122, 90, 208, 0.18), transparent 60%);
}
.casino-sticky--warm .casino-sticky__accent {
    background: linear-gradient(90deg, #7A5AD0 0%, #C48A2B 100%);
}
/* expert score — gold ring-ink, как в hero-radial--slot.
   Базовое правило использует background-clip:text → нужно переопределить gradient. */
.casino-sticky--warm .casino-sticky__score-value {
    background: linear-gradient(135deg, #C48A2B 0%, #6B4A13 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
[data-theme="dark"] .casino-sticky--warm .casino-sticky__score-value {
    background: linear-gradient(135deg, #F4CD7E 0%, #C48A2B 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
.casino-sticky--warm .casino-sticky__score-label { color: #8B6F68; }
[data-theme="dark"] .casino-sticky--warm .casino-sticky__score-label { color: #C8B0A4; }

/* CTA в sticky-card — тот же violet gradient что hero CTA */
.casino-sticky--warm .casino-sticky__cta {
    background: linear-gradient(135deg, #7A5AD0 0%, #2E1A5C 100%);
    box-shadow:
        0 6px 14px -4px rgba(46, 26, 92, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.casino-sticky--warm .casino-sticky__cta:hover {
    box-shadow:
        0 12px 26px -6px rgba(46, 26, 92, 0.60),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
[data-theme="dark"] .casino-sticky--warm .casino-sticky__cta {
    background: linear-gradient(135deg, #A896E0 0%, #3A2A63 100%);
    box-shadow:
        0 6px 14px -4px rgba(58, 42, 99, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Sparkle в max-win факте — gold вместо green */
.casino-sticky--warm .casino-sticky__fact-sparkle { color: #C48A2B; }
[data-theme="dark"] .casino-sticky--warm .casino-sticky__fact-sparkle { color: #E0A94B; }

/* fact-label icons — gold-ink, в тон остальному slot-hero */
.casino-sticky--warm .casino-sticky__fact-label { color: #8B6F68; }
.casino-sticky--warm .casino-sticky__fact-label svg { color: #7A4E0F; }
[data-theme="dark"] .casino-sticky--warm .casino-sticky__fact-label { color: #C8B0A4; }
[data-theme="dark"] .casino-sticky--warm .casino-sticky__fact-label svg { color: #E0A94B; }

/* plain-facts: тот же gradient что у RTP hero, но половина интенсивности —
   без inset highlight и drop-shadow, чтобы не «приподнимались» как RTP. */
.casino-sticky--warm .casino-sticky__fact--plain {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--brand-green) 6%, transparent) 0%,
        color-mix(in srgb, var(--brand-mountain) 3%, transparent) 100%);
}
[data-theme="dark"] .casino-sticky--warm .casino-sticky__fact--plain {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.07) 0%, rgba(59, 130, 246, 0.04) 100%);
}


/* bar-mode (769-1335px): для slot-review показываем label hero-fact
   (в casino он скрыт — там sparkle + bonus value говорят сами за себя,
   в slot нужно "RTP" рядом со значением чтобы цифра была читаема). */
@media (max-width: 1335px) and (min-width: 769px) {
    .casino-sticky--warm .casino-sticky__fact--hero .casino-sticky__fact-label {
        display: inline-flex;
        font-size: 11px;
        margin: 0;
        color: #8B6F68;
    }
    [data-theme="dark"] .casino-sticky--warm .casino-sticky__fact--hero .casino-sticky__fact-label {
        color: #C8B0A4;
    }
}

/* Mobile-CTA (slot) — фон в slot-тонах + CTA deep violet (как hero) */
.mobile-cta--warm .mobile-cta__btn {
    background: linear-gradient(135deg, #7A5AD0 0%, #2E1A5C 100%);
    box-shadow:
        0 4px 12px -3px rgba(46, 26, 92, 0.45),
        0 1px 2px rgba(122, 90, 208, 0.22);
}
.mobile-cta--warm .mobile-cta__btn:hover,
.mobile-cta--warm .mobile-cta__btn:active {
    box-shadow:
        0 6px 16px -3px rgba(46, 26, 92, 0.60),
        0 2px 4px rgba(122, 90, 208, 0.28);
}
[data-theme="dark"] .mobile-cta--warm .mobile-cta__btn {
    background: linear-gradient(135deg, #A896E0 0%, #3A2A63 100%);
    box-shadow:
        0 4px 12px -3px rgba(58, 42, 99, 0.55),
        0 1px 2px rgba(168, 150, 224, 0.26);
}

/* pointer-bubble "Rösta!" + hand — warm gold/taupe вместо blue/indigo */
.hero-review--warm .hero-player__bubble {
    background: linear-gradient(135deg, #FBF1DD 0%, #FBF1DD 65%, #E0A94B 125%);
    border-color: #8B6F68;
    box-shadow: 2px 2px 0 rgba(107, 85, 80, 0.26);
    color: #3A2A63;
}
.hero-review--warm .hero-player__bubble::after { border-left-color: #8B6F68; }
.hero-review--warm .hero-player__bubble::before { border-left-color: #FBF1DD; }
.hero-review--warm .hero-player__hand { filter: drop-shadow(0 2px 3px rgba(107, 85, 80, 0.30)); }
.hero-review--warm .hero-player__hand stop:nth-child(1) { stop-color: #FFF4DE; }
.hero-review--warm .hero-player__hand stop:nth-child(2) { stop-color: #E9CFA1; }
.hero-review--warm .hero-player__hand stop:nth-child(3) { stop-color: #C48A2B; }
.hero-review--warm .hero-player__hand path { stroke: #6B4A13; stroke-opacity: 0.65; }

/* expert-rating: 8.9 ring + spark bars + "Stark rekommendation" — gold акцент */

/* Ring fill + значение — gold */
.hero-review--warm .hero-radial__fill { stroke: #C48A2B; }
.hero-review--warm .hero-radial__value { color: #6B4A13; }
[data-theme="dark"] .hero-review--warm .hero-radial__fill { stroke: #E0A94B; }
[data-theme="dark"] .hero-review--warm .hero-radial__value { color: #F4CD7E; }

/* Fördelning bars — gold градиент */
.hero-review--warm .hero-spark__bar {
    background: linear-gradient(180deg, #E0A94B 0%, #C48A2B 100%);
    box-shadow: 0 1px 3px -1px rgba(196, 138, 43, 0.45);
}
[data-theme="dark"] .hero-review--warm .hero-spark__bar {
    background: linear-gradient(180deg, #F4CD7E 0%, #E0A94B 100%);
    box-shadow: 0 1px 3px -1px rgba(224, 169, 75, 0.40);
}

/* Verdict-badge "Stark rekommendation" — gold wash, как POPULÄR */
.hero-review--warm .hero-rating-summary__verdict-badge {
    background: linear-gradient(135deg, #FBF1DD 0%, #F5E3BF 100%);
    border-color: rgba(196, 138, 43, 0.45);
    color: #6B4A13;
}
.hero-review--warm .hero-rating-summary__verdict-badge svg { color: #C48A2B; }
[data-theme="dark"] .hero-review--warm .hero-rating-summary__verdict-badge {
    background: linear-gradient(135deg, rgba(196, 138, 43, 0.22) 0%, rgba(107, 74, 19, 0.25) 100%);
    border-color: rgba(224, 169, 75, 0.45);
    color: #E0A94B;
}
[data-theme="dark"] .hero-review--warm .hero-rating-summary__verdict-badge svg { color: #E0A94B; }

/* CTA slot-review: свой индивидуальный градиент в тон палитры.
   Casino-review остаётся на базовом emerald → navy (как sticky-card).
   Slot-review идёт в deep-violet, рифмуясь с h1 градиентом и ring-палитрой. */
.hero-review--warm .hero-review__cta {
    background: linear-gradient(135deg, #7A5AD0 0%, #2E1A5C 100%);
    box-shadow:
        0 4px 14px -4px rgba(46, 26, 92, 0.48),
        0 1px 2px rgba(122, 90, 208, 0.24);
}
.hero-review--warm .hero-review__cta:hover {
    box-shadow:
        0 8px 22px -4px rgba(46, 26, 92, 0.60),
        0 3px 8px rgba(122, 90, 208, 0.30);
}
[data-theme="dark"] .hero-review--warm .hero-review__cta {
    background: linear-gradient(135deg, #A896E0 0%, #3A2A63 100%);
    box-shadow:
        0 4px 14px -4px rgba(58, 42, 99, 0.55),
        0 1px 2px rgba(168, 150, 224, 0.28);
}
[data-theme="dark"] .hero-review--warm .hero-review__cta:hover {
    box-shadow:
        0 8px 24px -4px rgba(58, 42, 99, 0.70),
        0 3px 8px rgba(168, 150, 224, 0.35);
}

/* hero-review__skirt (нижние горы, mobile). NB: skirt — SIBLING, не descendant
   от .hero-review section, поэтому нужен "+" selector. */
/* mobile: rating cards в slot-review — на тёплом фоне hero, .62 alpha
   просвечивает и карточки темнеют. Поднимаем alpha чтобы выглядело
   так же светло, как на desktop (#fff). */
@media (max-width: 768px) {
    .hero-review--warm .hero-review__rating {
        background: rgba(255, 255, 255, 0.92);
    }
    [data-theme="dark"] .hero-review--warm .hero-review__rating {
        background: rgba(22, 27, 37, 0.88);
    }
}

@media (max-width: 768px) {
    .hero-review--warm + .hero-review__skirt {
        background-color: #d2c4bf;
        background-image: linear-gradient(180deg, #d1c2bc 0%, rgba(201, 181, 173, 0.75) 45%, rgba(201, 181, 173, 0.35) 80%, transparent 100%);
    }

    [data-theme="dark"] .hero-review--warm + .hero-review__skirt {
        background-color: #3a2e2a;
        background-image: linear-gradient(180deg,
            #3a2e2a 0%,
            rgba(58, 46, 42, 0.75) 45%,
            rgba(58, 46, 42, 0.35) 80%,
            transparent 100%);
    }
}

/* =====================================================
   LISTING PAGES (page-model для /best-casino/, /slots/, /bonus/)
   ===================================================== */

/* --- Listing hero --- */
.listing-hero {
    position: relative;
    max-width: 800px;
    margin: 0 auto 28px;
    padding: 44px 48px 38px;
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--brand-mountain) 4%, var(--bg-page)) 0%,
        color-mix(in srgb, var(--brand-green) 3%, var(--bg-page)) 100%);
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 8%, var(--border));
}

.listing-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(60% 80% at 85% 0%, color-mix(in srgb, #fed7aa 18%, transparent) 0%, transparent 70%),
        radial-gradient(40% 60% at 5% 100%, color-mix(in srgb, #7dd3fc 14%, transparent) 0%, transparent 70%);
    pointer-events: none;
}

[data-theme="dark"] .listing-hero {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--brand-mountain) 8%, var(--bg-page)) 0%,
        color-mix(in srgb, #0e7490 6%, var(--bg-page)) 100%);
}

[data-theme="dark"] .listing-hero__bg {
    background:
        radial-gradient(60% 80% at 85% 0%, color-mix(in srgb, #fbbf24 8%, transparent) 0%, transparent 70%),
        radial-gradient(40% 60% at 5% 100%, color-mix(in srgb, #0e7490 18%, transparent) 0%, transparent 70%);
}

.listing-hero__inner {
    position: relative;
}

.listing-hero__kicker-row {
    margin-bottom: 14px;
}

.listing-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-green) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-green) 28%, var(--border));
    color: var(--brand-green);
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.listing-hero__kicker-icon {
    flex-shrink: 0;
    color: var(--brand-green);
}

/* Mountain silhouette graphic at hero bottom */
.listing-hero__mountains {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: -1;
    color: var(--brand-mountain);
    pointer-events: none;
}

[data-theme="dark"] .listing-hero__mountains {
    color: #94c5ff;
}

.listing-hero__title {
    margin: 0 0 16px;
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.listing-hero__lead {
    margin: 0 0 24px;
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 640px;
}

/* Hero meta: byline + chips (rating/views/comments/dates) — единая компактная полоса */
.listing-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 16px;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 12%, var(--border));
    border-radius: 14px;
    background: color-mix(in srgb, var(--brand-mountain) 3%, var(--bg-card));
}

.listing-hero__byline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.listing-hero__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 5px;
    margin-left: auto;
}

.listing-hero__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 10%, var(--border));
    font-size: 12.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.listing-hero__chip-icon {
    flex-shrink: 0;
    color: var(--brand-mountain);
    opacity: 0.55;
}

[data-theme="dark"] .listing-hero__chip-icon {
    color: #94c5ff;
    opacity: 0.7;
}

.listing-hero__chip-value {
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1;
}

/* Звёздный рейтинг в чипе — gradient mask поверх ★★★★★ */
.listing-hero__chip-stars {
    position: relative;
    display: inline-block;
    line-height: 1;
    font-size: 13px;
    letter-spacing: 1px;
}

.listing-hero__chip-stars-bg {
    color: color-mix(in srgb, var(--brand-mountain) 18%, var(--border));
}

.listing-hero__chip-stars-fg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    width: var(--rating-pct, 0%);
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-mountain) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    pointer-events: none;
    white-space: nowrap;
}

.listing-hero__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--brand-mountain) 18%, var(--bg-card));
    flex-shrink: 0;
}

.listing-hero__avatar--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-mountain) 100%);
    color: white;
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 12px;
}

.listing-hero__byline-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.3;
}

.listing-hero__byline-name {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.listing-hero__byline-name a {
    color: var(--brand-mountain);
    text-decoration: none;
    font-weight: 600;
}

.listing-hero__byline-name a:hover {
    text-decoration: underline;
}

[data-theme="dark"] .listing-hero__byline-name a {
    color: #94c5ff;
}

.listing-hero__byline-role {
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
}


@media (max-width: 768px) {
    .listing-hero {
        margin: calc(-1 * var(--gap, 24px)) calc(-1 * var(--container-padding, 24px)) 28px;
        max-width: none;
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: 32px 20px 28px;
    }
    .listing-hero__meta {
        flex-direction: column;
        align-items: stretch;
        padding: 10px 12px;
        gap: 10px;
        overflow: hidden;
    }
    .listing-hero__byline {
        flex: 0 0 auto;
        min-width: 0;
    }

    /* Chips на мобильном — горизонтальная полоса со скроллом
       и Netflix-style fade в конце как сигнал «есть ещё». */
    .listing-hero__chips {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 2px 36px 2px 0;
        gap: 6px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 36px), transparent);
        mask-image: linear-gradient(to right, black calc(100% - 36px), transparent);
    }
    .listing-hero__chips::-webkit-scrollbar { display: none; }
    .listing-hero__chip {
        flex: 0 0 auto;
    }
}

/* --- Listing layout (паттерн скопирован с .review-layout) --- */
.listing-layout {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.listing-layout__main {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
}

/* listing-article — chistый wrapper без подложки (как .review-article).
   Контент-блоки получают свои фоны через theme.css правила
   (.page-content-block, .toc, .gamblers-section и т.д.). */
.listing-article {
    max-width: 800px;
    margin: 0 auto 28px;
}
.listing-article .page-content-block,
.listing-article .page-generic-block,
.listing-article .page-intro-block,
.listing-article .page-verdict-block,
.listing-article .page-pros-cons,
.listing-article .page-rating-block,
.listing-article .page-author-bio-block,
.listing-article .page-info-table,
.listing-article .payment-methods,
.listing-article .payments,
.listing-article .toc,
.listing-article .gamblers-section,
.listing-article .gamblers-rating-list {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Interactions (rating + comments) на listing pages — расширены до ширины hero/article (800).
   На review pages базовое правило .reviews/.review-aux 720 остаётся. */
.listing-layout .reviews,
.listing-layout .review-aux {
    max-width: 800px;
}



/* Listing pages — карточки rating-list edge-to-edge с listing-article (без container-padding wrapper'а).
   На главной/sidebar/etc базовый padding `0 var(--container-padding)` в .gamblers-picks/.gamblers-rating-cards остаётся. */
.listing-article .gamblers-picks,
.listing-article .gamblers-rating-cards {
    padding: 0;
}

/* Section header/footer на listing pages — выровнять заголовок/lead/footer-ссылку
   с edge-to-edge карточками ниже. Базовый container-padding нужен только в layouts
   где section шире контейнера (главная/широкие сетки). */
.listing-article .gamblers-section__header { padding: 0; }
.listing-article .gamblers-section__footer { padding-left: 0; padding-right: 0; }

@media (max-width: 768px) {
    /* Edge-to-edge mobile — listing-layout уже даёт 14px от viewport, картам своё внутреннее padding */
    .listing-article .gamblers-pick {
        grid-template-columns: 56px 1fr;
        gap: 14px;
        padding: 14px;
        border-radius: 12px;
    }
    .listing-article .gamblers-pick__logo { width: 56px; height: 56px; }
    .listing-article .gamblers-pick__right {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    /* Edge-to-edge с уменьшенным mobile-padding 14px (вместо main 24px) */
    .listing-layout {
        padding: 0 14px;
        margin-left: calc(-1 * var(--container-padding));
        margin-right: calc(-1 * var(--container-padding));
    }
    .listing-article {
        max-width: 100%;
        margin: 0 0 24px;
    }
    .listing-article .page-content-block,
    .page-content-block {
        max-width: 100%;
    }
    .interactions {
        max-width: 100%;
    }
}

/* --- Bonus list block (chips + brand-gradient CTA + ellipsis offer) --- */
.gamblers-rating-list { background: transparent; border: none; padding: 0; margin: 32px 0; }

.gamblers-rating-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 var(--container-padding);
}

.gamblers-rating-card {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 18px 22px 18px 22px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.gamblers-rating-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.gamblers-rating-card.is-featured {
    background: linear-gradient(135deg,
        var(--bg-card) 0%,
        color-mix(in srgb, var(--brand-green) 5%, var(--bg-card)) 100%);
}

/* Logo wrapper с overlay для expert score */
.gamblers-rating-card__logo-wrap {
    position: relative;
    display: block;
    width: 64px; height: 64px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
}
.gamblers-rating-card__logo {
    display: block;
    width: 64px; height: 64px;
    border-radius: var(--radius-sm);
    background-color: var(--bg-card-alt);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.gamblers-rating-card__logo--empty { background: var(--bg-card-alt); }

/* Expert-rating chip — внутри лого, правый-нижний угол (compact) */
.gamblers-rating-card__logo-score {
    position: absolute;
    bottom: 2px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 1px 4px 1px 3px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, var(--brand-green) 0%, color-mix(in srgb, var(--brand-green) 75%, var(--brand-mountain)) 100%);
    color: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    border: 1px solid #fff;
    pointer-events: none;
    white-space: nowrap;
}
.gamblers-rating-card__logo-score svg { width: 8px; height: 8px; }

.gamblers-rating-card__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Chips row: brand chip (выделенный) + meta chips */
.gamblers-rating-card__chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

/* Brand chip — non-clickable, чуть ярче нейтральных meta-чипов (tonal accent), но без gradient */
.gamblers-rating-card__brand-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 4px;
    background: color-mix(in srgb, var(--brand-green) 10%, var(--bg-card));
    color: var(--brand-mountain);
    /* h3 reset: убираем browser-default margin (h3 имеет ~1em top/bottom). Класс используется как <h3> ради a11y/SEO heading-tree (W3C "article lacks heading"). */
    margin: 0;
    line-height: 1.2;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--brand-green) 28%, var(--border));
    max-width: 100%;
    min-width: 0;
}
.gamblers-rating-card__brand-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 22%, var(--bg-card));
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    letter-spacing: 0;
}
/* Podium colors for top-3 — hot red → orange → amber */
.gamblers-rating-card__brand-num--rank-1 {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
    color: #fff;
    box-shadow: 0 1px 3px -1px rgba(185, 28, 28, 0.55);
}
.gamblers-rating-card__brand-num--rank-2 {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
    color: #fff;
    box-shadow: 0 1px 3px -1px rgba(234, 88, 12, 0.5);
}
.gamblers-rating-card__brand-num--rank-3 {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: #fff;
    box-shadow: 0 1px 3px -1px rgba(245, 158, 11, 0.45);
}
.gamblers-rating-card__brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.gamblers-rating-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    background: color-mix(in srgb, var(--bg-card-alt) 70%, transparent);
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    font-variant-numeric: tabular-nums;
    min-width: 0;
}
.gamblers-rating-card__chip svg { flex-shrink: 0; opacity: 0.7; }
.gamblers-rating-card__chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.gamblers-rating-card__chip--license { max-width: 220px; }

/* Welcome bonus offer — single line с ellipsis + gift icon */
.gamblers-rating-card__offer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
    letter-spacing: -0.005em;
    min-width: 0;
}
.gamblers-rating-card__offer-icon {
    flex-shrink: 0;
    color: var(--brand-green);
    opacity: 0.85;
}
.gamblers-rating-card__offer-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}
.gamblers-rating-card__offer-empty { opacity: 0.5; font-weight: 500; }

.gamblers-rating-card__right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    flex-shrink: 0;
    min-width: 140px;
}

.gamblers-rating-card__cta {
    --card-cta-color: #047857;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 22px;
    background: transparent;
    color: var(--card-cta-color);
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1.5px solid var(--card-cta-color);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
[data-theme="dark"] .gamblers-rating-card__cta { --card-cta-color: #10b981; }
.gamblers-rating-card__cta:hover {
    background: color-mix(in srgb, var(--card-cta-color) 9%, transparent);
    color: var(--card-cta-color);
}

.gamblers-rating-card__details {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 2px 4px;
    transition: color 0.15s;
}
.gamblers-rating-card__details:hover { color: var(--brand-mountain); text-decoration: underline; }
.gamblers-rating-card__details-icon { display: none; }

/* Mobile-only overlays внутри лого — на desktop скрыты, активируются в @media (max-width: 768px) */
.gamblers-rating-card__logo-rank,
.gamblers-rating-card__logo-visitor,
.gamblers-rating-card__logo-mindep { display: none; }

/* Wrapper'ы для mobile-strips: на desktop оба = display:contents (transparent),
   chips внутри сохраняют свои desktop-positioning. На mobile — strip активируется
   как absolute flex-container (см. @media). */
.gamblers-rating-card__logo-overlays,
.gamblers-rating-card__logo-topstrip { display: contents; }

@media (max-width: 768px) {
    /* ============================================================
       MOBILE CARD — REDESIGN FROM SCRATCH (2026-04-28)
       Premium vertical-stack layout: floating-badges (rank + score),
       большой centered logo, casino-name заголовком, meta-chips,
       bonus offer, primary filled CTA + secondary text-link.
       ============================================================ */

    .listing-article .gamblers-rating-cards { gap: 14px; }

    /* CARD: vertical centered stack, padding обычный (нет больше floating-углов). */
    .gamblers-rating-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
        padding: 20px;
        border-radius: 16px;
        position: relative;
        overflow: visible;
    }
    .gamblers-rating-card.is-featured {
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--brand-green) 6%, var(--bg-card)) 0%,
            var(--bg-card) 60%);
    }

    /* LOGO: 270×270 max, square via aspect-ratio (резиновый на узких viewport).
       AA-leak masked through 1px border на .logo (того же цвета что wrap-bg).
       isolation:isolate — стабильный stacking context для children. */
    .gamblers-rating-card__logo-wrap {
        position: relative;
        width: 100%;
        max-width: 270px;
        height: auto;
        aspect-ratio: 1 / 1;
        background: var(--bg-card-alt);
        border: 0;
        border-radius: 20px;
        overflow: hidden;
        flex-shrink: 0;
        isolation: isolate;
    }
    /* Logo как DIV с background-image (через inline-style в PHP).
       inset: 32px 0 24px 0 — лого живёт ТОЧНО между top-strip (32) и bottom-strip (24),
       не пересекается с border-radius:20 wrap'а в углах, поэтому утечки в скруглённые
       углы нет в принципе. background-size: cover — заливка всегда full-fill (без серых
       полей по бокам/сверху/снизу) независимо от aspect-ratio самой картинки; центрирование
       сохраняет фокус бренд-марки. width:auto/height:auto обязательны, чтобы перебить
       desktop-rule width:64px/height:64px (для absolute-элементов explicit width побеждает
       inset). */
    .gamblers-rating-card__logo {
        position: absolute;
        inset: 32px 0 24px 0;
        width: auto;
        height: auto;
        background-color: transparent;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        border: 0;
        border-radius: 0;
    }

    /* TOP STRIP — режет верхний край лого нейтральной светлой подложкой.
       Симметрично min-deposit strip'у внизу.
       НЕТ собственного border-radius — parent'а overflow:hidden + border-radius — единственный clip,
       без double-AA mismatch'а. */
    .gamblers-rating-card__logo-topstrip {
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 32px;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 0 10px;
        background: linear-gradient(180deg,
            var(--logo-strip-bg-top) 0%,
            var(--logo-strip-bg) 100%);
        border-bottom: 1px solid color-mix(in srgb, var(--brand-green) 30%, transparent);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.5),
            inset 0 -2px 4px rgba(15, 23, 42, 0.04);
        z-index: 2;
    }
    [data-theme="dark"] .gamblers-rating-card__logo-topstrip {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            inset 0 -2px 4px rgba(0, 0, 0, 0.25);
    }

    /* RANK badge — round circle 22×22, более нежные podium-цвета. */
    .gamblers-rating-card__logo-rank {
        display: inline-flex;
        position: static;
        top: auto; left: auto;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        padding: 0;
        font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        background: color-mix(in srgb, var(--text-muted) 35%, var(--bg-card));
        color: var(--text-primary);
        border-radius: 50%;
        flex-shrink: 0;
    }
    /* Подиум-цвета для top-3 — softer pastel-ish gradients (не «кричащие») */
    .gamblers-rating-card__logo-rank--rank-1 {
        background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
        color: #fff;
    }
    .gamblers-rating-card__logo-rank--rank-2 {
        background: linear-gradient(135deg, #f97316 0%, #fdba74 100%);
        color: #fff;
    }
    .gamblers-rating-card__logo-rank--rank-3 {
        background: linear-gradient(135deg, #fbbf24 0%, #fde68a 100%);
        color: #fff;
    }

    /* RATINGS wrapper — flex-row контейнер внутри topstrip. position: static. */
    .gamblers-rating-card__logo-overlays {
        display: flex;
        position: static;
        top: auto; right: auto;
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    /* CHIPS внутри topstrip — flat (без pill-bg). Strip-bg даёт contrast,
       chips это просто colored text + icon. */
    .gamblers-rating-card__logo-score,
    .gamblers-rating-card__logo-visitor {
        position: static;
        top: auto; right: auto; bottom: auto; left: auto;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 0;
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        border-radius: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 0;
        box-shadow: none;
        white-space: nowrap;
    }

    /* EXPERT — brand-green accent. Light strip-bg даёт контраст. */
    .gamblers-rating-card__logo-score {
        color: var(--brand-green);
    }
    .gamblers-rating-card__logo-score svg {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
    }

    /* VISITOR — brand-mountain (dark blue) accent. */
    .gamblers-rating-card__logo-visitor {
        color: var(--brand-mountain);
    }
    .gamblers-rating-card__logo-visitor svg {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
    }

    /* MIN-DEPOSIT bottom strip — режет нижний край лого светлой подложкой.
       Без собственного border-radius — parent'а overflow:hidden clip'ает по единственной геометрии. */
    .gamblers-rating-card__logo-mindep {
        display: flex;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 24px;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0 14px;
        background: linear-gradient(180deg,
            var(--logo-strip-bg) 0%,
            var(--logo-strip-bg-top) 100%);
        border-top: 1px solid color-mix(in srgb, var(--brand-green) 30%, transparent);
        box-shadow:
            inset 0 2px 4px rgba(15, 23, 42, 0.04),
            inset 0 -1px 0 rgba(255, 255, 255, 0.5);
        color: var(--text-primary);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: -0.003em;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        z-index: 2;
    }
    [data-theme="dark"] .gamblers-rating-card__logo-mindep {
        box-shadow:
            inset 0 2px 4px rgba(0, 0, 0, 0.25),
            inset 0 -1px 0 rgba(255, 255, 255, 0.06);
    }
    .gamblers-rating-card__logo-mindep-label {
        font-weight: 500;
        color: var(--text-muted);
    }
    .gamblers-rating-card__logo-mindep-value {
        font-weight: 700;
    }
    .gamblers-rating-card__logo-mindep svg {
        flex-shrink: 0;
        opacity: 0.75;
    }

    /* Body's min-deposit chip скрываем на mobile — данные переехали в logo strip.
       License-chip (.chip--license) остаётся видимым в body chips row. */
    .gamblers-rating-card__chip:not(.gamblers-rating-card__chip--license) {
        display: none;
    }

    /* BODY: full-width внутри card, ВСЕ children растягиваются на полную ширину
       (align-items: stretch — критично для chips чтобы license-ellipsis сработал).
       Содержимое центрируется внутри каждого child через justify-content / text-align. */
    .gamblers-rating-card__body {
        width: 100%;
        align-items: stretch;
        gap: 12px;
        text-align: center;
    }

    /* CHIPS row — flex-wrap; brand-name вылетает на свою строку, meta-chips wrap'ятся.
       Убираем netflix-scroll и fade-mask с предыдущей версии. */
    .gamblers-rating-card__chips {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding-right: 0;
        overflow: visible;
        mask-image: none;
        -webkit-mask-image: none;
    }

    /* BRAND CHIP → display: contents растворяет обёртку, brand-num и brand-name
       становятся прямыми flex-children .chips. Тогда brand-num уйдёт в absolute,
       а brand-name — в полноширинный заголовок. */
    .gamblers-rating-card__brand-chip {
        display: contents;
    }

    /* RANK BADGE в body.chips скрываем — rank-overlay теперь внутри лого
       (.gamblers-rating-card__logo-rank). */
    .gamblers-rating-card__brand-num { display: none; }

    /* CASINO NAME → большой H3-style заголовок, занимает всю строку chips. */
    .gamblers-rating-card__brand-name {
        flex: 1 0 100%;
        text-align: center;
        font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
        font-size: 23px;
        font-weight: 700;
        text-transform: none;
        letter-spacing: -0.005em;
        color: var(--text-primary);
        white-space: normal;
        overflow: visible;
        line-height: 1.2;
        order: -1;
        margin: 0;
    }

    /* META CHIPS — небольшие пилюли, side-by-side под name.
       Длинные значения (license) обрезаются ellipsis'ом если не влезают в ширину row. */
    .gamblers-rating-card__chip {
        flex-shrink: 1;
        min-width: 0;
        max-width: 100%;
        font-size: 12px;
        padding: 4px 11px;
        gap: 5px;
    }
    .gamblers-rating-card__chip svg { width: 12px; height: 12px; flex-shrink: 0; }
    .gamblers-rating-card__chip span {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .gamblers-rating-card__chip--license { max-width: 100%; }

    /* BONUS OFFER — bigger, centered, can wrap до 2 lines. */
    .gamblers-rating-card__offer {
        font-size: 16px;
        line-height: 1.35;
        justify-content: center;
        gap: 10px;
        flex-wrap: nowrap;
        text-align: left;
        padding: 0 4px;
    }
    .gamblers-rating-card__offer-icon { width: 20px; height: 20px; }
    .gamblers-rating-card__offer-text {
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        flex: 0 1 auto;
        min-width: 0;
    }

    /* RIGHT (actions wrapper) — full-width column, CTA + text-link stack. */
    .gamblers-rating-card__right {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 4px;
    }

    /* CTA → BIG primary filled-green button. Focal point of card. */
    .gamblers-rating-card__cta {
        padding: 14px 22px;
        background: var(--card-cta-color);
        color: #fff;
        border: 0;
        font-size: 13px;
        letter-spacing: 0.08em;
        border-radius: 10px;
        box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--card-cta-color) 60%, transparent);
        white-space: normal;
        line-height: 1.2;
    }
    .gamblers-rating-card__cta:hover {
        background: color-mix(in srgb, var(--card-cta-color) 88%, #000);
        color: #fff;
        transform: none;
        box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--card-cta-color) 70%, transparent);
    }

    /* DETAILS → subtle text-link под CTA, не кнопка. */
    .gamblers-rating-card__details {
        background: transparent;
        border: 0;
        padding: 4px 0;
        color: var(--text-muted);
        font-family: var(--font-body), system-ui, sans-serif;
        font-size: 13px;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-color: color-mix(in srgb, var(--text-muted) 40%, transparent);
        align-self: center;
    }
    .gamblers-rating-card__details:hover {
        color: var(--text-secondary);
        background: transparent;
        border-color: transparent;
        text-decoration-color: var(--text-secondary);
    }
    .gamblers-rating-card__details-text { display: inline; }
    .gamblers-rating-card__details-icon { display: none; }

    /* ----- BONUS modifier (на /bonus/): compact card — small 56×56 logo + (name + license)
       сверху, full-width offer block в середине, CTA stack снизу. Полностью изолирован от
       casino-rating-list (на /best-casino/) — все правила scoped через `--bonus`,
       /best-casino/ не затронут. Активирует grid layout, перекрывая base mobile flex-column. ----- */
    .gamblers-rating-card--bonus {
        display: grid;
        grid-template-columns: 56px 1fr;
        grid-template-areas:
            "logo  chips"
            "offer offer"
            "right right";
        row-gap: 12px;
        column-gap: 14px;
        align-items: start;
        text-align: left;
        padding: 14px 16px;
    }

    /* LOGO WRAP — компактный 56×56 квадрат БЕЗ aspect-ratio/full-width override
       casino-list mobile-rule (270×270 + aspect-ratio:1/1). На бонус-странице рейтинг
       не показываем, поэтому top-strip и mindep-strip не рендерятся вовсе (HTML без них). */
    .gamblers-rating-card--bonus .gamblers-rating-card__logo-wrap {
        grid-area: logo;
        align-self: center;
        display: block;
        width: 56px;
        height: 56px;
        max-width: none;
        aspect-ratio: auto;
        border-radius: 12px;
        overflow: hidden;
        background: var(--bg-card-alt);
        position: relative;
        flex-shrink: 0;
        isolation: isolate;
    }
    /* IMG лого — full-fill в 56×56 wrap'е. Сбрасываем casino-list mobile-rule
       (position:absolute + inset:32 0 24 0 + width:auto + background-size:cover для div'а). */
    .gamblers-rating-card--bonus .gamblers-rating-card__logo {
        position: static;
        inset: auto;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: 0;
        border-radius: 0;
        background: none;
    }
    /* Score chip "★ N,N" — на странице бонусов рейтинговый overlay неуместен. */
    .gamblers-rating-card--bonus .gamblers-rating-card__logo-score {
        display: none;
    }

    /* Body — прозрачный контейнер, дети flow в parent grid. */
    .gamblers-rating-card--bonus .gamblers-rating-card__body { display: contents; }
    .gamblers-rating-card--bonus .gamblers-rating-card__offer { grid-area: offer; }
    .gamblers-rating-card--bonus .gamblers-rating-card__right { grid-area: right; }

    /* CHIPS wrapper — inner grid: row 1 = name, row 2 = license. min-deposit
       глобально hidden mobile-правилом, отдельный column не нужен. */
    .gamblers-rating-card--bonus .gamblers-rating-card__chips {
        grid-area: chips;
        align-self: center;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        grid-template-areas:
            "name"
            "license";
        gap: 4px;
        justify-content: stretch;
        align-items: start;
        overflow: visible;
        mask-image: none;
        -webkit-mask-image: none;
        padding-right: 0;
        min-width: 0;
    }
    /* BRAND CHIP — оверрайдим mobile-rule display:contents (растворяющий обёртку
       в casino-list для H3-style имени) И desktop pill-стили (bg, border, padding,
       uppercase). На bonus просто плоский text-контейнер. */
    .gamblers-rating-card--bonus .gamblers-rating-card__brand-chip {
        grid-area: name;
        justify-self: stretch;
        display: inline-flex;
        align-items: center;
        background: transparent;
        border: 0;
        padding: 0;
        text-transform: none;
        letter-spacing: 0;
        color: var(--text-primary);
        max-width: 100%;
        min-width: 0;
    }
    /* RANK number — на странице бонусов не релевантен. */
    .gamblers-rating-card--bonus .gamblers-rating-card__brand-num { display: none; }
    /* CASINO NAME — компактный 14px, single-line с ellipsis. Перебиваем mobile 23px H3
       (flex 1 0 100% / order:-1 / centered) от casino-list. */
    .gamblers-rating-card--bonus .gamblers-rating-card__brand-name {
        flex: 0 1 auto;
        text-align: left;
        font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
        font-size: 14px;
        font-weight: 700;
        text-transform: none;
        letter-spacing: -0.005em;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.25;
        order: 0;
        margin: 0;
        max-width: 100%;
        min-width: 0;
    }
    /* MIN-deposit chip скрыт явно (mobile parent rule уже его прячет, дублируем для безопасности). */
    .gamblers-rating-card--bonus .gamblers-rating-card__chip:not(.gamblers-rating-card__chip--license) {
        display: none;
    }
    /* LICENSE chip — single-line с soft fade-mask справа при overflow.
       Horizontal scroll (без visible scrollbar) для длинных названий. */
    .gamblers-rating-card--bonus .gamblers-rating-card__chip--license {
        grid-area: license;
        justify-self: stretch;
        flex-basis: auto;
        max-width: 100%;
        min-width: 0;
        font-size: 11.5px;
        padding: 3px 10px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
    }
    .gamblers-rating-card--bonus .gamblers-rating-card__chip--license::-webkit-scrollbar { display: none; }
    /* Override mobile chip span ellipsis — на bonus license нужен visible overflow + nowrap,
       чтобы scroll'ил parent, fade-mask маскировал обрезание. */
    .gamblers-rating-card--bonus .gamblers-rating-card__chip--license span {
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }

    /* OFFER — full-width attractive bonus block с увеличенным шрифтом. */
    .gamblers-rating-card--bonus .gamblers-rating-card__offer {
        align-items: flex-start;
        gap: 10px;
        margin: 0;
        padding: 14px 16px;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.35;
        color: var(--text-primary);
        letter-spacing: -0.005em;
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--brand-green) 8%, var(--bg-card)) 0%,
            color-mix(in srgb, var(--brand-mountain) 5%, var(--bg-card)) 100%);
        border: 1px solid color-mix(in srgb, var(--brand-green) 25%, var(--border));
        border-left: 3px solid var(--card-cta-color, #047857);
        border-radius: 10px;
        position: relative;
        overflow: hidden;
    }
    /* Decorative subtle radial accent в правом углу */
    .gamblers-rating-card--bonus .gamblers-rating-card__offer::after {
        content: "";
        position: absolute;
        top: -20px; right: -20px;
        width: 70px; height: 70px;
        background: radial-gradient(circle, color-mix(in srgb, var(--brand-green) 18%, transparent) 0%, transparent 70%);
        pointer-events: none;
    }
    .gamblers-rating-card--bonus .gamblers-rating-card__offer-icon {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        margin-top: 1px;
        color: var(--card-cta-color, #047857);
        opacity: 1;
        position: relative;
        z-index: 1;
    }
    /* Offer text — все строки видны, никакого clamp/ellipsis. Перебиваем mobile
       casino-list rule (display:-webkit-box + -webkit-line-clamp:2 + overflow:hidden). */
    .gamblers-rating-card--bonus .gamblers-rating-card__offer-text {
        display: block;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        flex: 1 1 auto;
        position: relative;
        z-index: 1;
    }
}

/* =====================================================
   HOME HERO — premium hero для главной страницы
   ===================================================== */

.home-hero {
    position: relative;
    margin: 0 0 36px;
    padding: 56px 64px 48px;
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 6px 18px -6px rgba(30, 64, 175, 0.10),
        0 28px 56px -24px rgba(30, 64, 175, 0.18);
}
[data-theme="dark"] .home-hero {
    border-color: rgba(148, 163, 184, 0.10);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 28px 56px -24px rgba(0, 0, 0, 0.55);
}

/* Background — same painting как .hero-review (radial-glows + bg-hero) */
.home-hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 360px at 88% -10%, rgba(254, 215, 170, 0.45), transparent 55%),
        radial-gradient(700px 280px at 20% -5%, rgba(255, 255, 255, 0.75), transparent 60%),
        linear-gradient(180deg, transparent 45%, rgba(255, 255, 255, 0.35) 55%, transparent 65%),
        radial-gradient(1400px 560px at 15% 10%, rgba(125, 211, 252, 0.28), transparent 55%),
        radial-gradient(800px 320px at 55% 108%, rgba(191, 219, 254, 0.32), transparent 60%),
        var(--bg-hero);
    z-index: -1;
}
[data-theme="dark"] .home-hero__bg {
    background:
        radial-gradient(900px 360px at 88% -10%, rgba(251, 191, 36, 0.10), transparent 55%),
        radial-gradient(700px 280px at 20% -5%, rgba(148, 197, 255, 0.08), transparent 60%),
        linear-gradient(180deg, transparent 45%, rgba(148, 197, 255, 0.05) 55%, transparent 65%),
        radial-gradient(1400px 560px at 15% 10%, rgba(14, 116, 144, 0.35), transparent 55%),
        radial-gradient(800px 320px at 55% 108%, rgba(29, 78, 216, 0.24), transparent 60%),
        var(--bg-hero);
}

/* Mountain layer 1 — light blue */
.home-hero::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 55%;
    background-color: rgba(30, 64, 175, 0.09);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'><defs><linearGradient id='hg' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='0'/><stop offset='.55' stop-color='%23fff' stop-opacity='.55'/><stop offset='1' stop-color='%23fff' stop-opacity='1'/></linearGradient></defs><path d='M0,300 L0,90 L80,40 L170,70 L260,20 L360,75 L460,35 L560,78 L660,25 L770,68 L880,38 L990,72 L1100,30 L1200,60 L1200,300 Z' fill='url(%23hg)'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'><defs><linearGradient id='hg' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='0'/><stop offset='.55' stop-color='%23fff' stop-opacity='.55'/><stop offset='1' stop-color='%23fff' stop-opacity='1'/></linearGradient></defs><path d='M0,300 L0,90 L80,40 L170,70 L260,20 L360,75 L460,35 L560,78 L660,25 L770,68 L880,38 L990,72 L1100,30 L1200,60 L1200,300 Z' fill='url(%23hg)'/></svg>");
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    pointer-events: none;
    z-index: 0;
}

/* Mountain layer 2 — deeper navy */
.home-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 40%;
    background-color: rgba(30, 58, 138, 0.15);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'><defs><linearGradient id='hg2' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='0'/><stop offset='.4' stop-color='%23fff' stop-opacity='.5'/><stop offset='1' stop-color='%23fff' stop-opacity='1'/></linearGradient></defs><path d='M0,200 L0,110 L90,50 L170,100 L260,30 L360,90 L460,45 L560,95 L660,35 L770,80 L880,55 L990,85 L1100,40 L1200,70 L1200,200 Z' fill='url(%23hg2)'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'><defs><linearGradient id='hg2' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='0'/><stop offset='.4' stop-color='%23fff' stop-opacity='.5'/><stop offset='1' stop-color='%23fff' stop-opacity='1'/></linearGradient></defs><path d='M0,200 L0,110 L90,50 L170,100 L260,30 L360,90 L460,45 L560,95 L660,35 L770,80 L880,55 L990,85 L1100,40 L1200,70 L1200,200 Z' fill='url(%23hg2)'/></svg>");
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    pointer-events: none;
    z-index: 0;
}
[data-theme="dark"] .home-hero::before { background-color: rgba(148, 197, 255, 0.08); }
[data-theme="dark"] .home-hero::after  { background-color: rgba(186, 230, 253, 0.10); }

/* Snowflakes field — animated rotation */
.home-hero__snow-field {
    position: absolute;
    top: 0; right: 0;
    width: 58%;
    height: 78%;
    z-index: 1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to top right,
        transparent 6%,
        rgba(0,0,0,0.15) 32%,
        rgba(0,0,0,0.50) 62%,
        rgba(0,0,0,0.90) 88%,
        #000 100%);
    mask-image: linear-gradient(to top right,
        transparent 6%,
        rgba(0,0,0,0.15) 32%,
        rgba(0,0,0,0.50) 62%,
        rgba(0,0,0,0.90) 88%,
        #000 100%);
}
.home-hero__flake {
    position: absolute;
    top: var(--t);
    right: var(--r);
    width: calc(44px * var(--s, 1));
    height: calc(44px * var(--s, 1));
    background-color: rgba(37, 99, 235, 0.42);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round'><g><line x1='50' y1='8' x2='50' y2='92'/><line x1='50' y1='16' x2='44' y2='22'/><line x1='50' y1='16' x2='56' y2='22'/><line x1='50' y1='30' x2='44' y2='36'/><line x1='50' y1='30' x2='56' y2='36'/><line x1='50' y1='84' x2='44' y2='78'/><line x1='50' y1='84' x2='56' y2='78'/><line x1='50' y1='70' x2='44' y2='64'/><line x1='50' y1='70' x2='56' y2='64'/><line x1='13' y1='29' x2='87' y2='71'/><line x1='13' y1='71' x2='87' y2='29'/><line x1='22' y1='34' x2='18' y2='27'/><line x1='22' y1='34' x2='29' y2='38'/><line x1='78' y1='66' x2='82' y2='73'/><line x1='78' y1='66' x2='71' y2='62'/><line x1='22' y1='66' x2='18' y2='73'/><line x1='22' y1='66' x2='29' y2='62'/><line x1='78' y1='34' x2='82' y2='27'/><line x1='78' y1='34' x2='71' y2='38'/></g></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round'><g><line x1='50' y1='8' x2='50' y2='92'/><line x1='50' y1='16' x2='44' y2='22'/><line x1='50' y1='16' x2='56' y2='22'/><line x1='50' y1='30' x2='44' y2='36'/><line x1='50' y1='30' x2='56' y2='36'/><line x1='50' y1='84' x2='44' y2='78'/><line x1='50' y1='84' x2='56' y2='78'/><line x1='50' y1='70' x2='44' y2='64'/><line x1='50' y1='70' x2='56' y2='64'/><line x1='13' y1='29' x2='87' y2='71'/><line x1='13' y1='71' x2='87' y2='29'/><line x1='22' y1='34' x2='18' y2='27'/><line x1='22' y1='34' x2='29' y2='38'/><line x1='78' y1='66' x2='82' y2='73'/><line x1='78' y1='66' x2='71' y2='62'/><line x1='22' y1='66' x2='18' y2='73'/><line x1='22' y1='66' x2='29' y2='62'/><line x1='78' y1='34' x2='82' y2='27'/><line x1='78' y1='34' x2='71' y2='38'/></g></svg>");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    transform: rotate(var(--rot, 0deg));
    animation: flake-spin var(--dur, 90s) linear infinite;
    animation-direction: var(--dir, normal);
}
[data-theme="dark"] .home-hero__flake { background-color: rgba(186, 230, 253, 0.38); }

.home-hero__flake:nth-child(1)  { --t:2%;  --r:5%;  --s:1.25; --rot:10deg;  --dur:75s;  }
.home-hero__flake:nth-child(2)  { --t:8%;  --r:20%; --s:0.95; --rot:-25deg; --dur:90s;  --dir:reverse; }
.home-hero__flake:nth-child(3)  { --t:1%;  --r:35%; --s:0.75; --rot:18deg;  --dur:110s; }
.home-hero__flake:nth-child(4)  { --t:14%; --r:50%; --s:0.55; --rot:-8deg;  --dur:100s; --dir:reverse; }
.home-hero__flake:nth-child(5)  { --t:19%; --r:9%;  --s:1.05; --rot:32deg;  --dur:85s;  }
.home-hero__flake:nth-child(6)  { --t:24%; --r:26%; --s:0.85; --rot:-15deg; --dur:120s; }
.home-hero__flake:nth-child(7)  { --t:16%; --r:42%; --s:0.62; --rot:5deg;   --dur:95s;  --dir:reverse; }
.home-hero__flake:nth-child(8)  { --t:30%; --r:54%; --s:0.48; --rot:22deg;  --dur:130s; }
.home-hero__flake:nth-child(9)  { --t:38%; --r:7%;  --s:0.92; --rot:-30deg; --dur:105s; --dir:reverse; }
.home-hero__flake:nth-child(10) { --t:44%; --r:22%; --s:0.72; --rot:12deg;  --dur:115s; }
.home-hero__flake:nth-child(11) { --t:36%; --r:40%; --s:0.52; --rot:-20deg; --dur:125s; --dir:reverse; }
.home-hero__flake:nth-child(12) { --t:50%; --r:11%; --s:0.58; --rot:-18deg; --dur:98s;  }
.home-hero__flake:nth-child(13) { --t:58%; --r:26%; --s:0.5;  --rot:28deg;  --dur:140s; --dir:reverse; }
.home-hero__flake:nth-child(14) { --t:62%; --r:42%; --s:0.42; --rot:-5deg;  --dur:150s; }
.home-hero__flake:nth-child(15) { --t:70%; --r:18%; --s:0.44; --rot:15deg;  --dur:160s; --dir:reverse; }
@media (prefers-reduced-motion: reduce) {
    .home-hero__flake { animation: none !important; }
}

.home-hero__inner { position: relative; z-index: 2; }

/* Kicker pill — premium */
.home-hero__kicker-row { margin-bottom: 18px; }
.home-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-green) 12%, var(--bg-card));
    color: var(--brand-green);
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid color-mix(in srgb, var(--brand-green) 30%, transparent);
    box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--brand-green) 50%, transparent);
}
.home-hero__kicker-spark { color: var(--brand-green); flex-shrink: 0; }

/* H1 — oversized, expressive (2026 trend) */
.home-hero__title {
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: clamp(34px, 5.5vw, 56px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    margin: 0 0 18px;
    text-wrap: balance;
}

.home-hero__lead {
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0 0 24px;
    max-width: 640px;
}

/* Meta row — byline + updated */
.home-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px dashed color-mix(in srgb, var(--text-muted) 25%, transparent);
}
.home-hero__byline {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.home-hero__avatars {
    display: inline-flex;
    flex-shrink: 0;
}
.home-hero__avatars > .home-hero__avatar + .home-hero__avatar {
    /* Stacked avatars (premium multi-author byline pattern, как у NYT/Atlantic) */
    margin-left: -12px;
}
.home-hero__avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-card-alt);
    border: 2px solid color-mix(in srgb, var(--brand-green) 25%, var(--bg-card));
    position: relative;
}
.home-hero__avatars > .home-hero__avatar:nth-child(2) { z-index: 0; }
.home-hero__avatars > .home-hero__avatar:nth-child(1) { z-index: 1; }
.home-hero__avatar--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-green), var(--brand-mountain));
    color: #fff;
    font-family: 'Unbounded', sans-serif;
    font-weight: 700;
    font-size: 16px;
}
.home-hero__byline-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.3;
    gap: 2px;
}
.home-hero__byline-name {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}
.home-hero__byline-name a {
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s;
}
.home-hero__byline-name a:hover { color: var(--brand-mountain); }
.home-hero__byline-role {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}
.home-hero__updated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.home-hero__updated svg { opacity: 0.7; }
.home-hero__updated time { color: var(--text-secondary); font-weight: 500; }

/* Rating chip в home-hero — same visuals что у .listing-hero__chip-stars (для /best-casino/).
   Используем home-hero неймспейс чтобы не привязывать к listing-hero parent. */
.home-hero__rating-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--brand-mountain) 14%, var(--border));
    font-size: 12.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.home-hero__rating-stars {
    position: relative;
    display: inline-block;
    line-height: 1;
    font-size: 13px;
    letter-spacing: 1px;
}
.home-hero__rating-stars-bg {
    color: color-mix(in srgb, var(--brand-mountain) 18%, var(--border));
}
.home-hero__rating-stars-fg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    width: var(--rating-pct, 0%);
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-mountain) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    pointer-events: none;
    white-space: nowrap;
}
.home-hero__rating-value {
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1;
}

/* Stats grid — 4 columns desktop */
.home-hero__stats {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.home-hero__stat {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 14px;
    padding: 16px 18px;
    background: color-mix(in srgb, var(--bg-card) 85%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-muted) 12%, var(--border));
    border-radius: 16px;
    backdrop-filter: blur(8px);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}
.home-hero__stat::before {
    content: "";
    position: absolute;
    top: -30px; right: -30px;
    width: 80px; height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand-green) 14%, transparent), transparent 70%);
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.home-hero__stat:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--brand-green) 35%, var(--border));
    box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--brand-mountain) 35%, transparent);
}
.home-hero__stat:hover::before { opacity: 1; transform: scale(1.15); }
.home-hero__stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--brand-green) 14%, var(--bg-card-alt)),
        color-mix(in srgb, var(--brand-mountain) 10%, var(--bg-card-alt)));
    color: var(--brand-green);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    grid-row: 1 / span 2;
}
.home-hero__stat-icon svg { width: 28px; height: 28px; }
.home-hero__stat-value {
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, var(--text-primary) 0%, color-mix(in srgb, var(--brand-mountain) 65%, var(--text-primary)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
    z-index: 1;
    align-self: end;
    margin-bottom: 0;
}
.home-hero__stat-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.3;
    position: relative;
    z-index: 1;
    align-self: start;
    margin-top: 2px;
}

/* Nav cards — 4 quick paths */
.home-hero__nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.home-hero__nav-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    overflow: hidden;
    position: relative;
}
.home-hero__nav-card:hover {
    color: var(--text-primary);
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--brand-green) 40%, var(--border));
    box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--brand-mountain) 35%, transparent);
}
.home-hero__nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--brand-green) 14%, transparent),
        color-mix(in srgb, var(--brand-mountain) 10%, transparent));
    color: var(--brand-green);
    flex-shrink: 0;
    transition: background 0.18s ease, color 0.18s ease;
}
.home-hero__nav-card:hover .home-hero__nav-icon {
    background: linear-gradient(135deg, var(--brand-green), var(--brand-mountain));
    color: #fff;
}
.home-hero__nav-label {
    flex: 1 1 auto;
    font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.2;
    min-width: 0;
}
.home-hero__nav-arrow {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color 0.18s ease, transform 0.18s ease;
}
.home-hero__nav-card:hover .home-hero__nav-arrow {
    color: var(--brand-green);
    transform: translateX(3px);
}

/* Tablet (≤960) — 2-col grids */
@media (max-width: 960px) {
    .home-hero {
        padding: 44px 36px 36px;
        border-radius: 24px;
    }
    .home-hero__stats { grid-template-columns: repeat(2, 1fr); }
    .home-hero__nav { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile (≤640) — full-bleed без рамки (тот же приём что у hero-review) */
@media (max-width: 640px) {
    .home-hero {
        padding: 28px 18px 26px;
        border-radius: 0;
        margin: calc(-1 * var(--gap)) calc(-1 * var(--container-padding)) 24px;
        box-shadow: none;
        border-left: none;
        border-right: none;
        border-top: none;
    }
    /* Mountains menos доминируют на mobile */
    .home-hero::before,
    .home-hero::after { height: 22%; opacity: 0.55; }

    .home-hero__title {
        font-size: clamp(28px, 9vw, 38px);
        line-height: 1.08;
    }
    .home-hero__lead { font-size: 14.5px; }
    .home-hero__meta {
        gap: 12px;
        margin-bottom: 24px;
        padding-bottom: 20px;
    }
    .home-hero__stats {
        gap: 10px;
        margin-bottom: 22px;
    }
    .home-hero__stat {
        padding: 12px 14px;
        border-radius: 14px;
        column-gap: 12px;
    }
    .home-hero__stat-icon {
        width: 46px; height: 46px;
        border-radius: 12px;
    }
    .home-hero__stat-icon svg { width: 22px; height: 22px; }
    .home-hero__stat-value { font-size: 20px; }
    .home-hero__stat-label { font-size: 11.5px; }

    /* Nav: вертикальная колонка (1fr), 4 cards друг под другом */
    .home-hero__nav {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .home-hero__nav-card {
        padding: 14px 14px;
        border-radius: 12px;
    }
    .home-hero__nav-icon {
        width: 32px; height: 32px;
        border-radius: 8px;
    }
    .home-hero__nav-icon svg { width: 18px; height: 18px; }
    .home-hero__nav-label { font-size: 13.5px; }
}

/* =====================================================
   INTERACTIONS - rating + comments в стиле hero
   ===================================================== */

.interactions {
    max-width: 720px;
    margin: 28px auto 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Rating card (radio-stars) --- */
.rating-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px 32px;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
    position: relative;
    overflow: hidden;
}

.rating-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--brand-mountain) 0%,
        color-mix(in srgb, var(--brand-green) 60%, var(--brand-mountain)) 50%,
        var(--brand-green) 100%);
    opacity: 0.85;
}

.rating-card__head {
    margin-bottom: 18px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 14px;
}

.rating-card__kicker {
    margin: 0;
    font-family: "Unbounded", "DM Sans", system-ui, sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-green);
}

.rating-card__summary {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.rating-card__big {
    font-family: "Unbounded", "DM Sans", system-ui, sans-serif;
    font-weight: 600;
    font-size: 28px;
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-mountain) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
}

.rating-card__max {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

.rating-card__count {
    font-size: 13px;
    color: var(--text-muted);
}

.rating-card__empty {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.rating-card__hint {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.rating-card__hint a {
    color: var(--brand-mountain);
    font-weight: 600;
    text-decoration: none;
}

.rating-card__hint a:hover { text-decoration: underline; }

[data-theme="dark"] .rating-card__hint a { color: #94c5ff; }

.rating-card__form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

/* radio-stars: reverse order для CSS hover */
.rating-card__stars {
    border: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
}

.rating-card__stars input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.rating-card__stars label {
    cursor: pointer;
    font-size: 32px;
    line-height: 1;
    color: color-mix(in srgb, var(--brand-mountain) 18%, var(--border));
    transition: transform 0.15s ease;
    user-select: none;
    position: relative;
}

.rating-card__stars label span {
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-mountain) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0;
    transition: opacity 0.15s ease;
    display: inline-block;
}

.rating-card__stars label:hover span,
.rating-card__stars label:hover ~ label span,
.rating-card__stars input[type="radio"]:checked ~ label span {
    opacity: 1;
}

.rating-card__stars input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--brand-mountain);
    outline-offset: 2px;
    border-radius: 4px;
}

.rating-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-mountain) 100%);
    color: white;
    font-family: "Unbounded", "DM Sans", system-ui, sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--brand-mountain) 50%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rating-card__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -4px color-mix(in srgb, var(--brand-mountain) 60%, transparent);
}

.rating-card__saved {
    font-size: 13px;
    color: var(--text-muted);
}

/* --- Comments card --- */
.comments-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px 32px;
    position: relative;
    overflow: hidden;
}

.comments-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--brand-mountain) 0%,
        color-mix(in srgb, var(--brand-green) 60%, var(--brand-mountain)) 50%,
        var(--brand-green) 100%);
    opacity: 0.85;
}

.comments-card__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.comments-card__kicker {
    margin: 0;
    font-family: "Unbounded", "DM Sans", system-ui, sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.comments-card__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-green) 14%, transparent);
    color: var(--brand-green);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.comments-card__empty {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--text-secondary);
    font-style: italic;
}

.comments-card__hint {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.comments-card__hint a {
    color: var(--brand-mountain);
    font-weight: 600;
    text-decoration: none;
}

.comments-card__hint a:hover { text-decoration: underline; }

[data-theme="dark"] .comments-card__hint a { color: #94c5ff; }

.comments {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.comments__item {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: color-mix(in srgb, var(--brand-mountain) 3%, var(--bg-page));
    border-radius: 14px;
}

.comments__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--bg-card);
}

.comments__avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-mountain) 100%);
    color: white;
    font-family: "Unbounded", "DM Sans", system-ui, sans-serif;
    font-weight: 600;
    font-size: 16px;
}

.comments__content { flex: 1 1 auto; min-width: 0; }

.comments__meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.comments__author {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.comments__time {
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.comments__body {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-primary);
    word-wrap: break-word;
}

.comments-card__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comments-card__form-label {
    font-family: "Unbounded", "DM Sans", system-ui, sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.comments-card__form textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-page);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.55;
    resize: vertical;
    min-height: 110px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.comments-card__form textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--brand-green) 50%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-green) 14%, transparent);
}

.comments-card__form-foot {
    display: flex;
    justify-content: flex-end;
}

.comments-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 24px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-mountain) 100%);
    color: white;
    font-family: "Unbounded", "DM Sans", system-ui, sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--brand-mountain) 50%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.comments-card__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -4px color-mix(in srgb, var(--brand-mountain) 60%, transparent);
}

@media (max-width: 768px) {
    .interactions { margin-top: 24px; gap: 16px; }
    .rating-card,
    .comments-card { padding: 22px 20px; border-radius: 14px; }
    .rating-card__form { flex-wrap: wrap; }
    .rating-card__stars label { font-size: 28px; }
    .rating-card__btn,
    .comments-card__btn { width: 100%; }
    .comments-card__form-foot { width: 100%; }
}

/* ============================================================
   Cookie banner (GDPR) — компактный bottom-bar
   Pattern: DN.se / SVT.se inline-row, equal-weight buttons
   ============================================================ */
.cookie-banner {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    background: var(--bg-card, #fff);
    border-top: 1px solid var(--rule, #e5e7eb);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    color: var(--text-primary, #1a1a1a);
    font-size: 13px;
    line-height: 1.45;
    animation: cc-slide-up 0.24s ease-out;
}
@keyframes cc-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

.cookie-banner__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}
.cookie-banner__msg {
    flex: 1 1 320px;
    min-width: 0;
    margin: 0;
    color: var(--text-secondary, #525252);
    font-size: 13px;
}
.cookie-banner__link {
    color: var(--brand-green, #059669);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-left: 4px;
}
.cookie-banner__customize {
    background: none;
    border: 0;
    padding: 0;
    margin-left: 6px;
    color: var(--text-secondary, #525252);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.cookie-banner__customize:hover { color: var(--text-primary); }

.cookie-banner__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.cookie-banner__btn {
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    border: 1px solid transparent;
    white-space: nowrap;
}
.cookie-banner__btn--primary {
    background: var(--brand-green, #059669);
    color: #fff;
    border-color: var(--brand-green, #059669);
}
.cookie-banner__btn--primary:hover { background: #047857; border-color: #047857; }
.cookie-banner__btn--secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--rule-strong, #d4d4d8);
}
.cookie-banner__btn--secondary:hover { background: var(--bg-soft, #f6f7f9); border-color: var(--text-secondary, #525252); }

.cookie-banner__details {
    flex: 1 0 100%;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--rule, #e5e7eb);
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
/* Перебиваем [hidden] обратно к display:none — иначе наш display:grid выше его побеждает */
.cookie-banner__details[hidden] { display: none; }
.cookie-banner__cat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
}
.cookie-banner__cat-row input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; }
.cookie-banner__cat-row input[type="checkbox"][disabled] { cursor: not-allowed; opacity: .55; }
.cookie-banner__cat-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--bg-soft, #f6f7f9);
    color: var(--text-secondary, #525252);
}
.cookie-banner__cat-desc {
    margin: 2px 0 0 22px;
    font-size: 12px;
    color: var(--text-secondary, #525252);
    line-height: 1.4;
}
.cookie-banner__details-actions {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 720px) {
    .cookie-banner__inner {
        padding: 10px 12px;
        gap: 8px;
    }
    .cookie-banner__msg { flex: 1 0 100%; font-size: 12.5px; }
    .cookie-banner__actions { flex: 1 0 100%; }
    .cookie-banner__btn { flex: 1; padding: 8px 10px; font-size: 12.5px; }
    .cookie-banner__cat-desc { font-size: 11.5px; }
}

[data-theme="dark"] .cookie-banner {
    background: var(--bg-card-dark, #18181b);
    border-top-color: var(--rule-dark, #27272a);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}