/* ============================================================
   Safe-Nails Portal — Main stylesheet
   Uses CSS custom properties set by PHP (runtime theming)
   ============================================================ */

/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Fallback values (overridden by PHP inline style) */
    --color-primary:        #5551E8;
    --color-secondary:      #ffb226;
    --color-accent:         #cb0c52;
    --color-bg:             #fdf8ff;
    --color-text:           #1c192c;
    --color-text-muted:     #464555;
    --color-surface:        #f7f1ff;
    --color-border:         #e9e6f4;
    --color-white:          #ffffff;

    --radius-sm:   6px;
    --radius:      10px;
    --radius-lg:   16px;
    --radius-full: 9999px;

    --shadow-sm:   0 1px 3px rgba(28,25,44,.08);
    --shadow:      0 4px 16px rgba(28,25,44,.10);
    --shadow-lg:   0 12px 40px rgba(28,25,44,.14);

    --header-h:    64px;
    --topbar-h:    36px;
    --sidebar-w:   256px;
    --container:   1240px;

    --font-sans:           'Inter', system-ui, -apple-system, sans-serif;
    --transition:          0.18s ease;
    --color-primary-light: #e2dfff;

    /* Typography scale */
    --text-xs:     12px;
    --text-sm:     14px;
    --text-base:   16px;
    --text-lg:     18px;
    --text-xl:     22px;
    --text-2xl:    28px;
    --text-3xl:    36px;
    --text-4xl:    48px;
}

html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; }

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    padding-top: env(safe-area-inset-top); /* keep the sticky header clear of the iPhone notch/status bar */
    padding-bottom: calc(72px + env(safe-area-inset-bottom)); /* space for bottom nav + iPhone home-indicator area */
    overflow-x: hidden;
    max-width: 100vw;
}

@media (min-width: 768px) { body { padding-bottom: 0; } }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
ul, ol { list-style: none; }

/* Screen reader only */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* Клавиатурный фокус — фирменное кольцо вместо браузерного дефолта */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 6px;
}
.sn-btn:focus-visible, .sn-cta:focus-visible, .sn-tag:focus-visible,
.sn-nav__link:focus-visible, .sn-qa-chip:focus-visible { border-radius: var(--radius-full); }

