/*
 * DVE Strategy gold-trading brand layer
 *
 * The tokens live in dve.css. This final cascade only assigns those tokens to
 * existing components, keeping the application layout and interaction logic
 * unchanged while providing one consistent luxury gold/charcoal visual system.
 */

/* Dark-surface guard: these deliberately win over legacy or cached light
   declarations so no public, member, checkout, or admin view can fall back to
   a white canvas. */
html {
    background: var(--bg-main) !important;
}

body,
body.site-body,
body.dashboard-body,
body.checkout-body,
.landing-shell,
.landing-shell > main,
.dashboard-shell,
.dashboard-main,
.admin-shell,
.admin-main,
.checkout-shell,
.auth-body {
    color: var(--text-primary) !important;
    background-color: var(--bg-main) !important;
}

body.site-body,
body.dashboard-body,
body.checkout-body {
    background-image:
        radial-gradient(circle at 72% 24%, rgba(212, 175, 55, .07), transparent 35%),
        linear-gradient(180deg, var(--bg-main) 0%, var(--bg-secondary) 100%) !important;
}

.public-nav,
.app-header,
.checkout-header,
.app-sidebar,
.mobile-drawer {
    background: rgba(11, 11, 12, .96) !important;
    border-color: rgba(212, 175, 55, .16) !important;
}

.offer-card {
    background:
        linear-gradient(180deg, rgba(24, 24, 25, .98), rgba(14, 14, 15, .98)) !important;
    border-color: rgba(212, 175, 55, .42) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55), 0 0 40px rgba(212, 175, 55, .06) !important;
}

.price-callout {
    color: var(--gold-bright) !important;
    border-color: rgba(212, 175, 55, .55) !important;
    background: linear-gradient(135deg, rgba(212, 175, 55, .12), rgba(212, 175, 55, .04)) !important;
}

.benefit-list {
    background: rgba(255, 255, 255, .015) !important;
}

.benefit-list li {
    color: var(--text-primary) !important;
    border-bottom-color: rgba(255, 255, 255, .05) !important;
    background: rgba(255, 255, 255, .005) !important;
}

.hero h1,
.offer-card h2,
.trust-row strong,
.value-grid h3 {
    color: var(--text-primary) !important;
}

.hero-intro,
.trust-row small,
.value-grid p {
    color: var(--text-secondary) !important;
}

.hero .eyebrow,
.offer-subtitle,
.eyebrow {
    color: var(--gold-primary) !important;
}

.hero-actions .btn:not(.btn-outline) {
    color: var(--bg-main) !important;
    border-color: rgba(255, 255, 255, .08) !important;
    background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-primary) 55%, var(--gold-deep) 100%) !important;
    box-shadow: 0 8px 30px rgba(212, 175, 55, .18), inset 0 1px rgba(255, 255, 255, .35) !important;
}

.hero-actions .btn-outline {
    color: var(--text-primary) !important;
    border-color: rgba(212, 175, 55, .28) !important;
    background: var(--bg-card) !important;
}

.hero-actions .btn-outline svg {
    color: var(--gold-primary) !important;
}

html,
body {
    background: var(--color-bg);
}

body {
    color: var(--color-text);
    background-image:
        radial-gradient(circle at 86% -5%, rgba(212, 175, 55, .10), transparent 31%),
        radial-gradient(circle at 3% 96%, rgba(184, 137, 30, .08), transparent 30%),
        linear-gradient(135deg, var(--color-bg), var(--color-bg-secondary));
}

::selection {
    color: var(--color-bg);
    background: var(--color-gold-bright);
}

:where(h1, h2, h3, h4, h5, h6) {
    color: var(--color-text);
}

a:not(.btn) {
    color: var(--color-link);
}

a:not(.btn):hover {
    color: var(--color-gold-bright);
}

.site-body,
.dashboard-body,
.checkout-body {
    background:
        radial-gradient(circle at 80% 3%, rgba(212, 175, 55, .11), transparent 27%),
        linear-gradient(135deg, var(--color-bg), var(--color-bg-secondary) 56%, var(--color-bg));
}

