/* Dashboard (/app home) — full dark shell to match marketing landing (black + neon mint) */

html:has(body.app-dashboard-home) {
    background: #000000;
}

body.app-dashboard-home {
    --text-primary: #f0f4f8;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --text-muted: #64748b;
    --bg-primary: #000000;
    --bg-secondary: rgba(0, 0, 0, 0.92);
    --bg-card: rgba(255, 255, 255, 0.04);
    --bg-tertiary: rgba(255, 255, 255, 0.08);
    --border-color: rgba(255, 255, 255, 0.1);
    --accent-primary: #3dd68c;
    --accent-secondary: #2eb574;
    --accent-gradient: linear-gradient(135deg, #2eb574 0%, #3dd68c 100%);
    --shadow: rgba(0, 0, 0, 0.5);
    --shadow-soft: rgba(0, 0, 0, 0.4);
    background: #000000;
    color: var(--text-primary);
}

/* Body already has padding-top for the fixed nav; do not add a second offset here. */
body.app-dashboard-home .main-content {
    background: #000000;
    padding-top: 0;
    min-height: auto;
    box-sizing: border-box;
}

body.app-dashboard-home #homePage,
body.app-dashboard-home #videosPage {
    background: #000000;
}

body.app-dashboard-home .homepage-container {
    padding: clamp(1.25rem, 4vw, 2.5rem) clamp(1rem, 4vw, 1.5rem) 3rem;
}

/* Top nav — landing-style bar (dashboard home + full SPA shell: Explore, reels, etc.) */
body.app-dashboard-home .top-nav,
body.app-root .top-nav {
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(61, 214, 140, 0.18);
    box-shadow:
        0 1px 0 rgba(34, 211, 238, 0.08),
        0 0 40px rgba(61, 214, 140, 0.06);
}

body.app-dashboard-home .top-nav-logo,
body.app-root .top-nav-logo {
    color: #f0f4f8;
}

body.app-dashboard-home .top-nav-brand,
body.app-root .top-nav-brand {
    color: #f0f4f8;
    font-weight: 700;
    text-transform: none;
}

body.app-dashboard-home .sidebar-logo,
body.app-root .sidebar-logo {
    filter: drop-shadow(0 0 10px rgba(61, 214, 140, 0.35));
}

body.app-dashboard-home .top-nav-link,
body.app-root .top-nav-link {
    color: #94a3b8;
    border: 1px solid transparent;
}

body.app-dashboard-home .top-nav-link:hover,
body.app-root .top-nav-link:hover {
    background: rgba(61, 214, 140, 0.1);
    color: #e2e8f0;
}

