/* ============================================================
   hub-account.css — общий визуальный слой витрин
   Поверхности и скругления синхронизированы с /account.php.
   Структура и логика самих страниц остаются локальными.
   ============================================================ */

/* The tools hero is a sibling of .th-wrap and needs its own inherited tokens. */
body .fx-content :is(.faq-page, .th-wrap, .th-band, .tests-hub) {
    --hub-panel-radius: var(--fx-radius-lg);
    --hub-inner-radius: var(--fx-radius-md);
    --hub-control-radius: var(--fx-radius-sm);
    --hub-panel-bg:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--fx-bg-elevated) 88%, transparent),
            color-mix(in srgb, var(--fx-bg-deep) 78%, transparent)
        );
    --hub-panel-shadow:
        0 24px 70px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.05);
    --hub-inner-bg: color-mix(in srgb, var(--fx-bg-deep) 76%, transparent);
    --hub-card-glint: linear-gradient(
        120deg,
        rgba(255,255,255,.035),
        transparent 25%,
        transparent 72%,
        var(--fx-ac1-soft)
    );
}

/* Общий фон: мягкие цветовые пятна как в кабинете, без яркого лендингового glow. */
body .fx-content :is(.faq-page, .tests-hub)::before,
body .fx-content :is(.faq-page, .tests-hub)::after {
    opacity: .7;
    filter: blur(110px);
}

/* Главный блок страницы. */
body .fx-content :is(.faq-hero, .th-hero, .tests-hero) {
    border: 1px solid var(--fx-border);
    border-radius: var(--hub-panel-radius);
    background:
        radial-gradient(circle at 8% 0%, var(--fx-ac1-soft), transparent 40%),
        radial-gradient(circle at 100% 100%, var(--fx-ac2-soft), transparent 44%),
        var(--hub-panel-bg);
    box-shadow: var(--hub-panel-shadow);
    -webkit-backdrop-filter: blur(24px) saturate(125%);
    backdrop-filter: blur(24px) saturate(125%);
}

body .fx-content :is(.faq-hero, .th-hero, .tests-hero)::after {
    opacity: .45;
}

/* Вложенные панели и превью в hero. */
body .fx-content :is(.faq-hero-board, .th-hero-board, .tests-hero-visual) {
    border-color: var(--fx-border);
    border-radius: var(--hub-inner-radius);
    background:
        linear-gradient(145deg, rgba(255,255,255,.025), transparent),
        var(--hub-inner-bg);
    box-shadow: 0 18px 48px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.04);
}

body .fx-content :is(.faq-stat, .th-hero-stat) {
    border-color: var(--fx-border);
    border-radius: var(--hub-control-radius);
    background: var(--fx-bg-subtle);
}

body .fx-content :is(.faq-stat, .th-hero-stat):first-child {
    background:
        radial-gradient(circle at 0 0, var(--fx-ac1-soft), transparent 58%),
        linear-gradient(145deg, var(--fx-bg-subtle), var(--fx-ac2-soft));
}

/* Поиск и фильтры повторяют поля и вложенные настройки кабинета. */
body .fx-content :is(.faq-search, .th-search) {
    border: 1px solid var(--fx-border);
    border-radius: var(--hub-control-radius);
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008)),
        var(--hub-inner-bg);
    box-shadow: none;
}

body .fx-content :is(.faq-search, .th-search):focus-within {
    border-color: var(--fx-ac1);
    background: color-mix(in srgb, var(--fx-bg-deep) 88%, transparent);
    box-shadow: 0 0 0 3px var(--fx-ac1-soft);
}

body .fx-content .faq-filters,
body .fx-content .th-filters {
    border: 1px solid var(--fx-border);
    border-radius: var(--hub-inner-radius);
    background: color-mix(in srgb, var(--fx-bg-elevated) 86%, transparent);
    box-shadow: 0 14px 36px rgba(0,0,0,.20), inset 0 1px rgba(255,255,255,.035);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

body .fx-content .th-filters {
    margin-bottom: 38px;
    padding: 10px;
}

body .fx-content :is(.faq-filter, .th-chip) {
    border-radius: var(--fx-radius-sm);
    background: transparent;
}

body .fx-content .th-chip {
    padding: 9px 14px;
    border-color: transparent;
}

body .fx-content .th-chip.active,
body .fx-content .faq-filter[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--fx-ac2) 25%, transparent);
    color: var(--fx-ac2);
    background: var(--fx-ac2-soft);
    box-shadow: inset 0 1px rgba(255,255,255,.035);
}