/* Navigation and global chrome */
.public-nav,
.app-header,
.checkout-header,
.app-sidebar,
.mobile-drawer {
    border-color: var(--color-border);
    background: rgba(11, 11, 12, .90);
    box-shadow: inset 0 -1px var(--color-border-subtle);
}

.app-sidebar,
.mobile-drawer {
    background: linear-gradient(180deg, var(--color-card-elevated), var(--color-bg));
}

.brand-dve,
.eyebrow,
.offer-subtitle,
.dash-greeting h1 em,
.section-title svg,
.panel-heading a,
.page-heading a,
.back-link:hover {
    color: var(--color-gold-bright);
}

.desktop-links a,
.mobile-drawer > a:not(.btn),
.back-link {
    color: var(--color-text-secondary);
}

.desktop-links a:hover,
.desktop-links .is-current {
    color: var(--color-gold-bright);
    border-color: var(--color-gold);
}

.eyebrow span,
.offer-subtitle span {
    border-color: var(--color-gold-deep);
}

.mobile-menu-trigger,
.sidebar-trigger,
.drawer-top button {
    color: var(--color-text);
}

/* Buttons, links, form controls, and focus states */
.btn {
    color: var(--color-bg);
    border-color: var(--color-gold-bright);
    background: linear-gradient(135deg, var(--color-gold-bright), var(--color-gold-deep));
    box-shadow: inset 0 1px rgba(255, 255, 255, .38), 0 10px 26px rgba(212, 175, 55, .20);
}

.btn:hover {
    color: var(--color-bg);
    background: linear-gradient(135deg, var(--color-gold-bright), var(--color-gold));
    box-shadow: inset 0 1px rgba(255, 255, 255, .45), 0 14px 31px rgba(212, 175, 55, .30);
}

.btn-outline,
.btn-outline.amber,
.cancel-link,
.help-card a,
.live-unlock-button {
    color: var(--color-gold-bright);
    border-color: var(--color-border);
    background: rgba(11, 11, 12, .48);
    box-shadow: none;
}

.btn-outline:hover,
.btn-outline.amber:hover,
.cancel-link:hover,
.help-card a:hover,
.live-unlock-button:hover {
    color: var(--color-bg);
    border-color: var(--color-gold-bright);
    background: var(--color-gold-bright);
}

.danger-button {
    color: var(--color-danger);
    border-color: var(--color-danger);
    background: rgba(224, 150, 138, .08);
}

.auth-card input,
.admin-form input,
.admin-form textarea,
.admin-form select,
.filter-bar input,
.filter-bar select,
.responsive-data-table .admin-button-row input[type="text"],
.address-copy {
    color: var(--color-text);
    border-color: var(--color-border);
    background: var(--color-bg-secondary);
}

.auth-card input:focus,
.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus,
.filter-bar input:focus,
.filter-bar select:focus,
.responsive-data-table .admin-button-row input[type="text"]:focus {
    border-color: var(--color-gold-bright);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .16);
}

.check-label input,
.admin-form input[type="checkbox"] {
    accent-color: var(--color-gold);
}

/* Reusable panels and cards */
.offer-card,
.value-grid,
.auth-card,
.flash,
.stat-grid article,
.access-banner,
.side-panel,
.featured-card,
.lesson-card,
.updates-panel,
.stream-note,
.checkout-summary,
.checkout-step,
.payment-details-card,
.how-it-works,
.admin-stat,
.admin-panel,
.help-card,
.admin-fieldset,
.streaming-platform-card,
.responsive-data-table tr,
.empty-card {
    border-color: var(--color-border);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)),
        linear-gradient(135deg, var(--color-card-elevated), var(--color-card));
    box-shadow: inset 0 1px rgba(255, 255, 255, .035), var(--shadow);
}

.offer-card:hover,
.value-grid article:hover,
.admin-stat:hover,
.admin-panel:hover,
.lesson-card:hover,
.streaming-platform-card:hover {
    border-color: var(--color-gold);
}

