:root {
    --panel-bg-matte: rgba(8, 8, 10, 0.78);
    --panel-bg-matte-hover: rgba(10, 10, 12, 0.86);
    --panel-border-gold: rgba(204, 163, 0, 0.78);
    --panel-border-gold-soft: rgba(204, 163, 0, 0.52);
    --panel-text-strong: #f5f5f7;
    --panel-text-soft: rgba(245, 245, 247, 0.84);
    --panel-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
}

:root[data-theme="dark"] {
    --panel-bg-matte: rgba(8, 8, 10, 0.78);
    --panel-bg-matte-hover: rgba(10, 10, 12, 0.86);
    --panel-border-gold: rgba(204, 163, 0, 0.78);
    --panel-border-gold-soft: rgba(204, 163, 0, 0.52);
    --panel-text-strong: #f5f5f7;
    --panel-text-soft: rgba(245, 245, 247, 0.84);
    --panel-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
}

/* Core panel shell: square geometry + gold border + matte black surface */
:is(.glass-panel, .wanted-card, .mode-card, .info-panel, .beta-card, .mode-panel, .support-card, .feature-card, .mode-detail-card) {
    background: var(--panel-bg-matte);
    border: 1.5px solid var(--panel-border-gold);
    border-radius: 6px;
    color: var(--panel-text-soft);
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    transition: transform 0.35s ease, border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, filter 0.3s ease;
}

:is(.glass-panel, .wanted-card, .mode-card, .info-panel, .beta-card, .mode-panel, .support-card, .feature-card, .mode-detail-card):hover {
    transform: translateY(-4px);
    background: var(--panel-bg-matte-hover);
    border-color: #dfb739;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55);
}

:is(.glass-panel, .wanted-card, .mode-card, .info-panel, .beta-card, .mode-panel, .support-card, .feature-card, .mode-detail-card) h1,
:is(.glass-panel, .wanted-card, .mode-card, .info-panel, .beta-card, .mode-panel, .support-card, .feature-card, .mode-detail-card) h2,
:is(.glass-panel, .wanted-card, .mode-card, .info-panel, .beta-card, .mode-panel, .support-card, .feature-card, .mode-detail-card) h3,
:is(.glass-panel, .wanted-card, .mode-card, .info-panel, .beta-card, .mode-panel, .support-card, .feature-card, .mode-detail-card) h4,
:is(.glass-panel, .wanted-card, .mode-card, .info-panel, .beta-card, .mode-panel, .support-card, .feature-card, .mode-detail-card) strong {
    color: var(--panel-text-strong) !important;
}

:is(.glass-panel, .wanted-card, .mode-card, .info-panel, .beta-card, .mode-panel, .support-card, .feature-card, .mode-detail-card) p,
:is(.glass-panel, .wanted-card, .mode-card, .info-panel, .beta-card, .mode-panel, .support-card, .feature-card, .mode-detail-card) li,
:is(.glass-panel, .wanted-card, .mode-card, .info-panel, .beta-card, .mode-panel, .support-card, .feature-card, .mode-detail-card) span {
    color: var(--panel-text-soft) !important;
}

/* Keep image/gradient banner backgrounds while adding matte layer */
.banner-card {
    border: 1.5px solid var(--panel-border-gold);
    border-radius: 6px;
    box-shadow: var(--panel-shadow), inset 0 0 0 9999px rgba(8, 8, 10, 0.36);
    transition: transform 0.35s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.banner-card:hover {
    transform: translateY(-4px);
    border-color: #dfb739;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55), inset 0 0 0 9999px rgba(8, 8, 10, 0.42);
}

.banner-card h3,
.banner-card .banner-price {
    color: var(--panel-text-strong) !important;
}

.banner-card .banner-sub,
.banner-card .feature-list li,
.banner-card .urgency-label,
.banner-card .savings-tag {
    color: var(--panel-text-soft) !important;
}

.banner-card .banner-badge {
    border: 1px solid var(--panel-border-gold-soft) !important;
    background: rgba(204, 163, 0, 0.16) !important;
    color: #e9c95c !important;
}

/* Store mode panels: disable local accent colors and keep gold+black uniform */
.mode-panel {
    --panel-accent: #cca300 !important;
    --panel-glow: rgba(204, 163, 0, 0.2) !important;
}

.mode-panel .panel-title {
    background: none !important;
    -webkit-text-fill-color: var(--panel-text-strong) !important;
    color: var(--panel-text-strong) !important;
    text-shadow: none !important;
}

.mode-panel .panel-cta,
.mode-panel .panel-cta svg,
.mode-panel .panel-icon {
    color: #e9c95c !important;
    stroke: #e9c95c !important;
}

.mode-panel::before,
.mode-panel::after {
    opacity: 0.22 !important;
}

/* Support cards: reduce bright overlays so matte shell stays readable */
.support-card::before,
.support-card::after {
    opacity: 0.24 !important;
}

.support-card.day-one::after {
    opacity: 0.34 !important;
}

/* Home info anchors */
.panel-anchor {
    border-radius: 8px !important;
    background: rgba(8, 8, 10, 0.9) !important;
    border: 1.5px solid var(--panel-border-gold-soft) !important;
    color: var(--panel-text-strong) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35) !important;
    transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease !important;
}

.panel-anchor:hover {
    transform: translateY(-3px) !important;
    background: rgba(10, 10, 12, 0.95) !important;
    border-color: var(--panel-border-gold) !important;
}

/* Badge/readability alignment on index info+beta */
.beta-card .badge,
.mode-card .badge,
.wanted-badge {
    border: 1px solid var(--panel-border-gold-soft) !important;
}

@media (max-width: 600px) {
    :is(.glass-panel, .wanted-card, .mode-card, .info-panel, .beta-card, .mode-panel, .support-card, .feature-card, .mode-detail-card, .banner-card) {
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42);
    }
}