/* Основные карточки всех четырёх витрин. */
body .fx-content :is(.faq-card, .pack-card, .test-card, .th-feature-card) {
    border: 1px solid var(--fx-border);
    border-radius: var(--hub-panel-radius);
    background: var(--hub-panel-bg);
    box-shadow: var(--hub-panel-shadow);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    backdrop-filter: blur(20px) saturate(120%);
}

body .fx-content :is(.faq-card, .pack-card, .test-card, .th-feature-card):hover {
    transform: translateY(-3px);
    border-color: var(--fx-border-strong);
    box-shadow: 0 28px 76px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.07);
}

body .fx-content .faq-card[open] {
    border-color: color-mix(in srgb, var(--section-accent) 32%, var(--fx-border));
    box-shadow: 0 26px 74px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.06);
}

/* FAQ: внешние панели, вложенные блоки и контролы используют общие токены. */
body .fx-content .faq-summary {
    min-height: 112px;
    padding: 20px 22px;
}

body .fx-content .faq-plus {
    border-color: var(--fx-border);
    border-radius: var(--fx-radius-sm);
    background: var(--fx-bg-subtle);
}

body .fx-content .faq-card-body {
    padding: 0 22px 22px;
    border-top-color: var(--fx-border);
    background: var(--fx-bg-subtle);
}

body .fx-content .faq-flow {
    border-color: var(--fx-border);
    border-radius: var(--hub-inner-radius);
    background: var(--hub-inner-bg);
}

body .fx-content .faq-flow li + li { border-color: var(--fx-border); }

body .fx-content :is(.faq-result, .faq-note) {
    border-radius: var(--hub-control-radius);
    background: var(--fx-bg-subtle);
}

body .fx-content .faq-result {
    border-color: color-mix(in srgb, var(--section-accent) 20%, var(--fx-border));
}

body .fx-content .faq-note {
    border-color: color-mix(in srgb, var(--fx-gold) 18%, var(--fx-border));
    background: var(--fx-gold-soft);
}

body .fx-content .faq-open {
    border-radius: var(--hub-control-radius);
    background: var(--fx-bg-subtle);
}

body .fx-content .faq-help {
    border-color: var(--fx-border);
    border-radius: var(--hub-panel-radius);
    background:
        radial-gradient(circle at 0 0, var(--fx-ac1-soft), transparent 46%),
        radial-gradient(circle at 100% 100%, var(--fx-ac2-soft), transparent 48%),
        var(--hub-panel-bg);
    box-shadow: var(--hub-panel-shadow);
}

body .fx-content .faq-help a {
    border-radius: var(--hub-control-radius);
    color: var(--fx-text-inverse);
    background: linear-gradient(135deg, var(--fx-ac1), var(--fx-ac2));
    box-shadow: 0 9px 22px var(--fx-ac1-soft);
}

/* === Общий широкий hero для публичных витрин === */
.fx-hero-band {
    --band-a-rgb: var(--fx-ac1-rgb);
    --band-b-rgb: var(--fx-ac2-rgb);
    --band-max: 1300px;
    --band-cols: 1.15fr .85fr;
    position: relative;
    display: flex;
    width: 100%;
    min-height: min(78dvh, 720px);
    margin: -52px 0 0;
    padding-top: 52px;
    align-items: center;
    box-sizing: border-box;
    overflow: visible;
    isolation: isolate;
    container: hero-band / inline-size;
}
/* Only decoration bleeds past the stage/sidebar. Anchoring to the right also
   avoids 100vw overflowing the page when the browser reserves a scrollbar. */
.fx-hero-band__bg {
    position: absolute; inset: 0 0 0 calc(100% - 100vw); z-index: 0;
    overflow: hidden; pointer-events: none;
    border-bottom: 1px solid var(--fx-border);
    background:
        radial-gradient(900px 600px at 18% 15%, rgba(var(--band-a-rgb), .28), transparent 65%),
        radial-gradient(700px 500px at 85% 80%, rgba(var(--band-b-rgb), .16), transparent 65%),
        #05050a;
}
.fx-hero-band__bg i { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.fx-hero-band__bg .a {
    width: 620px; height: 620px; top: -180px; left: -120px;
    background: radial-gradient(circle, rgba(var(--band-a-rgb), .32), transparent 65%);
    animation: fxBandA 34s ease-in-out infinite alternate;
}
.fx-hero-band__bg .b {
    width: 520px; height: 520px; right: -100px; bottom: -160px;
    background: radial-gradient(circle, rgba(var(--band-b-rgb), .22), transparent 65%);
    animation: fxBandB 40s ease-in-out infinite alternate-reverse;
}
.fx-hero-band__bg .v {
    inset: 0; border-radius: 0; filter: none;
    background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .55));
}
.fx-hero-band__fade {
    position: absolute; right: 0; bottom: 0; left: calc(100% - 100vw); z-index: 1; height: 150px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--fx-bg-main));
}
.fx-hero-band__inner {
    position: relative;
    z-index: 2;
    display: grid;
    width: 100%;
    max-width: var(--band-max);
    margin: 0 auto;
    padding: 56px 40px 90px;
    grid-template-columns: var(--band-cols);
    gap: 40px;
    align-items: center;
    box-sizing: border-box;
    animation: fxBandIn .9s ease-out;
}
@keyframes fxBandA { to { transform: translate3d(90px, 60px, 0); } }
@keyframes fxBandB { to { transform: translate3d(-70px, -50px, 0); } }
@keyframes fxBandIn { from { opacity: 0; transform: translateY(16px); } }