.value-grid article + article::before,
.trust-row > div + div,
.summary-data,
.summary-data span,
.processor-note,
.qr-panel,
.update-row,
.data-table td,
.video-admin-row,
.admin-list-row,
.how-it-works article:not(:last-child)::after {
    border-color: var(--color-border-subtle);
}

.hero h1,
.story-section h2,
.offer-card h2,
.auth-card h1,
.checkout-shell > h1,
.lesson-page-head h1,
.page-heading h1,
.dash-greeting h1,
.live-analysis-panel .panel-heading h3,
.live-title-row > strong,
.featured-copy h2 {
    color: var(--color-text);
}

.hero-intro,
.checkout-intro,
.offer-description,
.story-section > div > p:last-child,
.auth-card > p:not(.eyebrow),
.checkout-step > p,
.payment-data > p {
    color: var(--color-text-secondary);
}

.market-visual {
    background-image:
        linear-gradient(rgba(212, 175, 55, .065) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 175, 55, .065) 1px, transparent 1px);
}

.market-bars {
    background: repeating-linear-gradient(to bottom, transparent 0 13px, rgba(184, 137, 30, .34) 14px 25px, transparent 26px 32px);
}

.market-line {
    border-color: rgba(212, 175, 55, .58);
}

.candles b {
    background: linear-gradient(var(--color-gold-bright), var(--color-gold-deep));
    box-shadow: 0 -12px 0 -5px var(--color-gold-bright), 0 12px 0 -5px var(--color-gold-deep);
}

.candles b:nth-child(2),
.candles b:nth-child(4),
.candles b:nth-child(7),
.candles b:nth-child(10) {
    background: linear-gradient(var(--color-success), var(--color-success-deep));
}

.trust-row svg,
.value-grid svg,
.stat-grid svg,
.access-icon svg,
.summary-lock svg,
.how-it-works article > svg,
.stream-note > svg,
.empty-player svg,
.sidebar-nav svg,
.help-card > svg,
.account-chip > span,
.account-initials {
    color: var(--color-gold);
}

.price-callout {
    color: var(--color-gold-bright);
    border-color: var(--color-gold);
    background: rgba(212, 175, 55, .055);
    box-shadow: inset 0 0 22px rgba(212, 175, 55, .055);
}

.price-callout svg {
    color: var(--color-gold-bright);
    fill: var(--color-gold-bright);
    stroke: var(--color-gold-deep);
}

.benefit-list,
.benefit-list li,
.protected-player {
    border-color: var(--color-border-subtle);
}

.benefit-list svg {
    color: var(--color-gold-bright);
    fill: var(--color-gold-bright);
    stroke: var(--color-gold-deep);
}

/* Dashboard, membership, and account views */
.sidebar-nav a,
.sidebar-nav button {
    color: var(--color-text-secondary);
}

.sidebar-nav a.active,
.sidebar-nav a:hover,
.sidebar-nav button:hover {
    color: var(--color-bg);
    background: linear-gradient(105deg, var(--color-gold-bright), var(--color-gold-deep));
}

.sidebar-nav a.active svg,
.sidebar-nav a:hover svg,
.sidebar-nav button:hover svg {
    color: var(--color-bg);
}

.account-chip > span,
.account-initials {
    border-color: var(--color-gold-deep);
    background: var(--color-card-elevated);
}

.account-chip form button {
    color: var(--color-text-secondary);
}

.access-banner::after {
    background: repeating-linear-gradient(90deg, transparent 0 13px, var(--color-gold) 14px 23px);
}

.access-granted {
    border-color: var(--color-success);
    background: linear-gradient(100deg, rgba(63, 111, 79, .20), var(--color-card));
}

.access-locked {
    border-color: var(--color-gold);
    background: linear-gradient(100deg, rgba(212, 175, 55, .10), var(--color-card));
}

.access-granted .access-icon svg,
.access-granted .access-title strong,
.access-title b {
    color: var(--color-success);
}

.access-locked .access-icon svg,
.access-locked .access-title strong,
.access-locked .access-title b {
    color: var(--color-gold-bright);
}

.featured-media,
.protected-player {
    background: var(--color-bg);
}