body.app-dashboard-home .top-nav-link.active,
body.app-root .top-nav-link.active {
    background: linear-gradient(135deg, #2eb574 0%, #3dd68c 100%);
    color: #041208;
    border-color: rgba(61, 214, 140, 0.45);
    box-shadow: 0 0 18px rgba(61, 214, 140, 0.25);
}

body.app-dashboard-home .nav-dropdown-trigger,
body.app-root .nav-dropdown-trigger {
    color: #94a3b8;
}

body.app-dashboard-home .nav-dropdown-trigger:hover,
body.app-dashboard-home .nav-dropdown-trigger[aria-expanded='true'],
body.app-root .nav-dropdown-trigger:hover,
body.app-root .nav-dropdown-trigger[aria-expanded='true'] {
    background: rgba(61, 214, 140, 0.1);
    color: #e2e8f0;
}

body.app-dashboard-home .nav-dropdown-panel,
body.app-root .nav-dropdown-panel {
    background: #0a0f0d;
    border: 1px solid rgba(61, 214, 140, 0.2);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

body.app-dashboard-home .nav-dropdown-panel .nav-item,
body.app-root .nav-dropdown-panel .nav-item {
    color: #cbd5e1;
}

body.app-dashboard-home .nav-dropdown-panel .nav-item:hover,
body.app-root .nav-dropdown-panel .nav-item:hover {
    background: rgba(61, 214, 140, 0.12);
    color: #3dd68c;
}

body.app-dashboard-home .mobile-menu-toggle span,
body.app-root .mobile-menu-toggle span {
    background: #e2e8f0;
}

body.app-dashboard-home .xp-label,
body.app-dashboard-home .xp-to-next,
body.app-root .xp-label,
body.app-root .xp-to-next {
    color: #94a3b8;
}

body.app-dashboard-home .xp-value,
body.app-root .xp-value {
    color: #3dd68c;
}

body.app-dashboard-home .level-badge,
body.app-root .level-badge {
    background: rgba(61, 214, 140, 0.15);
    color: #3dd68c;
    border: 1px solid rgba(61, 214, 140, 0.35);
}

body.app-dashboard-home .xp-progress-bar,
body.app-root .xp-progress-bar {
    background: rgba(255, 255, 255, 0.1);
}

body.app-dashboard-home .xp-progress-fill,
body.app-root .xp-progress-fill {
    background: linear-gradient(90deg, #2eb574, #3dd68c);
}

body.app-dashboard-home .user-name,
body.app-root .user-name {
    color: #e2e8f0;
}

body.app-dashboard-home .signout-btn,
body.app-root .signout-btn {
    background: rgba(61, 214, 140, 0.12) !important;
    color: #ecfdf5 !important;
    border: 1px solid rgba(61, 214, 140, 0.45) !important;
}

body.app-dashboard-home .signout-btn:hover,
body.app-root .signout-btn:hover {
    background: rgba(61, 214, 140, 0.22) !important;
}

/* Hero */
body.app-dashboard-home .home-hero-line1 {
    color: #f8fafc;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-shadow: 0 0 42px rgba(61, 214, 140, 0.2);
}

body.app-dashboard-home .home-hero-line2 {
    color: #94a3b8;
}

body.app-dashboard-home .home-hero-cta {
    background: linear-gradient(135deg, #2eb574 0%, #3dd68c 100%);
    color: #041208;
    font-weight: 700;
    box-shadow:
        0 0 20px rgba(61, 214, 140, 0.45),
        0 0 40px rgba(34, 211, 238, 0.15);
}

body.app-dashboard-home .home-hero-cta:hover {
    filter: brightness(1.06);
    box-shadow:
        0 0 28px rgba(61, 214, 140, 0.55),
        0 0 48px rgba(34, 211, 238, 0.2);
}

body.app-dashboard-home .home-hero-tagline,
body.app-dashboard-home .action-subtext {
    color: #64748b;
}

/* Stats — soft panels */
body.app-dashboard-home .home-stat-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(61, 214, 140, 0.15);
}

body.app-dashboard-home .home-stat-card:hover {
    border-color: rgba(61, 214, 140, 0.4);
    box-shadow: 0 0 24px rgba(61, 214, 140, 0.08);
}

body.app-dashboard-home .home-stat-label {
    color: #94a3b8;
}

body.app-dashboard-home .home-stat-value {
    color: #f1f5f9;
}

@media (max-width: 720px) {
    body.app-dashboard-home .home-quick-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Focusia + continue + XP */
body.app-dashboard-home .home-platypus,
body.app-dashboard-home .home-continue-card,
body.app-dashboard-home .home-xp-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(61, 214, 140, 0.14);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.04);
}

body.app-dashboard-home .home-platypus-name,
body.app-dashboard-home .home-section-title,
body.app-dashboard-home .home-continue-title,
body.app-dashboard-home .home-xp-level,
body.app-dashboard-home .home-xp-unlock {
    color: #f1f5f9;
}

body.app-dashboard-home .home-platypus-quote,
body.app-dashboard-home .home-continue-meta,
body.app-dashboard-home .home-xp-next {
    color: #94a3b8;
}

body.app-dashboard-home .home-platypus-level,
body.app-dashboard-home .home-platypus-xp {
    color: #64748b;
}

body.app-dashboard-home .home-platypus-bar-wrap {
    background: rgba(255, 255, 255, 0.08);
}

body.app-dashboard-home .home-platypus-bar {
    background: linear-gradient(90deg, #2eb574, #3dd68c);
}

body.app-dashboard-home .home-continue-btn {
    background: linear-gradient(135deg, #2eb574 0%, #3dd68c 100%);
    color: #041208;
    font-weight: 700;
}

body.app-dashboard-home .home-continue-btn:hover {
    filter: brightness(1.08);
}

/* Tool cards */
body.app-dashboard-home .home-tool-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.app-dashboard-home .home-tool-card:hover {
    border-color: rgba(61, 214, 140, 0.45);
}

body.app-dashboard-home .home-tool-card-featured {
    border-color: rgba(61, 214, 140, 0.45);
    background: linear-gradient(135deg, rgba(61, 214, 140, 0.12) 0%, rgba(0, 0, 0, 0.2) 100%);
}

body.app-dashboard-home .home-tool-name {
    color: #f1f5f9;
}

body.app-dashboard-home .home-tool-desc {
    color: #94a3b8;
}

/* Sign-in CTA block */
body.app-dashboard-home .homepage-cta {
    text-align: center;
}

body.app-dashboard-home .cta-signin-btn {
    background: linear-gradient(135deg, #2eb574 0%, #3dd68c 100%);
    color: #041208;
    font-weight: 700;
    border: none;
    box-shadow: 0 0 20px rgba(61, 214, 140, 0.35);
}

body.app-dashboard-home .cta-subtext,
body.app-dashboard-home .cta-subtext a {
    color: #94a3b8;
}

body.app-dashboard-home .cta-subtext a {
    color: #3dd68c;
}

/* Mobile menu drawer — dark */
@media (max-width: 768px) {
    body.app-dashboard-home .top-nav.open .top-nav-links,
    body.app-root .top-nav.open .top-nav-links {
        background: #0a0a0a;
        border-bottom: 1px solid rgba(61, 214, 140, 0.2);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65);
    }

    body.app-dashboard-home .top-nav.open .mobile-menu-header,
    body.app-root .top-nav.open .mobile-menu-header {
        background: #0a0a0a;
        border-bottom-color: rgba(61, 214, 140, 0.15);
    }

    body.app-dashboard-home .mobile-menu-title,
    body.app-root .mobile-menu-title {
        color: #f1f5f9;
    }

    body.app-dashboard-home .mobile-menu-close,
    body.app-root .mobile-menu-close {
        background: rgba(255, 255, 255, 0.08);
        color: #e2e8f0;
    }
}

/* Sign-in / sign-up — same black + neon mint shell as dashboard landing */
body.app-dashboard-home #signinPage,
body.app-dashboard-home #signupPage {
    background: #000000;
    min-height: calc(100vh - 56px);
    padding: clamp(1rem, 4vw, 2rem);
    box-sizing: border-box;
}

body.app-dashboard-home .signin-minimal .signup-logo,
body.app-dashboard-home .signup-minimal .signup-logo {
    filter: drop-shadow(0 0 14px rgba(61, 214, 140, 0.35));
}

body.app-dashboard-home .google-signin-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(61, 214, 140, 0.28);
    color: #f1f5f9;
}

body.app-dashboard-home .google-signin-btn:hover {
    background: rgba(61, 214, 140, 0.12);
    border-color: rgba(61, 214, 140, 0.55);
    box-shadow: 0 0 24px rgba(61, 214, 140, 0.15);
}

body.app-dashboard-home .auth-divider::before,
body.app-dashboard-home .auth-divider::after {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

body.app-dashboard-home .form-group input:focus {
    outline: none;
    border-color: rgba(61, 214, 140, 0.65);
    box-shadow: 0 0 0 3px rgba(61, 214, 140, 0.12);
}

body.app-dashboard-home .submit-btn {
    background: linear-gradient(135deg, #2eb574 0%, #3dd68c 100%);
    color: #041208;
    font-weight: 700;
    box-shadow: 0 0 18px rgba(61, 214, 140, 0.35);
}

body.app-dashboard-home .submit-btn:hover {
    filter: brightness(1.06);
    background: linear-gradient(135deg, #2eb574 0%, #3dd68c 100%);
}

body.app-dashboard-home #signinError:not(.hidden),
body.app-dashboard-home .signup-minimal .error:not(.hidden) {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 12px;
}

/* Progress tab layout: /static/css/progress-page.css */