/* === Единый бейдж тарифа === */
.fx-tier {
    --tier: var(--fx-tier-free);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 7px;
    border: 1px solid color-mix(in srgb, var(--tier) 38%, transparent);
    border-radius: var(--fx-radius-pill);
    color: var(--tier);
    background: color-mix(in srgb, var(--tier) 12%, transparent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}
.fx-tier::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tier);
    box-shadow: 0 0 8px var(--tier);
}
.fx-tier--pro { --tier: var(--fx-tier-pro); }
.fx-tier--ultra { --tier: var(--fx-tier-ultra); }
.fx-tier--solid { color: var(--fx-text-inverse); background: var(--tier); border-color: var(--tier); }
.fx-tier--solid::before { background: var(--fx-text-inverse); box-shadow: none; opacity: .6; }

/* === Единая спокойная палитра разделов === */
body .fx-content :is(.pack-cover, .spot-card, .row-icon, .do-tile-icon, .app-icon, .sec-card-icon, .th-section-icon, .th-nav-icon) {
    --cover-a: var(--fx-ac1);
    --cover-b: var(--fx-ac2);
    background:
        radial-gradient(circle at 22% 10%, color-mix(in srgb, var(--cover-a) 22%, transparent), transparent 52%),
        radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--cover-b) 14%, transparent), transparent 48%),
        linear-gradient(145deg, color-mix(in srgb, var(--cover-a) 16%, #14151c), rgba(13, 14, 20, .9));
    box-shadow: inset 0 1px rgba(255, 255, 255, .035);
}
body .fx-content :is(.pack-cover, .spot-card, .row-icon, .do-tile-icon, .app-icon, .sec-card-icon, .th-section-icon, .th-nav-icon).bg-visual { --cover-a: #7a4df5; --cover-b: #ff6eaa; }
body .fx-content :is(.pack-cover, .spot-card, .row-icon, .do-tile-icon, .app-icon, .sec-card-icon, .th-section-icon, .th-nav-icon).bg-texts { --cover-a: #5b7cff; --cover-b: #38e8c5; }
body .fx-content :is(.pack-cover, .spot-card, .row-icon, .do-tile-icon, .app-icon, .sec-card-icon, .th-section-icon, .th-nav-icon).bg-music { --cover-a: #38e8c5; --cover-b: #7a4df5; }
body .fx-content :is(.pack-cover, .spot-card, .row-icon, .do-tile-icon, .app-icon, .sec-card-icon, .th-section-icon, .th-nav-icon).bg-audio { --cover-a: #2fb8ff; --cover-b: #38e8c5; }
body .fx-content :is(.pack-cover, .spot-card, .row-icon, .do-tile-icon, .app-icon, .sec-card-icon, .th-section-icon, .th-nav-icon).bg-studio { --cover-a: #ffda6b; --cover-b: #7a4df5; }
body .fx-content :is(.pack-cover, .spot-card, .row-icon, .do-tile-icon, .app-icon, .sec-card-icon, .th-section-icon, .th-nav-icon).bg-management { --cover-a: #ff8a4c; --cover-b: #ffda6b; }
body .fx-content :is(.pack-cover, .spot-card, .row-icon, .do-tile-icon, .app-icon, .sec-card-icon, .th-section-icon, .th-nav-icon).bg-games { --cover-a: #38e8c5; --cover-b: #ffda6b; }

@media (max-width: 900px) {
    .fx-hero-band { min-height: auto; }
    .fx-hero-band__inner { grid-template-columns: 1fr; gap: 30px; padding: 56px 16px 80px; }
    .fx-hero-band__bg .b { display: none; }
}
/* Use the space remaining next to the sidebar, not just the viewport width. */
@container hero-band (max-width: 900px) {
    .fx-hero-band__inner { grid-template-columns: 1fr; gap: 30px; padding: 56px 16px 80px; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-hero-band__bg .a,
    .fx-hero-band__bg .b,
    .fx-hero-band__inner { animation: none; }
}

/* Tools: яркие обложки заменены на спокойные цветные поверхности кабинета. */
body .fx-content .th-feature-card {
    min-height: 222px;
    padding: 22px;
}

body .fx-content .th-feature-icon,
body .fx-content .pack-icon-large {
    display: grid;
    place-items: center;
    border: 1px solid var(--fx-border);
    border-radius: var(--hub-control-radius);
    background: var(--fx-bg-subtle);
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

body .fx-content .pack-icon-large {
    width: 70px;
    height: 70px;
}

body .fx-content .pack-icon-large img {
    width: 34px;
    height: 34px;
}

body .fx-content .pack-cover {
    border-bottom-color: var(--fx-border);
    box-shadow: inset 0 1px rgba(255,255,255,.035);
}

body .fx-content .pack-cover.bg-audio {
    background:
        radial-gradient(circle at 22% 10%, var(--fx-ac2-soft), transparent 46%),
        linear-gradient(145deg, rgba(25,38,47,.86), rgba(13,14,20,.74));
}

body .fx-content .pack-cover.bg-visual {
    background:
        radial-gradient(circle at 20% 0, var(--fx-ac1-soft), transparent 48%),
        linear-gradient(145deg, rgba(35,29,52,.88), rgba(13,14,20,.74));
}

body .fx-content .pack-cover.bg-promo {
    background:
        radial-gradient(circle at 18% 0, var(--fx-gold-soft), transparent 46%),
        linear-gradient(145deg, rgba(42,35,27,.86), rgba(13,14,20,.74));
}

body .fx-content .pack-cover.bg-tech {
    background:
        radial-gradient(circle at 18% 0, var(--fx-ac1-soft), transparent 44%),
        radial-gradient(circle at 100% 100%, var(--fx-ac2-soft), transparent 46%),
        linear-gradient(145deg, rgba(27,29,40,.88), rgba(13,14,20,.74));
}

body .fx-content .pack-glass-label {
    border-color: var(--fx-border);
    border-radius: var(--fx-radius-sm);
    background: color-mix(in srgb, var(--fx-bg-deep) 72%, transparent);
}

body .fx-content .pack-body { padding: 20px 21px 19px; }

body .fx-content .pack-arrow,
body .fx-content .th-feature-go i {
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-radius-sm);
    color: var(--fx-text-main);
    background: var(--fx-bg-subtle);
}

body .fx-content .pack-card:hover .pack-arrow,
body .fx-content .th-feature-card:hover .th-feature-go i {
    color: var(--fx-text-inverse);
    background: var(--fx-ac2);
}

/* Tests: те же карточки, но индивидуальный акцент сохраняется. */
body .fx-content .test-cover {
    border-bottom-color: var(--fx-border);
    background:
        radial-gradient(circle at 50% 0, color-mix(in srgb, var(--test-accent) 12%, transparent), transparent 62%),
        var(--hub-inner-bg);
}

body .fx-content .test-cover::after {
    border-color: color-mix(in srgb, var(--test-accent) 15%, transparent);
}

body .fx-content .test-icon {
    border-color: color-mix(in srgb, var(--test-accent) 24%, var(--fx-border));
    border-radius: var(--hub-control-radius);
    background: color-mix(in srgb, var(--test-accent) 8%, var(--fx-bg-elevated));
}

body .fx-content .test-meta span {
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-radius-sm);
    background: var(--fx-bg-subtle);
}

body .fx-content .test-action i {
    border-radius: var(--fx-radius-sm);
    color: var(--fx-text-inverse);
}

body .fx-content .tests-how {
    overflow: hidden;
    border-color: var(--fx-border);
    border-radius: var(--hub-panel-radius);
    background: var(--hub-panel-bg);
    box-shadow: var(--hub-panel-shadow);
}

body .fx-content .tests-how-step + .tests-how-step { border-color: var(--fx-border); }

@media (max-width: 620px) {
    body .fx-content :is(.faq-page, .th-wrap, .th-band, .tests-hub) {
        --hub-panel-radius: var(--fx-radius-md);
        --hub-inner-radius: var(--fx-radius-sm);
        --hub-control-radius: var(--fx-radius-sm);
    }

    body .fx-content .faq-card-body { padding: 0 16px 18px; }
    body .fx-content .th-filters { border-radius: var(--hub-inner-radius); }
}

@media (prefers-reduced-motion: reduce) {
    body .fx-content :is(.faq-card, .pack-card, .test-card, .th-feature-card) {
        transition: none;
    }
}