.lesson-order {
    color: var(--color-bg);
    background: linear-gradient(135deg, var(--color-gold-bright), var(--color-gold-deep));
}

.lesson-info small,
.update-row time,
.stat-grid small {
    color: var(--color-text-secondary);
}

/* Live analysis mirrors the provided reference: dark surface, gold hierarchy,
   defined gold countdown cells, and branded social icons inside gold controls. */
.live-analysis-panel {
    border-color: var(--color-border);
    background:
        radial-gradient(circle at 100% 100%, rgba(212, 175, 55, .08), transparent 29%),
        linear-gradient(135deg, var(--color-card-elevated), var(--color-card));
}

.live-analysis-panel .panel-heading h3,
.live-analysis-panel .panel-heading a,
.live-title-row > strong {
    color: var(--color-gold-bright);
}

.live-analysis-panel .live-event {
    border-color: var(--color-border);
    background:
        radial-gradient(circle at 70% 5%, rgba(212, 175, 55, .10), transparent 34%),
        linear-gradient(135deg, var(--color-card-elevated), var(--color-card));
    box-shadow: inset 0 1px rgba(255, 255, 255, .035);
}

.live-analysis-panel .live-event > svg {
    color: var(--color-gold-bright);
}

.live-event-copy > small,
.live-analysis-panel .countdown small {
    color: var(--color-text-secondary);
}

.live-analysis-panel .countdown {
    border-color: var(--color-border);
    background: var(--color-bg-secondary);
    box-shadow: inset 0 0 24px rgba(212, 175, 55, .055);
}

.live-analysis-panel .countdown-unit {
    background: linear-gradient(145deg, rgba(255, 255, 255, .025), transparent);
}

.live-analysis-panel .countdown-unit + .countdown-unit {
    border-color: var(--color-border);
}

.live-analysis-panel .countdown b {
    color: var(--color-gold-bright);
    text-shadow: 0 2px rgba(184, 137, 30, .55);
}

.live-platform-btn,
.live-platform-btn--tiktok,
.live-platform-btn--youtube,
.live-platform-btn--instagram {
    color: var(--color-text);
    border-color: var(--color-border);
    background: linear-gradient(135deg, var(--color-card-elevated), var(--color-card));
    box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 0 0 1px rgba(212, 175, 55, .035);
}

.live-platform-btn:hover,
.live-platform-btn--tiktok:hover,
.live-platform-btn--youtube:hover,
.live-platform-btn--instagram:hover {
    color: var(--color-gold-bright);
    border-color: var(--color-gold-bright);
    box-shadow: inset 0 1px rgba(255, 255, 255, .045), 0 8px 24px rgba(212, 175, 55, .15);
}

.live-now-badge {
    color: var(--color-success);
    border-color: var(--color-success);
    background: rgba(63, 111, 79, .22);
}

.live-event.is-live {
    border-color: var(--color-success);
    box-shadow: inset 0 0 36px rgba(63, 111, 79, .14);
}

.live-event.is-ended {
    border-color: var(--color-border-subtle);
}

.live-event.is-ended .live-event-copy > p,
.live-event.is-ended .live-event-copy > small {
    color: var(--color-text-muted);
}

.streaming-platform-card,
.streaming-platform-card--tiktok,
.streaming-platform-card--youtube,
.streaming-platform-card--instagram {
    border-color: var(--color-border);
    background: var(--color-card);
}

/* Checkout and payment states */
.summary-data .gold-price,
.crypto-amount {
    color: var(--color-gold-bright);
}

.summary-data span > svg,
.secure-note svg,
.info-strip svg,
.payment-warning svg,
.streaming-notice svg {
    color: var(--color-gold);
}

.secure-note b {
    color: var(--color-success);
}

.payment-options span {
    color: var(--color-text);
    border-color: var(--color-border);
    background: var(--color-bg-secondary);
}

.payment-options input:checked + span {
    border-color: var(--color-gold-bright);
    background: rgba(212, 175, 55, .11);
    box-shadow: 0 0 0 1px var(--color-gold);
}