/* ── Layout ───────────────────────────────────────────────── */
.sn-container { width: 100%; max-width: var(--container); margin-left: auto; margin-right: auto; padding: 0 24px; }
@media (min-width: 1440px) { .sn-container { padding: 0 40px; } }
.sn-main      { width: 100%; min-height: calc(100vh - var(--header-h) - var(--topbar-h) - 300px); }
.sn-section   { padding: 48px 0; width: 100%; }
@media (min-width: 768px) { .sn-section { padding: 68px 0; } }
.sn-section--tinted { background: var(--color-surface); }
.sn-section--dark   { background: #1c192c; color: #fff; }

/* ── Top bar (desktop only — quiet utility strip above the floating pill nav) ─
   Deliberately NOT a second glass capsule — that would compete with the main
   pill header below it. Kept as a flat, low-contrast strip with a hairline
   bottom border; the header pill stays the one "hero" floating element. ─── */
.sn-topbar { display: none; }
@media (min-width: 1024px) {
    .sn-topbar { display: block; background: transparent; color: var(--color-text-muted); font-size: var(--text-xs); border-bottom: 1px solid rgba(28,25,44,.055); }
}
.sn-topbar__inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; height: 38px; display: flex; align-items: center; justify-content: space-between; }
.sn-topbar__nav { display: flex; align-items: center; gap: 1px; }
.sn-topbar__nav a { color: #5b5870; font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; padding: 6px 11px; border-radius: 999px; transition: color .15s ease, background .15s ease; }
.sn-topbar__nav a:hover { color: var(--color-primary); background: var(--color-primary-light); text-decoration: none; }
.sn-topbar__sep { color: rgba(28,25,44,.16); font-size: 14px; line-height: 1; padding: 0 1px; }
.sn-topbar__social { display: flex; align-items: center; gap: 2px; }
.sn-topbar__social-link { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: transparent; transition: all .15s; }
.sn-topbar__social-link:hover { background: var(--color-primary-light); transform: translateY(-1px); }

/* ── Header — floating pill (Adaptive Lab style) ──────────── */
.sn-header {
    position: sticky; top: 10px; z-index: 100;
    max-width: min(var(--container), calc(100% - 20px));
    margin: 10px auto;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(28,25,44,.06);
    border-radius: var(--radius-full);
    box-shadow: 0 1px 2px rgba(28,25,44,.04), 0 8px 28px rgba(28,25,44,.07);
    transition: box-shadow .25s ease, background .25s ease;
}
.sn-header--scrolled {
    background: rgba(255,255,255,.96);
    box-shadow: 0 2px 4px rgba(28,25,44,.05), 0 14px 44px rgba(28,25,44,.12);
}
.sn-header__inner { padding: 9px 10px 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
@media (min-width: 768px) { .sn-header__inner { padding: 10px 10px 10px 22px; gap: 16px; } }

.sn-header__logo { flex-shrink: 0; text-decoration: none; display: flex; align-items: center; }
.sn-header__logo-text { font-size: 17px; font-weight: 900; color: #1e2028; letter-spacing: -.04em; }
.sn-header__logo-text span { color: #9a97ad; }
@media (min-width: 480px) { .sn-header__logo-text { font-size: 19px; } }

/* Dark pill CTA with rotating arrow (AL style) */
.sn-cta {
    display: inline-flex; align-items: center; gap: 12px;
    background: #1c192c; color: #fff;
    border-radius: var(--radius-full);
    padding: 5px 5px 5px 20px;
    font-size: 14px; font-weight: 600; line-height: 1;
    text-decoration: none; white-space: nowrap;
    transition: background .2s ease;
}
.sn-cta:hover { background: #2e2a45; text-decoration: none; color: #fff; }
.sn-cta__arrow {
    width: 30px; height: 30px; border-radius: 50%;
    background: #fff; color: #1c192c;
    display: flex; align-items: center; justify-content: center;
    transform: rotate(-45deg);
    transition: transform .45s cubic-bezier(.25,.1,.25,1);
}
.sn-cta:hover .sn-cta__arrow { transform: rotate(0deg); }
.sn-cta__arrow .material-symbols-outlined { font-size: 16px; }

/* Search toggle */
.sn-search { flex: 1; max-width: 300px; margin-left: auto; }
/* Mobile: search is a round icon button */
@media (max-width: 1023px) {
    .sn-search { flex: 0 0 auto; max-width: none; margin-left: auto; }
    .sn-search__toggle { display: flex; align-items: center; background: var(--color-surface); border: none; padding: 0; width: 40px; height: 40px; border-radius: 50%; justify-content: center; color: var(--color-text); transition: background var(--transition); }
    .sn-search__toggle:hover { background: var(--color-primary-light); }
}
@media (min-width: 1024px) {
    .sn-search__toggle { display: flex; align-items: center; gap: 10px; background: var(--color-surface); border: 1px solid transparent; border-radius: var(--radius-full); padding: 10px 18px; font-size: 14px; color: #5b5870; width: 100%; transition: border-color var(--transition), background var(--transition); }
    .sn-search__toggle:hover { border-color: var(--color-primary-light); background: var(--color-primary-light); color: var(--color-text); }
    .sn-search__toggle .material-symbols-outlined { font-size: 19px; }
    .sn-search__placeholder { display: inline; }
}
.sn-search__placeholder { display: none; }

/* Header flex order: logo → nav → search (pushed right) → actions */
.sn-nav { order: 1; }
.sn-search { order: 2; }
.sn-header__actions { order: 3; }

/* Nav */
.sn-nav { display: none; align-items: center; gap: 6px; }
@media (min-width: 1024px) { .sn-nav { display: flex; } }
.sn-nav__link { display: flex; align-items: center; gap: 3px; padding: 10px 16px; border-radius: var(--radius-full); font-size: 14.5px; font-weight: 600; color: #33313f; transition: color var(--transition), background var(--transition); background: none; border: none; cursor: pointer; text-decoration: none; line-height: 1.2; }
.sn-nav__link:hover { color: var(--color-text); background: var(--color-surface); text-decoration: none; }
.sn-nav__link--active { color: var(--color-primary); background: var(--color-primary-light); }
.sn-nav__dropdown { position: relative; }
/* padding-top bridges the gap so hover doesn't flicker when moving mouse down */
.sn-nav__dropdown-menu {
    visibility: hidden; opacity: 0; pointer-events: none;
    position: absolute; top: 100%; left: 0;
    padding-top: 10px; /* transparent bridge — keeps hover alive */
    z-index: 200;
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
    transform: translateY(-4px);
}
.sn-nav__dropdown-menu__inner {
    background: var(--color-white);
    border: 1px solid rgba(28,25,44,.06);
    border-radius: 20px;
    padding: 10px;
    min-width: 240px;
    box-shadow: 0 12px 48px rgba(28,25,44,.14), 0 2px 8px rgba(28,25,44,.05);
}
.sn-nav__dropdown:hover .sn-nav__dropdown-menu,
.sn-nav__dropdown:focus-within .sn-nav__dropdown-menu {
    visibility: visible; opacity: 1; pointer-events: all; transform: translateY(0);
}
.sn-nav__dropdown-menu a,
.sn-nav__dropdown-link {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; font-size: var(--text-sm); color: var(--color-text);
    border-radius: 12px; transition: background var(--transition), color var(--transition);
    text-decoration: none; white-space: nowrap;
}
.sn-nav__dropdown-menu a:hover,
.sn-nav__dropdown-link:hover { background: var(--color-surface); color: var(--color-primary); text-decoration: none; }
.sn-nav__dropdown-menu a .material-symbols-outlined,
.sn-nav__dropdown-link .material-symbols-outlined { font-size: 16px; opacity: .55; flex-shrink: 0; }
.sn-nav__dropdown-link--all { font-weight: 600; color: var(--color-primary); }
.sn-nav__dropdown-link--all .material-symbols-outlined { opacity: 1; }
.sn-nav__dropdown-divider { height: 1px; background: var(--color-border); margin: 4px 8px; }
.sn-nav__dropdown-label { display: block; margin: 8px 12px 8px; padding: 0 0 0 8px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-primary); border-left: 2px solid var(--color-primary); line-height: 1.1; }

/* Header actions — spacer pushes actions to right */
.sn-header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Round ghost icon button (header) */
.sn-icon-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-surface); color: var(--color-text); transition: background var(--transition); text-decoration: none; }
.sn-icon-btn:hover { background: var(--color-primary-light); color: var(--color-primary); text-decoration: none; }
.sn-icon-btn .material-symbols-outlined { font-size: 20px; }

/* Language switcher: hidden on mobile (lives in drawer) */
.sn-lang-switcher { display: none; }
@media (min-width: 1024px) { .sn-lang-switcher { display: flex; } }
.sn-lang-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 12px; font-weight: 700; letter-spacing: .05em; color: #33313f; border: 1px solid rgba(28,25,44,.12); border-radius: 50%; transition: all var(--transition); text-decoration: none; }
.sn-lang-btn:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-light); text-decoration: none; }

/* Auth: hide login button on mobile — it's in the drawer */
.sn-header__auth { display: none; }
@media (min-width: 1024px) { .sn-header__auth { display: flex; align-items: center; gap: 6px; } }

/* User avatar: always visible (even on mobile) */
.sn-user-menu { position: relative; }
.sn-user-btn { display: flex; align-items: center; }
.sn-avatar { width: 32px; height: 32px; border-radius: var(--radius-full); object-fit: cover; }
.sn-avatar--initials { display: flex; align-items: center; justify-content: center; background: var(--color-ink); color: #fff; font-weight: 700; font-size: var(--text-sm); }
.sn-user-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 8px); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 8px; min-width: 200px; box-shadow: var(--shadow); z-index: 200; }
.sn-user-menu:hover .sn-user-dropdown,
.sn-user-menu:focus-within .sn-user-dropdown { display: block; }
.sn-user-dropdown__header { padding: 8px 14px 12px; border-bottom: 1px solid var(--color-border); margin-bottom: 8px; }
.sn-user-dropdown__header strong { display: block; font-size: var(--text-sm); }
.sn-rep { font-size: var(--text-xs); color: var(--color-text-muted); }
.sn-user-dropdown__link { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: var(--text-sm); color: var(--color-text); border-radius: var(--radius); transition: background var(--transition); text-decoration: none; }
.sn-user-dropdown__link:hover { background: var(--color-surface); text-decoration: none; }
.sn-user-dropdown__link--danger { color: #ba1a1a; }
.sn-user-dropdown__link--danger:hover { background: #ffdad6; }

/* Hamburger — visible on mobile only */
.sn-hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 40px; height: 40px; padding: 0; flex-shrink: 0; border-radius: 50%; background: #1c192c; transition: background var(--transition); }
.sn-hamburger:hover { background: #2e2a45; }
.sn-hamburger span { display: block; width: 16px; height: 2px; background: #fff; border-radius: 2px; transition: transform var(--transition), opacity var(--transition); }
@media (min-width: 1024px) { .sn-hamburger { display: none; } }

/* ── Buttons ──────────────────────────────────────────────── */
.sn-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; border-radius: var(--radius); font-size: var(--text-sm); font-weight: 600; transition: all var(--transition); text-decoration: none; white-space: nowrap; }
.sn-btn:hover { text-decoration: none; }
.sn-btn--primary {
    background: linear-gradient(135deg, rgba(124,111,150,.62), rgba(83,73,105,.62));
    backdrop-filter: blur(16px) saturate(1.6);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 16px rgba(28,25,44,.12);
    color: #fff; font-family: 'Rubik', var(--font-sans, inherit);
}
.sn-btn--primary:hover { background: linear-gradient(135deg, rgba(124,111,150,.78), rgba(83,73,105,.78)); color: #fff; }
.sn-btn--outline { border: 1px solid #d4d4d8; color: #45464c; background: transparent; border-radius: 999px; font-weight: 500; }
.sn-btn--outline:hover { border-color: #9a9aa1; color: #1c192c; background: transparent; }
.sn-btn--outline-light { border: 2px solid rgba(255,255,255,.4); color: #fff; background: transparent; }
.sn-btn--outline-light:hover { background: rgba(255,255,255,.1); }
.sn-btn--ghost { background: transparent; color: var(--color-text-muted); }
.sn-btn--ghost:hover { background: var(--color-surface); }
.sn-btn--sm { padding: 7px 16px; font-size: var(--text-xs); }
.sn-btn--lg { padding: 14px 32px; font-size: var(--text-base); }

/* ── Tags/chips ───────────────────────────────────────────── */
.sn-tag { display: inline-flex; align-items: center; padding: 4px 12px; background: var(--color-surface); color: var(--color-text-muted); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: background var(--transition); }
.sn-tag:hover { background: #e2dfff; color: var(--color-primary); text-decoration: none; }
.sn-tag--sm { padding: 2px 8px; font-size: 10px; }

/* ── Flash messages ───────────────────────────────────────── */
.sn-flash { display: flex; align-items: center; gap: 10px; padding: 14px 20px; margin: 12px 24px; border-radius: var(--radius); font-size: var(--text-sm); }
.sn-flash--success { background: #d1fae5; color: #065f46; }
.sn-flash--error   { background: #fde8e8; color: #991b1b; }
.sn-flash--info    { background: #e0e7ff; color: #3730a3; }
.sn-flash__close { margin-left: auto; background: none; font-size: 18px; line-height: 1; opacity: .6; }
.sn-flash__close:hover { opacity: 1; }

/* ── Search modal ────────────────────────────────────────── */
.sn-search-modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: flex-start; justify-content: center; padding-top: 80px; }
.sn-search-modal[hidden] { display: none; }
.sn-search-modal__overlay { position: absolute; inset: 0; background: rgba(28,25,44,.5); backdrop-filter: blur(4px); }
.sn-search-modal__box { position: relative; background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 680px; margin: 0 16px; padding: 24px; }
.sn-search-modal__form { display: flex; align-items: center; gap: 8px; border: 2px solid var(--color-border); border-radius: var(--radius-lg); padding: 6px 6px 6px 16px; margin-bottom: 20px; transition: border-color var(--transition); }
.sn-search-modal__form:focus-within { border-color: var(--color-primary); }
.sn-search-modal__form .sn-btn { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 10px; flex-shrink: 0; }
.sn-search-modal__input { flex: 1; border: none; outline: none; font-size: var(--text-base); background: none; min-width: 0; }
.sn-search-modal__hints-title { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 10px; }
.sn-search-modal__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.sn-search-modal__results { max-height: 400px; overflow-y: auto; }
.sn-search-result-item { display: flex; gap: 12px; padding: 12px; border-radius: var(--radius); transition: background var(--transition); text-decoration: none; color: var(--color-text); }
.sn-search-result-item:hover { background: var(--color-surface); }
.sn-search-result-item h4 { font-size: var(--text-sm); font-weight: 600; }
.sn-search-result-item p  { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }

/* ── Hero ────────────────────────────────────────────────── */
/* Hero — «жидкое стекло»: скруглённый блок, светлый frost поверх фото,
   стеклянная карточка контента с тёмной чёткой типографикой */
.sn-hero {
    position: relative; display: flex; align-items: center; overflow: hidden;
    width: min(1560px, calc(100% - 20px));
    min-height: 600px;
    margin: 6px auto 0;
    border-radius: 28px;
}
.sn-hero__bg { position: absolute; inset: 0; }
.sn-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.sn-hero__gradient {
    position: absolute; inset: 0;
    background: linear-gradient(105deg, rgba(253,250,255,.55) 0%, rgba(253,250,255,.35) 50%, rgba(253,250,255,.05) 100%);
}
.sn-hero__content {
    position: relative; z-index: 1; max-width: 760px;
    margin: 44px 0;
    padding: 48px 54px;
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(34px) saturate(1.7);
    -webkit-backdrop-filter: blur(34px) saturate(1.7);
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 26px;
    box-shadow: 0 30px 70px rgba(28,25,44,.14), 0 2px 8px rgba(28,25,44,.04), inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.25);
}
@media (max-width: 640px) {
    .sn-hero { min-height: 460px; width: calc(100% - 12px); border-radius: 22px; }
    .sn-hero__content { margin: 20px 0; padding: 28px 24px; }
}
.sn-hero__badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: none; padding: 0;
    font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--color-ink); margin-bottom: 18px;
}
.sn-hero__badge img,
.sn-icon-custom { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.sn-hero__badge img { margin-top: -2px; }
.sn-hero__title { font-size: clamp(32px, 4.6vw, 54px); font-weight: 900; line-height: 1.06; letter-spacing: -.03em; color: #17141f; margin-bottom: 18px; }
.sn-hero__title em, .sn-hero__title i { font-style: normal; color: var(--color-ink-dark); }
.sn-hero__subtitle { font-size: 16.5px; color: #55506b; line-height: 1.65; margin-bottom: 30px; max-width: 480px; }
.sn-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sn-hero__actions .sn-btn--lg { border-radius: var(--radius-full); }
.sn-hero__actions .sn-btn--outline { background: rgba(255,255,255,.6); border-color: rgba(28,25,44,.14); color: #17141f; font-weight: 700; }
.sn-hero__actions .sn-btn--outline:hover { background: #fff; border-color: rgba(28,25,44,.25); }

/* Брендовая CTA — жидкое стекло, в стиле .sn-btn--primary */
.sn-cta--brand {
    background: linear-gradient(135deg, rgba(124,111,150,.62), rgba(83,73,105,.62));
    backdrop-filter: blur(16px) saturate(1.6);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    border: 1px solid rgba(255,255,255,.35);
    padding: 9px 9px 9px 22px; font-size: 15px; font-family: 'Rubik', inherit;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 30px rgba(28,25,44,.14);
}
.sn-cta--brand:hover { background: linear-gradient(135deg, rgba(124,111,150,.78), rgba(83,73,105,.78)); }
.sn-cta--brand .sn-cta__arrow { width: 32px; height: 32px; color: var(--color-ink-dark); }

/* Траст-чип под CTA (стеклянная плашка) */
.sn-hero__trust {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-top: 26px; padding: 10px 16px;
    max-width: 100%; box-sizing: border-box;
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(28,25,44,.07);
    border-radius: 14px;
    font-size: 12.5px; font-weight: 600; color: #55506b;
}
.sn-hero__trust-item { display: inline-flex; align-items: flex-start; gap: 6px; max-width: 100%; }
.sn-hero__trust .material-symbols-outlined { font-size: 17px; margin-top: 1px; color: var(--color-ink); font-variation-settings: 'FILL' 1; flex-shrink: 0; }
.sn-hero__trust-item img { width: 17px; height: 17px; margin-top: 1px; object-fit: contain; flex-shrink: 0; }
.sn-hero__trust i { flex-shrink: 0; width: 1px; height: 14px; background: rgba(28,25,44,.12); }
@media (max-width: 480px) { .sn-hero__trust { gap: 8px 6px; } .sn-hero__trust i { display: none; } }

/* ── Ad slots (sponsor / self-promo banners) ──────────────────────────── */
.sn-ad-slot {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    margin: 24px 0;
    border: 1px solid rgba(28,25,44,.06);
    box-shadow: 0 1px 2px rgba(28,25,44,.04);
}
.sn-ad-slot__media {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--color-bg-soft, #f4f4f8);
}
.sn-ad-slot__label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--color-text-muted);
    background: #fff;
    padding: 7px 12px;
    text-align: center;
    border-top: 1px solid rgba(28,25,44,.06);
}
.sn-ad-slot--sidebar { margin: 0 0 20px; }
.sn-ad-slot--between_articles { grid-column: 1 / -1; }

/* ── Hero slider extras ────────────────────────────────── */
.sn-hero--slider { position: relative; }
.sn-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; display: flex; align-items: center; width: 100%; }
.sn-hero__slide--active { opacity: 1; pointer-events: auto; position: relative; width: 100%; min-height: 600px; }
.sn-hero__dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
.sn-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(28,25,44,.28); border: none; cursor: pointer; transition: all .2s; padding: 0; }
.sn-hero__dot--active { width: 24px; border-radius: 4px; background: #1c192c; }
.sn-hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.55); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.7); color: #1c192c; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; }
.sn-hero__arrow:hover { background: rgba(255,255,255,.85); }
.sn-hero__arrow--prev { left: 20px; }
.sn-hero__arrow--next { right: 20px; }
@media (max-width: 640px) { .sn-hero__arrow { display: none; } }

/* ── Bento grid ──────────────────────────────────────────── */
.sn-bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 1024px) { .sn-bento { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
@media (max-width: 479px)  { .sn-bento { grid-template-columns: 1fr; gap: 12px; } }

.sn-bento__tile {
    display: flex; flex-direction: column; gap: 18px;
    padding: 26px 24px 22px;
    border-radius: 22px;
    border: 1px solid rgba(28,25,44,.06);
    background: var(--color-white);
    box-shadow: 0 1px 2px rgba(28,25,44,.03);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
    text-decoration: none; color: var(--color-text);
    position: relative; overflow: hidden;
}
.sn-bento__tile:hover { box-shadow: 0 16px 44px rgba(28,25,44,.10); transform: translateY(-4px); border-color: rgba(28,25,44,.1); text-decoration: none; }

/* Icon badge */
.sn-bento__icon {
    width: 52px; height: 52px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; flex-shrink: 0;
    transition: transform .3s ease;
}
.sn-bento__tile:hover .sn-bento__icon { transform: scale(1.06) rotate(-4deg); }
.sn-bento__icon .material-symbols-outlined { font-size: 26px; line-height: 1; font-variation-settings: 'FILL' 1; }

/* Body */
.sn-bento__body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sn-bento__tile h3 { font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--color-text); }
.sn-bento__tile p  { font-size: 13.5px; line-height: 1.6; color: var(--color-text-muted); }

/* Footer row: CTA text + arrow in a circle that rotates in (AL style) */
.sn-bento__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.sn-bento__cta { font-size: 13px; font-weight: 700; }
.sn-bento__arr {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px !important; opacity: 1;
    transform: rotate(-45deg);
    transition: transform .45s cubic-bezier(.25,.1,.25,1), background .2s, color .2s;
}
.sn-bento__tile:hover .sn-bento__arr { transform: rotate(0deg); color: #fff !important; }

/* Accent strip on hover */
.sn-bento__tile::after { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:22px 0 0 22px; transform:scaleY(0); transform-origin:top; transition:transform .25s ease; }
.sn-bento__tile:hover::after { transform:scaleY(1); }

/* Иконки-плитки: градиентный «app icon» с белым символом и цветной тенью */
.sn-bento__icon { color: #fff; }

/* Amber — Courses */
.sn-bento__tile--amber .sn-bento__icon { background: linear-gradient(135deg, #fbbf24 0%, #ea7c04 100%); box-shadow: 0 8px 20px rgba(234,124,4,.32); }
.sn-bento__tile--amber .sn-bento__cta  { color: #d97706; }
.sn-bento__tile--amber .sn-bento__arr  { background: #fef3e2; color: #d97706; }
.sn-bento__tile--amber:hover .sn-bento__arr { background: #d97706; }
.sn-bento__tile--amber::after          { background: linear-gradient(180deg, #fbbf24, #ea7c04); }

/* Blue — Articles */
.sn-bento__tile--blue .sn-bento__icon { background: linear-gradient(135deg, #60a5fa 0%, #1d4ed8 100%); box-shadow: 0 8px 20px rgba(37,99,235,.32); }
.sn-bento__tile--blue .sn-bento__cta  { color: #2563eb; }
.sn-bento__tile--blue .sn-bento__arr  { background: #e8f1fe; color: #2563eb; }
.sn-bento__tile--blue:hover .sn-bento__arr { background: #2563eb; }
.sn-bento__tile--blue::after          { background: linear-gradient(180deg, #60a5fa, #1d4ed8); }

/* Violet — Wiki */
.sn-bento__tile--violet .sn-bento__icon { background: linear-gradient(135deg, #a78bfa 0%, #6d28d9 100%); box-shadow: 0 8px 20px rgba(124,58,237,.32); }
.sn-bento__tile--violet .sn-bento__cta  { color: #7c3aed; }
.sn-bento__tile--violet .sn-bento__arr  { background: #f1edfd; color: #7c3aed; }
.sn-bento__tile--violet:hover .sn-bento__arr { background: #7c3aed; }
.sn-bento__tile--violet::after          { background: linear-gradient(180deg, #a78bfa, #6d28d9); }

/* Green — Free */
.sn-bento__tile--green .sn-bento__icon { background: linear-gradient(135deg, #34d399 0%, #047857 100%); box-shadow: 0 8px 20px rgba(5,150,105,.32); }
.sn-bento__tile--green .sn-bento__cta  { color: #059669; }
.sn-bento__tile--green .sn-bento__arr  { background: #e6f9ee; color: #059669; }
.sn-bento__tile--green:hover .sn-bento__arr { background: #059669; }
.sn-bento__tile--green::after          { background: linear-gradient(180deg, #34d399, #047857); }

/* ── Секция подписки на главной ───────────────────────────── */
.sn-subscribe-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
    padding: 40px 44px;
    background:
        radial-gradient(80% 140% at 95% 0%, color-mix(in srgb, var(--color-primary) 12%, transparent) 0%, transparent 50%),
        var(--color-white);
    border: 1px solid rgba(28,25,44,.06);
    border-radius: 26px;
    box-shadow: 0 2px 4px rgba(28,25,44,.03);
}
.sn-subscribe-hero__body { flex: 1; min-width: 260px; }
.sn-subscribe-hero__label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--color-ink); margin-bottom: 10px; }
.sn-subscribe-hero h2 { font-size: clamp(20px, 2.6vw, 28px); font-weight: 900; letter-spacing: -.02em; margin-bottom: 8px; }
.sn-subscribe-hero p { font-size: 14.5px; color: var(--color-text-muted); line-height: 1.6; max-width: 440px; }
.sn-subscribe-hero__form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; min-width: 300px; }
.sn-subscribe-hero__form .sn-input { flex: 1; min-width: 200px; height: 48px; border-radius: var(--radius-full); padding: 0 20px; }
@media (max-width: 640px) { .sn-subscribe-hero { padding: 28px 22px; } }

/* ── Карточка автора под статьёй (E-E-A-T) ────────────────── */
.sn-author-card { display: flex; gap: 18px; align-items: flex-start; margin-top: 36px; padding: 24px 26px; background: var(--color-surface); border: 1px solid rgba(28,25,44,.05); border-radius: 20px; }
.sn-author-card__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(28,25,44,.12); }
.sn-author-card__photo--ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-dark) 100%); color: #fff; }
.sn-author-card__photo--ph .material-symbols-outlined { font-size: 32px; font-variation-settings: 'FILL' 1; }
.sn-author-card__label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--color-ink); margin-bottom: 4px; }
.sn-author-card__name { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.sn-author-card__bio { font-size: 13.5px; line-height: 1.65; color: var(--color-text-muted); margin-bottom: 10px; }
.sn-author-card__link { font-size: 13px; font-weight: 700; color: var(--color-primary); text-decoration: none; }
.sn-author-card__link:hover { text-decoration: underline; }
@media (max-width: 480px) { .sn-author-card { flex-direction: column; } }

/* ── Статс-стрип (социальное доказательство) ──────────────── */
.sn-stats-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 26px; }
@media (min-width: 768px) { .sn-stats-strip { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.sn-stat-item { text-align: center; padding: 22px 12px; background: var(--color-white); border: 1px solid rgba(28,25,44,.06); border-radius: 18px; }
.sn-stat-item__num { font-size: clamp(26px, 3vw, 34px); font-weight: 900; letter-spacing: -.02em; color: var(--color-text); line-height: 1.1; }
.sn-stat-item__num em { font-style: normal; color: var(--color-ink); }
.sn-stat-item__label { font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); margin-top: 6px; }

/* ── Cluster CTA (контент → коммерческая ступица) ─────────── */
.sn-cluster-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    margin: 36px 0 8px; padding: 26px 28px;
    background: linear-gradient(135deg, #1c192c 0%, #2e2260 100%);
    border-radius: 20px;
}
.sn-cluster-cta__body { flex: 1; min-width: 240px; }
.sn-cluster-cta__label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #b9b5ff; margin-bottom: 8px; }
.sn-cluster-cta__title { font-size: 19px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.sn-cluster-cta p { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.65); margin: 0; }
.sn-cluster-cta .sn-cta {
    background: linear-gradient(135deg, rgba(124,111,150,.62), rgba(83,73,105,.62));
    backdrop-filter: blur(16px) saturate(1.6);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    border: 1px solid rgba(255,255,255,.35);
    flex-shrink: 0;
}
.sn-cluster-cta .sn-cta:hover { background: linear-gradient(135deg, rgba(124,111,150,.78), rgba(83,73,105,.78)); }
.sn-cluster-cta .sn-cta__arrow { color: var(--color-ink-dark); }

/* ── Section headers ─────────────────────────────────────── */
.sn-section__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.sn-section__title { font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; }
.sn-link { font-size: 13px; font-weight: 700; color: var(--color-text); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid rgba(28,25,44,.12); border-radius: var(--radius-full); transition: all .2s; }
.sn-link:hover { text-decoration: none; border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }
.sn-link--arrow::after { content: '→'; transition: transform .2s; }
.sn-link--arrow:hover::after { transform: translateX(3px); }

/* ── Article cards ───────────────────────────────────────── */
.sn-articles-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px)  { .sn-articles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sn-articles-grid { grid-template-columns: repeat(3, 1fr); } }
.sn-articles-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.sn-card { background: var(--color-white); border-radius: var(--radius-lg); border: 1px solid var(--color-border); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--transition); }
.sn-card:hover { box-shadow: var(--shadow); }
.sn-card--featured { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
/* Give the image a fixed share of the row so aspect-ratio has a definite width to
   work from — without this, an unusually tall/wide uploaded image can throw off the
   flex-basis auto-sizing and the image renders at its native size instead of being
   cropped to 16:9, breaking the whole card layout. */
.sn-card--featured .sn-card__image-wrap { flex: 0 0 44%; min-width: 0; }
.sn-card--featured .sn-card__body { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) {
    .sn-card--featured { flex-direction: column; }
    .sn-card--featured .sn-card__image-wrap { flex-basis: auto; width: 100%; }
}
.sn-card__image-wrap { display: block; overflow: hidden; aspect-ratio: 16/9; min-width: 0; }

/* Генеративная обложка для статей без изображения */
.sn-cover-ph { display: flex; align-items: center; justify-content: center; position: relative; }
.sn-cover-ph .material-symbols-outlined { font-size: 44px; color: rgba(255,255,255,.85); font-variation-settings: 'FILL' 1; filter: drop-shadow(0 4px 12px rgba(0,0,0,.15)); }
.sn-cover-ph::after { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 120% at 80% 10%, rgba(255,255,255,.22) 0%, transparent 50%); }
.sn-cover-ph--0 { background: linear-gradient(135deg, #4b4c52 0%, #6d6e75 100%); }
.sn-cover-ph--1 { background: linear-gradient(135deg, #8c2f4a 0%, #5c2035 100%); }
.sn-cover-ph--2 { background: linear-gradient(135deg, #6d6e75 0%, #3a3b40 100%); }
.sn-cover-ph--3 { background: linear-gradient(135deg, #ab8654 0%, #8c2f4a 100%); }

/* ── Shop ─────────────────────────────────────────────────── */
.sn-shop-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 22px; }
.sn-shop-card { position: relative; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.sn-shop-card:hover { box-shadow: 0 10px 34px rgba(28,25,44,.09); transform: translateY(-2px); }
.sn-shop-card__badge { position: absolute; top: 12px; left: 12px; z-index: 1; background: var(--color-ink); color: #fff; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; border-radius: var(--radius-full); }
.sn-shop-card__img-wrap { aspect-ratio: 4/3.1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sn-shop-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.sn-shop-card__img-wrap.sn-cover-ph .material-symbols-outlined { font-size: 38px; }
.sn-shop-card__ph .material-symbols-outlined { font-size: 40px; font-variation-settings: 'FILL' 1; opacity: .85; }
.sn-shop-card__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sn-shop-card__img-wrap-link { display: block; }
.sn-shop-card__name { font-size: 15px; font-weight: 700; line-height: 1.35; }
.sn-shop-card__name a { color: inherit; text-decoration: none; }
.sn-shop-card__name a:hover { color: var(--color-primary); text-decoration: none; }
.sn-shop-card__desc { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sn-shop-card__footer { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sn-shop-card__price { display: flex; flex-direction: column; line-height: 1.2; }
.sn-shop-card__price-now { font-size: 17px; font-weight: 800; color: var(--color-text); }
.sn-shop-card__price-old { font-size: 12px; color: var(--color-text-muted); text-decoration: line-through; }
.sn-dark-pill__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 2px; }

/* ── Shop: popular category tiles ────────────────────────── */
.sn-shop-reco__title { font-size: 16px; font-weight: 800; margin-bottom: 14px; }
.sn-shop-cat-tiles { display: grid; grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); gap: 14px; margin-bottom: 8px; }
.sn-shop-cat-tile {
    position: relative; overflow: hidden;
    border-radius: var(--radius-lg); padding: 16px 18px;
    min-height: 108px; text-decoration: none; color: var(--color-text);
    display: flex; flex-direction: column; justify-content: flex-start; gap: 4px;
    transition: transform .2s, box-shadow .2s;
}
.sn-shop-cat-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(28,25,44,.10); text-decoration: none; color: var(--color-text); }
.sn-shop-cat-tile__name { font-size: 14px; font-weight: 700; line-height: 1.3; max-width: 70%; }
.sn-shop-cat-tile__count { font-size: 11.5px; color: var(--color-text-muted); }
.sn-shop-cat-tile__icon.material-symbols-outlined {
    position: absolute; right: -6px; bottom: -10px; font-size: 76px;
    opacity: .5; font-variation-settings: 'FILL' 1;
}
.sn-shop-cat-tile__img { position: absolute; right: 6px; bottom: 6px; width: 64px; height: 64px; object-fit: contain; }
.sn-shop-catalog__icon--img { background: none !important; padding: 0; overflow: hidden; }
.sn-shop-catalog__icon--img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ── Shop: sort bar ───────────────────────────────────────── */
.sn-shop-sort { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.sn-shop-sort__label { font-size: 12.5px; color: var(--color-text-muted); font-weight: 600; margin-right: 4px; }
.sn-shop-sort__opt { font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text-muted); text-decoration: none; transition: all .15s; }
.sn-shop-sort__opt:hover { background: var(--color-primary-light); color: var(--color-text); text-decoration: none; }
.sn-shop-sort__opt--active { background: var(--color-ink); color: #fff; }

/* ── Shop: product detail page ───────────────────────────── */
.sn-shop-product { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 20px 0 72px; }
@media (min-width: 800px) { .sn-shop-product { grid-template-columns: 420px 1fr; } }
.sn-shop-product__gallery { aspect-ratio: 1/1; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); }
.sn-shop-product__gallery img { width: 100%; height: 100%; object-fit: cover; }
.sn-shop-product__gallery .sn-cover-ph { display: flex; align-items: center; justify-content: center; }
.sn-shop-product__info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sn-shop-product__name { font-size: clamp(22px,3vw,30px); font-weight: 800; line-height: 1.3; margin: 10px 0 6px; }
.sn-shop-product__price { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 18px; }
.sn-shop-product__price-now { font-size: 28px; font-weight: 900; color: var(--color-text); }
.sn-shop-product__price-old { font-size: 16px; color: var(--color-text-muted); text-decoration: line-through; }
.sn-shop-product__desc { margin-top: 28px; }
.sn-shop-product__desc h2 { font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.sn-shop-product__desc p { font-size: 14px; line-height: 1.7; color: var(--color-text-muted); white-space: pre-line; }

/* ── Shop layout: sidebar catalog (desktop) + products ───── */
.sn-shop-layout { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 900px) { .sn-shop-layout { grid-template-columns: 260px 1fr; } }
.sn-shop-sidebar { display: none; }
@media (min-width: 900px) {
    .sn-shop-sidebar {
        display: block; position: sticky; top: 90px;
        background: var(--color-white); border: 1px solid var(--color-border);
        border-radius: var(--radius-lg); padding: 8px;
    }
}
.sn-shop-sidebar__inner h3 {
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    color: var(--color-text-muted); padding: 12px 12px 8px;
}
.sn-shop-main { min-width: 0; }

.sn-shop-catalog__row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 10px; border-radius: 12px;
    text-decoration: none; color: var(--color-text);
    transition: background .15s;
}
.sn-shop-catalog__row:hover, .sn-shop-catalog__row--active { background: var(--color-surface); text-decoration: none; }
.sn-shop-catalog__icon {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-primary-light); color: var(--color-primary);
}
.sn-shop-catalog__icon .material-symbols-outlined { font-size: 23px; font-variation-settings: 'FILL' 1; }
.sn-shop-catalog__label { font-size: 14px; font-weight: 600; flex: 1; }
.sn-shop-catalog__label em { font-style: normal; font-weight: 400; color: var(--color-text-muted); font-size: 12px; margin-left: 4px; }
.sn-card__image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; display: block; }
.sn-card:hover .sn-card__image-wrap img { transform: scale(1.03); }
.sn-card--featured .sn-card__image-wrap { aspect-ratio: 16/9; }
.sn-card__body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.sn-card__title { font-size: var(--text-base); font-weight: 700; line-height: 1.4; }
.sn-card__title a { color: var(--color-text); text-decoration: none; }
.sn-card__title a:hover { color: var(--color-primary); }
.sn-card__excerpt { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; margin-top: auto; }
.sn-card__meta { display: flex; align-items: center; gap: 12px; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: auto; }

/* ── Article layout ──────────────────────────────────────── */
.sn-article-layout { display: grid; grid-template-columns: 1fr; gap: 40px; padding: 32px 24px; max-width: var(--container); margin: 0 auto; }
@media (min-width: 1024px) { .sn-article-layout { grid-template-columns: 256px 1fr 240px; } }
.sn-article-layout:not(:has(.sn-wiki-sidebar)) { grid-template-columns: 1fr; max-width: 860px; }
@media (min-width: 1024px) { .sn-article-layout:not(:has(.sn-wiki-sidebar)) { grid-template-columns: 1fr 240px; } }

.sn-article { min-width: 0; }
.sn-article__header { margin-bottom: 32px; }
.sn-article__title { font-size: clamp(24px, 4vw, 40px); font-weight: 900; line-height: 1.2; letter-spacing: -.02em; margin: 12px 0 16px; }
.sn-article__excerpt { font-size: var(--text-lg); color: var(--color-text-muted); line-height: 1.65; font-style: italic; }
.sn-article__meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border); font-size: var(--text-sm); }
.sn-article__author { display: flex; align-items: center; gap: 12px; }
.sn-article__author .sn-avatar--sm { width: 36px; height: 36px; }
.sn-article__dates { display: flex; gap: 12px; font-size: var(--text-xs); color: var(--color-text-muted); }
.sn-article__stats { display: flex; align-items: center; gap: 14px; font-size: var(--text-xs); color: var(--color-text-muted); }
.sn-article__cover { margin: 28px 0; border-radius: var(--radius-lg); overflow: hidden; }
.sn-article__cover img { width: 100%; max-height: 480px; object-fit: cover; }

/* Action buttons */
.sn-article__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.sn-action-btn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border-radius: var(--radius-full); border: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); background: var(--color-white); transition: all var(--transition); }
.sn-action-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.sn-action-btn--active { background: #e2dfff; border-color: var(--color-primary); color: var(--color-primary); }
.sn-article__progress-wrap { margin-left: auto; font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
.sn-unsave-btn:hover { background: #fee2e2 !important; color: #dc2626 !important; }

/* Share popover */
.sn-share-wrap { position: relative; display: inline-flex; }
.sn-share-popover {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
    min-width: 220px; max-width: calc(100vw - 32px); padding: 8px; border-radius: 16px;
    background: rgba(255, 255, 255, .88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--color-border); box-shadow: 0 16px 40px rgba(20, 18, 30, .16);
    display: flex; flex-direction: column; gap: 2px;
}
.sn-share-popover[hidden] { display: none; }
.sn-share-popover__item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 10px; border-radius: 10px; border: none; background: none;
    font-size: var(--text-sm); font-weight: 500; color: var(--color-text); text-align: left; cursor: pointer;
    transition: background var(--transition);
}
.sn-share-popover__item:hover { background: #f4f3f8; }
.sn-share-popover__item[hidden] { display: none; }
.sn-share-popover__icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 50%;
}

/* ── Table of contents ───────────────────────────────────── */
.sn-toc { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px 24px; margin: 32px 0; }
.sn-toc__header { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }
.sn-toc__toggle { background: none; padding: 4px; }
.sn-toc__nav ol { padding-left: 0; }
.sn-toc__item a { display: block; padding: 5px 0; font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; transition: color var(--transition); border-left: 2px solid transparent; padding-left: 12px; }
.sn-toc__item a:hover { color: var(--color-primary); }
.sn-toc__item--h3 a { padding-left: 28px; font-size: var(--text-xs); }

/* TOC sidebar (right) */
.sn-toc-sidebar { display: none; }
@media (min-width: 1024px) { .sn-toc-sidebar { display: block; } }
.sn-toc-sidebar__inner { position: sticky; top: calc(var(--header-h) + 24px); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; }
.sn-toc-sidebar h3 { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); margin-bottom: 12px; }
.sn-toc-sidebar__item a { display: block; font-size: var(--text-xs); color: var(--color-text-muted); padding: 5px 0 5px 10px; border-left: 2px solid transparent; text-decoration: none; transition: all var(--transition); }
.sn-toc-sidebar__item--active a { color: var(--color-primary); border-left-color: var(--color-primary); font-weight: 600; }
.sn-toc-sidebar__item--h3 a { padding-left: 22px; font-size: 11px; }

/* Reading progress */
.sn-read-progress { height: 3px; background: var(--color-border); border-radius: 3px; margin-top: 16px; overflow: hidden; }
.sn-read-progress__bar { height: 100%; background: var(--color-primary); border-radius: 3px; width: 0; transition: width .1s linear; }

/* ── Article body prose ──────────────────────────────────── */
.sn-prose { line-height: 1.8; font-size: var(--text-base); }
.sn-prose h2 { font-size: var(--text-2xl); font-weight: 700; margin: 40px 0 16px; line-height: 1.3; }
.sn-prose h3 { font-size: var(--text-xl); font-weight: 600; margin: 32px 0 12px; }
.sn-prose h4 { font-size: var(--text-lg); font-weight: 600; margin: 24px 0 10px; }
.sn-prose p  { margin-bottom: 20px; }
.sn-prose ul, .sn-prose ol { margin: 16px 0 20px 24px; }
.sn-prose ul  { list-style: disc; }
.sn-prose ol  { list-style: decimal; }
.sn-prose li  { margin-bottom: 6px; }
.sn-prose blockquote { border-left: 4px solid var(--color-primary); padding: 12px 20px; background: var(--color-surface); border-radius: 0 var(--radius) var(--radius) 0; margin: 24px 0; font-style: italic; }
.sn-prose code { background: var(--color-surface); padding: 2px 6px; border-radius: 4px; font-size: .9em; font-family: 'Courier New', monospace; }
.sn-prose pre  { background: #1c192c; color: #e5dff9; padding: 20px; border-radius: var(--radius-lg); overflow-x: auto; margin: 24px 0; }
.sn-prose pre code { background: none; padding: 0; color: inherit; }
.sn-prose img { border-radius: var(--radius-lg); margin: 24px auto; }
/* Tables in article content can have more columns than a phone screen fits.
   .sn-table-scroll is a wrapper injected around every table by app.js at
   runtime (covers tables not already wrapped in a <figure> from WP import) —
   it scrolls horizontally instead of squeezing every cell unreadably narrow. */
.sn-prose table { border-collapse: collapse; margin: 0; min-width: 100%; }
.sn-prose th, .sn-prose td { padding: 10px 14px; border: 1px solid var(--color-border); text-align: left; min-width: 130px; }
.sn-prose th { background: var(--color-surface); font-weight: 700; }
.sn-prose .sn-table-scroll,
.sn-prose figure:has(table) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 24px 0;
}
.sn-prose .sn-table-scroll table,
.sn-prose figure:has(table) table { margin: 0; }
.sn-prose a.autolink { color: var(--color-primary); border-bottom: 1px dashed var(--color-primary); text-decoration: none; }
.sn-prose a.autolink:hover { border-bottom-style: solid; }

/* ── Article tags ────────────────────────────────────────── */
.sn-article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0; }

/* ── Article FAQ accordion ───────────────────────────────── */
.sn-article__faq { margin: 40px 0; }
.sn-article__faq h2 { font-size: var(--text-xl); font-weight: 800; margin-bottom: 16px; }
.sn-faq-list { display: flex; flex-direction: column; gap: 10px; }
.sn-faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 4px 20px; background: var(--color-white); }
.sn-faq-item__q { cursor: pointer; list-style: none; padding: 16px 28px 16px 0; font-weight: 700; font-size: var(--text-base); position: relative; }
.sn-faq-item__q::-webkit-details-marker { display: none; }
.sn-faq-item__q::after { content: '+'; position: absolute; right: 0; top: 14px; font-size: 22px; font-weight: 400; color: var(--color-ink); transition: transform var(--transition); }
.sn-faq-item[open] .sn-faq-item__q::after { transform: rotate(45deg); }
.sn-faq-item__a { padding: 0 0 18px; color: var(--color-text-muted); line-height: 1.7; font-size: var(--text-sm); }

/* ── Article bottom share bar ────────────────────────────── */
.sn-article__bottom-bar { margin-top: 40px; padding: 20px; background: var(--color-surface); border-radius: var(--radius-lg); }
.sn-article__bottom-bar__inner { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: var(--text-sm); font-weight: 600; }
.sn-share-btn { padding: 8px 16px; border-radius: var(--radius-full); border: 1px solid var(--color-border); font-size: var(--text-sm); font-weight: 600; background: var(--color-white); transition: all var(--transition); }
.sn-share-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── Breadcrumbs ────────────────────────────────────────── */
.sn-breadcrumbs-wrap { padding: 16px 24px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; list-style: none; font-size: var(--text-xs); color: var(--color-text-muted); }
.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-primary); }
.separator { color: var(--color-border); }

/* ── Wiki sidebar ────────────────────────────────────────── */
.sn-wiki-sidebar { display: none; }
@media (min-width: 1024px) { .sn-wiki-sidebar { display: block; } }
.sn-wiki-sidebar__inner { position: sticky; top: calc(var(--header-h) + 24px); background: var(--color-surface); border-radius: var(--radius-lg); padding: 20px; }
.sn-wiki-sidebar h2 { font-size: var(--text-base); font-weight: 800; margin-bottom: 4px; }
.sn-wiki-sidebar__sub { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 16px; }
.sn-wiki-nav-link { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); text-decoration: none; transition: all var(--transition); }
.sn-wiki-nav-link:hover { background: var(--color-white); color: var(--color-primary); }
.sn-wiki-nav-link--active { background: var(--color-white); color: var(--color-primary); box-shadow: var(--shadow-sm); }

/* ── Wiki picks ──────────────────────────────────────────── */
.sn-wiki-picks { display: flex; flex-direction: column; gap: 12px; }
.sn-wiki-pick { display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: var(--color-white); border-radius: 18px; border: 1px solid rgba(28,25,44,.06); text-decoration: none; color: var(--color-text); transition: box-shadow .22s ease, transform .22s ease; }
.sn-wiki-pick:hover { box-shadow: 0 10px 32px rgba(28,25,44,.09); transform: translateY(-2px); text-decoration: none; }
.sn-wiki-pick__icon { width: 44px; height: 44px; border-radius: 14px; background: var(--color-primary-light); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 22px !important; flex-shrink: 0; font-variation-settings: 'FILL' 1; }
.sn-wiki-pick strong { display: block; font-size: 15px; font-weight: 700; }
.sn-wiki-pick p { font-size: 12.5px; color: var(--color-text-muted); margin-top: 3px; }
.sn-wiki-pick__arrow { margin-left: auto; font-size: 20px; color: #c9c6d8; transition: color .15s, transform .15s; }
.sn-wiki-pick:hover .sn-wiki-pick__arrow { color: var(--color-primary); transform: translateX(3px); }

/* ── Courses ─────────────────────────────────────────────── */
.sn-courses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.sn-course-card { background: var(--color-white); border-radius: var(--radius-lg); border: 1px solid var(--color-border); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--transition); }
.sn-course-card:hover { box-shadow: var(--shadow); }
.sn-course-card img { width: 100%; height: 200px; object-fit: cover; }
.sn-course-card__body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.sn-course-card h3 { font-size: var(--text-base); font-weight: 700; }
.sn-course-card p  { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; flex: 1; }
.sn-course-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.sn-course-card__price { font-size: var(--text-base); font-weight: 700; }
.sn-course-card__price s { color: var(--color-text-muted); font-weight: 400; margin-right: 6px; }

/* ── Roadmap ─────────────────────────────────────────────── */
.sn-roadmap { display: flex; flex-direction: column; gap: 40px; padding: 48px 0; }
@media (min-width: 1024px) { .sn-roadmap { flex-direction: row; align-items: center; } }
.sn-roadmap__text { flex: 1; }
.sn-roadmap__text h2 { font-size: var(--text-3xl); font-weight: 900; color: #fff; margin: 12px 0 16px; }
.sn-roadmap__text p  { font-size: var(--text-base); color: rgba(255,255,255,.7); margin-bottom: 28px; }
.sn-roadmap__badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-full); padding: 5px 14px; font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.8); margin-bottom: 12px; }
.sn-roadmap__steps { flex: 1; display: flex; gap: 12px; flex-wrap: wrap; }
@media (min-width: 640px) { .sn-roadmap__steps { flex-wrap: nowrap; } }
.sn-roadmap__step { flex: 1; min-width: 100px; background: rgba(255,255,255,.05); border-radius: var(--radius-lg); padding: 20px 16px; position: relative; border-top: 3px solid rgba(255,255,255,.2); }
.sn-roadmap__step--active { background: rgba(255,255,255,.12); border-top-color: var(--color-secondary); }
.sn-roadmap__step-num { position: absolute; top: -14px; left: -6px; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-ink); font-size: var(--text-xs); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.sn-roadmap__step--active .sn-roadmap__step-num { background: var(--color-secondary); color: #291800; }
.sn-roadmap__step .material-symbols-outlined { font-size: 28px; color: rgba(255,255,255,.6); margin-bottom: 8px; display: block; }
.sn-roadmap__step h4 { font-size: var(--text-sm); font-weight: 700; color: #fff; margin-bottom: 4px; }
.sn-roadmap__step p  { font-size: var(--text-xs); color: rgba(255,255,255,.55); }

/* ── Footer ──────────────────────────────────────────────── */
/* Тёмный премиальный футер — замыкает страницу в единый образ с шапками */
.sn-footer {
    position: relative;
    background:
        radial-gradient(90% 120% at 92% 0%, color-mix(in srgb, var(--color-primary) 22%, transparent) 0%, transparent 44%),
        radial-gradient(90% 120% at 0% 100%, rgba(124,58,237,.18) 0%, transparent 48%),
        linear-gradient(160deg, #1c192c 0%, #211c38 100%);
    border-top: none;
    padding: 72px 0 32px;
    margin-top: 56px;
}
.sn-footer__inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 1024px) { .sn-footer__inner { grid-template-columns: 340px 1fr; } }
.sn-footer__logo-text { font-size: 26px; font-weight: 900; color: #fff; letter-spacing: -.04em; }
.sn-footer__logo-text span { color: rgba(255,255,255,.45); }
.sn-footer__tagline { font-size: var(--text-sm); color: rgba(255,255,255,.6); margin: 10px 0 24px; }
.sn-footer .sn-subscribe-form .sn-input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; }
.sn-footer .sn-subscribe-form .sn-input::placeholder { color: rgba(255,255,255,.4); }
.sn-footer .sn-subscribe-form__note { color: rgba(255,255,255,.4); }
.sn-subscribe-form__row { display: flex; gap: 8px; }
.sn-subscribe-form__note { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 8px; }
.sn-input { flex: 1; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: var(--text-sm); transition: border-color var(--transition); }
.sn-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,0,0,.07); }
.sn-footer__nav-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
@media (min-width: 768px) { .sn-footer__nav-grid { grid-template-columns: repeat(4, 1fr); } }
.sn-footer__col-title { font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.5); margin-bottom: 14px; }
.sn-footer__col ul { display: flex; flex-direction: column; gap: 9px; }
.sn-footer__col a { font-size: var(--text-sm); color: rgba(255,255,255,.75); text-decoration: none; transition: color var(--transition); }
.sn-footer__col a:hover { color: #fff; }
.sn-footer__social { display: flex; gap: 12px; }
.sn-footer__social-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.75); transition: all var(--transition); }
.sn-footer__social-link:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.08); }
.sn-footer__bottom { max-width: var(--container); margin: 40px auto 0; padding: 22px 24px 0; border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: var(--text-xs); color: rgba(255,255,255,.45); }
.sn-footer__bottom .sn-btn--outline { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.8); background: transparent; }
.sn-footer__bottom .sn-btn--outline:hover { border-color: #fff; color: #fff; }
.sn-footer__credit { max-width: var(--container); margin: 14px auto 0; padding: 0 24px 22px; text-align: center; font-size: 11px; color: rgba(255,255,255,.3); }
.sn-footer__credit a { color: rgba(255,255,255,.5); text-decoration: none; }
.sn-footer__credit a:hover { color: rgba(255,255,255,.8); text-decoration: underline; }
.sn-footer__langs { display: flex; align-items: center; gap: 8px; }
.sn-footer__langs a { color: rgba(255,255,255,.55); text-decoration: none; font-weight: 700; }
.sn-footer__langs a[aria-current] { color: #fff; }

/* ── Bottom navigation (mobile) ──────────────────────────── */
.sn-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: var(--color-white); border-top: 1px solid var(--color-border); display: flex; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 20px rgba(28,25,44,.1); }
@media (min-width: 768px) { .sn-bottom-nav { display: none; } }
.sn-bottom-nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 10px 4px; font-size: 10px; font-weight: 600; color: var(--color-text-muted); text-decoration: none; transition: color var(--transition); background: none; letter-spacing: .02em; }
.sn-bottom-nav__item--active, .sn-bottom-nav__item.active { color: var(--color-primary); }
.sn-bottom-nav__item .material-symbols-outlined { font-size: 22px; }

/* ── Floating social ─────────────────────────────────────── */
.sn-float-social { position: fixed; left: 16px; top: 50%; transform: translateY(-50%); z-index: 50; display: none; flex-direction: column; gap: 8px; }
@media (min-width: 1280px) { .sn-float-social { display: flex; } }
.sn-float-social__btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-full); background: var(--color-white); border: 1px solid var(--color-border); color: var(--color-text-muted); box-shadow: var(--shadow-sm); transition: all var(--transition); }
.sn-float-social__btn:hover { box-shadow: var(--shadow); transform: scale(1.1); }
.sn-float-social__btn--tg:hover { border-color: #229ED9; color: #229ED9; }
.sn-float-social__btn--ig:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ── PWA install popup ───────────────────────────────────── */
.sn-pwa-popup { position: fixed; bottom: calc(72px + 12px); left: 12px; right: 12px; z-index: 9000; transform: translateY(28px) scale(.97); opacity: 0; transition: all .4s cubic-bezier(.34,1.56,.64,1); pointer-events: none; }
@media (min-width: 480px) { .sn-pwa-popup { left: auto; right: 20px; max-width: 340px; } }
@media (min-width: 768px) { .sn-pwa-popup { bottom: 28px; } }
.sn-pwa-popup--visible { transform: translateY(0) scale(1); opacity: 1; pointer-events: all; }
.sn-pwa-popup__inner {
    background: var(--color-white);
    border-radius: 22px;
    border: 1px solid rgba(85,81,232,.12);
    box-shadow: 0 20px 60px rgba(28,25,44,.20), 0 4px 12px rgba(85,81,232,.08);
    overflow: hidden;
    position: relative;
}
.sn-pwa-popup__inner::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #5551E8, #7c3aed, #ec4899);
    border-radius: 0;
}
.sn-pwa-popup__body { padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 0; }
.sn-pwa-popup__close { position: absolute; top: 14px; right: 14px; font-size: 20px; line-height: 1; background: rgba(0,0,0,.06); border: none; color: var(--color-text-muted); cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .15s; z-index: 1; }
.sn-pwa-popup__close:hover { background: rgba(0,0,0,.12); }
.sn-pwa-popup__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.sn-pwa-popup__actions .sn-btn--primary { width: 100%; justify-content: center; box-shadow: 0 4px 20px rgba(85,81,232,.40); letter-spacing: .01em; }
.sn-pwa-popup__actions .sn-btn--ghost { width: 100%; justify-content: center; font-size: 12px; opacity: .65; }

/* Push permission popup — icon+text row and audience-select row */
.sn-push-popup__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.sn-push-popup__icon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.sn-push-popup__text { min-width: 0; }
.sn-push-popup__text strong { display: block; font-size: 15px; font-weight: 800; line-height: 1.3; margin-bottom: 3px; }
.sn-push-popup__text p { font-size: 13px; color: var(--color-text-muted); line-height: 1.5; margin: 0; }
.sn-push-audience { display: flex; gap: 6px; margin: 14px 0 4px; }
.sn-push-aud-btn { flex: 1; min-width: 0; padding: 8px 6px; border-radius: 8px; border: 1.5px solid var(--color-border); background: none; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--color-text-muted); transition: all .15s; }
/* Topbar install indicator */
.sn-topbar__install { display: none; align-items: center; gap: 6px; background: var(--color-white); border: 1px solid rgba(28,25,44,.1); color: var(--color-text-muted); font-size: 11px; font-weight: 600; padding: 3px 12px; border-radius: 999px; cursor: pointer; transition: all .15s; white-space: nowrap; }
.sn-topbar__install:hover { border-color: var(--color-primary); color: var(--color-primary); }
.sn-topbar__install--visible { display: flex; }
/* iOS hint now uses .sn-pwa-popup */

/* ── Animated S logo ─────────────────────────────────────── */
.sn-logo-animated { display: flex; align-items: center; gap: 8px; }
.sn-logo-s {
    width: 34px; height: 34px; object-fit: contain; flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.12));
    transition: transform .3s ease;
}
.sn-header__logo:hover .sn-logo-s {
    transform: rotate(-6deg) scale(1.08);
}
@keyframes sn-bounce {
    0%,100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(8px); }
}
@keyframes sn-logo-float {
    0%,100% { transform: translateY(0) rotate(0deg); }
    30%     { transform: translateY(-4px) rotate(3deg); }
    60%     { transform: translateY(-2px) rotate(-2deg); }
}

/* ── Mobile drawer ───────────────────────────────────────── */
/* Mobile menu — bottom sheet (Adaptive Lab style) */
.sn-drawer { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.sn-drawer[aria-hidden="false"] { pointer-events: all; }
.sn-drawer__overlay { position: absolute; inset: 0; background: rgba(28,25,44,.5); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s ease; }
.sn-drawer[aria-hidden="false"] .sn-drawer__overlay { opacity: 1; }
.sn-drawer__panel {
    position: absolute; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; max-height: 88vh;
    background: var(--color-white);
    display: flex; flex-direction: column;
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
    transition: transform .5s cubic-bezier(.32,.72,0,1);
    box-shadow: 0 -12px 48px rgba(28,25,44,.18);
}
.sn-drawer__panel::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 999px; background: #e4e2ee; margin: 10px auto 2px; flex-shrink: 0; }
.sn-drawer[aria-hidden="false"] .sn-drawer__panel { transform: translateY(0); }
.sn-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px 12px; border-bottom: 1px solid #f1eff8; flex-shrink: 0; }
.sn-drawer__close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-surface); color: var(--color-text); transition: background var(--transition); }
.sn-drawer__close:hover { background: var(--color-primary-light); }
.sn-drawer__links { flex: 1; overflow-y: auto; padding: 12px 12px 20px; display: flex; flex-direction: column; gap: 2px; }
.sn-drawer__link { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius); font-size: var(--text-sm); font-weight: 600; color: var(--color-text); text-decoration: none; transition: background var(--transition), color var(--transition); }
.sn-drawer__link:hover { background: var(--color-surface); color: var(--color-primary); text-decoration: none; }
.sn-drawer__link .material-symbols-outlined { font-size: 20px; color: var(--color-text-muted); flex-shrink: 0; }
.sn-drawer__link--sub { padding-left: 32px; font-weight: 400; color: var(--color-text-muted); font-size: var(--text-xs); }
.sn-drawer__group { display: flex; flex-direction: column; gap: 2px; }
.sn-drawer__group-title { padding: 8px 14px 4px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.sn-drawer__footer { padding: 16px 20px; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
body.sn-drawer-open { overflow: hidden; }

/* ── Utility ─────────────────────────────────────────────── */
.sn-error-page { text-align: center; padding: 80px 24px; }
.sn-error-page h1 { font-size: var(--text-3xl); margin-bottom: 24px; }

/* ── Page header ─────────────────────────────────────────── */
/* Единая премиальная шапка раздела: тёмный скруглённый блок с цветными свечениями */
.sn-page-header {
    width: min(var(--container), calc(100% - 20px));
    margin: 6px auto 0;
    border-radius: 24px;
    border: none;
    padding: 46px 0 42px;
    background:
        radial-gradient(120% 160% at 85% -20%, rgba(255,255,255,.35) 0%, transparent 55%),
        radial-gradient(90% 130% at 5% 120%, rgba(0,0,0,.18) 0%, transparent 55%),
        linear-gradient(115deg, #4b4c52 0%, #5c5d64 45%, #6d6e75 100%);
    overflow: hidden;
}
.sn-page-header h1 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 900; letter-spacing: -.02em; margin-top: 12px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.22); }
.sn-page-header p { color: rgba(255,255,255,.85); margin-top: 10px; font-size: var(--text-base); max-width: 640px; text-shadow: 0 1px 3px rgba(0,0,0,.18); }
.sn-page-header .sn-breadcrumbs,
.sn-page-header .sn-breadcrumbs a { color: rgba(255,255,255,.78); text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.sn-page-header .sn-breadcrumbs a:hover { color: #fff; }
@media (max-width: 640px) { .sn-page-header { width: calc(100% - 12px); border-radius: 20px; padding: 34px 0 30px; } }

/* Модификатор: фото на фоне шапки (магазин) — то же графитовое затемнение поверх картинки */
.sn-page-header--photo { position: relative; background: none; }
.sn-page-header--photo::before {
    content: ''; position: absolute; inset: 0;
    background-image: var(--sn-shop-hero-img); background-size: cover; background-position: center;
}
.sn-page-header--photo::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(120% 160% at 85% -25%, rgba(255,255,255,.10) 0%, transparent 50%),
        linear-gradient(100deg, rgba(20,21,25,.92) 0%, rgba(26,27,31,.72) 32%, rgba(30,31,36,.28) 62%, rgba(30,31,36,.1) 100%);
}
.sn-page-header--photo .sn-container { position: relative; z-index: 1; }

/* Поиск и пилюли-фильтры внутри тёмных шапок */
.sn-dark-search { display: flex; align-items: center; gap: 8px; min-width: 280px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-full); padding: 8px 8px 8px 16px; transition: border-color .15s, background .15s; }
.sn-dark-search:focus-within { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.14); }
.sn-dark-search .material-symbols-outlined { font-size: 18px; color: rgba(255,255,255,.55); }
.sn-dark-search input { flex: 1; background: none; border: none; outline: none; color: #fff; font-size: 14px; font-family: inherit; }
.sn-dark-search input::placeholder { color: rgba(255,255,255,.45); }
.sn-dark-search__clear { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; text-decoration: none; font-size: 15px; }
.sn-dark-search__clear:hover { background: rgba(255,255,255,.28); text-decoration: none; }

.sn-dark-pills { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; margin-top: 22px; padding-bottom: 2px; scrollbar-width: none; }
.sn-dark-pills::-webkit-scrollbar { display: none; }
.sn-dark-pill { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 8px 16px; border-radius: var(--radius-full); font-size: 13px; font-weight: 700; text-decoration: none; background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); border: 1px solid transparent; transition: all .15s; }
.sn-dark-pill span { font-size: 11px; opacity: .6; }
.sn-dark-pill:hover { background: rgba(255,255,255,.18); color: #fff; text-decoration: none; }
.sn-dark-pill--active { background: #fff; color: var(--color-primary); }
.sn-dark-pill--active:hover { background: #fff; color: var(--color-primary); }

.sn-breadcrumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); }
.sn-breadcrumbs a { color: var(--color-text-muted); }
.sn-breadcrumbs a:hover { color: var(--color-primary); }

/* ── Glossary term layout ────────────────────────────────── */
.sn-glossary-layout { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 768px) { .sn-glossary-layout { grid-template-columns: 1fr 260px; gap: 40px; } }
.sn-glossary-sidebar { }
@media (min-width: 768px) { .sn-glossary-sidebar { position: sticky; top: 80px; } }
.sn-glossary-def {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: 20px 20px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text);
}
@media (min-width: 640px) { .sn-glossary-def { padding: 28px 32px; } }

/* ── Glossary / Article prose content ───────────────────── */
.sn-prose { font-size: 16px; line-height: 1.85; color: var(--color-text); }
.sn-prose h2 { font-size: clamp(18px,2.5vw,24px); font-weight: 800; margin: 36px 0 14px; color: var(--color-text); line-height: 1.3; }
.sn-prose h3 { font-size: clamp(16px,2vw,20px); font-weight: 700; margin: 28px 0 10px; color: var(--color-text); }
.sn-prose p { margin-bottom: 18px; }
.sn-prose ul, .sn-prose ol { padding-left: 22px; margin-bottom: 18px; }
.sn-prose ul { list-style: disc; }
.sn-prose ol { list-style: decimal; }
.sn-prose li { margin-bottom: 8px; line-height: 1.7; }
.sn-prose strong { font-weight: 700; }
.sn-prose em { font-style: italic; }
.sn-prose a { color: var(--color-primary); text-decoration: underline; }
.sn-prose blockquote { border-left: 4px solid var(--color-primary); margin: 24px 0; padding: 16px 20px; background: var(--color-surface); border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; color: var(--color-text-muted); }
.sn-prose img { width: 100%; border-radius: var(--radius-lg); margin: 24px 0; border: 1px solid var(--color-border); }
.sn-prose .sn-prose-note { background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius); padding: 14px 18px; font-size: 14px; color: #92400e; margin: 24px 0; display: flex; gap: 10px; align-items: flex-start; }
.sn-prose .sn-prose-warn { background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius); padding: 14px 18px; font-size: 14px; color: #991b1b; margin: 24px 0; display: flex; gap: 10px; align-items: flex-start; }
.sn-prose .sn-prose-tip  { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--radius); padding: 14px 18px; font-size: 14px; color: #166534; margin: 24px 0; display: flex; gap: 10px; align-items: flex-start; }
.sn-prose hr { border: none; border-top: 1px solid var(--color-border); margin: 32px 0; }
.sn-prose-footnotes { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--color-border); font-size: 13px; color: var(--color-text-muted); line-height: 1.6; }
.sn-prose-footnotes ol { padding-left: 18px; }
.sn-prose-footnotes li { margin-bottom: 6px; }

/* ── Blog layout ─────────────────────────────────────────── */
.sn-blog-layout { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 1024px) { .sn-blog-layout { grid-template-columns: 1fr 280px; } }
.sn-blog-main { min-width: 0; }
.sn-blog-sidebar { display: none; }
@media (min-width: 1024px) { .sn-blog-sidebar { display: block; } }
.sn-blog-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px)  { .sn-blog-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1200px) { .sn-blog-grid { grid-template-columns: repeat(3,1fr); } }
/* Wide 21/9 crop loses most of the illustration on narrow screens — use a taller crop there. */
@media (max-width: 640px) { .sn-blog-featured > div { aspect-ratio: 4/3 !important; } }
.sn-sidebar-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.sn-sidebar-card__header { padding: 14px 16px; font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.sn-sidebar-card__body { padding: 14px 16px; }
.sn-sidebar-list { padding: 0; }
.sn-sidebar-list li { border-bottom: 1px solid var(--color-border); }
.sn-sidebar-list li:last-child { border-bottom: 0; }
.sn-sidebar-list a { display: block; padding: 10px 16px; font-size: 13px; color: var(--color-text); transition: color var(--transition); }
.sn-sidebar-list a:hover { color: var(--color-primary); }

/* ── Article grid ────────────────────────────────────────── */
.sn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.sn-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); }
.sn-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sn-card__img-wrap { display: block; aspect-ratio: 16/9; overflow: hidden; }
.sn-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.sn-card:hover .sn-card__img { transform: scale(1.04); }
.sn-card__body { padding: 16px; }
.sn-card__title { font-size: 15px; font-weight: 700; line-height: 1.4; margin-bottom: 8px; }
.sn-card__title a { color: var(--color-text); }
.sn-card__title a:hover { color: var(--color-primary); }
.sn-card__excerpt { font-size: 13px; color: var(--color-text-muted); line-height: 1.6; }

/* ── Article meta ────────────────────────────────────────── */
.sn-article-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--color-text-muted); flex-wrap: wrap; }
.sn-article-meta span { display: flex; align-items: center; gap: 4px; }

/* ── Tags ────────────────────────────────────────────────── */
.sn-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sn-tag { display: inline-flex; align-items: center; align-self: flex-start; width: fit-content; padding: 4px 10px; border-radius: var(--radius-full); background: var(--color-bg); border: 1px solid var(--color-border); font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-decoration: none; transition: all var(--transition); }
.sn-tag:hover, .sn-tag--active { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); }

/* ── Featured card ───────────────────────────────────────── */
.sn-featured-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--transition); }
.sn-featured-card:hover { box-shadow: var(--shadow-lg); }
.sn-featured-card__img { position: relative; aspect-ratio: 16/7; overflow: hidden; }
.sn-featured-card__img img { width: 100%; height: 100%; object-fit: cover; }
.sn-featured-card__img .sn-badge { position: absolute; top: 12px; left: 12px; }
.sn-featured-card__body { padding: 24px; }
.sn-featured-card__title { font-size: 22px; font-weight: 800; line-height: 1.3; margin: 12px 0; }
.sn-featured-card__title a { color: var(--color-text); }
.sn-featured-card__title a:hover { color: var(--color-primary); }
.sn-featured-card__excerpt { color: var(--color-text-muted); line-height: 1.7; margin-bottom: 16px; }

/* ── Pagination ──────────────────────────────────────────── */
.sn-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }

/* ── Wiki grid ───────────────────────────────────────────── */
.sn-wiki-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.sn-wiki-card { display: flex; align-items: center; gap: 12px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 14px 16px; text-decoration: none; color: var(--color-text); transition: all var(--transition); }
.sn-wiki-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow); transform: translateY(-2px); }
.sn-wiki-card__letter { width: 36px; height: 36px; border-radius: 8px; background: var(--color-primary-light); color: var(--color-primary); font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sn-wiki-card__body { flex: 1; min-width: 0; }
.sn-wiki-card__title { font-size: 14px; font-weight: 600; }
.sn-wiki-card__excerpt { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Alphabet filter ─────────────────────────────────────── */
.sn-alphabet { display: flex; flex-wrap: wrap; gap: 6px; }
.sn-alpha-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: 8px; font-size: 13px; font-weight: 700; background: var(--color-white); border: 1px solid var(--color-border); color: var(--color-text-muted); text-decoration: none; transition: all var(--transition); }
.sn-alpha-btn:hover, .sn-alpha-btn--active { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }

/* ── Auth card ───────────────────────────────────────────── */
.sn-auth-card { background: var(--color-white); border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); padding: 28px; }
.sn-auth-divider { position: relative; text-align: center; margin: 20px 0; }
.sn-auth-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--color-border); }
.sn-auth-divider span { position: relative; background: var(--color-white); padding: 0 12px; font-size: 12px; color: var(--color-text-muted); font-weight: 500; }
.sn-btn--google { width: 100%; justify-content: center; background: var(--color-white); border: 1px solid var(--color-border); color: var(--color-text); font-size: 14px; font-weight: 600; padding: 11px 20px; gap: 10px; border-radius: 8px; transition: all var(--transition); margin-bottom: 10px; }
.sn-btn--google:hover { border-color: #4285F4; box-shadow: var(--shadow-sm); text-decoration: none; }
.sn-btn--yandex { width: 100%; justify-content: center; background: #FC3F1D; border: none; color: #fff; font-size: 14px; font-weight: 600; padding: 11px 20px; gap: 10px; border-radius: 8px; transition: all var(--transition); margin-bottom: 10px; }
.sn-btn--yandex:hover { background: #e63516; box-shadow: var(--shadow-sm); color: #fff; text-decoration: none; }
.sn-field { display: flex; flex-direction: column; gap: 6px; }
.sn-label { font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.sn-input { padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 14px; font-family: inherit; background: #fff; transition: border-color var(--transition), box-shadow var(--transition); width: 100%; color: var(--color-text); }
.sn-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,0,0,.07); }
.sn-alert { padding: 12px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; }
.sn-alert--error { background: #fde8e8; color: #ba1a1a; }
.sn-alert--success { background: #d1fae5; color: #065f46; }

/* ── Author hero ─────────────────────────────────────────── */
.sn-author-hero { display: flex; gap: 32px; align-items: flex-start; padding: 32px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow); }
@media (max-width: 768px) { .sn-author-hero { flex-direction: column; align-items: center; text-align: center; padding: 24px; } }
.sn-author-hero__photo { flex-shrink: 0; }
.sn-author-hero__photo img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid var(--color-primary-light); }
.sn-author-hero__initials { width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(135deg,var(--color-ink),var(--color-ink-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: 800; }
.sn-author-hero__role { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-ink); margin-bottom: 6px; }
.sn-author-hero__name { font-size: 28px; font-weight: 800; margin-bottom: 12px; }
.sn-author-hero__bio { color: var(--color-text-muted); line-height: 1.7; max-width: 540px; margin-bottom: 20px; }
.sn-author-stats { display: flex; gap: 24px; margin-bottom: 20px; }
@media (max-width: 768px) { .sn-author-stats { justify-content: center; } }
.sn-author-stat { text-align: center; }
.sn-author-stat__num { font-size: 24px; font-weight: 800; color: var(--color-ink); display: block; }
.sn-author-stat__label { font-size: 12px; color: var(--color-text-muted); }
.sn-author-socials { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 768px) { .sn-author-socials { justify-content: center; } }
.sn-social-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-muted); transition: all var(--transition); }
.sn-social-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; transform: scale(1.1); }

/* ── Search results ──────────────────────────────────────── */
.sn-search-result { padding-bottom: 20px; border-bottom: 1px solid var(--color-border); }

/* ── Section title ───────────────────────────────────────── */
.sn-section-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }

