:root {
    --bg-color: #e8ecf1;
    --text-color: #0f172a;
    --muted-color: #64748b;
    --border-color: #cbd5e1;
    --card-bg: #ffffff;
    --card-hover-bg: #f8fafc;
    --primary: #0f172a;
    --primary-foreground: #ffffff;
    --primary-color: #0f172a;
    --secondary-color: #f1f5f9;
    --radius: 12px;
}

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

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Navbar */
.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
}

.nav-container {
    max-width: 1536px;
    margin: 0 auto;
    padding: 0 1rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.025em;
}

.logo-img {
    height: 2rem;
    width: 2rem;
    border-radius: 0.5rem;
    object-fit: cover;
}

.fallback-logo {
    background-color: var(--primary);
    color: var(--primary-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-links {
    display: none;
}

@media (min-width: 768px) {
    .nav-links {
        display: flex;
        gap: 1.5rem;
        font-size: 0.875rem;
        font-weight: 500;
    }
}

.nav-links a {
    color: var(--muted-color);
    transition: color 0.2s;
}

.nav-links a:hover, .nav-links a.active {
    color: var(--text-color);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    height: 2.25rem;
    padding: 0 1rem;
    transition: all 0.2s;
    cursor: pointer;
}

.btn-large {
    height: 3.5rem;
    padding: 0 2rem;
    font-size: 1rem;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.btn-primary:hover {
    background-color: #1e293b;
}

.btn-secondary {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.btn-secondary:hover {
    background-color: var(--card-bg);
}

.shadow-hover:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Hero Section */
.hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6rem 1rem;
}

.hero-content {
    max-width: 48rem;
}

.hero-title {
    font-size: 4.5rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
    margin-bottom: 1.5rem;
}

.hero-description {
    font-size: 1.25rem;
    color: var(--muted-color);
    margin-bottom: 2.5rem;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* Container */
.container {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1rem 5rem 1rem;
    width: 100%;
}

/* Page Header */
.page-header {
    margin-top: 3rem;
    margin-bottom: 2rem;
}

.page-title {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin-bottom: 0.5rem;
}

.page-description {
    color: var(--muted-color);
    font-size: 1.125rem;
}

/* Category Nav */
.category-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 4rem;
    margin-top: 2rem;
}

.category-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    border-radius: 24px;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background-color: var(--card-bg);
    color: var(--muted-color);
    border: 1px solid var(--border-color);
    transition: all 0.3s;
    cursor: pointer;
}

.category-btn:hover {
    background-color: var(--card-hover-bg);
    color: var(--text-color);
}

.category-btn.active {
    background-color: var(--primary);
    color: var(--primary-foreground);
    transform: scale(1.05);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    border-color: var(--primary);
}

.category-icon {
    margin-bottom: 0.375rem;
    opacity: 0.8;
    width: 1.25rem;
    height: 1.25rem;
}

/* Search Bar */
.search-container {
    position: relative;
    max-width: 42rem;
    margin: 0 auto 3rem auto;
}

.search-icon {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted-color);
    width: 1.25rem;
    height: 1.25rem;
}

.search-input {
    width: 100%;
    height: 4rem;
    padding-left: 3.5rem;
    border-radius: 9999px;
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
    font-size: 1.125rem;
    color: var(--text-color);
    transition: all 0.2s;
    font-family: inherit;
}

.search-input:focus {
    outline: none;
    border-color: var(--muted-color);
    box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.05);
}

/* Commands Grid */
.commands-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .commands-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.command-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem;
    border-radius: 32px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    overflow: hidden;
    animation: fadeInUp 0.6s ease backwards;
    cursor: pointer;
}

.command-card:hover {
    background-color: var(--card-hover-bg);
    border-color: var(--muted-color);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.command-card:active {
    transform: translateY(-2px) scale(0.98);
    box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.1);
    transition: all 0.1s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    z-index: 10;
}

.card-header h3 {
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    transition: color 0.2s ease;
    position: relative;
    z-index: 2;
}

.command-card:hover .card-header h3 {
    color: #6366f1;
}

.cmd-badge {
    padding: 0.25rem 0.75rem;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    font-size: 0.625rem;
    font-family: monospace;
    color: var(--muted-color);
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
}

.command-card:hover .cmd-badge {
    background-color: #6366f1;
    color: white;
    border-color: #6366f1;
}

.card-description {
    color: var(--muted-color);
    font-size: 0.875rem;
    font-weight: 500;
    flex: 1;
    z-index: 10;
    margin-bottom: 1rem;
    transition: color 0.2s ease;
    position: relative;
    z-index: 2;
}

.command-card:hover .card-description {
    color: var(--text-color);
}

.card-usage {
    z-index: 10;
    background-color: #f1f5f9;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-family: monospace;
    font-size: 0.75rem;
    color: #334155;
    font-weight: 600;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
}

.command-card:hover .card-usage {
    background-color: #e0e7ff;
    border-color: #6366f1;
}

.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
    z-index: 10;
    position: relative;
    z-index: 2;
}

.tag {
    padding: 0.375rem 0.75rem;
    background-color: #e2e8f0;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
    transition: all 0.2s ease;
}

.command-card:hover .tag {
    transform: translateY(-2px);
}

.tag-admin {
    background-color: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

/* No Results */
.no-results {
    grid-column: 1 / -1;
    padding: 5rem 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.no-results.hidden {
    display: none;
}

.no-results-icon {
    width: 2rem;
    height: 2rem;
    color: var(--border-color);
    margin-bottom: 1.5rem;
}

.no-results h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.no-results p {
    color: var(--muted-color);
    font-size: 1.125rem;
}

/* SPA Views */
.view {
    opacity: 0;
    transition: opacity 0.3s ease;
    display: block; /* ensure block by default so transition works when removing .hidden */
}

.view.fade-in {
    opacity: 1;
}

.hidden {
    display: none !important;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    padding-top: 2rem;
}

.feature-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
}

.feature-icon {
    color: var(--primary-color);
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.5rem;
}

.feature-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-color);
}

.feature-card p {
    font-size: 0.875rem;
    color: var(--muted-color);
    line-height: 1.5;
}

/* --- About Page Redesign --- */

.about-section {
    padding: 6rem 0;
}

.bg-alt {
    background-color: var(--secondary-color);
}

.about-hero {
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #f8fafc 100%);
}

.about-hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-title {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: var(--text-color);
    letter-spacing: -0.02em;
}

.about-subtitle {
    font-size: 1.25rem;
    color: var(--text-color);
    margin-bottom: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
}

.about-desc {
    font-size: 1rem;
    color: var(--muted-color);
    line-height: 1.7;
    margin-bottom: 2.5rem;
    max-width: 540px;
}

.about-hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.glass-logo-container {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: auto;
    min-width: auto;
    transition: none;
}

.glass-logo-container img {
    max-width: 250px;
    max-height: 250px;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
}

.about-text-container {
    max-width: 800px;
    margin: 0 auto;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 2rem;
    color: var(--text-color);
}

.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    color: var(--muted-color);
    line-height: 1.8;
}

.glass-card p {
    margin-bottom: 1.5rem;
}
.glass-card p:last-child {
    margin-bottom: 0;
}

.mission-checklist {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.mission-checklist.no-list {
    grid-template-columns: 1fr;
}

.mission-checklist li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-color);
}

.mission-checklist li i {
    color: #10b981; /* Green */
}
.mission-checklist li i.text-danger {
    color: #ef4444; /* Red */
}

.icon-wrapper {
    background-color: var(--secondary-color);
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 1rem;
}
.icon-wrapper i {
    color: var(--primary-color);
}

.badges-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
}

.badge {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-color);
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
}
.badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border-color: var(--primary-color);
}

.vision-text {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--muted-color);
    max-width: 800px;
    margin: 0 auto;
}

.promise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.promise-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.promise-icon-wrapper {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.promise-icon-wrapper i {
    width: 2rem;
    height: 2rem;
}
.text-red { color: #ef4444 !important; }
.text-blurple { color: #5865F2 !important; }
.text-green { color: #10b981 !important; }
.text-orange { color: #f97316 !important; }
.text-blue { color: #3b82f6 !important; }

.about-cta {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1e1b4b 100%);
    padding: 8rem 0;
    color: white;
}

.cta-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: white;
}

.cta-desc {
    font-size: 1.25rem;
    opacity: 0.9;
    max-width: 700px;
    margin: 0 auto 3rem;
    line-height: 1.6;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-blurple {
    background-color: #5865F2;
    color: white;
}
.btn-blurple:hover {
    background-color: #4752C4;
}
.about-cta .btn-secondary {
    background-color: rgba(255,255,255,0.1);
    color: white;
    border-color: rgba(255,255,255,0.2);
}
.about-cta .btn-secondary:hover {
    background-color: rgba(255,255,255,0.2);
}

/* Animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .about-hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .about-hero-buttons {
        justify-content: center;
    }
    .mission-checklist {
        grid-template-columns: 1fr;
    }
}

/* --- Home Page Redesign --- */

.home-hero-glow {
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 80vw;
    height: 80vw;
    max-width: 800px;
    max-height: 800px;
    background: radial-gradient(circle, rgba(88, 101, 242, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: -1;
    pointer-events: none;
}

.home-hero {
    padding: 10rem 0 6rem;
    position: relative;
}

.home-hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(88, 101, 242, 0.1);
    border: 1px solid rgba(88, 101, 242, 0.2);
    color: #5865F2;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.bot-status {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1.5rem 0.5rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    color: var(--text-color);
    font-size: 0.875rem;
    font-weight: 600;
    vertical-align: top;
}

.bot-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
}

.bot-status[data-state="online"] .bot-status-dot {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
}

.bot-status[data-state="offline"] .bot-status-dot,
.bot-status[data-state="unavailable"] .bot-status-dot {
    background: #ef4444;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #5865F2;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(88, 101, 242, 0.4);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(88, 101, 242, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(88, 101, 242, 0); }
    100% { box-shadow: 0 0 0 0 rgba(88, 101, 242, 0); }
}

.home-title {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

.gradient-text {
    background: linear-gradient(135deg, #5865F2 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home-desc {
    font-size: 1.25rem;
    color: var(--muted-color);
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 500px;
}

.home-buttons {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.social-proof {
    font-size: 0.875rem;
    color: var(--muted-color);
}
.social-proof strong {
    color: var(--text-color);
}

.floating-card {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

.visual-card {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.6);
}

.visual-logo {
    max-width: 200px;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.15));
}

.visual-stats {
    display: flex;
    gap: 1.5rem;
    width: 100%;
    justify-content: center;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.9);
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.text-yellow { color: #eab308; }

.home-highlights {
    padding: 4rem 0 8rem;
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.highlight-card {
    padding: 2.5rem;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.highlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.05);
}

.highlight-icon {
    width: 4rem;
    height: 4rem;
    background: var(--card-bg);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.highlight-icon i {
    width: 2rem;
    height: 2rem;
}

.highlight-card h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--text-color);
}

.home-teaser {
    padding: 6rem 0;
    background-color: var(--secondary-color);
    border-top: 1px solid var(--border-color);
}
.home-teaser h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 2rem;
}
.teaser-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .home-hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .home-title {
        font-size: 3rem;
    }
    .home-desc {
        margin: 0 auto 2rem;
    }
    .home-buttons {
        justify-content: center;
    }
}

/* --- Support Page Redesign --- */

.floating-discord-bg {
    position: absolute;
    top: 10%;
    right: 5%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(88, 101, 242, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    animation: floatBg 15s ease-in-out infinite;
}

@keyframes floatBg {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-30px, 50px) scale(1.1); }
    66% { transform: translate(50px, -20px) scale(0.9); }
}

.support-hero {
    padding: 8rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.support-title {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: var(--text-color);
}

.support-desc {
    font-size: 1.25rem;
    color: var(--muted-color);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.support-main-section {
    padding-bottom: 6rem;
}

.support-card-split {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    padding: 3rem;
    border-radius: 24px;
    margin-bottom: 3rem;
}

.discord-server-banner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.discord-icon-large {
    width: 5rem;
    height: 5rem;
    background: #5865F2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 10px 20px rgba(88, 101, 242, 0.3);
}

.discord-icon-large i {
    width: 2.5rem;
    height: 2.5rem;
}

.discord-mark {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
}

.discord-banner-text h3 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 0.25rem;
}

.discord-banner-text span {
    font-weight: 600;
    color: #5865F2;
    background: rgba(88, 101, 242, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
}

.support-checklist {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.support-checklist li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
}

.support-checklist li i {
    color: #10b981;
    width: 1.25rem;
    height: 1.25rem;
}

.support-card-split {
    padding: 3rem;
    border-radius: 24px;
    margin-bottom: 3rem;
}

.support-buttons-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
}

.support-pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.6rem 1.25rem;
    border-radius: 9999px; /* Pill shape */
    transition: all 0.2s ease;
    text-decoration: none;
}

.support-pill-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-blurple {
    background-color: #5865F2;
    color: white;
    border: 1px solid #5865F2;
}
.btn-blurple:hover {
    background-color: #4752C4;
    border-color: #4752C4;
}

.support-pill-btn i {
    width: 1.25rem;
    height: 1.25rem;
}

.btn-dark {
    background-color: #111827;
    color: white;
    border: 1px solid #111827;
}
.btn-dark:hover {
    background-color: #1f2937;
    border-color: #1f2937;
}

.btn-outline {
    background-color: white;
    color: #374151;
    border: 1px solid #e5e7eb;
}
.btn-outline:hover {
    background-color: #f9fafb;
}

/* Dark Theme Support Cards */
.dark-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
    margin-bottom: 2rem;
}

.dark-card {
    background-color: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 2.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dark-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.dark-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: white;
}

.dark-card-icon i {
    width: 28px;
    height: 28px;
}

.dark-card-icon .discord-mark {
    width: 30px;
    height: 30px;
}

.dark-card-title {
    color: #111827;
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.dark-card-desc {
    color: #4b5563;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.dark-card-btn {
    background-color: #111827;
    color: white;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 0.8rem 2rem;
    border-radius: 9999px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    width: 100%;
    border: 1px solid #111827;
    cursor: pointer;
}

.dark-card-btn:hover {
    background-color: #374151;
    color: white;
    transform: scale(1.02);
}

.support-why-join, .support-community-features {
    padding: 3rem 0;
}

.why-join-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.support-contact {
    padding: 3rem 0;
}

.contact-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.contact-card {
    text-align: center;
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
}
.contact-card:hover {
    transform: translateY(-5px);
}

.contact-icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.5rem;
}

.contact-discord-mark {
    padding: 0.55rem;
    border-radius: 0.9rem;
    background: #5865f2;
}

.contact-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}
.contact-card p {
    color: var(--muted-color);
    font-size: 0.875rem;
}

.support-faq {
    padding: 3rem 0;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    padding: 0;
    overflow: hidden;
}

.faq-question {
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: transparent;
    transition: background-color 0.2s ease;
}
.faq-question:hover {
    background: rgba(0,0,0,0.02);
}

.faq-question h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.faq-icon {
    color: var(--muted-color);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 2rem;
    color: var(--muted-color);
    line-height: 1.6;
}

.faq-item.active .faq-answer {
    max-height: 300px;
    padding: 0 2rem 1.5rem;
}

.support-cta {
    padding: 4rem 0;
}

@media (max-width: 900px) {
    .support-card-split {
        grid-template-columns: 1fr;
    }
    .support-checklist {
        grid-template-columns: 1fr;
    }
}

/* Footer */
.footer {
    background-color: #ffffff;
    border-top: 1px solid var(--border-color);
    padding: 4rem 0 2rem;
    margin-top: 4rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-brand {
    max-width: 400px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.footer-logo-img {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 0.5rem;
    object-fit: cover;
}

.footer-logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-color);
    letter-spacing: -0.025em;
}

.footer-description {
    color: var(--muted-color);
    font-size: 0.875rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.footer-social {
    display: flex;
    gap: 0.75rem;
}

.social-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--muted-color);
    transition: all 0.2s ease;
}

.social-icon:hover {
    background-color: var(--card-hover-bg);
    color: var(--text-color);
    transform: translateY(-2px);
}

.footer-links {
    display: flex;
    gap: 4rem;
}

.footer-column h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 1.25rem;
    letter-spacing: -0.025em;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column li {
    margin-bottom: 0.75rem;
}