.payment-options i {
    color: var(--color-gold-bright);
}

.info-strip,
.payment-warning,
.resume-payment,
.streaming-notice {
    color: var(--color-text-secondary);
    border-color: var(--color-border);
    background: rgba(212, 175, 55, .065);
}

.address-copy code,
.address-copy button {
    color: var(--color-text);
}

.address-copy button {
    border-color: var(--color-border);
}

.status-line svg {
    color: var(--color-gold-bright);
}

.status-finished svg {
    color: var(--color-success);
}

.status-failed svg,
.status-expired svg {
    color: var(--color-danger);
}

/* Administration, tables, badges, and notification states */
.admin-stat svg,
.admin-fieldset legend,
.data-table th,
.responsive-data-table td::before {
    color: var(--color-gold);
}

.data-table td,
.data-table td small,
.admin-form label,
.video-admin-row p,
.admin-list-row small {
    color: var(--color-text-secondary);
}

.status-badge {
    color: var(--color-gold-bright);
    border-color: var(--color-border);
    background: rgba(212, 175, 55, .09);
}

.status-finished,
.flash-success {
    color: var(--color-success);
    border-color: var(--color-success);
    background: rgba(63, 111, 79, .17);
}

.status-waiting,
.status-confirming,
.status-partially_paid,
.flash-warning {
    color: var(--color-warning);
    border-color: var(--color-gold-deep);
    background: rgba(212, 175, 55, .10);
}

.status-failed,
.status-expired,
.flash-error {
    color: var(--color-danger);
    border-color: var(--color-danger);
    background: rgba(224, 150, 138, .10);
}

.flash-success svg,
.status-finished svg {
    color: var(--color-success);
}

.flash-warning svg,
.status-waiting svg,
.status-confirming svg,
.status-partially_paid svg {
    color: var(--color-warning);
}

.flash-error svg,
.status-failed svg,
.status-expired svg {
    color: var(--color-danger);
}

/* A final default removes the legacy blue icon treatment. Branded platform
   marks retain their own recognizable colors via their existing selectors. */
svg:not(.platform-icon) {
    color: var(--color-gold);
}

.btn:not(.btn-outline) svg {
    color: var(--color-bg);
}

.btn-outline svg,
.cancel-link svg,
.help-card a svg,
.live-unlock-button svg {
    color: var(--color-gold-bright);
}

.access-granted svg,
.flash-success svg,
.status-finished svg {
    color: var(--color-success);
}

.status-failed svg,
.status-expired svg,
.flash-error svg {
    color: var(--color-danger);
}