/* ── Badges ──────────────────────────────────────────────── */
.sn-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--radius-full); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sn-badge--articles { background: #fde8e8; color: #991b1b; }
.sn-badge--wiki { background: var(--color-primary-light); color: var(--color-primary); }
.sn-badge--commercial { background: #fef3c7; color: #92400e; }
.sn-badge--qa { background: #e0f2fe; color: #075985; }
.sn-badge--glossary { background: #ede9fe; color: #5b21b6; }

/* ── Buttons ─────────────────────────────────────────────── */
.sn-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all var(--transition); white-space: nowrap; text-decoration: none; border: none; font-family: inherit; }
.sn-btn:hover { text-decoration: none; }
.sn-btn--primary {
    background: linear-gradient(135deg, rgba(124,111,150,.62), rgba(83,73,105,.62));
    backdrop-filter: blur(16px) saturate(1.6);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 16px rgba(28,25,44,.12);
    color: #fff; font-family: 'Rubik', var(--font-sans, inherit);
}
.sn-btn--primary:hover { background: linear-gradient(135deg, rgba(124,111,150,.78), rgba(83,73,105,.78)); color: #fff; }
.sn-btn--outline { border: 1px solid #d4d4d8; color: #45464c; background: var(--color-white); box-shadow: none; border-radius: 999px; font-weight: 500; }
.sn-btn--outline:hover { border-color: #9a9aa1; color: #1c192c; background: var(--color-white); }
.sn-btn--sm { padding: 6px 12px; font-size: 12px; }