.footer-column a {
    color: var(--muted-color);
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.footer-column a:hover {
    color: var(--text-color);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    color: var(--muted-color);
    font-size: 0.875rem;
}

.footer-version {
    color: var(--muted-color);
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-links {
        gap: 2rem;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}


/* =========================================================
   TOURNIX — PREMIUM DARK GRID-TECH REDESIGN
   Clean, restrained, responsive visual system
   ========================================================= */
:root {
  color-scheme: dark;
  --bg-color: #08090d;
  --text-color: #f4f6fb;
  --muted-color: #969eae;
  --border-color: rgba(255,255,255,.105);
  --card-bg: #101219;
  --card-hover-bg: #141925;
  --primary: #3478ff;
  --primary-foreground: #fff;
  --primary-color: #3478ff;
  --secondary-color: #0c0e14;
  --accent: #3478ff;
  --radius: 16px;
}
html { scroll-behavior:smooth; background:var(--bg-color); }
body {
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(ellipse at 50% -20%, rgba(52,120,255,.12), transparent 48%),
    var(--bg-color);
  background-size: 48px 48px,48px 48px,auto,auto;
  color:var(--text-color);
  line-height:1.65;
  overflow-x:hidden;
}
::selection { background:rgba(52,120,255,.35); color:#fff; }
a { color:inherit; }
.container { width:min(1120px, calc(100% - 48px)); padding-left:0; padding-right:0; }
.navbar {
  position:sticky; top:14px; width:min(1120px,calc(100% - 32px));
  margin:14px auto 0; border:1px solid var(--border-color);
  border-radius:16px; background:rgba(12,14,20,.88);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 12px 40px rgba(0,0,0,.22);
}
.nav-container { max-width:none; height:68px; padding:0 20px; gap:20px; }
.logo { color:#fff; letter-spacing:.08em; font-size:1rem; }
.logo-img { width:34px;height:34px;border-radius:10px; }
.nav-links { display:flex; align-items:center; gap:6px; }
.nav-links a { color:#9ca5b5; padding:9px 12px; border-radius:9px; font-size:.84rem; }
.nav-links a:hover,.nav-links a.active { color:#fff; background:rgba(255,255,255,.06); }
.nav-actions { display:flex; align-items:center; gap:9px; }
.btn {
  min-height:40px; height:auto; padding:10px 17px; border-radius:10px;
  font-weight:650; letter-spacing:-.01em; border:1px solid transparent;
  transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.btn:hover { transform:translateY(-1px); }
.btn-primary,.blurple-btn {
  background:#3478ff; color:#fff; border-color:#3478ff;
  box-shadow:0 5px 18px rgba(52,120,255,.18);
}
.btn-primary:hover,.blurple-btn:hover { background:#2468ed; box-shadow:0 8px 24px rgba(52,120,255,.25); }
.btn-secondary { background:rgba(255,255,255,.025); color:#e7eaf1; border-color:var(--border-color); }
.btn-secondary:hover { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.2); }
.btn-large { min-height:48px; padding:13px 21px; font-size:.94rem; }
.shadow-hover:hover { box-shadow:0 10px 28px rgba(52,120,255,.2); }
.mobile-menu-toggle { display:none; }
.home-hero-glow {
  top:-8%; width:700px;height:500px;max-width:90vw;max-height:70vw;
  background:radial-gradient(ellipse,rgba(52,120,255,.13),transparent 68%);
}
.home-hero { padding:112px 0 78px; }
.home-hero-container { grid-template-columns:1.12fr .88fr; gap:64px; }
.pill-badge {
  background:rgba(52,120,255,.08); border:1px solid rgba(82,143,255,.24);
  color:#8eb4ff; padding:7px 12px; font-size:.78rem; font-weight:600;
}
.pulse-dot { background:#4b8cff; }
.home-title {
  color:#f7f8fc; font-size:clamp(3rem,5.5vw,4.65rem);
  line-height:1.04; letter-spacing:-.065em; font-weight:800;
}
.gradient-text {
  background:linear-gradient(100deg,#8db5ff 0%,#4387ff 55%,#9bafff 100%);
  -webkit-background-clip:text; background-clip:text;
}
.home-desc { color:#9aa3b3; font-size:1.08rem; line-height:1.8; max-width:530px; }
.home-buttons { gap:12px; }
.visual-card {
  background:linear-gradient(145deg,rgba(20,25,37,.96),rgba(12,15,22,.96));
  border:1px solid rgba(255,255,255,.12); border-radius:22px;
  padding:42px 30px; box-shadow:0 28px 80px rgba(0,0,0,.35);
  animation:none; position:relative;
}
.visual-card:before {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(52,120,255,.15),transparent 58%);
}
.visual-logo { width:170px; max-width:55%; filter:drop-shadow(0 12px 30px rgba(52,120,255,.16)); }
.visual-stats { flex-wrap:wrap; gap:10px; }
.stat-item { background:#171c28; border:1px solid var(--border-color); color:#dce3f0; box-shadow:none; }
.home-highlights { padding:34px 0 92px; }
.highlights-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.highlight-card,.feature-card,.promise-card {
  background:rgba(16,18,25,.88); border:1px solid var(--border-color);
  border-radius:16px; box-shadow:none;
}
.highlight-card { padding:25px; }
.highlight-card:hover,.feature-card:hover,.promise-card:hover {
  transform:translateY(-3px); border-color:rgba(75,135,255,.42);
  box-shadow:0 16px 38px rgba(0,0,0,.22);
}
.highlight-icon,.icon-wrapper,.promise-icon-wrapper {
  background:rgba(52,120,255,.1); color:#76a5ff; border:1px solid rgba(52,120,255,.15);
  box-shadow:none; border-radius:12px;
}
.highlight-icon i,.icon-wrapper i,.promise-icon-wrapper i { color:#80aaff; }
.highlight-card h3,.feature-card h3,.promise-card h3 { color:#f1f4fa; font-size:1.08rem; font-weight:700; }
.highlight-card p,.feature-card p { color:#969eae; line-height:1.75; }
.home-teaser,.bg-alt { background:rgba(255,255,255,.018); border-color:var(--border-color); }
.home-teaser { padding:76px 0; }
.home-teaser h2 { color:#f3f5fa; font-size:clamp(1.7rem,3vw,2.35rem); letter-spacing:-.04em; }
.about-hero {
  background:transparent; padding:92px 0 76px;
}
.about-title { color:#f6f7fb; font-size:clamp(2.6rem,5vw,4rem); letter-spacing:-.06em; }
.about-subtitle { color:#dce4f4; }
.about-desc { color:#9aa3b3; line-height:1.8; }
.glass-logo-container img { filter:drop-shadow(0 18px 35px rgba(52,120,255,.16)); }
.about-section { padding:76px 0; }
.section-title { color:#f4f6fb; font-size:clamp(1.8rem,3vw,2.5rem); letter-spacing:-.045em; }
.glass-card {
  background:rgba(16,18,25,.9); border:1px solid var(--border-color);
  border-radius:16px; box-shadow:none; color:#a5adbb;
  backdrop-filter:none; padding:clamp(22px,4vw,36px);
}
.glass-card p { line-height:1.85; }
.features-grid { grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:16px; }
.feature-card { padding:23px; gap:10px; }
.badge {
  background:#111722; border:1px solid var(--border-color); color:#c4ccda;
  box-shadow:none; padding:10px 15px; font-size:.84rem;
}
.badge:hover { border-color:rgba(52,120,255,.45); box-shadow:none; }
.vision-text { color:#a5adbb; }
.promise-grid { gap:16px; }
.promise-card { padding:24px; }
.about-cta {
  background:radial-gradient(ellipse at 50% 0%,rgba(52,120,255,.16),transparent 65%),#0b0e15;
  border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color);
  padding:82px 0;
}
.cta-title { color:#f5f7fc; letter-spacing:-.045em; }
.cta-desc { color:#a2aaba; font-size:1.05rem; }
.about-cta .btn-secondary { background:rgba(255,255,255,.04); border-color:var(--border-color); }
.about-cta .btn-secondary:hover { background:rgba(255,255,255,.09); }
.page-header { margin-top:58px; }
.page-title { color:#f4f6fb; letter-spacing:-.045em; }
.page-description { color:#9aa3b3; }
.category-nav { gap:9px; margin:28px auto 38px; }
.category-btn {
  background:#10131b; color:#aab2c1; border:1px solid var(--border-color);
  border-radius:11px; padding:12px 17px; font-size:.76rem;
}
.category-btn.active { background:#3478ff; border-color:#3478ff; color:#fff; transform:none; box-shadow:0 6px 18px rgba(52,120,255,.2); }
.search-input { background:#10131b; border-color:var(--border-color); color:#fff; }
.search-input:focus { border-color:#3478ff; box-shadow:0 0 0 3px rgba(52,120,255,.12); }
.command-card {
  background:#10131b; border:1px solid var(--border-color); border-radius:15px;
  padding:24px; box-shadow:none;
}
.command-card:hover { background:#131925; border-color:rgba(52,120,255,.42); box-shadow:0 14px 34px rgba(0,0,0,.2); }
.command-card:hover .card-header h3 { color:#8bb3ff; }
.cmd-badge { background:#171d29; color:#9da8ba; border-color:var(--border-color); }
.command-card:hover .cmd-badge { background:#3478ff; border-color:#3478ff; }
.card-description { color:#9aa3b3; }
.card-usage { background:#090c12; border-color:var(--border-color); color:#c5d5f2; }
.command-card:hover .card-usage { background:#101b30; border-color:rgba(52,120,255,.4); }
.tag { background:#1a202c; color:#aeb8c8; }
.tag-admin { background:rgba(239,68,68,.1); color:#ff9a9a; border-color:rgba(239,68,68,.25); }
.faq-item { background:#10131b; border:1px solid var(--border-color); border-radius:14px; }
.faq-question h3 { color:#edf1f8; }
.faq-answer { color:#9aa3b3; }
.footer { background:#080a0f; border-top:1px solid var(--border-color); color:#9aa3b3; }
.footer-logo-text,.footer-column h4 { color:#f0f3f9; }
.footer-description,.footer-column a { color:#929bad; }
.social-icon { background:#111620; border-color:var(--border-color); color:#aab4c4; }
.footer-bottom { border-color:var(--border-color); }
.animate-on-scroll { transform:translateY(18px); transition:opacity .55s ease,transform .55s ease; }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; }
}
@media (max-width:900px) {
  .home-hero-container { grid-template-columns:1fr; gap:38px; }
  .home-hero-text { max-width:720px; margin:0 auto; }
  .home-desc { margin-left:auto; margin-right:auto; }
  .home-buttons { justify-content:center; }
  .home-hero { padding:82px 0 56px; }
  .home-hero-visual { max-width:560px; width:100%; margin:0 auto; }
}
@media (max-width:767px) {
  .container { width:calc(100% - 36px); }
  .navbar { top:8px; margin-top:8px; width:calc(100% - 20px); border-radius:13px; }
  .nav-container { height:60px; padding:0 13px; gap:10px; }
  .logo { font-size:.9rem; }
  .logo-img { width:31px;height:31px; }
  .nav-links {
    display:none; position:absolute; top:calc(100% + 9px); left:0; right:0;
    padding:10px; border:1px solid var(--border-color); border-radius:14px;
    background:rgba(12,14,20,.97); box-shadow:0 18px 45px rgba(0,0,0,.35);
    flex-direction:column; align-items:stretch; gap:3px;
  }
  .navbar.menu-open .nav-links { display:flex; }
  .nav-links a { padding:12px 13px; }
  .nav-actions { margin-left:auto; gap:7px; }
  .nav-actions .btn-secondary { display:none; }
  .nav-actions .btn { min-height:36px; padding:8px 12px; font-size:.77rem; }
  .mobile-menu-toggle {
    display:inline-flex; align-items:center; justify-content:center; width:38px;height:38px;
    border:1px solid var(--border-color); border-radius:10px; background:#141925;
    color:#f5f7fb; cursor:pointer; flex:0 0 auto;
  }
  .mobile-menu-toggle svg { width:18px;height:18px; }
  .home-hero { padding:74px 0 44px; }
  .home-title { font-size:clamp(2.45rem,10vw,3.5rem); line-height:1.06; }
  .home-desc { font-size:.98rem; margin-bottom:25px; }
  .home-buttons { flex-direction:column; align-items:stretch; max-width:360px; margin-left:auto;margin-right:auto; }
  .home-buttons .btn { width:100%; }
  .visual-card { padding:28px 18px; gap:22px; }
  .visual-logo { max-width:145px; }
  .visual-stats { flex-direction:column; }
  .stat-item { justify-content:center; }
  .home-highlights { padding:22px 0 56px; }
  .highlights-grid { grid-template-columns:1fr; gap:12px; }
  .highlight-card { padding:21px; }
  .home-teaser { padding:56px 0; }
  .teaser-buttons,.cta-buttons { flex-direction:column; align-items:stretch; max-width:360px; margin:0 auto; }
  .about-hero { padding:66px 0 48px; }
  .about-hero-container { gap:30px; }
  .about-title { font-size:2.65rem; }
  .about-subtitle { font-size:1.08rem; }
  .about-desc { font-size:.96rem; }
  .about-hero-buttons { flex-direction:column; align-items:stretch; max-width:360px; margin:0 auto; }
  .about-section { padding:54px 0; }
  .section-title { margin-bottom:25px; }
  .glass-card { padding:21px; }
  .features-grid,.promise-grid { grid-template-columns:1fr; gap:12px; }
  .badges-container { gap:8px; }
  .badge { font-size:.75rem; padding:8px 11px; }
  .mission-checklist { grid-template-columns:1fr; }
  .about-cta { padding:58px 0; }
  .cta-title { font-size:2rem; }
  .cta-desc { font-size:.95rem; margin-bottom:25px; }
  .page-header { margin-top:38px; }
  .page-title { font-size:2rem; }
  .category-nav { justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; padding:2px 0 12px; margin-bottom:24px; scrollbar-width:thin; }
  .category-btn { flex:0 0 auto; padding:10px 13px; }
  .search-container { margin-bottom:24px; }
  .search-input { height:52px; font-size:.95rem; }
  .commands-grid { grid-template-columns:1fr; gap:12px; }
  .command-card { padding:19px; border-radius:14px; }
  .card-header h3 { font-size:1.2rem; }
  .card-tags { gap:7px; margin-top:16px; }
  .footer-content { grid-template-columns:1fr; }
  .footer-links { gap:28px; flex-wrap:wrap; }
  .footer-bottom { gap:8px; }
}
@media (max-width:380px) {
  .nav-container { padding:0 9px; }
  .logo { gap:6px; font-size:.82rem; }
  .nav-actions .btn { padding:7px 9px; font-size:.72rem; }
  .mobile-menu-toggle { width:35px;height:35px; }
  .home-title { font-size:2.35rem; }
}


/* =========================================================
   TOURNIX — WHITE AURORA / INTERACTIVE GRID EDITION
   ========================================================= */
:root {
  color-scheme: light;
  --bg-color:#f8fbff; --text-color:#102344; --muted-color:#64748b;
  --border-color:#dce7f7; --card-bg:rgba(255,255,255,.88);
  --card-hover-bg:#fff; --primary:#0868ee; --primary-color:#0868ee;
  --primary-foreground:#fff; --secondary-color:#f1f6ff;
  --accent:#087bff; --radius:18px;
}
html,body { background:#f8fbff; color:#102344; }
body {
  position:relative; isolation:isolate; overflow-x:clip;
  background:
    radial-gradient(ellipse at 15% 8%,rgba(92,164,255,.14),transparent 34%),
    radial-gradient(ellipse at 88% 28%,rgba(86,190,255,.12),transparent 32%),
    linear-gradient(rgba(40,112,210,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(40,112,210,.045) 1px,transparent 1px),
    #f8fbff;
  background-size:auto,auto,46px 46px,46px 46px,auto;
}
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(480px circle at var(--pointer-x,50%) var(--pointer-y,35%),rgba(43,143,255,.15),transparent 68%);
  transition:background .12s linear;
}
.pointer-aura {
  position:fixed; left:var(--pointer-x,50%); top:var(--pointer-y,35%);
  width:260px;height:260px; transform:translate(-50%,-50%);
  border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle,rgba(53,151,255,.12),rgba(53,151,255,.045) 42%,transparent 72%);
  filter:blur(7px); opacity:.9; transition:opacity .25s ease;
}
.pointer-aura::before {
  content:"";position:absolute;inset:30%;border:1px solid rgba(53,151,255,.26);
  border-radius:50%;animation:pointer-ripple 2.4s ease-out infinite;
}
.cursor-spark {
  position:fixed;z-index:9999;pointer-events:none;border-radius:50%;
  background:linear-gradient(135deg,#fff,var(--primary,#1681f7));
  box-shadow:0 0 8px 2px rgba(53,151,255,.55);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:cursor-sparkle 680ms ease-out forwards;
}
@keyframes pointer-ripple {
  0% { opacity:.7;transform:scale(.7); }
  100% { opacity:0;transform:scale(2.4); }
}
@keyframes cursor-sparkle {
  0% { opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0deg); }
  20% { opacity:.95; }
  100% { opacity:0;transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) scale(0) rotate(100deg); }
}
.navbar {
  position:sticky; top:12px; width:min(1180px,calc(100% - 36px));
  margin:12px auto 0; border:1px solid rgba(193,211,238,.8);
  border-radius:18px; background:rgba(255,255,255,.82);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 10px 36px rgba(38,93,166,.09);
}
.nav-container { max-width:none; height:68px; padding:0 18px; gap:14px; }
.logo { color:#102344; letter-spacing:-.025em; }
.nav-links { gap:5px; }
.nav-links a { color:#66758e; padding:10px 13px; border-radius:11px; }
.nav-links a:hover,.nav-links a.active { color:#075fe0; background:#edf5ff; }
.btn { min-height:42px; height:auto; padding:10px 17px; border-radius:12px; font-weight:650; }
.btn-primary,.blurple-btn { color:#fff; background:linear-gradient(110deg,#159dff,#0756e8); border:1px solid #1681f7; box-shadow:0 8px 22px rgba(12,105,237,.2); }
.btn-primary:hover,.blurple-btn:hover { background:linear-gradient(110deg,#0788f7,#064bd0); box-shadow:0 11px 27px rgba(12,105,237,.28); }
.btn-secondary { background:rgba(255,255,255,.76); border:1px solid #d8e4f5; color:#173253; }
.btn-secondary:hover { background:#f0f6ff; border-color:#b9d4fb; }
.home-hero { padding:100px 0 70px; text-align:left; }
.home-hero-container { grid-template-columns:1fr 1.04fr; gap:48px; align-items:center; }
.home-hero-text { position:relative; z-index:2; }
.home-title { color:#102344; font-size:clamp(3rem,5.4vw,4.65rem); line-height:1.04; letter-spacing:-.065em; font-weight:850; }
.gradient-text { background:linear-gradient(100deg,#13a8f5,#075de9 65%,#547eff); -webkit-background-clip:text; background-clip:text; }
.home-desc { color:#61738f; font-size:1.08rem; line-height:1.8; max-width:540px; }
.pill-badge { background:#f1f7ff; color:#075fe0; border:1px solid #c6ddff; padding:8px 13px; }
.pulse-dot { background:#168bff; box-shadow:0 0 0 5px rgba(22,139,255,.12); }
.home-buttons { gap:12px; }
.home-hero-glow { position:absolute; width:700px;height:520px; top:2%; right:-5%; pointer-events:none; background:radial-gradient(ellipse,rgba(76,158,255,.13),transparent 68%); }
.home-hero-visual { perspective:1100px; position:relative; z-index:1; }
.feature-orbit-panel {
  position:relative; min-height:420px; width:100%; border-radius:30px;
  border:1px solid rgba(177,207,247,.8);
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(239,247,255,.84));
  box-shadow:0 28px 70px rgba(44,105,185,.13),inset 0 1px 0 #fff;
  overflow:hidden; transform-style:preserve-3d;
  transition:transform .18s ease-out,box-shadow .25s ease;
}
.feature-orbit-panel::before {
  content:"";position:absolute;inset:0;opacity:.55;pointer-events:none;
  background:linear-gradient(rgba(44,120,220,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(44,120,220,.055) 1px,transparent 1px);
  background-size:30px 30px;
  mask-image:linear-gradient(135deg,#000,transparent 85%);
}
.feature-orbit-panel::after {
  content:"";position:absolute;width:340px;height:340px;left:50%;top:50%;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(38,144,255,.16),rgba(91,177,255,.06) 45%,transparent 70%);
  pointer-events:none;
}
.orbit-glow { position:absolute; width:250px;height:250px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(31,137,255,.16),transparent 70%);filter:blur(10px); }
.orbit-ring { position:absolute; left:50%;top:50%;width:300px;height:112px;border:1px solid rgba(35,144,255,.35);border-radius:50%;transform:translate(-50%,-50%) rotate(-18deg);animation:orbitFloat 9s ease-in-out infinite; }
.orbit-ring-two { width:350px;height:145px;transform:translate(-50%,-50%) rotate(22deg);border-color:rgba(87,181,255,.28);animation-delay:-4.5s; }
@keyframes orbitFloat { 0%,100%{transform:translate(-50%,-50%) rotate(-18deg) scale(1)}50%{transform:translate(-50%,-50%) rotate(-8deg) scale(1.05)} }
.hero-feature {
  position:absolute;z-index:3;display:flex;align-items:center;gap:12px;
  min-width:185px;padding:13px 15px;border-radius:17px;
  border:1px solid rgba(198,218,246,.95);
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px);
  box-shadow:0 10px 26px rgba(40,94,160,.09);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.hero-feature:hover { transform:translateY(-5px) scale(1.025);border-color:#8dbdff;box-shadow:0 16px 30px rgba(39,116,211,.15); }
.hero-feature-icon { width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,#e7f3ff,#d6eaff);color:#0876ee; }
.hero-feature-icon svg { width:21px;height:21px;stroke-width:2.3; }
.hero-feature strong { display:block;color:#142b4c;font-size:.9rem;line-height:1.35;white-space:nowrap; }
.hero-feature small { display:block;color:#71829c;font-size:.73rem;margin-top:3px;white-space:nowrap; }
.feature-tournaments { top:8%;left:5%; }
.feature-teams { top:8%;right:5%; }
.feature-scrims { top:40%;left:2%; }
.feature-verification { top:40%;right:2%; }
.feature-giveaways { bottom:8%;left:5%; }
.feature-analytics { bottom:8%;right:5%; }
.hero-brand-core {
  position:absolute;z-index:2;left:50%;top:50%;width:130px;height:130px;
  transform:translate(-50%,-50%) rotate(-7deg);display:grid;place-items:center;
  border-radius:30px;border:2px solid #8bc7ff;
  background:linear-gradient(145deg,#168eff,#0750d8);
  box-shadow:0 18px 48px rgba(17,112,235,.32),inset 0 1px 0 rgba(255,255,255,.6);
  animation:coreFloat 5s ease-in-out infinite;
}
.hero-brand-core img { width:72px;height:72px;object-fit:contain;border-radius:15px; }
.core-ring { position:absolute;inset:-9px;border:1px solid rgba(25,145,255,.5);border-radius:35px; }
@keyframes coreFloat { 0%,100%{translate:0 0}50%{translate:0 -9px} }
.home-highlights { padding:26px 0 84px; }
.highlights-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; }
.live-monitor-section { padding:0 0 58px; }
.live-monitor {
  max-width:860px;margin:0 auto;padding:24px;
  border:1px solid var(--line,#dce7f7);border-radius:20px;
  background:var(--surface,rgba(255,255,255,.9));
  box-shadow:0 18px 48px color-mix(in srgb,var(--accent,#0868ee) 9%,transparent);
}
.live-monitor-header,.live-monitor-heading { display:flex;align-items:center; }
.live-monitor-header { justify-content:space-between;gap:16px; }
.live-monitor-heading { gap:12px; }
.live-monitor-icon { display:grid;width:42px;height:42px;place-items:center;border:1px solid var(--line);border-radius:13px;background:var(--soft);color:var(--accent); }
.live-monitor-icon svg { width:20px;height:20px; }
.live-monitor-heading h2 { margin:0;color:var(--ink);font-size:1rem;font-weight:800; }
.live-monitor-heading p { margin:4px 0 0;color:var(--muted);font-size:.78rem; }
.live-monitor-badge { display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:var(--soft);color:var(--muted);font-size:.7rem;font-weight:800;letter-spacing:.04em; }
.live-monitor-dot { width:7px;height:7px;border-radius:50%;background:#94a3b8; }
.live-monitor[data-state="online"] .live-monitor-badge { border-color:color-mix(in srgb,#19b77a 28%,var(--line));color:#16845c; }
.live-monitor[data-state="online"] .live-monitor-dot { background:#20bd83;box-shadow:0 0 0 4px rgba(32,189,131,.13);animation:live-status-pulse 1.8s ease-out infinite; }
.live-monitor[data-state="offline"] .live-monitor-dot,.live-monitor[data-state="unavailable"] .live-monitor-dot { background:#ef6262; }
.live-monitor-activity { display:flex;height:44px;align-items:flex-end;gap:6px;margin:22px 0 16px;padding:0 2px; }
.live-monitor-activity span { flex:1;height:35%;min-width:3px;border-radius:4px 4px 2px 2px;background:color-mix(in srgb,var(--accent) 45%,var(--soft));transform-origin:bottom; }
.live-monitor-activity span:nth-child(3n) { height:76%; }
.live-monitor-activity span:nth-child(4n + 1) { height:52%; }
.live-monitor[data-state="online"] .live-monitor-activity span { animation:live-activity 1.4s ease-in-out infinite alternate; }
.live-monitor[data-state="online"] .live-monitor-activity span:nth-child(3n) { animation-delay:-.65s; }
.live-monitor[data-state="online"] .live-monitor-activity span:nth-child(4n + 1) { animation-delay:-1s; }
.live-monitor-metrics { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px; }
.live-monitor-metric { min-width:0;padding:13px;border:1px solid var(--line);border-radius:13px;background:color-mix(in srgb,var(--soft) 55%,var(--surface)); }
.live-monitor-metric span { display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.7rem; }
.live-monitor-metric span svg { width:14px;height:14px;flex:0 0 auto;color:var(--accent); }
.live-monitor-metric strong { display:block;margin-top:8px;color:var(--ink);font-size:1rem;font-weight:800;font-variant-numeric:tabular-nums; }
.live-monitor-note { margin:13px 0 0;color:var(--muted);font-size:.68rem;text-align:right; }
@keyframes live-activity { from { transform:scaleY(.5);opacity:.62; } to { transform:scaleY(1);opacity:1; } }
@keyframes live-status-pulse { 0%,100% { box-shadow:0 0 0 3px rgba(32,189,131,.1); } 50% { box-shadow:0 0 0 6px rgba(32,189,131,.18); } }
.highlight-card,.feature-card,.promise-card {
  background:rgba(255,255,255,.84);border:1px solid #e0eaf8;border-radius:18px;
  box-shadow:0 8px 26px rgba(32,84,145,.055);
}
.highlight-card { padding:25px; }
.highlight-card:hover,.feature-card:hover,.promise-card:hover { transform:translateY(-4px);border-color:#b5d4ff;box-shadow:0 16px 36px rgba(32,99,177,.11); }
.highlight-icon,.icon-wrapper,.promise-icon-wrapper { background:#edf5ff;color:#0876ee;border:1px solid #dfedff;border-radius:13px;box-shadow:none; }
.highlight-icon i,.icon-wrapper i,.promise-icon-wrapper i { color:#0876ee; }
.highlight-card h3,.feature-card h3,.promise-card h3 { color:#152b4b; }
.highlight-card p,.feature-card p { color:#687a94; }
.home-teaser,.bg-alt { background:rgba(239,246,255,.72);border-color:#e0eaf8; }
.home-teaser { padding:72px 0; }
.home-teaser h2 { color:#142b4c;letter-spacing:-.04em; }
.about-hero { background:transparent; }
.about-title,.section-title,.page-title { color:#142b4c; }
.about-subtitle { color:#2e4d75; }
.about-desc,.page-description,.vision-text { color:#687a94; }
.glass-card { background:rgba(255,255,255,.86);border:1px solid #e0eaf8;border-radius:18px;box-shadow:0 10px 30px rgba(32,84,145,.06);color:#60738e;backdrop-filter:blur(12px); }
.glass-card p { line-height:1.85; }
.badge { background:#f0f6ff;border:1px solid #dceaff;color:#42648e;box-shadow:none; }
.badge:hover { border-color:#9dc6ff; }
.about-cta { background:linear-gradient(120deg,#eef6ff,#f9fcff);border-color:#dceaff; }
.cta-title { color:#142b4c; }
.cta-desc { color:#687a94; }
.category-btn { background:#fff;color:#687a94;border-color:#dce7f7; }
.category-btn.active { background:#0868ee;color:#fff;border-color:#0868ee;box-shadow:0 8px 20px rgba(8,104,238,.18); }
.search-input { background:#fff;border-color:#dce7f7;color:#142b4c; }
.search-input:focus { border-color:#5ba0ff;box-shadow:0 0 0 4px rgba(8,104,238,.08); }
.command-card { background:rgba(255,255,255,.9);border-color:#e0eaf8;border-radius:18px;box-shadow:0 8px 24px rgba(32,84,145,.045); }
.command-card:hover { background:#fff;border-color:#9ec6ff;box-shadow:0 16px 36px rgba(32,99,177,.11); }
.command-card:hover .card-header h3 { color:#0868ee; }
.cmd-badge { background:#f1f6ff;border-color:#dce7f7;color:#5b7190; }
.command-card:hover .cmd-badge { background:#0868ee;color:#fff;border-color:#0868ee; }
.card-description { color:#687a94; }
.card-usage { background:#f3f7fd;border-color:#e0eaf8;color:#345276; }
.command-card:hover .card-usage { background:#eaf3ff;border-color:#a9ceff; }
.tag { background:#edf3fb;color:#5b7190; }
.tag-admin { background:#fff0f0;color:#c24141;border-color:#ffd1d1; }
.faq-item { background:#fff;border-color:#e0eaf8; }
.faq-question h3 { color:#183253; }
.faq-answer { color:#687a94; }
.footer { background:#f1f6fd;border-color:#dce7f7;color:#687a94; }
.footer-logo-text,.footer-column h4 { color:#183253; }
.footer-description,.footer-column a { color:#687a94; }
.social-icon { background:#fff;border-color:#dce7f7;color:#42648e; }
.footer-bottom { border-color:#dce7f7; }
@media (max-width:900px) {
 .home-hero-container { grid-template-columns:1fr;gap:42px; }
 .home-hero-text { max-width:720px;margin:0 auto;text-align:center; }
 .home-desc { margin-left:auto;margin-right:auto; }
 .home-buttons { justify-content:center; }
 .home-hero-visual { width:100%;max-width:680px;margin:0 auto; }
}
@media (max-width:767px) {
 .navbar { width:calc(100% - 20px);top:8px;margin-top:8px;background:rgba(255,255,255,.92); }
 .nav-container { height:60px;padding:0 12px; }
 .nav-links { display:none;position:absolute;top:calc(100% + 9px);left:0;right:0;padding:10px;background:rgba(255,255,255,.97);border:1px solid #dce7f7;border-radius:15px;box-shadow:0 18px 38px rgba(25,70,130,.13);flex-direction:column;gap:3px; }
 .navbar.menu-open .nav-links { display:flex; }
 .nav-links a { padding:12px 13px; }
 .nav-actions { margin-left:auto;gap:7px; }
 .nav-actions .btn-secondary { display:none; }
 .nav-actions .btn { min-height:36px;padding:8px 11px;font-size:.75rem; }
 .mobile-menu-toggle { display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid #dce7f7;border-radius:11px;background:#f1f7ff;color:#17508e;cursor:pointer; }
 .home-hero { padding:72px 0 45px; }
 .home-title { font-size:clamp(2.45rem,9vw,3.45rem);line-height:1.06; }
 .home-desc { font-size:.98rem; }
 .home-buttons { flex-direction:column;align-items:stretch;max-width:360px;margin:0 auto; }
 .home-buttons .btn { width:100%; }
 .feature-orbit-panel { min-height:520px;border-radius:24px; }
 .hero-feature { min-width:0;width:calc(50% - 22px);padding:10px 8px;gap:8px;border-radius:13px; }
 .hero-feature-icon { width:34px;height:34px;flex-basis:34px;border-radius:10px; }
 .hero-feature-icon svg { width:18px;height:18px; }
 .hero-feature strong { font-size:.72rem; }
 .hero-feature small { font-size:.62rem; }
 .feature-tournaments,.feature-teams { top:7%; }
 .feature-scrims,.feature-verification { top:42%; }
 .feature-giveaways,.feature-analytics { bottom:7%; }
 .feature-scrims { left:3%; }
 .feature-verification { right:3%; }
 .hero-brand-core { width:94px;height:94px;border-radius:23px; }
 .hero-brand-core img { width:54px;height:54px; }
 .orbit-ring { width:210px;height:85px; }
 .orbit-ring-two { width:235px;height:100px; }
 .highlights-grid { grid-template-columns:1fr; }
 .pointer-aura { display:none; }
}
@media (max-width:420px) {
 .feature-orbit-panel { min-height:490px; }
 .hero-feature { width:calc(50% - 18px);padding:9px 6px;gap:6px; }
 .hero-feature-icon { width:30px;height:30px;flex-basis:30px; }
 .hero-feature strong { font-size:.67rem; }
 .hero-feature small { font-size:.57rem; }
 .home-title { font-size:2.35rem; }
}
@media (prefers-reduced-motion:reduce) {
 .orbit-ring,.hero-brand-core,.pointer-aura::before,.cursor-spark { animation:none!important; }
 *,*::before,*::after { scroll-behavior:auto!important;transition-duration:.01ms!important; }
}


/* =========================================================
   TOURNIX THEME STUDIO — 12 PERSISTENT COLOR THEMES
   ========================================================= */
.theme-picker { position:relative; z-index:80; }
.theme-toggle { display:inline-flex;align-items:center;gap:8px;white-space:nowrap; }
.theme-toggle svg { width:16px;height:16px; }
.theme-menu {
  position:absolute;top:calc(100% + 12px);right:0;width:310px;padding:15px;
  border:1px solid var(--border-color);border-radius:18px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(22px);
  box-shadow:0 22px 60px rgba(20,50,90,.2);color:#183253;
  animation:themeMenuIn .18s ease-out;
}
.theme-menu[hidden] { display:none; }
@keyframes themeMenuIn { from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)} }
.theme-menu-heading { display:flex;justify-content:space-between;align-items:center;margin:1px 2px 12px;color:#183253;font-size:.88rem; }
.theme-menu-heading span { color:#8291a8;font-size:.72rem;font-weight:600; }
.theme-options { display:grid;grid-template-columns:1fr 1fr;gap:6px; }
.theme-option {
  display:flex;align-items:center;gap:8px;min-width:0;padding:9px 8px;
  border:1px solid transparent;border-radius:10px;background:transparent;
  color:#536782;text-align:left;font:600 .75rem Inter,sans-serif;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s;
}
.theme-option:hover { background:#f0f6ff;border-color:#dceaff;color:#15375f; }
.theme-option[aria-pressed="true"] { background:#edf5ff;border-color:#a9ccff;color:#075fe0; }
.theme-option > span:nth-child(2) { flex:1;white-space:nowrap; }
.theme-option > svg { width:14px;height:14px;opacity:0;color:#0876ee; }
.theme-option[aria-pressed="true"] > svg { opacity:1; }
.theme-swatch { width:19px;height:19px;flex:0 0 19px;border-radius:7px;border:1px solid rgba(0,0,0,.1);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); }
.swatch-arctic {background:linear-gradient(135deg,#fff 50%,#0876ee 50%)}
.swatch-midnight {background:linear-gradient(135deg,#080d1c 50%,#5b8cff 50%)}
.swatch-obsidian {background:linear-gradient(135deg,#090a0e 50%,#a1a9ba 50%)}
.swatch-violet {background:linear-gradient(135deg,#111022 50%,#9a70ff 50%)}
.swatch-emerald {background:linear-gradient(135deg,#071711 50%,#19b77a 50%)}
.swatch-ocean {background:linear-gradient(135deg,#071b2a 50%,#18a8d8 50%)}
.swatch-rose {background:linear-gradient(135deg,#fff8fb 50%,#e76eaa 50%)}
.swatch-sunset {background:linear-gradient(135deg,#fff8f1 50%,#f07845 50%)}
.swatch-crimson {background:linear-gradient(135deg,#170b12 50%,#ed4566 50%)}
.swatch-amber {background:linear-gradient(135deg,#fffaf0 50%,#d99420 50%)}
.swatch-slate {background:linear-gradient(135deg,#171d27 50%,#8da2ba 50%)}
.swatch-mint {background:linear-gradient(135deg,#f4fffb 50%,#28a88a 50%)}

/* Theme palette variables */
body[data-theme="arctic"] { --page:#f8fbff;--surface:rgba(255,255,255,.9);--ink:#102344;--muted:#647895;--line:#dce7f7;--accent:#0868ee;--accent2:#18a8ff;--soft:#edf5ff;--glow:rgba(43,143,255,.15); }
body[data-theme="midnight"] { --page:#080d1c;--surface:rgba(16,24,43,.94);--ink:#f3f6ff;--muted:#a1aec5;--line:rgba(151,177,220,.17);--accent:#5b8cff;--accent2:#21c8ff;--soft:#14213b;--glow:rgba(56,117,255,.2); }
body[data-theme="obsidian"] { --page:#090a0e;--surface:rgba(20,22,29,.95);--ink:#f5f6f8;--muted:#a0a5b1;--line:rgba(255,255,255,.13);--accent:#a1a9ba;--accent2:#e1e5ed;--soft:#20232c;--glow:rgba(165,180,205,.13); }
body[data-theme="violet"] { --page:#100d20;--surface:rgba(28,23,48,.95);--ink:#f7f2ff;--muted:#b2a8ca;--line:rgba(190,162,255,.19);--accent:#9a70ff;--accent2:#d18aff;--soft:#292044;--glow:rgba(153,103,255,.2); }
body[data-theme="emerald"] { --page:#071711;--surface:rgba(15,35,26,.95);--ink:#effff6;--muted:#9bb9a9;--line:rgba(105,210,155,.17);--accent:#19b77a;--accent2:#6ce5aa;--soft:#153326;--glow:rgba(25,183,122,.17); }
body[data-theme="ocean"] { --page:#071b2a;--surface:rgba(12,37,55,.95);--ink:#effaff;--muted:#9bb8c9;--line:rgba(90,195,230,.18);--accent:#18a8d8;--accent2:#55d8ee;--soft:#12364b;--glow:rgba(24,168,216,.18); }
body[data-theme="rose"] { --page:#fff8fb;--surface:rgba(255,255,255,.92);--ink:#402039;--muted:#927287;--line:#f1dce9;--accent:#d94f91;--accent2:#f39ac2;--soft:#fff0f7;--glow:rgba(231,110,170,.14); }
body[data-theme="sunset"] { --page:#fff8f1;--surface:rgba(255,255,255,.93);--ink:#3e261d;--muted:#92766b;--line:#f1dfd3;--accent:#e96536;--accent2:#f6ad4c;--soft:#fff0e4;--glow:rgba(240,120,69,.15); }
body[data-theme="crimson"] { --page:#170b12;--surface:rgba(37,17,28,.95);--ink:#fff3f5;--muted:#c3a2ad;--line:rgba(255,120,150,.18);--accent:#ed4566;--accent2:#ff8b9d;--soft:#351827;--glow:rgba(237,69,102,.18); }
body[data-theme="amber"] { --page:#fffaf0;--surface:rgba(255,255,255,.93);--ink:#3a2c13;--muted:#8b7958;--line:#eee2c8;--accent:#c88716;--accent2:#f0b84b;--soft:#fff3d8;--glow:rgba(217,148,32,.14); }
body[data-theme="slate"] { --page:#171d27;--surface:rgba(31,40,54,.96);--ink:#f2f5fa;--muted:#aab6c7;--line:rgba(176,195,220,.17);--accent:#8da2ba;--accent2:#c4d3e5;--soft:#293648;--glow:rgba(141,162,186,.16); }
body[data-theme="mint"] { --page:#f4fffb;--surface:rgba(255,255,255,.93);--ink:#143b35;--muted:#688d84;--line:#d9eee7;--accent:#239b7e;--accent2:#62c9ad;--soft:#e8f8f2;--glow:rgba(40,168,138,.14); }

/* Shared theme application across all pages */
body[data-theme] { background-color:var(--page);color:var(--ink); }
body[data-theme]::before { background:radial-gradient(480px circle at var(--pointer-x,50%) var(--pointer-y,35%),var(--glow),transparent 68%); }
body[data-theme] .navbar { background:color-mix(in srgb,var(--surface) 91%,transparent);border-color:var(--line);box-shadow:0 10px 36px color-mix(in srgb,var(--accent) 9%,transparent); }
body[data-theme] .logo,body[data-theme] .home-title,body[data-theme] .about-title,body[data-theme] .section-title,body[data-theme] .page-title,body[data-theme] .cta-title,body[data-theme] .home-teaser h2 { color:var(--ink); }
body[data-theme] .nav-links a,body[data-theme] .home-desc,body[data-theme] .about-desc,body[data-theme] .page-description,body[data-theme] .highlight-card p,body[data-theme] .feature-card p,body[data-theme] .vision-text { color:var(--muted); }
body[data-theme] .nav-links a:hover,body[data-theme] .nav-links a.active { color:var(--accent);background:var(--soft); }
body[data-theme] .btn-primary,body[data-theme] .blurple-btn,body[data-theme] .category-btn.active { background:linear-gradient(110deg,var(--accent2),var(--accent));border-color:var(--accent);color:#fff; }
body[data-theme] .btn-secondary { background:var(--surface);border-color:var(--line);color:var(--ink); }
body[data-theme] .btn-secondary:hover { background:var(--soft); }
body[data-theme] .pill-badge { background:var(--soft);border-color:var(--line);color:var(--accent); }
body[data-theme] .pulse-dot { background:var(--accent); }
body[data-theme] .gradient-text { background:linear-gradient(100deg,var(--accent2),var(--accent));-webkit-background-clip:text;background-clip:text; }
body[data-theme] .home-hero-glow { background:radial-gradient(ellipse,var(--glow),transparent 68%); }
body[data-theme] .feature-orbit-panel { background:linear-gradient(145deg,var(--surface),var(--soft));border-color:var(--line);box-shadow:0 28px 70px color-mix(in srgb,var(--accent) 12%,transparent),inset 0 1px 0 color-mix(in srgb,var(--surface) 95%,white); }
body[data-theme] .feature-orbit-panel::before { background:linear-gradient(color-mix(in srgb,var(--accent) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%,transparent) 1px,transparent 1px);background-size:30px 30px; }
body[data-theme] .orbit-ring,body[data-theme] .core-ring { border-color:color-mix(in srgb,var(--accent) 45%,transparent); }
body[data-theme] .hero-feature,body[data-theme] .highlight-card,body[data-theme] .feature-card,body[data-theme] .promise-card,body[data-theme] .glass-card,body[data-theme] .command-card,body[data-theme] .faq-item { background:var(--surface);border-color:var(--line);color:var(--muted); }
body[data-theme] .hero-feature strong,body[data-theme] .highlight-card h3,body[data-theme] .feature-card h3,body[data-theme] .promise-card h3,body[data-theme] .faq-question h3 { color:var(--ink); }
body[data-theme] .hero-feature small,body[data-theme] .card-description,body[data-theme] .faq-answer { color:var(--muted); }
body[data-theme] .hero-feature-icon,body[data-theme] .highlight-icon,body[data-theme] .icon-wrapper,body[data-theme] .promise-icon-wrapper { background:var(--soft);border-color:var(--line);color:var(--accent); }
body[data-theme] .hero-brand-core { background:linear-gradient(145deg,var(--accent2),var(--accent));border-color:color-mix(in srgb,var(--accent2) 75%,white);box-shadow:0 18px 48px color-mix(in srgb,var(--accent) 30%,transparent); }
body[data-theme] .home-teaser,body[data-theme] .bg-alt,body[data-theme] .about-cta { background:var(--soft);border-color:var(--line); }
body[data-theme] .cta-desc { color:var(--muted); }
body[data-theme] .category-btn,body[data-theme] .search-input { background:var(--surface);border-color:var(--line);color:var(--ink); }
body[data-theme] .search-input:focus { border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent); }
body[data-theme] .command-card:hover,body[data-theme] .highlight-card:hover,body[data-theme] .feature-card:hover,body[data-theme] .promise-card:hover { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
body[data-theme] .cmd-badge,body[data-theme] .card-usage,body[data-theme] .tag,body[data-theme] .badge { background:var(--soft);border-color:var(--line);color:var(--muted); }
body[data-theme] .footer { background:var(--soft);border-color:var(--line);color:var(--muted); }
body[data-theme] .footer-logo-text,body[data-theme] .footer-column h4 { color:var(--ink); }
body[data-theme] .footer-description,body[data-theme] .footer-column a { color:var(--muted); }
body[data-theme] .social-icon { background:var(--surface);border-color:var(--line);color:var(--muted); }
body[data-theme] .footer-bottom { border-color:var(--line); }
body[data-theme] .theme-menu { background:var(--surface);border-color:var(--line);color:var(--ink); }
body[data-theme] .theme-menu-heading { color:var(--ink); }
body[data-theme] .theme-menu-heading span { color:var(--muted); }
body[data-theme] .theme-option { color:var(--muted); }
body[data-theme] .theme-option:hover,body[data-theme] .theme-option[aria-pressed="true"] { background:var(--soft);border-color:var(--line);color:var(--accent); }
body[data-theme] .theme-option > svg { color:var(--accent); }
body[data-theme] .mobile-menu-toggle { background:var(--soft);border-color:var(--line);color:var(--ink); }
body[data-theme="midnight"] .theme-menu,body[data-theme="obsidian"] .theme-menu,body[data-theme="violet"] .theme-menu,body[data-theme="emerald"] .theme-menu,body[data-theme="ocean"] .theme-menu,body[data-theme="crimson"] .theme-menu,body[data-theme="slate"] .theme-menu { background:rgba(17,22,34,.97); }
@media(max-width:767px) {
 .theme-menu { position:fixed;top:76px;right:10px;width:min(310px,calc(100vw - 20px));max-height:calc(100vh - 95px);overflow:auto; }
 .nav-actions .theme-toggle { min-height:36px;padding:8px 10px;font-size:.74rem; }
 .nav-actions .theme-toggle span { display:none; }
 .nav-actions .theme-picker { display:block; }
}

body[data-theme] {
  background:
    radial-gradient(ellipse at 15% 8%,var(--glow),transparent 34%),
    radial-gradient(ellipse at 88% 28%,var(--glow),transparent 32%),
    linear-gradient(color-mix(in srgb,var(--accent) 6%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--accent) 6%,transparent) 1px,transparent 1px),
    var(--page);
  background-size:auto,auto,46px 46px,46px 46px,auto;
}
@media(max-width:767px) {
  .nav-actions .theme-toggle { display:inline-flex!important; }
}


/* =========================================================
   CONTRAST FIX — SUPPORT PAGE + ALL THEME VARIANTS
   ========================================================= */
body[data-theme] .discord-banner-text h3,
body[data-theme] .support-checklist li,
body[data-theme] .dark-card-title,
body[data-theme] .support-section-title,
body[data-theme] .support-section-desc,
body[data-theme] .why-join-card h3,
body[data-theme] .contact-card h3 { color:var(--ink)!important; }
body[data-theme] .support-title { color:var(--ink)!important; }
body[data-theme] .support-desc { color:var(--muted)!important; }
body[data-theme] .bot-status {
  color:var(--ink)!important;
  background:var(--surface);
  border-color:var(--line);
}
body[data-theme] .discord-banner-text span { color:var(--accent)!important;background:var(--soft)!important; }
body[data-theme] .support-checklist li i { color:var(--accent2)!important; }
body[data-theme] .dark-card {
  background:var(--surface)!important;border:1px solid var(--line)!important;
  box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 7%,transparent);
}
body[data-theme] .dark-card-title { color:var(--ink)!important; }
body[data-theme] .dark-card-desc,
body[data-theme] .why-join-card p,
body[data-theme] .contact-card p,
body[data-theme] .support-muted { color:var(--muted)!important; }
body[data-theme] .dark-card-btn {
  background:linear-gradient(110deg,var(--accent2),var(--accent))!important;
  border-color:var(--accent)!important;color:#fff!important;
}
body[data-theme] .dark-card-btn:hover { filter:brightness(1.08); }
body[data-theme] .support-card-split,
body[data-theme] .support-main-section .glass-card {
  background:var(--surface)!important;border-color:var(--line)!important;
}
body[data-theme] .discord-server-banner { border-color:var(--line)!important; }
body[data-theme] .support-main-section,
body[data-theme] .support-why-join,
body[data-theme] .support-community-features,
body[data-theme] .support-contact { color:var(--ink); }
body[data-theme] .support-why-join h2,
body[data-theme] .support-community-features h2,
body[data-theme] .support-contact h2 { color:var(--ink)!important; }
body[data-theme] .support-why-join p,
body[data-theme] .support-community-features p,
body[data-theme] .support-contact p { color:var(--muted); }
body[data-theme] .why-join-card,
body[data-theme] .contact-card {
  background:var(--surface)!important;border-color:var(--line)!important;
}
body[data-theme] .why-join-card h3,
body[data-theme] .contact-card h3 { color:var(--ink)!important; }
body[data-theme] .why-join-card p,
body[data-theme] .contact-card p { color:var(--muted)!important; }


/* =========================================================
   AURORA FLOW — NEW PREMIUM BACKGROUND THEME
   Soft white / lavender / ice-blue flowing ribbons.
   ========================================================= */
body[data-theme="aurora-flow"] {
  --page:#f8f8ff;
  --surface:rgba(255,255,255,.78);
  --ink:#172344;
  --muted:#667493;
  --line:rgba(196,204,242,.72);
  --accent:#6658e8;
  --accent2:#32a9ff;
  --soft:#f0efff;
  --glow:rgba(120,126,255,.2);
}
.swatch-aurora {
  background:linear-gradient(135deg,#f8f8ff 0%,#b8caff 38%,#9c6cff 68%,#5fcaff 100%);
}
body[data-theme="aurora-flow"] {
  background:
    radial-gradient(ellipse at 12% 5%,rgba(174,195,255,.34),transparent 36%),
    radial-gradient(ellipse at 86% 38%,rgba(185,158,255,.25),transparent 34%),
    linear-gradient(135deg,#fbfcff 0%,#f3f2ff 48%,#eff8ff 100%);
}
.aurora-flow-bg {
  display:none;
}
body[data-theme="aurora-flow"] .aurora-flow-bg {
  display:block;
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 18% 12%,rgba(255,255,255,.9),transparent 32%),
    radial-gradient(ellipse at 80% 70%,rgba(177,211,255,.3),transparent 38%);
}
body[data-theme="aurora-flow"] .aurora-flow-bg::before {
  content:"";
  position:absolute;
  width:125vw;
  height:58vh;
  left:-18vw;
  top:-34vh;
  border-radius:0 0 55% 48%;
  transform:rotate(-9deg);
  background:
    linear-gradient(112deg,
      rgba(92,157,255,.06) 0%,
      rgba(119,151,255,.24) 22%,
      rgba(174,126,255,.30) 37%,
      rgba(255,255,255,.72) 48%,
      rgba(110,193,255,.25) 65%,
      rgba(255,255,255,.1) 78%);
  filter:blur(2px);
  box-shadow:0 18px 55px rgba(125,142,255,.12);
  animation:auroraRibbonTop 18s ease-in-out infinite alternate;
}
body[data-theme="aurora-flow"] .aurora-flow-bg::after {
  content:"";
  position:absolute;
  width:120vw;
  height:52vh;
  right:-28vw;
  bottom:-34vh;
  border-radius:58% 45% 0 0;
  transform:rotate(-12deg);
  background:
    linear-gradient(110deg,
      rgba(255,255,255,.1) 0%,
      rgba(129,171,255,.2) 26%,
      rgba(174,130,255,.34) 43%,
      rgba(255,255,255,.75) 53%,
      rgba(88,190,255,.32) 70%,
      rgba(255,255,255,.08) 100%);
  filter:blur(1px);
  box-shadow:0 -18px 60px rgba(103,148,255,.13);
  animation:auroraRibbonBottom 21s ease-in-out infinite alternate;
}
body[data-theme="aurora-flow"] .home-hero-glow {
  background:radial-gradient(ellipse,rgba(144,139,255,.2),transparent 68%);
}
body[data-theme="aurora-flow"] .feature-orbit-panel {
  background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(239,240,255,.76));
  border-color:rgba(178,188,247,.8);
  box-shadow:0 28px 70px rgba(103,113,211,.13),inset 0 1px 0 rgba(255,255,255,.95);
}
body[data-theme="aurora-flow"] .hero-brand-core {
  background:linear-gradient(145deg,#39b8ff,#6257e9 68%,#956cff);
  border-color:#b6e5ff;
  box-shadow:0 18px 48px rgba(104,111,235,.32);
}
body[data-theme="aurora-flow"] .orbit-ring,
body[data-theme="aurora-flow"] .core-ring { border-color:rgba(119,132,255,.48); }
body[data-theme="aurora-flow"] .hero-feature,
body[data-theme="aurora-flow"] .highlight-card,
body[data-theme="aurora-flow"] .glass-card,
body[data-theme="aurora-flow"] .command-card,
body[data-theme="aurora-flow"] .feature-card,
body[data-theme="aurora-flow"] .promise-card {
  background:rgba(255,255,255,.76);
  border-color:rgba(198,203,244,.72);
  box-shadow:0 12px 32px rgba(93,105,190,.08),inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
body[data-theme="aurora-flow"] .nav-links a.active,
body[data-theme="aurora-flow"] .nav-links a:hover { color:#5c55df;background:#efefff; }
body[data-theme="aurora-flow"] .btn-primary,
body[data-theme="aurora-flow"] .blurple-btn,
body[data-theme="aurora-flow"] .category-btn.active {
  background:linear-gradient(110deg,#35adff,#6259e9);
  border-color:#6e8bff;
  color:#fff;
}
body[data-theme="aurora-flow"] .gradient-text {
  background:linear-gradient(100deg,#32a9ff,#655be9 58%,#9870ed);
  -webkit-background-clip:text;background-clip:text;
}
body[data-theme="aurora-flow"] .theme-option[aria-pressed="true"] {
  background:#f0efff;border-color:#c9c4ff;color:#5c55df;
}
@keyframes auroraRibbonTop {
  from { transform:translate3d(-1.5%,0,0) rotate(-9deg) scale(1); }
  to { transform:translate3d(2%,2.5%,0) rotate(-5deg) scale(1.04); }
}
@keyframes auroraRibbonBottom {
  from { transform:translate3d(1%,0,0) rotate(-12deg) scale(1); }
  to { transform:translate3d(-2%,-2%,0) rotate(-8deg) scale(1.05); }
}
/* Keep the decorative layer behind every interactive section */
body[data-theme="aurora-flow"] > header,
body[data-theme="aurora-flow"] > main,
body[data-theme="aurora-flow"] > footer { position:relative;z-index:1; }
body[data-theme="aurora-flow"] .pointer-aura { z-index:4; }
@media(max-width:767px) {
  body[data-theme="aurora-flow"] .aurora-flow-bg::before { height:42vh;top:-27vh; }
  body[data-theme="aurora-flow"] .aurora-flow-bg::after { height:38vh;bottom:-28vh; }
}
@media (max-width:650px) {
  .live-monitor-section { padding:0 0 42px; }
  .live-monitor { padding:18px 15px;border-radius:17px; }
  .live-monitor-activity { gap:4px;margin:18px 0 13px; }
  .live-monitor-metrics { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
  .live-monitor-metric { padding:11px; }
}
@media(prefers-reduced-motion:reduce) {
  body[data-theme="aurora-flow"] .aurora-flow-bg::before,
  body[data-theme="aurora-flow"] .aurora-flow-bg::after { animation:none; }
  .live-monitor-activity span,.live-monitor[data-state="online"] .live-monitor-dot { animation:none; }
}


/* =========================================================
   MOBILE NAVIGATION CONTRAST FIX — THEME AWARE
   Fixes pale text on white dropdown and mismatched menu panel.
   ========================================================= */
@media (max-width: 767px) {
  body[data-theme] .navbar .nav-links {
    background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 18px 42px color-mix(in srgb, var(--accent) 14%, transparent) !important;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }

  body[data-theme] .navbar .nav-links a,
  body[data-theme] .navbar .nav-links a:visited {
    color: var(--muted) !important;
    background: transparent !important;
    border: 1px solid transparent;
    font-weight: 600;
    border-radius: 11px;
  }

  body[data-theme] .navbar .nav-links a:hover,
  body[data-theme] .navbar .nav-links a:focus-visible {
    color: var(--accent) !important;
    background: var(--soft) !important;
    border-color: var(--line);
    outline: none;
  }

  body[data-theme] .navbar .nav-links a.active,
  body[data-theme] .navbar .nav-links a[aria-current="page"] {
    color: var(--accent) !important;
    background: var(--soft) !important;
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  }
}

/* Keep menu and text contrast correct in Aurora Flow as well */
body[data-theme="aurora-flow"] .navbar .nav-links a {
  color: #536887 !important;
}
body[data-theme="aurora-flow"] .navbar .nav-links a.active,
body[data-theme="aurora-flow"] .navbar .nav-links a:hover {
  color: #5145d8 !important;
  background: #eceeff !important;
  border-color: #d9ddff;
}


/* =========================================================
   MOBILE COMMANDS LAYOUT FIX
   Stop category tabs from sliding sideways / clipping.
   ========================================================= */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

#view-commands,
#view-commands .container,
#view-commands .commands-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#view-commands .category-nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    justify-content: stretch;
    gap: 9px;
    width: 100%;
    max-width: 100%;
    margin: 24px auto 24px;
    padding: 0;
    overflow: visible !important;
    flex-wrap: initial !important;
    scrollbar-width: none;
}

#view-commands .category-nav::-webkit-scrollbar {
    display: none;
}

#view-commands .category-btn {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 62px;
    padding: 9px 5px;
    flex: initial !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 13px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    font-size: clamp(.62rem, 2.4vw, .76rem);
    line-height: 1.15;
}

#view-commands .category-btn .category-icon {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin: 0 0 2px;
}

#view-commands .search-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 auto 24px;
}

#view-commands .search-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-right: 16px;
}

#view-commands .commands-grid {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
}

#view-commands .command-card {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

@media (max-width: 380px) {
    #view-commands .category-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    #view-commands .category-btn {
        min-height: 58px;
        padding: 8px 4px;
    }
}

@media (min-width: 768px) {
    #view-commands .category-nav {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center;
        overflow: visible !important;
    }
    #view-commands .category-btn {
        width: auto;
        min-width: 88px;
        padding: 12px 17px;
    }
}


/* =========================================================
   COMMANDS PAGE — VISIBILITY, ALIGNMENT & PREMIUM HIGHLIGHT
   ========================================================= */
#view-commands {
    width: 100%;
    overflow: visible;
}
#view-commands .container {
    box-sizing: border-box;
    width: min(100% - 32px, 1150px);
    max-width: 1150px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}
#view-commands .commands-wrapper,
#view-commands .commands-grid {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
#view-commands .commands-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 16px;
}
#view-commands .command-card {
    box-sizing: border-box;
    position: relative;
    display: flex !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 190px;
    height: auto;
    padding: 22px;
    margin: 0;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none;
    animation: none !important;
    overflow: hidden;
    border: 1px solid var(--line, #dce7f7);
    border-left: 3px solid var(--accent, #0868ee);
    border-radius: 17px;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent, #0868ee) 5%, transparent), transparent 55%),
      var(--surface, #fff);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent, #0868ee) 7%, transparent);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#view-commands .command-card::before {
    content: "";
    position: absolute;
    width: 145px;
    height: 145px;
    right: -60px;
    top: -70px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent, #0868ee) 16%, transparent), transparent 70%);
    pointer-events: none;
}
#view-commands .command-card:hover {
    border-color: color-mix(in srgb, var(--accent, #0868ee) 55%, var(--line, #dce7f7));
    border-left-color: var(--accent, #0868ee);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--accent, #0868ee) 14%, transparent);
    transform: translateY(-3px);
}
#view-commands .card-header {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    margin-bottom: 14px;
}
#view-commands .card-header h3 {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    color: var(--ink, #173253) !important;
    overflow-wrap: anywhere;
    font-size: clamp(1.05rem, 4vw, 1.3rem);
    line-height: 1.25;
}
#view-commands .cmd-badge {
    flex: 0 1 auto;
    max-width: 100%;
    overflow-wrap: anywhere;
    color: var(--accent, #0868ee) !important;
    background: var(--soft, #edf5ff) !important;
    border: 1px solid var(--line, #dce7f7) !important;
}
#view-commands .card-description {
    position: relative;
    color: var(--muted, #687a94) !important;
    line-height: 1.65;
    overflow-wrap: anywhere;
}
#view-commands .card-usage {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    background: var(--soft, #f3f7fd) !important;
    border: 1px solid var(--line, #dce7f7);
    border-radius: 10px;
    color: var(--ink, #345276) !important;
}
#view-commands .card-usage code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
#view-commands .card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 13px;
}
#view-commands .tag {
    background: var(--soft, #edf5ff) !important;
    border: 1px solid var(--line, #dce7f7);
    color: var(--muted, #5b7190) !important;
}
#view-commands .category-btn.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--accent2, #18a8ff), var(--accent, #0868ee)) !important;
    border-color: var(--accent, #0868ee) !important;
    box-shadow: 0 7px 19px color-mix(in srgb, var(--accent, #0868ee) 24%, transparent);
    transform: translateY(-2px);
}
#view-commands .category-btn {
    transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#view-commands .category-btn:not(.active):hover {
    color: var(--accent, #0868ee) !important;
    border-color: color-mix(in srgb, var(--accent, #0868ee) 35%, var(--line, #dce7f7));
    background: var(--soft, #edf5ff) !important;
}
#view-commands .no-results {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
@media (min-width: 768px) {
    #view-commands .commands-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}
@media (max-width: 767px) {
    #view-commands .container {
        width: calc(100% - 32px);
        max-width: none;
        padding: 0;
    }
    #view-commands .page-header {
        margin-top: 30px;
    }
    #view-commands .command-card {
        padding: 18px;
        min-height: 0;
        border-radius: 15px;
    }
}


/* =========================================================
   TWO NEW MONOCHROME THEMES
   Black & White / White & Black
   ========================================================= */
.swatch-mono-dark {
    background: linear-gradient(135deg,#050505 50%,#ffffff 50%);
}
.swatch-mono-light {
    background: linear-gradient(135deg,#ffffff 50%,#050505 50%);
}

/* Black background, white typography and monochrome surfaces */
body[data-theme="monochrome-dark"] {
    --page:#050505;
    --surface:rgba(20,20,20,.97);
    --ink:#ffffff;
    --muted:#c2c2c2;
    --line:rgba(255,255,255,.17);
    --accent:#ffffff;
    --accent2:#bdbdbd;
    --soft:#1c1c1c;
    --glow:rgba(255,255,255,.10);
}
body[data-theme="monochrome-dark"] .btn-primary,
body[data-theme="monochrome-dark"] .blurple-btn,
body[data-theme="monochrome-dark"] .category-btn.active,
body[data-theme="monochrome-dark"] .dark-card-btn {
    background:#ffffff!important;
    color:#050505!important;
    border-color:#ffffff!important;
    box-shadow:0 7px 22px rgba(255,255,255,.12);
}
body[data-theme="monochrome-dark"] .hero-feature-icon,
body[data-theme="monochrome-dark"] .highlight-icon,
body[data-theme="monochrome-dark"] .icon-wrapper,
body[data-theme="monochrome-dark"] .promise-icon-wrapper {
    background:#252525!important;
    color:#fff!important;
    border-color:#444!important;
}
body[data-theme="monochrome-dark"] .hero-feature-icon svg,
body[data-theme="monochrome-dark"] .highlight-icon svg,
body[data-theme="monochrome-dark"] .icon-wrapper svg,
body[data-theme="monochrome-dark"] .promise-icon-wrapper svg {
    color:#fff!important;
}
body[data-theme="monochrome-dark"] .hero-brand-core {
    background:linear-gradient(145deg,#f5f5f5,#bcbcbc)!important;
    border-color:#fff!important;
}
body[data-theme="monochrome-dark"] .hero-brand-core img {
    filter:grayscale(1);
}
body[data-theme="monochrome-dark"] .theme-menu {
    background:rgba(18,18,18,.98)!important;
}
body[data-theme="monochrome-dark"] .theme-menu-heading,
body[data-theme="monochrome-dark"] .theme-option {
    color:#f5f5f5!important;
}
body[data-theme="monochrome-dark"] .theme-option:hover,
body[data-theme="monochrome-dark"] .theme-option[aria-pressed="true"] {
    background:#292929!important;
    color:#fff!important;
}

/* White background, black typography and monochrome surfaces */
body[data-theme="monochrome-light"] {
    --page:#ffffff;
    --surface:rgba(255,255,255,.97);
    --ink:#080808;
    --muted:#505050;
    --line:#dedede;
    --accent:#080808;
    --accent2:#444444;
    --soft:#f1f1f1;
    --glow:rgba(0,0,0,.07);
}
body[data-theme="monochrome-light"] .btn-primary,
body[data-theme="monochrome-light"] .blurple-btn,
body[data-theme="monochrome-light"] .category-btn.active,
body[data-theme="monochrome-light"] .dark-card-btn {
    background:#080808!important;
    color:#ffffff!important;
    border-color:#080808!important;
    box-shadow:0 7px 20px rgba(0,0,0,.13);
}
body[data-theme="monochrome-light"] .hero-feature-icon,
body[data-theme="monochrome-light"] .highlight-icon,
body[data-theme="monochrome-light"] .icon-wrapper,
body[data-theme="monochrome-light"] .promise-icon-wrapper {
    background:#f0f0f0!important;
    color:#080808!important;
    border-color:#dedede!important;
}
body[data-theme="monochrome-light"] .hero-feature-icon svg,
body[data-theme="monochrome-light"] .highlight-icon svg,
body[data-theme="monochrome-light"] .icon-wrapper svg,
body[data-theme="monochrome-light"] .promise-icon-wrapper svg {
    color:#080808!important;
}
body[data-theme="monochrome-light"] .hero-brand-core {
    background:linear-gradient(145deg,#111,#555)!important;
    border-color:#111!important;
}
body[data-theme="monochrome-light"] .theme-menu {
    background:rgba(255,255,255,.98)!important;
}
body[data-theme="monochrome-light"] .theme-menu-heading,
body[data-theme="monochrome-light"] .theme-option {
    color:#111!important;
}
body[data-theme="monochrome-light"] .theme-option:hover,
body[data-theme="monochrome-light"] .theme-option[aria-pressed="true"] {
    background:#f0f0f0!important;
    color:#000!important;
}


/* =========================================================
   THEME STUDIO POPUP FIX — OPAQUE, TOPMOST, SCROLLABLE
   ========================================================= */
.navbar {
    position: sticky !important;
    z-index: 10000 !important;
    isolation: isolate;
}
.navbar .nav-container {
    position: relative;
    z-index: 1;
}
.navbar .theme-picker {
    position: relative;
    z-index: 10002 !important;
}
.navbar .theme-menu {
    position: absolute !important;
    z-index: 10003 !important;
    isolation: isolate;
    opacity: 1 !important;
    background: #ffffff !important;
    color: #14213d !important;
    border: 1px solid #d5e0f3 !important;
    box-shadow: 0 24px 70px rgba(19, 42, 82, .24) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    max-height: min( min(72vh, 560px), calc(100vh - 110px) );
    overflow-y: auto;
    overscroll-behavior: contain;
}
.navbar .theme-menu[hidden] {
    display: none !important;
}
.navbar .theme-menu-heading,
.navbar .theme-option {
    color: #263754 !important;
}
.navbar .theme-menu-heading span {
    color: #71819b !important;
}
.navbar .theme-option:hover,
.navbar .theme-option[aria-pressed="true"] {
    background: #edf4ff !important;
    color: #075fe0 !important;
    border-color: #cbdfff !important;
}
.navbar .theme-option > svg {
    color: #075fe0 !important;
}
.navbar .theme-options {
    position: relative;
    z-index: 1;
}

/* Dark palettes get a fully opaque dark menu, never see-through */
body[data-theme="midnight"] .navbar .theme-menu,
body[data-theme="obsidian"] .navbar .theme-menu,
body[data-theme="violet"] .navbar .theme-menu,
body[data-theme="emerald"] .navbar .theme-menu,
body[data-theme="ocean"] .navbar .theme-menu,
body[data-theme="crimson"] .navbar .theme-menu,
body[data-theme="slate"] .navbar .theme-menu,
body[data-theme="monochrome-dark"] .navbar .theme-menu {
    background: #151923 !important;
    color: #f5f7fb !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.42) !important;
}
body[data-theme="midnight"] .navbar .theme-menu-heading,
body[data-theme="obsidian"] .navbar .theme-menu-heading,
body[data-theme="violet"] .navbar .theme-menu-heading,
body[data-theme="emerald"] .navbar .theme-menu-heading,
body[data-theme="ocean"] .navbar .theme-menu-heading,
body[data-theme="crimson"] .navbar .theme-menu-heading,
body[data-theme="slate"] .navbar .theme-menu-heading,
body[data-theme="monochrome-dark"] .navbar .theme-menu-heading,
body[data-theme="midnight"] .navbar .theme-option,
body[data-theme="obsidian"] .navbar .theme-option,
body[data-theme="violet"] .navbar .theme-option,
body[data-theme="emerald"] .navbar .theme-option,
body[data-theme="ocean"] .navbar .theme-option,
body[data-theme="crimson"] .navbar .theme-option,
body[data-theme="slate"] .navbar .theme-option,
body[data-theme="monochrome-dark"] .navbar .theme-option {
    color: #e7ecf5 !important;
}
body[data-theme="midnight"] .navbar .theme-option:hover,
body[data-theme="midnight"] .navbar .theme-option[aria-pressed="true"],
body[data-theme="obsidian"] .navbar .theme-option:hover,
body[data-theme="obsidian"] .navbar .theme-option[aria-pressed="true"],
body[data-theme="violet"] .navbar .theme-option:hover,
body[data-theme="violet"] .navbar .theme-option[aria-pressed="true"],
body[data-theme="emerald"] .navbar .theme-option:hover,
body[data-theme="emerald"] .navbar .theme-option[aria-pressed="true"],
body[data-theme="ocean"] .navbar .theme-option:hover,
body[data-theme="ocean"] .navbar .theme-option[aria-pressed="true"],
body[data-theme="crimson"] .navbar .theme-option:hover,
body[data-theme="crimson"] .navbar .theme-option[aria-pressed="true"],
body[data-theme="slate"] .navbar .theme-option:hover,
body[data-theme="slate"] .navbar .theme-option[aria-pressed="true"],
body[data-theme="monochrome-dark"] .navbar .theme-option:hover,
body[data-theme="monochrome-dark"] .navbar .theme-option[aria-pressed="true"] {
    background: #252d3b !important;
    border-color: rgba(255,255,255,.18) !important;
    color: #ffffff !important;
}

/* Ensure the popup is above the transformed hero illustration */
.home-hero,
.home-hero-visual,
.feature-orbit-panel {
    z-index: auto;
}
@media (max-width: 767px) {
    .navbar .theme-menu {
        position: fixed !important;
        top: 76px !important;
        right: 10px !important;
        left: auto !important;
        width: min(310px, calc(100vw - 20px)) !important;
        max-height: calc(100dvh - 92px) !important;
        overflow-y: auto !important;
    }
}


/* =========================================================
   THE 16TH THEME — SOLAR GOLD
   Warm ivory, champagne gold and deep espresso contrast.
   ========================================================= */
.swatch-solar-gold {
    background: linear-gradient(135deg,#fffaf0 50%,#c28b2c 50%);
}
body[data-theme="solar-gold"] {
    --page:#fffaf0;
    --surface:rgba(255,255,255,.95);
    --ink:#302313;
    --muted:#78664a;
    --line:#ead9b8;
    --accent:#a66b12;
    --accent2:#e0b65f;
    --soft:#f8efdD;
    --glow:rgba(218,170,83,.18);
}
body[data-theme="solar-gold"] .btn-primary,
body[data-theme="solar-gold"] .blurple-btn,
body[data-theme="solar-gold"] .category-btn.active,
body[data-theme="solar-gold"] .dark-card-btn {
    background:linear-gradient(110deg,#dcae54,#98600d)!important;
    color:#fff!important;
    border-color:#bd8429!important;
    box-shadow:0 8px 22px rgba(166,107,18,.18);
}
body[data-theme="solar-gold"] .hero-feature-icon,
body[data-theme="solar-gold"] .highlight-icon,
body[data-theme="solar-gold"] .icon-wrapper,
body[data-theme="solar-gold"] .promise-icon-wrapper {
    background:#fbf1dc!important;
    color:#98600d!important;
    border-color:#eddbb8!important;
}
body[data-theme="solar-gold"] .hero-feature-icon svg,
body[data-theme="solar-gold"] .highlight-icon svg,
body[data-theme="solar-gold"] .icon-wrapper svg,
body[data-theme="solar-gold"] .promise-icon-wrapper svg {
    color:#98600d!important;
}
body[data-theme="solar-gold"] .theme-option[aria-pressed="true"],
body[data-theme="solar-gold"] .theme-option:hover {
    background:#f8efdD!important;
    color:#87570f!important;
    border-color:#ead4a9!important;
}


/* =========================================================
   ABOUT PAGE — CENTER CONTENT PANELS MATCH COMMAND CARDS
   Theme-aware card surface, readable text and no overflow.
   ========================================================= */
#view-about,
#view-about .about-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}
#view-about .about-text-container {
    width: min(100% - 36px, 800px);
    max-width: 800px;
    min-width: 0;
    margin-inline: auto;
}
#view-about .about-section .glass-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: clamp(20px, 4vw, 36px);
    border-radius: 18px;
    background: var(--surface, #ffffff) !important;
    border: 1px solid var(--line, #dce7f7) !important;
    box-shadow:
      0 10px 30px color-mix(in srgb, var(--accent, #0868ee) 8%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--surface, #fff) 85%, white);
    color: var(--muted, #647895) !important;
    line-height: 1.8;
    overflow-wrap: anywhere;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
#view-about .about-section .glass-card p {
    color: var(--muted, #647895) !important;
    margin: 0 0 1.35rem;
    overflow-wrap: anywhere;
}
#view-about .about-section .glass-card p:last-child {
    margin-bottom: 0;
}
#view-about .about-section .glass-card strong,
#view-about .about-section .glass-card h3,
#view-about .about-section .glass-card li {
    color: var(--ink, #102344) !important;
}
#view-about .section-title {
    color: var(--ink, #102344) !important;
}
#view-about .mission-checklist li i {
    color: var(--accent, #0868ee) !important;
}
#view-about .vision-text {
    box-sizing: border-box;
    width: 100%;
    max-width: 800px;
    margin-inline: auto;
    padding: clamp(20px, 4vw, 36px);
    border: 1px solid var(--line, #dce7f7);
    border-radius: 18px;
    background: var(--surface, #fff);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--accent, #0868ee) 8%, transparent);
    color: var(--muted, #647895) !important;
    text-align: left;
}
#view-about .vision-text p {
    color: var(--muted, #647895) !important;
}
#view-about .promise-card {
    background: var(--surface, #fff) !important;
    border-color: var(--line, #dce7f7) !important;
}
#view-about .promise-card h3 {
    color: var(--ink, #102344) !important;
}
#view-about .promise-card p {
    color: var(--muted, #647895) !important;
}

/* Give dark palettes a clear dark card against the page background */
body[data-theme="midnight"] #view-about .about-section .glass-card,
body[data-theme="obsidian"] #view-about .about-section .glass-card,
body[data-theme="violet"] #view-about .about-section .glass-card,
body[data-theme="emerald"] #view-about .about-section .glass-card,
body[data-theme="ocean"] #view-about .about-section .glass-card,
body[data-theme="crimson"] #view-about .about-section .glass-card,
body[data-theme="slate"] #view-about .about-section .glass-card,
body[data-theme="monochrome-dark"] #view-about .about-section .glass-card {
    background: #171b25 !important;
    border-color: rgba(255,255,255,.13) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.035);
}
body[data-theme="midnight"] #view-about .vision-text,
body[data-theme="obsidian"] #view-about .vision-text,
body[data-theme="violet"] #view-about .vision-text,
body[data-theme="emerald"] #view-about .vision-text,
body[data-theme="ocean"] #view-about .vision-text,
body[data-theme="crimson"] #view-about .vision-text,
body[data-theme="slate"] #view-about .vision-text,
body[data-theme="monochrome-dark"] #view-about .vision-text {
    background: #171b25;
    border-color: rgba(255,255,255,.13);
}
@media (max-width: 767px) {
    #view-about .about-text-container {
        width: calc(100% - 32px);
    }
    #view-about .about-section {
        padding-block: 3.5rem;
    }
    #view-about .about-section .glass-card {
        padding: 20px;
    }
    #view-about .mission-checklist {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   GLOBAL THEME PANEL SYSTEM — ALL WEBSITE PAGES
   Unifies card/background treatment on Home, About, Commands,
   Features and Support for all 16 selectable themes.
   ========================================================= */

/* Theme-aware section surfaces */
body[data-theme] .bg-alt,
body[data-theme] .home-teaser,
body[data-theme] .support-why-join,
body[data-theme] .support-community-features,
body[data-theme] .support-contact {
    background: var(--soft) !important;
    border-color: var(--line) !important;
}

/* Consistent premium panel surfaces on every view */
body[data-theme] #view-home .glass-card,
body[data-theme] #view-home .highlight-card,
body[data-theme] #view-home .feature-card,
body[data-theme] #view-home .promise-card,
body[data-theme] #view-features .feature-card,
body[data-theme] #view-support .glass-card,
body[data-theme] #view-support .feature-card,
body[data-theme] #view-support .why-join-card,
body[data-theme] #view-support .contact-card,
body[data-theme] #view-support .dark-card,
body[data-theme] #view-about .promise-card {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    color: var(--muted) !important;
    box-shadow:
      0 10px 30px color-mix(in srgb, var(--accent) 8%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--surface) 82%, white);
}

/* Make all panel headings and body copy use the active palette */
body[data-theme] #view-home .glass-card h1,
body[data-theme] #view-home .glass-card h2,
body[data-theme] #view-home .glass-card h3,
body[data-theme] #view-home .highlight-card h3,
body[data-theme] #view-home .feature-card h3,
body[data-theme] #view-home .promise-card h3,
body[data-theme] #view-features .feature-card h3,
body[data-theme] #view-support .glass-card h1,
body[data-theme] #view-support .glass-card h2,
body[data-theme] #view-support .glass-card h3,
body[data-theme] #view-support .feature-card h3,
body[data-theme] #view-support .why-join-card h3,
body[data-theme] #view-support .contact-card h3,
body[data-theme] #view-support .dark-card-title {
    color: var(--ink) !important;
}
body[data-theme] #view-home .glass-card p,
body[data-theme] #view-home .highlight-card p,
body[data-theme] #view-home .feature-card p,
body[data-theme] #view-home .promise-card p,
body[data-theme] #view-features .feature-card p,
body[data-theme] #view-support .glass-card p,
body[data-theme] #view-support .feature-card p,
body[data-theme] #view-support .why-join-card p,
body[data-theme] #view-support .contact-card p,
body[data-theme] #view-support .dark-card-desc {
    color: var(--muted) !important;
}

/* Feature icon tiles follow the chosen theme */
body[data-theme] #view-features .feature-icon,
body[data-theme] #view-home .highlight-icon,
body[data-theme] #view-home .icon-wrapper,
body[data-theme] #view-support .icon-wrapper,
body[data-theme] #view-support .promise-icon-wrapper {
    color: var(--accent) !important;
}
body[data-theme] #view-features .feature-card:hover,
body[data-theme] #view-support .feature-card:hover,
body[data-theme] #view-support .dark-card:hover,
body[data-theme] #view-home .highlight-card:hover {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line)) !important;
    box-shadow: 0 16px 38px color-mix(in srgb, var(--accent) 13%, transparent);
    transform: translateY(-4px);
}

/* Dark themes: solid dark cards with bright text, never washed out */
body[data-theme="midnight"] #view-home .glass-card,
body[data-theme="midnight"] #view-home .highlight-card,
body[data-theme="midnight"] #view-home .feature-card,
body[data-theme="midnight"] #view-home .promise-card,
body[data-theme="midnight"] #view-features .feature-card,
body[data-theme="midnight"] #view-support .glass-card,
body[data-theme="midnight"] #view-support .feature-card,
body[data-theme="midnight"] #view-support .why-join-card,
body[data-theme="midnight"] #view-support .contact-card,
body[data-theme="midnight"] #view-support .dark-card,
body[data-theme="obsidian"] #view-home .glass-card,
body[data-theme="obsidian"] #view-home .highlight-card,
body[data-theme="obsidian"] #view-home .feature-card,
body[data-theme="obsidian"] #view-home .promise-card,
body[data-theme="obsidian"] #view-features .feature-card,
body[data-theme="obsidian"] #view-support .glass-card,
body[data-theme="obsidian"] #view-support .feature-card,
body[data-theme="obsidian"] #view-support .why-join-card,
body[data-theme="obsidian"] #view-support .contact-card,
body[data-theme="obsidian"] #view-support .dark-card,
body[data-theme="violet"] #view-home .glass-card,
body[data-theme="violet"] #view-home .highlight-card,
body[data-theme="violet"] #view-home .feature-card,
body[data-theme="violet"] #view-home .promise-card,
body[data-theme="violet"] #view-features .feature-card,
body[data-theme="violet"] #view-support .glass-card,
body[data-theme="violet"] #view-support .feature-card,
body[data-theme="violet"] #view-support .why-join-card,
body[data-theme="violet"] #view-support .contact-card,
body[data-theme="violet"] #view-support .dark-card,
body[data-theme="emerald"] #view-home .glass-card,
body[data-theme="emerald"] #view-home .highlight-card,
body[data-theme="emerald"] #view-home .feature-card,
body[data-theme="emerald"] #view-home .promise-card,
body[data-theme="emerald"] #view-features .feature-card,
body[data-theme="emerald"] #view-support .glass-card,
body[data-theme="emerald"] #view-support .feature-card,
body[data-theme="emerald"] #view-support .why-join-card,
body[data-theme="emerald"] #view-support .contact-card,
body[data-theme="emerald"] #view-support .dark-card,
body[data-theme="ocean"] #view-home .glass-card,
body[data-theme="ocean"] #view-home .highlight-card,
body[data-theme="ocean"] #view-home .feature-card,
body[data-theme="ocean"] #view-home .promise-card,
body[data-theme="ocean"] #view-features .feature-card,
body[data-theme="ocean"] #view-support .glass-card,
body[data-theme="ocean"] #view-support .feature-card,
body[data-theme="ocean"] #view-support .why-join-card,
body[data-theme="ocean"] #view-support .contact-card,
body[data-theme="ocean"] #view-support .dark-card,
body[data-theme="crimson"] #view-home .glass-card,
body[data-theme="crimson"] #view-home .highlight-card,
body[data-theme="crimson"] #view-home .feature-card,
body[data-theme="crimson"] #view-home .promise-card,
body[data-theme="crimson"] #view-features .feature-card,
body[data-theme="crimson"] #view-support .glass-card,
body[data-theme="crimson"] #view-support .feature-card,
body[data-theme="crimson"] #view-support .why-join-card,
body[data-theme="crimson"] #view-support .contact-card,
body[data-theme="crimson"] #view-support .dark-card,
body[data-theme="slate"] #view-home .glass-card,
body[data-theme="slate"] #view-home .highlight-card,
body[data-theme="slate"] #view-home .feature-card,
body[data-theme="slate"] #view-home .promise-card,
body[data-theme="slate"] #view-features .feature-card,
body[data-theme="slate"] #view-support .glass-card,
body[data-theme="slate"] #view-support .feature-card,
body[data-theme="slate"] #view-support .why-join-card,
body[data-theme="slate"] #view-support .contact-card,
body[data-theme="slate"] #view-support .dark-card,
body[data-theme="monochrome-dark"] #view-home .glass-card,
body[data-theme="monochrome-dark"] #view-home .highlight-card,
body[data-theme="monochrome-dark"] #view-home .feature-card,
body[data-theme="monochrome-dark"] #view-home .promise-card,
body[data-theme="monochrome-dark"] #view-features .feature-card,
body[data-theme="monochrome-dark"] #view-support .glass-card,
body[data-theme="monochrome-dark"] #view-support .feature-card,
body[data-theme="monochrome-dark"] #view-support .why-join-card,
body[data-theme="monochrome-dark"] #view-support .contact-card,
body[data-theme="monochrome-dark"] #view-support .dark-card {
    background: #171b25 !important;
    border-color: rgba(255,255,255,.14) !important;
    color: #c3ccda !important;
}
body[data-theme="midnight"] #view-home h3,
body[data-theme="midnight"] #view-features h3,
body[data-theme="midnight"] #view-support h3,
body[data-theme="obsidian"] #view-home h3,
body[data-theme="obsidian"] #view-features h3,
body[data-theme="obsidian"] #view-support h3,
body[data-theme="violet"] #view-home h3,
body[data-theme="violet"] #view-features h3,
body[data-theme="violet"] #view-support h3,
body[data-theme="emerald"] #view-home h3,
body[data-theme="emerald"] #view-features h3,
body[data-theme="emerald"] #view-support h3,
body[data-theme="ocean"] #view-home h3,
body[data-theme="ocean"] #view-features h3,
body[data-theme="ocean"] #view-support h3,
body[data-theme="crimson"] #view-home h3,
body[data-theme="crimson"] #view-features h3,
body[data-theme="crimson"] #view-support h3,
body[data-theme="slate"] #view-home h3,
body[data-theme="slate"] #view-features h3,
body[data-theme="slate"] #view-support h3,
body[data-theme="monochrome-dark"] #view-home h3,
body[data-theme="monochrome-dark"] #view-features h3,
body[data-theme="monochrome-dark"] #view-support h3 {
    color: #f5f7fb !important;
}

/* About page card overrides from prior patch stay consistent */
body[data-theme] #view-about .about-section .glass-card {
    background: var(--surface) !important;
    border-color: var(--line) !important;
}


/* =========================================================
   FINAL GLOBAL PANEL FIX — CTA SECTIONS + FOOTER
   These were still using flat theme section backgrounds.
   Make them use the same distinct card surface as commands.
   ========================================================= */

/* CTA panels on Home, About and Support */
body[data-theme] .home-teaser,
body[data-theme] .about-cta,
body[data-theme] .support-cta {
    box-sizing: border-box;
    width: min(calc(100% - 40px), 1240px);
    max-width: 1240px;
    margin: 42px auto;
    padding: clamp(42px, 6vw, 76px) clamp(18px, 4vw, 48px) !important;
    border: 1px solid var(--line) !important;
    border-radius: 24px !important;
    background: var(--surface) !important;
    box-shadow:
      0 14px 42px color-mix(in srgb, var(--accent) 9%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--surface) 88%, white);
    overflow: hidden;
    position: relative;
    isolation: isolate;
}
body[data-theme] .home-teaser::before,
body[data-theme] .about-cta::before,
body[data-theme] .support-cta::before {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    top: -220px;
    right: -90px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
    pointer-events: none;
    z-index: -1;
}
body[data-theme] .home-teaser .container,
body[data-theme] .about-cta .container,
body[data-theme] .support-cta .container {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
}
body[data-theme] .home-teaser h2,
body[data-theme] .about-cta .cta-title,
body[data-theme] .support-cta .cta-title {
    color: var(--ink) !important;
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
    overflow-wrap: anywhere;
    line-height: 1.25;
}
body[data-theme] .home-teaser p,
body[data-theme] .about-cta .cta-desc,
body[data-theme] .support-cta .cta-desc {
    color: var(--muted) !important;
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
    line-height: 1.75;
}
body[data-theme] .teaser-buttons,
body[data-theme] .cta-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    min-width: 0;
}
body[data-theme] .teaser-buttons .btn,
body[data-theme] .cta-buttons .btn {
    max-width: 100%;
    white-space: normal;
}

/* Footer becomes a distinct theme-aware panel, not a flat beige strip */
body[data-theme] .footer {
    box-sizing: border-box;
    width: min(calc(100% - 40px), 1240px);
    max-width: 1240px;
    margin: 42px auto 24px !important;
    padding: clamp(34px, 5vw, 60px) clamp(18px, 4vw, 42px) 24px !important;
    border: 1px solid var(--line) !important;
    border-radius: 24px !important;
    background: var(--surface) !important;
    color: var(--muted) !important;
    box-shadow:
      0 14px 42px color-mix(in srgb, var(--accent) 8%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--surface) 88%, white);
}
body[data-theme] .footer .container {
    width: 100%;
    max-width: 1120px;
    min-width: 0;
    margin-inline: auto;
}
body[data-theme] .footer-logo-text,
body[data-theme] .footer-column h4 {
    color: var(--ink) !important;
}
body[data-theme] .footer-description,
body[data-theme] .footer-column a,
body[data-theme] .footer-bottom {
    color: var(--muted) !important;
}
body[data-theme] .footer-column a:hover {
    color: var(--accent) !important;
}
body[data-theme] .footer-bottom {
    border-color: var(--line) !important;
}
body[data-theme] .social-icon {
    background: var(--soft) !important;
    border-color: var(--line) !important;
    color: var(--accent) !important;
}

/* Make the panel surfaces visibly distinct on deep/dark themes */
body[data-theme="midnight"] .home-teaser,
body[data-theme="midnight"] .about-cta,
body[data-theme="midnight"] .support-cta,
body[data-theme="midnight"] .footer,
body[data-theme="obsidian"] .home-teaser,
body[data-theme="obsidian"] .about-cta,
body[data-theme="obsidian"] .support-cta,
body[data-theme="obsidian"] .footer,
body[data-theme="violet"] .home-teaser,
body[data-theme="violet"] .about-cta,
body[data-theme="violet"] .support-cta,
body[data-theme="violet"] .footer,
body[data-theme="emerald"] .home-teaser,
body[data-theme="emerald"] .about-cta,
body[data-theme="emerald"] .support-cta,
body[data-theme="emerald"] .footer,
body[data-theme="ocean"] .home-teaser,
body[data-theme="ocean"] .about-cta,
body[data-theme="ocean"] .support-cta,
body[data-theme="ocean"] .footer,
body[data-theme="crimson"] .home-teaser,
body[data-theme="crimson"] .about-cta,
body[data-theme="crimson"] .support-cta,
body[data-theme="crimson"] .footer,
body[data-theme="slate"] .home-teaser,
body[data-theme="slate"] .about-cta,
body[data-theme="slate"] .support-cta,
body[data-theme="slate"] .footer,
body[data-theme="monochrome-dark"] .home-teaser,
body[data-theme="monochrome-dark"] .about-cta,
body[data-theme="monochrome-dark"] .support-cta,
body[data-theme="monochrome-dark"] .footer {
    background: #171b25 !important;
    border-color: rgba(255,255,255,.14) !important;
}

/* Monochrome light gets a crisp white panel */
body[data-theme="monochrome-light"] .home-teaser,
body[data-theme="monochrome-light"] .about-cta,
body[data-theme="monochrome-light"] .support-cta,
body[data-theme="monochrome-light"] .footer {
    background: #ffffff !important;
    border-color: #dedede !important;
}

/* Mobile: no fixed-width or clipped CTA headings/buttons */
@media (max-width: 767px) {
    body[data-theme] .home-teaser,
    body[data-theme] .about-cta,
    body[data-theme] .support-cta,
    body[data-theme] .footer {
        width: calc(100% - 24px);
        margin: 24px auto !important;
        border-radius: 18px !important;
    }
    body[data-theme] .home-teaser h2,
    body[data-theme] .about-cta .cta-title,
    body[data-theme] .support-cta .cta-title {
        font-size: clamp(1.45rem, 6vw, 2rem);
    }
    body[data-theme] .teaser-buttons,
    body[data-theme] .cta-buttons {
        flex-direction: column;
        align-items: stretch;
        max-width: 360px;
        margin-inline: auto;
    }
    body[data-theme] .teaser-buttons .btn,
    body[data-theme] .cta-buttons .btn {
        width: 100%;
        box-sizing: border-box;
    }
    body[data-theme] .footer-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
}


/* =========================================================
   FOOTER PANEL — MATCH THE COMMAND CARD SURFACE
   Avoid a large bright-white slab in warm/light themes.
   Keep every theme's own palette and readable contrast.
   ========================================================= */
body[data-theme] .footer {
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 5%, var(--soft)),
        var(--soft) 58%,
        color-mix(in srgb, var(--accent2) 4%, var(--soft))) !important;
    border: 1px solid var(--line) !important;
    border-radius: 22px !important;
    box-shadow:
      0 12px 34px color-mix(in srgb, var(--accent) 9%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--surface) 65%, white) !important;
}
body[data-theme="solar-gold"] .footer {
    background: linear-gradient(135deg,#f8efdD 0%,#f6ecd7 55%,#fbf3e4 100%) !important;
    border-color: #ead9b8 !important;
}
body[data-theme="arctic"] .footer,
body[data-theme="rose"] .footer,
body[data-theme="sunset"] .footer,
body[data-theme="amber"] .footer,
body[data-theme="mint"] .footer,
body[data-theme="monochrome-light"] .footer {
    background: var(--soft) !important;
}
body[data-theme="midnight"] .footer,
body[data-theme="obsidian"] .footer,
body[data-theme="violet"] .footer,
body[data-theme="emerald"] .footer,
body[data-theme="ocean"] .footer,
body[data-theme="crimson"] .footer,
body[data-theme="slate"] .footer,
body[data-theme="monochrome-dark"] .footer {
    background: #171b25 !important;
    border-color: var(--line) !important;
}
body[data-theme] .footer .footer-description,
body[data-theme] .footer .footer-column a,
body[data-theme] .footer .footer-bottom {
    color: var(--muted) !important;
}
body[data-theme] .footer .footer-logo-text,
body[data-theme] .footer .footer-column h4 {
    color: var(--ink) !important;
}
body[data-theme] .footer .social-icon {
    background: color-mix(in srgb, var(--surface) 75%, var(--soft)) !important;
    color: var(--accent) !important;
    border-color: var(--line) !important;
}
body[data-theme] .footer .footer-bottom {
    border-top-color: var(--line) !important;
}


/* =========================================================
   SECTION PANEL CONSISTENCY — ABOUT + SUPPORT + OTHER PAGES
   Turn full-width beige/solid section bands into centered,
   theme-aware premium panels, matching the footer and cards.
   ========================================================= */

/* Remove the full-bleed colored slabs behind these sections */
body[data-theme] .about-section.bg-alt,
body[data-theme] .support-why-join,
body[data-theme] .support-community-features {
    background: transparent !important;
    border: 0 !important;
    padding-block: clamp(30px, 5vw, 64px) !important;
}

/* The content container becomes the visible panel */
body[data-theme] .about-section.bg-alt > .container,
body[data-theme] .support-why-join > .container,
body[data-theme] .support-community-features > .container {
    box-sizing: border-box;
    width: min(calc(100% - 40px), 1240px);
    max-width: 1240px;
    min-width: 0;
    margin-inline: auto;
    padding: clamp(28px, 4vw, 54px) !important;
    border: 1px solid var(--line) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 4%, var(--surface)),
        var(--surface) 55%,
        color-mix(in srgb, var(--accent2) 4%, var(--surface))) !important;
    box-shadow:
      0 14px 40px color-mix(in srgb, var(--accent) 8%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--surface) 88%, white);
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Soft decorative glow contained inside each panel */
body[data-theme] .about-section.bg-alt > .container::before,
body[data-theme] .support-why-join > .container::before,
body[data-theme] .support-community-features > .container::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    top: -225px;
    right: -90px;
    border-radius: 50%;
    background: radial-gradient(
      circle,
      color-mix(in srgb, var(--accent) 11%, transparent),
      transparent 70%
    );
    pointer-events: none;
    z-index: -1;
}

/* Keep content above the decorative glow */
body[data-theme] .about-section.bg-alt > .container > *,
body[data-theme] .support-why-join > .container > *,
body[data-theme] .support-community-features > .container > * {
    position: relative;
    z-index: 1;
}

/* Theme-aware headings and descriptions */
body[data-theme] .about-section.bg-alt .section-title,
body[data-theme] .support-why-join .section-title,
body[data-theme] .support-community-features .section-title {
    color: var(--ink) !important;
}
body[data-theme] .about-section.bg-alt p,
body[data-theme] .support-why-join p,
body[data-theme] .support-community-features p {
    color: var(--muted);
}

/* Dark themes: clearly separate panel from page background */
body[data-theme="midnight"] .about-section.bg-alt > .container,
body[data-theme="obsidian"] .about-section.bg-alt > .container,
body[data-theme="violet"] .about-section.bg-alt > .container,
body[data-theme="emerald"] .about-section.bg-alt > .container,
body[data-theme="ocean"] .about-section.bg-alt > .container,
body[data-theme="crimson"] .about-section.bg-alt > .container,
body[data-theme="slate"] .about-section.bg-alt > .container,
body[data-theme="monochrome-dark"] .about-section.bg-alt > .container,
body[data-theme="midnight"] .support-why-join > .container,
body[data-theme="obsidian"] .support-why-join > .container,
body[data-theme="violet"] .support-why-join > .container,
body[data-theme="emerald"] .support-why-join > .container,
body[data-theme="ocean"] .support-why-join > .container,
body[data-theme="crimson"] .support-why-join > .container,
body[data-theme="slate"] .support-why-join > .container,
body[data-theme="monochrome-dark"] .support-why-join > .container,
body[data-theme="midnight"] .support-community-features > .container,
body[data-theme="obsidian"] .support-community-features > .container,
body[data-theme="violet"] .support-community-features > .container,
body[data-theme="emerald"] .support-community-features > .container,
body[data-theme="ocean"] .support-community-features > .container,
body[data-theme="crimson"] .support-community-features > .container,
body[data-theme="slate"] .support-community-features > .container,
body[data-theme="monochrome-dark"] .support-community-features > .container {
    background: #171b25 !important;
    border-color: rgba(255,255,255,.14) !important;
    box-shadow: 0 14px 40px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.04);
}

/* Solar Gold uses a warm ivory panel rather than bright white */
body[data-theme="solar-gold"] .about-section.bg-alt > .container,
body[data-theme="solar-gold"] .support-why-join > .container,
body[data-theme="solar-gold"] .support-community-features > .container {
    background: linear-gradient(135deg,#f8efdD,#f6ecd7 55%,#fbf3e4) !important;
    border-color: #ead9b8 !important;
}

/* Mobile spacing and panel sizing */
@media (max-width: 767px) {
    body[data-theme] .about-section.bg-alt,
    body[data-theme] .support-why-join,
    body[data-theme] .support-community-features {
        padding-block: 24px !important;
    }
    body[data-theme] .about-section.bg-alt > .container,
    body[data-theme] .support-why-join > .container,
    body[data-theme] .support-community-features > .container {
        width: calc(100% - 24px);
        padding: 22px 16px !important;
        border-radius: 18px !important;
    }
}


/* =========================================================
   REMOVE EXTRA OUTER SECTION BOXES
   Keep individual feature cards, but remove the large wrapper
   panels and text-only boxes that were added around sections.
   ========================================================= */

/* Remove outer panels around About/Support sections */
body[data-theme] .about-section.bg-alt > .container,
body[data-theme] .support-why-join > .container,
body[data-theme] .support-community-features > .container {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: clamp(24px, 4vw, 48px) 0 !important;
    overflow: visible !important;
}

/* Remove decorative glows belonging to those wrapper panels */
body[data-theme] .about-section.bg-alt > .container::before,
body[data-theme] .support-why-join > .container::before,
body[data-theme] .support-community-features > .container::before {
    content: none !important;
    display: none !important;
}

/* Keep About text readable without a separate rectangular box */
body[data-theme] #view-about .about-text-container > .glass-card,
body[data-theme] #view-about .about-text-container .vision-text {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Keep the feature/promise/contact cards themselves intact */
body[data-theme] #view-about .feature-card,
body[data-theme] #view-about .promise-card,
body[data-theme] #view-support .feature-card,
body[data-theme] #view-support .contact-card {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
}

/* Remove any empty section surface that may appear as a blank beige block */
body[data-theme] .about-section.bg-alt,
body[data-theme] .support-why-join,
body[data-theme] .support-community-features {
    background: transparent !important;
    border: 0 !important;
}

/* Mobile spacing after removing outer wrappers */
@media (max-width: 767px) {
    body[data-theme] .about-section.bg-alt > .container,
    body[data-theme] .support-why-join > .container,
    body[data-theme] .support-community-features > .container {
        width: calc(100% - 32px);
        padding: 24px 0 !important;
    }
}


/* =========================================================
   WHO WE ARE — MATCH THE PREMIUM CTA PANEL STYLE
   One clean rounded panel around the section content.
   ========================================================= */
body[data-theme] #view-about .about-section.bg-alt {
    background: transparent !important;
    padding: clamp(36px, 6vw, 76px) 0 !important;
}
body[data-theme] #view-about .about-section.bg-alt > .about-text-container {
    box-sizing: border-box;
    width: min(calc(100% - 40px), 1240px) !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: clamp(30px, 5vw, 64px) !important;
    border: 1px solid var(--line) !important;
    border-radius: 24px !important;
    background: var(--surface) !important;
    box-shadow:
      0 14px 42px color-mix(in srgb, var(--accent) 9%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--surface) 88%, white) !important;
}
body[data-theme] #view-about .about-section.bg-alt .section-title {
    color: var(--ink) !important;
    margin-top: 0;
}
body[data-theme] #view-about .about-section.bg-alt .glass-card {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--muted) !important;
}
body[data-theme] #view-about .about-section.bg-alt .glass-card p {
    color: var(--muted) !important;
    line-height: 1.8;
}

/* Dark theme panel surface */
body[data-theme="midnight"] #view-about .about-section.bg-alt > .about-text-container,
body[data-theme="obsidian"] #view-about .about-section.bg-alt > .about-text-container,
body[data-theme="violet"] #view-about .about-section.bg-alt > .about-text-container,
body[data-theme="emerald"] #view-about .about-section.bg-alt > .about-text-container,
body[data-theme="ocean"] #view-about .about-section.bg-alt > .about-text-container,
body[data-theme="crimson"] #view-about .about-section.bg-alt > .about-text-container,
body[data-theme="slate"] #view-about .about-section.bg-alt > .about-text-container,
body[data-theme="monochrome-dark"] #view-about .about-section.bg-alt > .about-text-container {
    background: #171b25 !important;
    border-color: rgba(255,255,255,.14) !important;
}

/* Warm Solar Gold panel */
body[data-theme="solar-gold"] #view-about .about-section.bg-alt > .about-text-container {
    background: linear-gradient(135deg,#fffaf0,#f8efdD 100%) !important;
    border-color: #ead9b8 !important;
}

/* Mobile */
@media (max-width: 767px) {
    body[data-theme] #view-about .about-section.bg-alt > .about-text-container {
        width: calc(100% - 24px) !important;
        padding: 24px 20px !important;
        border-radius: 18px !important;
    }
}


/* =========================================================
   ABOUT PAGE — MISSION + WHY CHOOSE PREMIUM PANELS
   ========================================================= */
body[data-theme] #view-about .mission-panel,
body[data-theme] #view-about .why-choose-panel {
    background: transparent !important;
    padding: clamp(30px, 5vw, 64px) 0 !important;
}
body[data-theme] #view-about .mission-panel > .about-text-container,
body[data-theme] #view-about .why-choose-panel > .container {
    box-sizing: border-box;
    width: min(calc(100% - 40px), 1240px) !important;
    max-width: 1240px !important;
    min-width: 0;
    margin: 0 auto !important;
    padding: clamp(28px, 4.5vw, 58px) !important;
    border: 1px solid var(--line) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 4%, var(--surface)),
        var(--surface) 55%,
        color-mix(in srgb, var(--accent2) 4%, var(--surface))) !important;
    box-shadow:
      0 16px 44px color-mix(in srgb, var(--accent) 9%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--surface) 88%, white) !important;
}

/* Mission: make copy sit directly on the new panel */
body[data-theme] #view-about .mission-panel .glass-card {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--muted) !important;
}
body[data-theme] #view-about .mission-panel .glass-card p {
    color: var(--muted) !important;
    line-height: 1.8;
}
body[data-theme] #view-about .mission-panel .mission-checklist {
    margin-block: 22px;
    gap: 16px 28px;
}
body[data-theme] #view-about .mission-panel .mission-checklist li {
    color: var(--ink) !important;
}
body[data-theme] #view-about .mission-panel .mission-checklist i {
    color: var(--accent) !important;
}

/* Why Choose: retain each feature card inside the new outer panel */
body[data-theme] #view-about .why-choose-panel .section-title {
    color: var(--ink) !important;
    margin-top: 0;
    margin-bottom: clamp(24px, 3vw, 38px);
}
body[data-theme] #view-about .why-choose-panel .features-grid {
    width: 100%;
    min-width: 0;
}
body[data-theme] #view-about .why-choose-panel .feature-card {
    box-sizing: border-box;
    min-width: 0;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: 17px !important;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 7%, transparent) !important;
    padding: 24px !important;
}
body[data-theme] #view-about .why-choose-panel .feature-card h3 {
    color: var(--ink) !important;
}
body[data-theme] #view-about .why-choose-panel .feature-card p {
    color: var(--muted) !important;
    line-height: 1.7;
}

/* Dark palette overrides */
body[data-theme="midnight"] #view-about .mission-panel > .about-text-container,
body[data-theme="obsidian"] #view-about .mission-panel > .about-text-container,
body[data-theme="violet"] #view-about .mission-panel > .about-text-container,
body[data-theme="emerald"] #view-about .mission-panel > .about-text-container,
body[data-theme="ocean"] #view-about .mission-panel > .about-text-container,
body[data-theme="crimson"] #view-about .mission-panel > .about-text-container,
body[data-theme="slate"] #view-about .mission-panel > .about-text-container,
body[data-theme="monochrome-dark"] #view-about .mission-panel > .about-text-container,
body[data-theme="midnight"] #view-about .why-choose-panel > .container,
body[data-theme="obsidian"] #view-about .why-choose-panel > .container,
body[data-theme="violet"] #view-about .why-choose-panel > .container,
body[data-theme="emerald"] #view-about .why-choose-panel > .container,
body[data-theme="ocean"] #view-about .why-choose-panel > .container,
body[data-theme="crimson"] #view-about .why-choose-panel > .container,
body[data-theme="slate"] #view-about .why-choose-panel > .container,
body[data-theme="monochrome-dark"] #view-about .why-choose-panel > .container {
    background: #171b25 !important;
    border-color: rgba(255,255,255,.14) !important;
}
body[data-theme="midnight"] #view-about .why-choose-panel .feature-card,
body[data-theme="obsidian"] #view-about .why-choose-panel .feature-card,
body[data-theme="violet"] #view-about .why-choose-panel .feature-card,
body[data-theme="emerald"] #view-about .why-choose-panel .feature-card,
body[data-theme="ocean"] #view-about .why-choose-panel .feature-card,
body[data-theme="crimson"] #view-about .why-choose-panel .feature-card,
body[data-theme="slate"] #view-about .why-choose-panel .feature-card,
body[data-theme="monochrome-dark"] #view-about .why-choose-panel .feature-card {
    background: #202735 !important;
    border-color: rgba(255,255,255,.12) !important;
}

/* Solar Gold warm ivory panel */
body[data-theme="solar-gold"] #view-about .mission-panel > .about-text-container,
body[data-theme="solar-gold"] #view-about .why-choose-panel > .container {
    background: linear-gradient(135deg,#fffaf0,#f8efdD 100%) !important;
    border-color: #ead9b8 !important;
}

/* Mobile: preserve breathing room without overflow */
@media (max-width: 767px) {
    body[data-theme] #view-about .mission-panel > .about-text-container,
    body[data-theme] #view-about .why-choose-panel > .container {
        width: calc(100% - 24px) !important;
        padding: 24px 18px !important;
        border-radius: 18px !important;
    }
    body[data-theme] #view-about .mission-panel .mission-checklist {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   WHY CHOOSE TOURNIX — INDIVIDUAL PREMIUM FEATURE BOXES
   Each feature now has its own clear card surface.
   ========================================================= */
body[data-theme] #view-about .why-choose-panel .features-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px !important;
    align-items: stretch;
}
body[data-theme] #view-about .why-choose-panel .features-grid > .feature-card.glass-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 220px;
    height: 100%;
    margin: 0 !important;
    padding: 26px 24px !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--surface) 96%, white) !important;
    box-shadow:
      0 8px 24px color-mix(in srgb, var(--accent) 7%, transparent),
      inset 0 1px 0 rgba(255,255,255,.65) !important;
    text-align: left;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
body[data-theme] #view-about .why-choose-panel .features-grid > .feature-card.glass-card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 13%, transparent) !important;
}
body[data-theme] #view-about .why-choose-panel .feature-card .icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    margin-bottom: 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius: 13px;
    background: color-mix(in srgb, var(--accent) 9%, var(--surface));
    color: var(--accent) !important;
}
body[data-theme] #view-about .why-choose-panel .feature-card h3 {
    margin: 0 0 10px !important;
    color: var(--ink) !important;
    font-size: 1.05rem;
    line-height: 1.4;
}
body[data-theme] #view-about .why-choose-panel .feature-card p {
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: .94rem;
    line-height: 1.7;
}

/* Dark themes: distinct cards inside the outer section panel */
body[data-theme="midnight"] #view-about .why-choose-panel .features-grid > .feature-card.glass-card,
body[data-theme="obsidian"] #view-about .why-choose-panel .features-grid > .feature-card.glass-card,
body[data-theme="violet"] #view-about .why-choose-panel .features-grid > .feature-card.glass-card,
body[data-theme="emerald"] #view-about .why-choose-panel .features-grid > .feature-card.glass-card,
body[data-theme="ocean"] #view-about .why-choose-panel .features-grid > .feature-card.glass-card,
body[data-theme="crimson"] #view-about .why-choose-panel .features-grid > .feature-card.glass-card,
body[data-theme="slate"] #view-about .why-choose-panel .features-grid > .feature-card.glass-card,
body[data-theme="monochrome-dark"] #view-about .why-choose-panel .features-grid > .feature-card.glass-card {
    background: #202735 !important;
    border-color: rgba(255,255,255,.13) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
body[data-theme="midnight"] #view-about .why-choose-panel .feature-card .icon-wrapper,
body[data-theme="obsidian"] #view-about .why-choose-panel .feature-card .icon-wrapper,
body[data-theme="violet"] #view-about .why-choose-panel .feature-card .icon-wrapper,
body[data-theme="emerald"] #view-about .why-choose-panel .feature-card .icon-wrapper,
body[data-theme="ocean"] #view-about .why-choose-panel .feature-card .icon-wrapper,
body[data-theme="crimson"] #view-about .why-choose-panel .feature-card .icon-wrapper,
body[data-theme="slate"] #view-about .why-choose-panel .feature-card .icon-wrapper,
body[data-theme="monochrome-dark"] #view-about .why-choose-panel .feature-card .icon-wrapper {
    background: color-mix(in srgb, var(--accent) 16%, #202735);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Responsive card grid */
@media (max-width: 1024px) {
    body[data-theme] #view-about .why-choose-panel .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    body[data-theme] #view-about .why-choose-panel .features-grid {
        grid-template-columns: 1fr;
        gap: 14px !important;
    }
    body[data-theme] #view-about .why-choose-panel .features-grid > .feature-card.glass-card {
        min-height: 0;
        padding: 22px 20px !important;
    }
}

.team-page {
    min-height: 65vh;
    padding: clamp(72px, 10vw, 120px) 0 clamp(64px, 9vw, 108px);
}

.team-page-header {
    max-width: 720px;
    margin: 0 auto clamp(32px, 5vw, 52px);
    text-align: center;
}

.team-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--accent);
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.team-eyebrow svg {
    width: 16px;
    height: 16px;
}

.team-page-header .page-title {
    margin: 0 0 10px;
    color: var(--ink);
    font-size: clamp(2rem, 5vw, 3.1rem);
}

.team-page-header .page-description {
    margin: 0 auto;
    color: var(--muted);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 30px);
    max-width: 1180px;
    margin: 0 auto;
}

.team-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--accent) 8%, transparent);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.team-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    box-shadow: 0 24px 56px color-mix(in srgb, var(--accent) 14%, transparent);
}

.team-card-banner {
    height: 112px;
    background:
        radial-gradient(ellipse at 82% 10%, color-mix(in srgb, var(--accent2) 32%, transparent), transparent 52%),
        linear-gradient(125deg, color-mix(in srgb, var(--accent) 28%, var(--surface)), var(--soft));
}

.team-card-banner-backend {
    background:
        radial-gradient(ellipse at 80% 8%, rgba(255, 74, 74, .3), transparent 55%),
        linear-gradient(125deg, color-mix(in srgb, #d52b32 28%, var(--surface)), var(--soft));
}

.team-card-banner-frontend {
    background:
        radial-gradient(ellipse at 80% 8%, rgba(88, 125, 255, .3), transparent 55%),
        linear-gradient(125deg, color-mix(in srgb, var(--accent) 25%, var(--surface)), var(--soft));
}

.team-card-banner-bot-frontend {
    background:
        radial-gradient(ellipse at 80% 8%, rgba(38, 190, 160, .3), transparent 55%),
        linear-gradient(125deg, color-mix(in srgb, #20a98d 24%, var(--surface)), var(--soft));
}

.team-card-content {
    padding: 0 clamp(18px, 3vw, 26px) 24px;
}

.team-card-identity {
    display: flex;
    min-height: 54px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.team-avatar {
    display: grid;
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    place-items: center;
    margin-top: -46px;
    border: 4px solid var(--surface);
    border-radius: 20px;
    background: var(--soft);
    color: #fff;
    object-fit: cover;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}

.team-avatar-discord {
    background: #5865f2;
}

.team-avatar-discord svg {
    width: 48px;
    height: 48px;
}

.team-role-badge {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 9%, var(--surface));
    color: var(--accent);
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .045em;
}

.team-role-badge svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

.team-card h2 {
    margin: 0 0 3px;
    color: var(--ink);
    font-size: 1.35rem;
    font-weight: 850;
    letter-spacing: -.03em;
}

.team-discord-id {
    color: var(--muted);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.team-discord-id:hover {
    color: var(--accent);
    text-decoration: underline;
}

.team-role-title {
    margin: 13px 0 10px;
    color: var(--accent);
    font-size: .88rem;
    font-weight: 750;
}

.team-bio {
    min-height: 76px;
    margin: 0;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--soft) 72%, var(--surface));
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.65;
}

.team-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 16px 0 20px;
}

.team-skills span {
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
    color: var(--muted);
    font-size: .67rem;
    font-weight: 650;
}

.team-contact-btn {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 14px;
    border: 1px solid #5865f2;
    border-radius: 11px;
    background: #5865f2;
    color: #fff;
    font-size: .84rem;
    font-weight: 750;
    text-align: center;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}

.team-contact-btn:hover {
    transform: translateY(-1px);
    background: #4752c4;
}

.team-contact-btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

@media (max-width: 650px) {
    .team-page {
        padding-top: 66px;
    }

    .team-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 440px;
    }

    .team-card-banner {
        height: 96px;
    }

    .team-card-content {
        padding-right: 20px;
        padding-left: 20px;
    }

    .team-bio {
        min-height: 0;
    }
}

@media (min-width: 651px) and (max-width: 950px) {
    .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 720px;
    }
}

.supporters-section {
    margin: clamp(56px, 8vw, 88px) auto 0;
    padding-top: clamp(36px, 5vw, 54px);
    border-top: 1px solid var(--line);
}

.supporters-header {
    margin: 0 auto 30px;
    text-align: center;
}

.supporters-header .team-eyebrow {
    margin-bottom: 10px;
}

.supporters-header .page-title {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
}

.supporters-header .page-description {
    margin: 0 auto;
    color: var(--muted);
}

.supporters-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 350px));
    gap: 24px;
    justify-content: center;
}

.support-team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 350px));
    gap: 24px;
    justify-content: center;
}

.bug-hunters-grid {
    grid-template-columns: repeat(3, minmax(0, 350px));
}

@media (min-width: 651px) and (max-width: 1150px) {
    .supporters-grid,
    .support-team-grid {
        grid-template-columns: repeat(2, minmax(0, 350px));
    }
}

@media (max-width: 650px) {
    .supporters-grid,
    .support-team-grid {
        grid-template-columns: minmax(0, 350px);
    }
}

.team-card h3 {
    margin: 0 0 3px;
    color: var(--ink);
    font-size: 1.35rem;
    font-weight: 850;
    letter-spacing: -.03em;
}

.team-card-banner-supporter {
    background:
        radial-gradient(ellipse at 80% 8%, rgba(245, 184, 70, .32), transparent 55%),
        linear-gradient(125deg, color-mix(in srgb, #d49b31 24%, var(--surface)), var(--soft));
}

.supporter-avatar {
    background: #101114;
    object-position: center 28%;
}

.supporter-role-badge {
    border-color: color-mix(in srgb, #d49b31 38%, var(--line));
    background: color-mix(in srgb, #d49b31 12%, var(--surface));
    color: color-mix(in srgb, #a56d00 80%, var(--accent));
}

body[data-theme="midnight"] .supporter-role-badge,
body[data-theme="obsidian"] .supporter-role-badge,
body[data-theme="violet"] .supporter-role-badge,
body[data-theme="emerald"] .supporter-role-badge,
body[data-theme="ocean"] .supporter-role-badge,
body[data-theme="crimson"] .supporter-role-badge,
body[data-theme="slate"] .supporter-role-badge,
body[data-theme="monochrome-dark"] .supporter-role-badge {
    color: #ffd37a;
}


/* =========================================================
   ABOUT PAGE — OUR VISION + OUR PROMISE PREMIUM PANELS
   ========================================================= */
body[data-theme] #view-about .vision-panel,
body[data-theme] #view-about .promise-panel {
    background: transparent !important;
    padding: clamp(30px, 5vw, 64px) 0 !important;
}
body[data-theme] #view-about .vision-panel > .about-text-container,
body[data-theme] #view-about .promise-panel > .container {
    box-sizing: border-box;
    width: min(calc(100% - 40px), 1240px) !important;
    max-width: 1240px !important;
    min-width: 0;
    margin: 0 auto !important;
    padding: clamp(28px, 4.5vw, 58px) !important;
    border: 1px solid var(--line) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 4%, var(--surface)),
        var(--surface) 55%,
        color-mix(in srgb, var(--accent2) 4%, var(--surface))) !important;
    box-shadow:
      0 16px 44px color-mix(in srgb, var(--accent) 9%, transparent),
      inset 0 1px 0 rgba(255,255,255,.55) !important;
}
body[data-theme] #view-about .vision-panel .section-title,
body[data-theme] #view-about .promise-panel .section-title {
    color: var(--ink) !important;
    margin-top: 0;
}
body[data-theme] #view-about .vision-panel .vision-text {
    max-width: 900px;
    margin: 0 auto;
}
body[data-theme] #view-about .vision-panel .vision-text p {
    color: var(--muted) !important;
    line-height: 1.85;
}

/* Promise tiles become separate premium cards */
body[data-theme] #view-about .promise-panel .promise-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px !important;
    align-items: stretch;
}
body[data-theme] #view-about .promise-panel .promise-card.glass-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 210px;
    height: 100%;
    margin: 0 !important;
    padding: 24px 18px !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--surface) 96%, white) !important;
    box-shadow:
      0 8px 24px color-mix(in srgb, var(--accent) 7%, transparent),
      inset 0 1px 0 rgba(255,255,255,.65) !important;
    text-align: center;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
body[data-theme] #view-about .promise-panel .promise-card.glass-card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 13%, transparent) !important;
}
body[data-theme] #view-about .promise-panel .promise-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    min-width: 50px;
    margin: 0 auto 16px !important;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 9%, var(--surface));
    color: var(--accent) !important;
}
body[data-theme] #view-about .promise-panel .promise-card h3 {
    margin: 0 0 9px !important;
    color: var(--ink) !important;
    font-size: 1rem;
    line-height: 1.4;
}
body[data-theme] #view-about .promise-panel .promise-card p {
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: .92rem;
    line-height: 1.7;
}

/* Dark themes */
body[data-theme="midnight"] #view-about .vision-panel > .about-text-container,
body[data-theme="obsidian"] #view-about .vision-panel > .about-text-container,
body[data-theme="violet"] #view-about .vision-panel > .about-text-container,
body[data-theme="emerald"] #view-about .vision-panel > .about-text-container,
body[data-theme="ocean"] #view-about .vision-panel > .about-text-container,
body[data-theme="crimson"] #view-about .vision-panel > .about-text-container,
body[data-theme="slate"] #view-about .vision-panel > .about-text-container,
body[data-theme="monochrome-dark"] #view-about .vision-panel > .about-text-container,
body[data-theme="midnight"] #view-about .promise-panel > .container,
body[data-theme="obsidian"] #view-about .promise-panel > .container,
body[data-theme="violet"] #view-about .promise-panel > .container,
body[data-theme="emerald"] #view-about .promise-panel > .container,
body[data-theme="ocean"] #view-about .promise-panel > .container,
body[data-theme="crimson"] #view-about .promise-panel > .container,
body[data-theme="slate"] #view-about .promise-panel > .container,
body[data-theme="monochrome-dark"] #view-about .promise-panel > .container {
    background: #171b25 !important;
    border-color: rgba(255,255,255,.14) !important;
}
body[data-theme="midnight"] #view-about .promise-panel .promise-card.glass-card,
body[data-theme="obsidian"] #view-about .promise-panel .promise-card.glass-card,
body[data-theme="violet"] #view-about .promise-panel .promise-card.glass-card,
body[data-theme="emerald"] #view-about .promise-panel .promise-card.glass-card,
body[data-theme="ocean"] #view-about .promise-panel .promise-card.glass-card,
body[data-theme="crimson"] #view-about .promise-panel .promise-card.glass-card,
body[data-theme="slate"] #view-about .promise-panel .promise-card.glass-card,
body[data-theme="monochrome-dark"] #view-about .promise-panel .promise-card.glass-card {
    background: #202735 !important;
    border-color: rgba(255,255,255,.13) !important;
}

/* Tablet and mobile */
@media (max-width: 1024px) {
    body[data-theme] #view-about .promise-panel .promise-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    body[data-theme] #view-about .vision-panel > .about-text-container,
    body[data-theme] #view-about .promise-panel > .container {
        width: calc(100% - 24px) !important;
        padding: 24px 18px !important;
        border-radius: 18px !important;
    }
    body[data-theme] #view-about .promise-panel .promise-grid {
        grid-template-columns: 1fr;
        gap: 14px !important;
    }
    body[data-theme] #view-about .promise-panel .promise-card.glass-card {
        min-height: 0;
        padding: 22px 18px !important;
    }
}


/* =========================================================
   TOURNIX PREMIUM FULL-WIDTH FOOTER
   Reference-inspired multi-column layout; no floating box.
   ========================================================= */
body[data-theme] .tournix-premium-footer {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #090a0d !important;
    color: #f4f4f5 !important;
    box-shadow: none !important;
    overflow: hidden;
    position: relative;
}
body[data-theme] .tournix-premium-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 18% 0%, rgba(90,105,140,.13), transparent 42%),
      linear-gradient(180deg, rgba(255,255,255,.018), transparent 45%);
}
.tournix-premium-footer .footer-inner {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 64px));
    margin: 0 auto;
    padding: 76px 0 28px;
}
.tournix-premium-footer .premium-footer-main {
    display: grid;
    grid-template-columns: minmax(250px, 1.65fr) repeat(3, minmax(130px, 1fr));
    gap: clamp(32px, 5vw, 76px);
    align-items: start;
    padding-bottom: 64px;
}
.tournix-premium-footer .premium-footer-brand {
    max-width: 340px;
}
.tournix-premium-footer .premium-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    color: #fff !important;
    text-decoration: none;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.04em;
}
.tournix-premium-footer .premium-footer-logo img {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
    padding: 5px;
}
.tournix-premium-footer .premium-footer-description {
    margin: 0;
    max-width: 330px;
    color: #92939d !important;
    font-size: .96rem;
    line-height: 1.75;
}
.tournix-premium-footer .premium-footer-socials {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}
.tournix-premium-footer .premium-footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #c5c6ce !important;
    background: #17181e;
    border: 1px solid #292a32;
    border-radius: 50%;
    text-decoration: none;
    transition: transform .2s ease, color .2s ease, background .2s ease, border-color .2s ease;
}
.tournix-premium-footer .premium-footer-socials a:hover {
    color: #fff !important;
    background: #30313a;
    border-color: #555764;
    transform: translateY(-3px);
}
.tournix-premium-footer .premium-footer-socials svg {
    display: block;
    width: 19px;
    height: 19px;
}
.tournix-premium-footer .premium-footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}
.tournix-premium-footer .premium-footer-column h4 {
    margin: 2px 0 7px;
    color: #f5f5f6 !important;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
}
.tournix-premium-footer .premium-footer-column a {
    color: #9697a1 !important;
    font-size: .94rem;
    line-height: 1.4;
    text-decoration: none;
    transition: color .18s ease, transform .18s ease;
}
.tournix-premium-footer .premium-footer-column a:hover {
    color: #fff !important;
    transform: translateX(3px);
}
.tournix-premium-footer .premium-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 64px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.10);
}
.tournix-premium-footer .premium-footer-bottom p,
.tournix-premium-footer .premium-footer-meta {
    margin: 0;
    color: #777984 !important;
    font-size: .86rem;
}
.tournix-premium-footer .premium-footer-meta {
    display: flex;
    align-items: center;
    gap: 22px;
}
.tournix-premium-footer .premium-footer-version {
    color: #a4a5ae !important;
}

/* Responsive footer */
@media (max-width: 900px) {
    .tournix-premium-footer .premium-footer-main {
        grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(130px, 1fr));
        row-gap: 42px;
    }
    .tournix-premium-footer .premium-footer-brand {
        grid-row: span 2;
    }
}
@media (max-width: 600px) {
    .tournix-premium-footer .footer-inner {
        width: calc(100% - 40px);
        padding: 52px 0 22px;
    }
    .tournix-premium-footer .premium-footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px 22px;
        padding-bottom: 42px;
    }
    .tournix-premium-footer .premium-footer-brand {
        grid-column: 1 / -1;
        grid-row: auto;
        max-width: 100%;
    }
    .tournix-premium-footer .premium-footer-description {
        max-width: 100%;
    }
    .tournix-premium-footer .premium-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
    .tournix-premium-footer .premium-footer-meta {
        flex-wrap: wrap;
        gap: 12px;
    }
}


/* =========================================================
   FINAL GLOBAL THEME SYNC — ALL 16 THEMES / ALL PAGES
   The active body[data-theme] palette is the single source of truth.
   Fixes the previous hard-coded light footer that stayed cream while
   the Commands page changed to a dark palette (and vice versa).
   ========================================================= */

body[data-theme] {
    background-color: var(--page) !important;
    color: var(--ink) !important;
}

/* Main views stay transparent so the selected body background is visible. */
body[data-theme] main.view,
body[data-theme] #view-home,
body[data-theme] #view-commands,
body[data-theme] #view-features,
body[data-theme] #view-about,
body[data-theme] #view-support {
    background: transparent !important;
    color: var(--ink) !important;
}

/* Commands page: cards, search, tabs and command content use active palette. */
body[data-theme] #view-commands .command-card {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 5%, transparent),
            transparent 58%),
        var(--surface) !important;
    border-color: var(--line) !important;
    border-left-color: var(--accent) !important;
    color: var(--muted) !important;
}
body[data-theme] #view-commands .card-header h3 {
    color: var(--ink) !important;
}
body[data-theme] #view-commands .command-card:hover .card-header h3 {
    color: var(--accent) !important;
}
body[data-theme] #view-commands .card-description {
    color: var(--muted) !important;
}
body[data-theme] #view-commands .cmd-badge,
body[data-theme] #view-commands .card-usage,
body[data-theme] #view-commands .tag,
body[data-theme] #view-commands .category-btn:not(.active),
body[data-theme] #view-commands .search-input {
    background: var(--soft) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}
body[data-theme] #view-commands .category-btn.active {
    background: linear-gradient(115deg, var(--accent2), var(--accent)) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}
body[data-theme] #view-commands .card-usage code {
    color: var(--ink) !important;
}
body[data-theme] #view-commands .page-title,
body[data-theme] #view-commands .page-description {
    color: var(--ink) !important;
}
body[data-theme] #view-commands .page-description {
    color: var(--muted) !important;
}

/* Premium footer follows the exact same palette as the rest of the site. */
body[data-theme] .tournix-premium-footer {
    background-color: var(--page) !important;
    background-image:
        radial-gradient(ellipse at 18% 0%,
            color-mix(in srgb, var(--glow) 90%, transparent), transparent 48%),
        linear-gradient(
            color-mix(in srgb, var(--accent) 6%, transparent) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--accent) 6%, transparent) 1px,
            transparent 1px
        ) !important;
    background-size: auto, 46px 46px, 46px 46px !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
}
body[data-theme] .tournix-premium-footer::before {
    background: radial-gradient(
        ellipse at 50% 0%,
        color-mix(in srgb, var(--glow) 85%, transparent),
        transparent 65%
    ) !important;
}
body[data-theme] .tournix-premium-footer .premium-footer-logo,
body[data-theme] .tournix-premium-footer .premium-footer-column h4 {
    color: var(--ink) !important;
}
body[data-theme] .tournix-premium-footer .premium-footer-description,
body[data-theme] .tournix-premium-footer .premium-footer-column a,
body[data-theme] .tournix-premium-footer .premium-footer-bottom p,
body[data-theme] .tournix-premium-footer .premium-footer-meta {
    color: var(--muted) !important;
}
body[data-theme] .tournix-premium-footer .premium-footer-column a:hover {
    color: var(--accent) !important;
}
body[data-theme] .tournix-premium-footer .premium-footer-socials a {
    color: var(--accent) !important;
    background: var(--surface) !important;
    border-color: var(--line) !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 8%, transparent);
}
body[data-theme] .tournix-premium-footer .premium-footer-socials a:hover {
    color: var(--accent2) !important;
    background: var(--soft) !important;
    border-color: var(--accent) !important;
}
body[data-theme] .tournix-premium-footer .premium-footer-bottom {
    border-top-color: var(--line) !important;
}
body[data-theme] .tournix-premium-footer .premium-footer-version {
    color: var(--muted) !important;
}

/* Avoid a forced light footer from legacy styles on any named theme. */
body[data-theme="midnight"] .tournix-premium-footer,
body[data-theme="obsidian"] .tournix-premium-footer,
body[data-theme="violet"] .tournix-premium-footer,
body[data-theme="emerald"] .tournix-premium-footer,
body[data-theme="ocean"] .tournix-premium-footer,
body[data-theme="crimson"] .tournix-premium-footer,
body[data-theme="slate"] .tournix-premium-footer,
body[data-theme="monochrome-dark"] .tournix-premium-footer,
body[data-theme="arctic"] .tournix-premium-footer,
body[data-theme="rose"] .tournix-premium-footer,
body[data-theme="sunset"] .tournix-premium-footer,
body[data-theme="amber"] .tournix-premium-footer,
body[data-theme="mint"] .tournix-premium-footer,
body[data-theme="aurora-flow"] .tournix-premium-footer,
body[data-theme="monochrome-light"] .tournix-premium-footer,
body[data-theme="solar-gold"] .tournix-premium-footer {
    background-color: var(--page) !important;
}

/* Theme-aware logo/social hover colours and compact mobile footer. */
@media (max-width: 600px) {
    body[data-theme] .tournix-premium-footer .footer-inner {
        width: calc(100% - 32px);
    }
    body[data-theme] .tournix-premium-footer .premium-footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body[data-theme] .tournix-premium-footer .premium-footer-brand {
        grid-column: 1 / -1;
    }
}


/* =========================================================
   FOOTER CONTINUITY + WORKING SCROLL REVEAL
   Footer shares the page canvas/grid; no separate colour block.
   ========================================================= */

/* Keep the footer visually connected to the section above it. */
body[data-theme] footer.tournix-premium-footer {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--ink) !important;
    border: 0 !important;
    box-shadow: none !important;
}
body[data-theme] footer.tournix-premium-footer::before {
    content: none !important;
    display: none !important;
}
body[data-theme] footer.tournix-premium-footer .footer-inner {
    background: transparent !important;
}

/* Reveal each footer block when it enters the viewport. */
footer.tournix-premium-footer .premium-footer-brand.animate-on-scroll,
footer.tournix-premium-footer .premium-footer-column.animate-on-scroll,
footer.tournix-premium-footer .premium-footer-bottom.animate-on-scroll {
    opacity: 0;
    transform: translateY(34px);
    transition:
        opacity 650ms cubic-bezier(.2,.75,.25,1),
        transform 650ms cubic-bezier(.2,.75,.25,1);
}
footer.tournix-premium-footer .premium-footer-brand.animate-on-scroll.is-visible,
footer.tournix-premium-footer .premium-footer-column.animate-on-scroll.is-visible,
footer.tournix-premium-footer .premium-footer-bottom.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
footer.tournix-premium-footer .premium-footer-brand.is-visible { transition-delay: 0ms; }
footer.tournix-premium-footer .premium-footer-column:nth-of-type(1).is-visible { transition-delay: 100ms; }
footer.tournix-premium-footer .premium-footer-column:nth-of-type(2).is-visible { transition-delay: 180ms; }
footer.tournix-premium-footer .premium-footer-column:nth-of-type(3).is-visible { transition-delay: 260ms; }
footer.tournix-premium-footer .premium-footer-bottom.is-visible { transition-delay: 180ms; }

@media (max-width: 700px) {
    footer.tournix-premium-footer .premium-footer-brand.animate-on-scroll,
    footer.tournix-premium-footer .premium-footer-column.animate-on-scroll,
    footer.tournix-premium-footer .premium-footer-bottom.animate-on-scroll {
        transform: translateY(22px);
    }
}
@media (prefers-reduced-motion: reduce) {
    footer.tournix-premium-footer .premium-footer-brand.animate-on-scroll,
    footer.tournix-premium-footer .premium-footer-column.animate-on-scroll,
    footer.tournix-premium-footer .premium-footer-bottom.animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

@media (max-width: 767px) {
    .feature-orbit-panel {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: center;
        gap: 10px;
        min-height: 0;
        padding: 18px;
        transform: none !important;
    }

    .hero-feature {
        position: relative;
        inset: auto;
        width: auto;
        min-width: 0;
        min-height: 58px;
        padding: 9px;
        gap: 8px;
        border-radius: 13px;
    }

    .hero-feature > span:last-child {
        min-width: 0;
    }

    .hero-feature strong,
    .hero-feature small {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .hero-brand-core {
        position: relative;
        inset: auto;
        grid-column: 1 / -1;
        order: -1;
        justify-self: center;
        width: 78px;
        height: 78px;
        margin: 0 auto 6px;
        transform: rotate(-7deg);
    }

    .hero-brand-core img {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 360px) {
    .feature-orbit-panel {
        gap: 8px;
        padding: 12px;
    }

    .hero-feature {
        min-height: 56px;
        padding: 7px;
        gap: 6px;
    }

    .hero-feature-icon {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
    }

    .hero-feature strong {
        font-size: .64rem;
    }

    .hero-feature small {
        font-size: .55rem;
    }
}

.about-live-stats {
    padding: 0 0 clamp(42px, 6vw, 76px);
}

.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.about-stat-card {
    display: flex;
    min-width: 0;
    min-height: 146px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--accent) 5%, var(--surface)), var(--surface));
    box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 7%, transparent);
    text-align: center;
}

.about-stat-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    margin-bottom: 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius: 10px;
    background: var(--soft);
    color: var(--accent);
}

.about-stat-icon svg {
    width: 17px;
    height: 17px;
}

.about-stat-value {
    max-width: 100%;
    color: var(--ink);
    font-size: clamp(1.2rem, 2.4vw, 1.65rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.about-stat-label {
    margin-top: 5px;
    color: var(--ink);
    font-size: .78rem;
    font-weight: 700;
}

.about-stat-note {
    margin-top: 3px;
    color: var(--muted);
    font-size: .68rem;
}

@media (max-width: 767px) {
    .about-live-stats {
        padding-bottom: 44px;
    }

    .about-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .about-stat-card {
        min-height: 132px;
        padding: 14px 9px;
    }
}