/* Liquid glass finishing layer: dark translucent surfaces, restrained edge
   highlights, and depth inspired by Apple's glass treatment. The opacity stays
   low so the site remains a premium charcoal/gold trading interface. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .public-nav,
    .app-header,
    .checkout-header,
    .mobile-drawer {
        -webkit-backdrop-filter: blur(22px) saturate(135%);
        backdrop-filter: blur(22px) saturate(135%);
        background: linear-gradient(135deg, rgba(29, 29, 31, .76), rgba(9, 9, 10, .88)) !important;
    }

    .offer-card,
    .value-grid,
    .value-grid article,
    .auth-card,
    .stat-grid article,
    .access-banner,
    .side-panel,
    .featured-card,
    .lesson-card,
    .updates-panel,
    .stream-note,
    .checkout-summary,
    .checkout-step,
    .payment-details-card,
    .how-it-works,
    .admin-stat,
    .admin-panel,
    .help-card,
    .admin-fieldset,
    .streaming-platform-card,
    .responsive-data-table tr {
        -webkit-backdrop-filter: blur(18px) saturate(130%);
        backdrop-filter: blur(18px) saturate(130%);
    }

    .auth-card,
    .stat-grid article,
    .access-banner,
    .side-panel,
    .featured-card,
    .lesson-card,
    .updates-panel,
    .stream-note,
    .checkout-summary,
    .checkout-step,
    .payment-details-card,
    .how-it-works,
    .admin-stat,
    .admin-panel,
    .help-card,
    .admin-fieldset,
    .streaming-platform-card,
    .responsive-data-table tr {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012) 45%, rgba(255, 255, 255, 0)),
            linear-gradient(145deg, rgba(28, 29, 32, .78), rgba(15, 16, 18, .72)) !important;
    }
}

.offer-card,
.auth-card,
.side-panel,
.featured-card,
.checkout-summary,
.payment-details-card,
.admin-panel,
.help-card,
.streaming-platform-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.offer-card::after,
.side-panel::after,
.checkout-summary::after,
.payment-details-card::after,
.admin-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: .72;
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .10), transparent 31%),
        radial-gradient(circle at 100% 0%, rgba(243, 207, 99, .13), transparent 36%);
}

.offer-card,
.side-panel,
.checkout-summary,
.payment-details-card,
.admin-panel {
    border-top-color: rgba(243, 207, 99, .45) !important;
    box-shadow:
        inset 0 1px rgba(255, 255, 255, .13),
        inset 0 -1px rgba(0, 0, 0, .28),
        0 18px 46px rgba(0, 0, 0, .34),
        0 0 30px rgba(212, 175, 55, .045) !important;
}

.value-grid,
.auth-card,
.stat-grid article,
.access-banner,
.featured-card,
.lesson-card,
.updates-panel,
.stream-note,
.checkout-step,
.how-it-works,
.admin-stat,
.help-card,
.admin-fieldset,
.streaming-platform-card,
.responsive-data-table tr {
    border-top-color: rgba(255, 255, 255, .11) !important;
    box-shadow:
        inset 0 1px rgba(255, 255, 255, .09),
        inset 0 -1px rgba(0, 0, 0, .24),
        0 12px 32px rgba(0, 0, 0, .24) !important;
}

.value-grid article {
    background: linear-gradient(145deg, rgba(255, 255, 255, .038), rgba(255, 255, 255, .008)) !important;
}

.offer-card:hover,
.value-grid article:hover,
.stat-grid article:hover,
.featured-card:hover,
.lesson-card:hover,
.admin-stat:hover,
.admin-panel:hover,
.streaming-platform-card:hover {
    border-color: rgba(243, 207, 99, .52) !important;
    box-shadow:
        inset 0 1px rgba(255, 255, 255, .15),
        inset 0 -1px rgba(0, 0, 0, .25),
        0 18px 42px rgba(0, 0, 0, .32),
        0 0 28px rgba(212, 175, 55, .10) !important;
}

/* Layered acrylic buttons retain their function while feeling more tactile. */
.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-color: rgba(255, 255, 255, .20);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 38%),
        linear-gradient(135deg, var(--gold-bright), var(--gold-primary) 55%, var(--gold-deep));
    box-shadow:
        inset 0 1px rgba(255, 255, 255, .48),
        inset 0 -1px rgba(104, 69, 8, .35),
        0 10px 26px rgba(212, 175, 55, .21),
        0 1px 2px rgba(0, 0, 0, .45);
}

.btn::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(115deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 33%);
}

.btn:hover {
    border-color: rgba(255, 255, 255, .36);
    filter: brightness(1.06) saturate(1.04);
    box-shadow:
        inset 0 1px rgba(255, 255, 255, .56),
        inset 0 -1px rgba(104, 69, 8, .32),
        0 14px 32px rgba(212, 175, 55, .31),
        0 3px 5px rgba(0, 0, 0, .38);
}

.hero-actions .btn:not(.btn-outline) {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 37%),
        linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-primary) 55%, var(--gold-deep) 100%) !important;
    box-shadow:
        inset 0 1px rgba(255, 255, 255, .50),
        inset 0 -1px rgba(104, 69, 8, .35),
        0 10px 28px rgba(212, 175, 55, .24),
        0 2px 4px rgba(0, 0, 0, .40) !important;
}

.btn-outline,
.btn-outline.amber,
.cancel-link,
.help-card a,
.live-unlock-button {
    border-color: rgba(243, 207, 99, .35) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .008) 48%),
        rgba(20, 21, 24, .72) !important;
    box-shadow:
        inset 0 1px rgba(255, 255, 255, .11),
        inset 0 -1px rgba(0, 0, 0, .30),
        0 8px 22px rgba(0, 0, 0, .20) !important;
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
}

.btn-outline:hover,
.btn-outline.amber:hover,
.cancel-link:hover,
.help-card a:hover,
.live-unlock-button:hover {
    color: var(--bg-main) !important;
    border-color: rgba(255, 255, 255, .32) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 42%),
        linear-gradient(135deg, var(--gold-bright), var(--gold-primary)) !important;
}

.auth-card input,
.admin-form input,
.admin-form textarea,
.admin-form select,
.filter-bar input,
.filter-bar select,
.responsive-data-table .admin-button-row input[type="text"],
.address-copy,
.payment-options span {
    border-color: rgba(255, 255, 255, .10) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, 0) 55%),
        rgba(11, 12, 14, .70) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .055), inset 0 -1px rgba(0, 0, 0, .24);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
}

.auth-card input:focus,
.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus,
.filter-bar input:focus,
.filter-bar select:focus,
.responsive-data-table .admin-button-row input[type="text"]:focus {
    border-color: var(--gold-primary) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .10), inset 0 1px rgba(255, 255, 255, .08) !important;
}

/* Accessible password visibility control, inserted by the shared interface script. */
.password-field {
    position: relative;
    display: block;
    width: 100%;
}

.password-field > input[type="password"],
.password-field > input[type="text"] {
    padding-right: 52px !important;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 9px;
    z-index: 1;
    display: inline-grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    color: var(--gold-primary);
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    transform: translateY(-50%);
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.password-toggle:hover {
    color: var(--gold-bright);
    border-color: rgba(243, 207, 99, .20);
    background: rgba(212, 175, 55, .08);
}

.password-toggle:focus-visible {
    outline: 0;
    color: var(--gold-bright);
    border-color: var(--gold-primary);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .14);
}

.password-toggle svg {
    width: 18px;
    height: 18px;
}

/* Authenticated member pages share the persistent dashboard shell. */
.member-dashboard-content .member-account-shell {
    margin: 32px auto 50px;
}

.member-dashboard-content .checkout-shell {
    margin-top: 23px;
}

@media (max-width: 560px) {
    .member-dashboard-content .member-account-shell {
        margin-top: 6px;
    }
}

/* Floating Telegram support widget. */
#telegram-widget {
    --tg-bottom: 24px;
    --tg-offset: 24px;
    position: fixed;
    right: var(--tg-offset);
    bottom: calc(var(--tg-bottom) + env(safe-area-inset-bottom, 0px));
    z-index: 70;
    display: flex;
    align-items: center;
    width: auto;
    color: #fff;
    font-family: "DM Sans", system-ui, sans-serif;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 22px, 0) scale(.97);
    transition: opacity .42s ease, transform .42s cubic-bezier(.2,.8,.2,1), visibility .42s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#telegram-widget.ready {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0) scale(1);
}

#telegram-widget[data-position="left"] { left: var(--tg-offset); right: auto; }

#telegram-widget a { color: #fff; text-decoration: none; }

#telegram-widget .tg-icon { color: #fff !important; fill: #fff !important; }

#telegram-widget .tg-fab { position: relative; width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; }
#telegram-widget .tg-fab-glow { position: absolute; inset: -5px; border-radius: 50%; background: rgba(42,171,238,.42); animation: tg-widget-pulse 2.4s ease-out infinite; }
#telegram-widget .tg-icon-wrap { position: relative; z-index: 1; width: 100%; height: 100%; display: grid; place-items: center; border: 3px solid #dff5ff; border-radius: 50%; background: linear-gradient(145deg, #2aabee, #229ed9 58%, #168ac5); color: #fff; box-shadow: 0 11px 26px rgba(0,0,0,.32), inset 0 2px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(8,104,164,.28); transition: transform .22s ease, box-shadow .22s ease; }
#telegram-widget .tg-fab:hover .tg-icon-wrap,
#telegram-widget .tg-fab:focus-visible .tg-icon-wrap { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 30px rgba(0,0,0,.36), 0 0 25px rgba(42,171,238,.5), inset 0 2px 0 rgba(255,255,255,.5); }
#telegram-widget .tg-icon { width: 35px; height: 35px; }
#telegram-widget .tg-notification-dot { position: absolute; z-index: 2; top: 0; right: 1px; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: #ff2d3d; box-shadow: 0 2px 8px rgba(0,0,0,.24); }
#telegram-widget .tg-fab:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

@keyframes tg-widget-pulse {
    0% { opacity: .48; transform: scale(.92); }
    70%, 100% { opacity: 0; transform: scale(1.2); }
}

@media (max-width: 600px) {
    #telegram-widget { right: 14px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: auto; }
    #telegram-widget .tg-fab { width: 52px; height: 52px; flex-basis: 52px; }
    #telegram-widget .tg-icon { width: 29px; height: 29px; }
    #telegram-widget .tg-notification-dot { width: 12px; height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    #telegram-widget,
    #telegram-widget .tg-fab-glow { animation: none; transition: none; }
}

.telegram-widget-avatar-preview {
    width: 72px;
    height: 72px;
    margin-top: -6px;
    border: 2px solid var(--color-gold);
    border-radius: 50%;
    object-fit: cover;
}

.live-analysis-panel .countdown,
.live-analysis-panel .countdown-unit,
.live-platform-btn,
.live-platform-btn--tiktok,
.live-platform-btn--youtube,
.live-platform-btn--instagram {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 48%),
        rgba(18, 19, 22, .74) !important;
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
    box-shadow: inset 0 1px rgba(255, 255, 255, .09), inset 0 -1px rgba(0, 0, 0, .24), 0 8px 22px rgba(0, 0, 0, .20) !important;
}

.price-callout {
    box-shadow:
        inset 0 1px rgba(255, 255, 255, .18),
        inset 0 -1px rgba(104, 69, 8, .28),
        0 8px 24px rgba(212, 175, 55, .10) !important;
    -webkit-backdrop-filter: blur(13px) saturate(135%);
    backdrop-filter: blur(13px) saturate(135%);
}

@media (prefers-reduced-motion: no-preference) {
    .offer-card,
    .value-grid article,
    .stat-grid article,
    .featured-card,
    .lesson-card,
    .admin-stat,
    .admin-panel,
    .streaming-platform-card {
        transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
    }

    .value-grid article:hover,
    .stat-grid article:hover,
    .featured-card:hover,
    .lesson-card:hover,
    .admin-stat:hover,
    .streaming-platform-card:hover {
        transform: translateY(-2px);
    }
}

/* The menu backdrop must only exist while the off-canvas menu is open. Without
   this, its fixed pseudo-element sits above the page and dims every mobile
   surface, even though the menu itself is translated out of view. */
@media (max-width: 880px) {
    .hero-copy,
    .hero h1,
    .hero .hero-intro {
        text-align: left !important;
    }

    .hero h1,
    .hero .hero-intro {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    /* A phone can be wider than 560 CSS pixels in landscape or when browser
       zoom is changed. Keep these calls to action compact throughout the
       mobile/tablet navigation breakpoint, rather than letting flex stretch
       them across the full hero. */
    .hero-actions {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        width: min(100%, 306px);
        margin-inline: 0;
        margin-bottom: 30px;
    }

    .hero-actions .btn {
        width: 100%;
        min-height: 50px;
        padding-inline: 20px;
        font-size: 16px;
    }

    .mobile-drawer::before {
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility 0s linear .25s;
    }

    .mobile-drawer.open::before {
        opacity: 1;
        visibility: visible;
        transition: opacity .25s ease;
    }
}

/* Keep the mobile calls to action compact and anchored to the hero copy,
   matching the original left-aligned layout without altering their colours. */
@media (max-width: 560px) {
    .hero-actions {
        width: min(100%, 286px);
    }

    .hero-actions .btn {
        min-height: 48px;
    }

    .hero h1,
    .hero .hero-intro {
        margin-inline: 0;
        text-align: left !important;
    }
}