.glass-card {
    background: rgba(35, 30, 32, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(23,27,54,0.06);
}
.glass-card:hover { transform: translateY(-2px); }
.primary-gradient {
    background: linear-gradient(135deg, #570013 0%, #2c0050 100%);
}
/* Landing adjustments */
.landing-hero {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
}
.landing-hero .hero-content {
    max-width: 720px;
}
.feature-grid {
    gap: 1rem; /* default gap between cards */
}
.feature-grid .glass-card { padding: 1.25rem; border-radius: 0.9rem; }
.mobile-styles-note { /* removed .dna-texture and .hero-gradient as unused */ }
.btn-premium {
    background: linear-gradient(to right, #570013, #800020);
}

/*
 * Global input fix — Tailwind's forms plugin resets border-radius,
 * padding-left, and placeholder colour. These overrides restore the
 * visual design for every login / register input across the site.
 */
input[type="email"],
input[type="password"],
input[type="text"] {
    border-radius: 0.75rem !important;
    padding-left: 3rem !important;
    color: #171B36;
}

/* Ensure placeholders are visible and consistent */
input::placeholder {
    color: #A4A7B6 !important;
    opacity: 1 !important;
}

@media (min-width: 1024px) {
    .landing-hero {
        padding-top: 6.5rem;
        padding-bottom: 6.5rem;
    }
    .feature-grid {
        gap: 1.5rem;
    }
    .landing-hero .hero-content {
        max-width: 880px;
    }
}

/* Extracted register page styles (moved from inline <style>) */
.register-gradient { background: linear-gradient(135deg, #570013 0%, #2c0050 100%); }

/* Hero background for index and other landing areas */
.hero-bg { background-image: linear-gradient(rgba(87,0,19,0.85), rgba(44,0,80,0.95)), url("../assets/landing-bg.jpg"); background-size: cover; background-position: center top; background-blend-mode: multiply; }
.form-input { width:100%; background:white; border:1px solid #dcd7d4; border-radius:0.75rem; padding:0.95rem 1rem 0.95rem 3.5rem !important; font-size:15px; color:#171b36; outline:none; transition: border-color .15s, box-shadow .15s, transform .15s; box-shadow: 0 1px 0 rgba(23,27,54,0.02); height:52px; line-height:1; }
.form-input:focus { border-color:#570013; box-shadow:0 6px 18px rgba(87,0,19,0.08); transform: translateY(-1px); }
.form-input::placeholder { color:#bfc3cc; font-weight:500; }
.rule-dot { width:8px; height:8px; border-radius:50%; background:#d4d6e0; flex-shrink:0; transition:background .18s, transform .18s, box-shadow .18s; }
.rule-dot.valid { background:#3daa63; transform:scale(1.1); box-shadow:0 4px 10px rgba(61,170,99,0.12); }
.rule-valid { color: #3DAA63; }
.step-bar{ height:5px; border-radius:100px; flex:1 }
.step-bar.active{ background: linear-gradient(to right,#570013,#800040) }
.step-bar.inactive{ background:#e5e0da }
.btn-primary-ms{ background: linear-gradient(to right,#570013,#800040); color:white; padding:1rem 1.5rem; border-radius:0.875rem; font-weight:700; font-size:15px; width:100%; display:flex; align-items:center; justify-content:center; gap:.5rem; transition:filter .2s, transform .1s; box-shadow:0 8px 24px rgba(87,0,19,0.25); }
.btn-primary-ms:hover{ filter:brightness(1.05) }

/* Extracted dashboard styles and helpers (moved from inline <style>) */
@keyframes wave {
    0%, 100% { transform: scaleY(0.5); }
    50% { transform: scaleY(1.5); }
}
.glass-card, .glass-panel {
    background: rgba(35, 30, 32, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* material symbols fill variant helper */
.material-symbols-outlined.fill { font-variation-settings: "FILL" 1 }

/* SVG gradient stop helpers */
.stop-a { stop-color: #eeb7d6; stop-opacity: 1; }
.stop-b { stop-color: #eeb7d6; stop-opacity: 0.2; }
.stop-c { stop-color: #eeb7d6; stop-opacity: 0.15; }
.stop-d { stop-color: #161214; stop-opacity: 0; }

/* Hover accent for interactive glass surfaces (used by JS toggles) */
.glass-accent { border-color: rgba(238, 183, 214, 0.2) !important; }

/* Wave bar helpers: heights and animation delays */
.wave-bar { animation: wave 1.2s ease-in-out infinite; }
.h-30 { height: 30%; }
.h-40 { height: 40%; }
.h-50 { height: 50%; }
.h-55 { height: 55%; }
.h-65 { height: 65%; }
.h-70 { height: 70%; }
.h-80 { height: 80%; }
.h-85 { height: 85%; }
.h-100 { height: 100%; }
.delay-01 { animation-delay: 0.1s; }
.delay-02 { animation-delay: 0.2s; }
.delay-03 { animation-delay: 0.3s; }
.delay-04 { animation-delay: 0.4s; }
.delay-05 { animation-delay: 0.5s; }
.delay-06 { animation-delay: 0.6s; }
.delay-08 { animation-delay: 0.8s; }
.delay-09 { animation-delay: 0.9s; }

/* Additional dashboard utilities merged from Dashboard variants */
.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.icon-fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.glass-panel { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); border-top: 1px solid rgba(255,255,255,0.15); }
.active-nav-glow { box-shadow: inset 4px 0 0 0 #8b1a3e; background: linear-gradient(90deg, rgba(139,26,62,0.8) 0%, rgba(139,26,62,0) 100%); }
.bg-wave-gradient { background: linear-gradient(180deg, rgba(139,26,62,0.1) 0%, rgba(19,19,19,0) 100%); }
.pulse-dot { animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(139,26,62,0.7); } 70% { box-shadow: 0 0 0 6px rgba(139,26,62,0); } 100% { box-shadow: 0 0 0 0 rgba(139,26,62,0); } }
.spectrum-bar { width: 6px; background-color: #ffb2bf; border-radius: 9999px; box-shadow: 0 0 8px rgba(139,26,62,0.5); animation: spectrum 1.5s ease-in-out infinite; }
@keyframes spectrum { 0%,100% { height: 8px; } 50% { height: 100%; } }
.spectrum-bar:nth-child(1) { animation-delay: 0.1s; animation-duration: 1.2s; }
.spectrum-bar:nth-child(2) { animation-delay: 0.3s; animation-duration: 1.5s; }
.spectrum-bar:nth-child(3) { animation-delay: 0.6s; animation-duration: 1.1s; }
.spectrum-bar:nth-child(4) { animation-delay: 0.2s; animation-duration: 1.4s; }
.spectrum-bar:nth-child(5) { animation-delay: 0.5s; animation-duration: 1.6s; }
.spectrum-bar:nth-child(6) { animation-delay: 0.8s; animation-duration: 1.3s; }
.spectrum-bar:nth-child(7) { animation-delay: 0.4s; animation-duration: 1.7s; }
.spectrum-bar:nth-child(8) { animation-delay: 0.7s; animation-duration: 1.2s; }
.spectrum-bar:nth-child(9) { animation-delay: 0.9s; animation-duration: 1.5s; }
.spectrum-bar:nth-child(10) { animation-delay: 0.3s; animation-duration: 1.1s; }
.spectrum-bar:nth-child(11) { animation-delay: 0.6s; animation-duration: 1.4s; }

/* Landing page: mobile & tablet layout polish */
@media (max-width: 767px) {
    .landing-mobile .glass-card.bg-white {
        background: #ffffff !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid rgba(209, 195, 199, 0.35);
        box-shadow: 0 4px 16px rgba(23, 27, 54, 0.06);
    }
    .landing-mobile .glass-card.bg-white:hover {
        transform: none;
        background: #ffffff !important;
    }
    .landing-mobile main > section {
        scroll-margin-top: 5rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .landing-tablet main > section {
        scroll-margin-top: 5rem;
    }
    .landing-tablet .inner-glow {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 22px rgba(87, 0, 19, 0.18);
    }
}

/* Header utilities to avoid overlap on small screens */
.header-username { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar { min-height: 64px; }
.topbar .material-symbols-outlined { display: inline-flex; align-items: center; justify-content: center; }

/* Mobile header Login button - polished pill style */
@media (max-width: 767px) {
    header.fixed button[data-scroll-target="#login-mobile"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        padding: 0.5rem 0.9rem !important;
        min-width: 88px !important;
        height: 40px !important;
        border-radius: 9999px !important;
        background: linear-gradient(90deg, #570013 0%, #800020 100%) !important;
        color: #fff !important;
        font-weight: 700 !important;
        box-shadow: 0 6px 18px rgba(87,0,19,0.18) !important;
        transition: transform 160ms ease, box-shadow 160ms ease, opacity 120ms ease !important;
        text-shadow: 0 1px 0 rgba(0,0,0,0.15) !important;
        border: 1px solid rgba(255,255,255,0.06) !important;
    }
    header.fixed button[data-scroll-target="#login-mobile"]:active {
        transform: translateY(1px) scale(0.995) !important;
        box-shadow: 0 4px 12px rgba(87,0,19,0.12) !important;
        opacity: 0.95 !important;
    }
}

/* Tablet topbar Join button (polished pill for md viewports) */
@media (min-width: 768px) and (max-width: 1023px) {
    nav.fixed button[data-scroll-target="#login-tablet"],
    header.fixed button[data-scroll-target="#login-tablet"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.6rem !important;
        padding: 0.55rem 1.05rem !important;
        min-width: 100px !important;
        height: 44px !important;
        border-radius: 9999px !important;
        background: linear-gradient(90deg, #570013 0%, #800020 100%) !important;
        color: #fff !important;
        font-weight: 700 !important;
        box-shadow: 0 8px 22px rgba(87,0,19,0.18) !important;
        transition: transform 160ms ease, box-shadow 160ms ease, opacity 120ms ease !important;
        text-shadow: 0 1px 0 rgba(0,0,0,0.12) !important;
        border: 1px solid rgba(255,255,255,0.04) !important;
    }
    nav.fixed button[data-scroll-target="#login-tablet"]:active,
    header.fixed button[data-scroll-target="#login-tablet"]:active {
        transform: translateY(1px) scale(0.995) !important;
        box-shadow: 0 5px 14px rgba(87,0,19,0.12) !important;
        opacity: 0.98 !important;
    }
    /* Tablet header container alignment to prevent overlap and overflow */
    nav.fixed .max-w-container-max, header.fixed .max-w-container-max {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 1rem !important;
        width: 100% !important;
        max-width: 1100px !important;
        margin: 0 auto !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
    }
    nav.fixed .flex.items-center.gap-md, header.fixed .flex.items-center.gap-md { flex-shrink: 0 !important; gap: 0.75rem !important; }
}

/* Dashboard hero styles */
.name-gradient {
    background: linear-gradient(90deg, #ffb2bf 0%, #8b1a3e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
}
.text-headline-lg-mobile { font-size: 24px; line-height: 32px; font-weight: 700; }
.text-headline-lg { font-size: 32px; line-height: 40px; font-weight: 700; }
.text-body-lg { font-size: 16px; line-height: 24px; }

/* Dashboard-only theme: scoped overrides under .theme-dashboard */
.theme-dashboard .bg-background { background-color: #131313 !important; }
.theme-dashboard .bg-surface { background-color: #131313 !important; }
.theme-dashboard .text-on-surface { color: #e5e2e1 !important; }
.theme-dashboard .text-on-surface-variant { color: #ddbfc3 !important; }
.theme-dashboard .bg-primary { background-color: #ffb2bf !important; }
.theme-dashboard .text-primary { color: #ffb2bf !important; }
.theme-dashboard .bg-primary-container { background-color: #8b1a3e !important; }
.theme-dashboard .text-on-primary-container { color: #ffffff !important; }
.theme-dashboard .border-outline-variant { border-color: #564145 !important; }
.theme-dashboard .bg-surface-container-low { background-color: #1c1b1b !important; }
.theme-dashboard .bg-surface-container-high { background-color: #2a2a2a !important; }
.theme-dashboard .glass-card, .theme-dashboard .glass-panel { background: rgba(35,30,32,0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border:1px solid rgba(255,255,255,0.08); }
.theme-dashboard .primary-gradient { background: linear-gradient(135deg, #8b1a3e 0%, #2c0050 100%) !important; }
.theme-dashboard .btn-premium { background: linear-gradient(to right,#ffb2bf,#8b1a3e) !important; color: #fff !important; }
.theme-dashboard .hero-bg { background-image: linear-gradient(rgba(139,26,62,0.85), rgba(19,19,19,0.95)), url("../assets/landing-bg.jpg") !important; background-size: cover; background-position: center top; background-blend-mode: multiply; }
.theme-dashboard .name-gradient { background: linear-gradient(90deg, #ffb2bf 0%, #8b1a3e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* small utility adjustments scoped to dashboard */
.theme-dashboard .pulse-dot { box-shadow: 0 0 0 0 rgba(139,26,62,0.7); }
.theme-dashboard .spectrum-bar { background-color: #ffb2bf; box-shadow: 0 0 8px rgba(139,26,62,0.5); }

/* Dashboard header (topbar) palette overrides */
.theme-dashboard header {
    background: linear-gradient(90deg, rgba(139,26,62,0.12), rgba(19,19,19,0.75)) !important;
    border-bottom-color: rgba(86,65,69,0.25) !important;
    color: #e5e2e1 !important;
}
.theme-dashboard header .material-symbols-outlined { color: #ffd9de !important; }
.theme-dashboard header button:hover { background: rgba(255,255,255,0.03) !important; }
.theme-dashboard header .pulse-dot { background: #ffb2bf !important; box-shadow: 0 0 8px rgba(255,178,191,0.18) !important; }

/* Dashboard bottom nav — mirrors desktop sidebar palette */
.theme-dashboard .dashboard-bottom-nav {
    background: #131313;
    border-top: 1px solid rgba(86, 65, 69, 0.35);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
}
.theme-dashboard .dashboard-bottom-nav-inner {
    max-width: 720px;
    margin: 0 auto;
}
.theme-dashboard .dashboard-bottom-nav-item {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.5rem 0.35rem;
    border-radius: 0.75rem;
    color: #ddbfc3;
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.theme-dashboard .dashboard-bottom-nav-item .material-symbols-outlined {
    font-size: 22px;
    color: inherit;
    opacity: 0.82;
}
.theme-dashboard .dashboard-bottom-nav-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.theme-dashboard .dashboard-bottom-nav-item.is-active {
    background: linear-gradient(180deg, rgba(139, 26, 62, 0.55) 0%, rgba(139, 26, 62, 0.08) 100%);
    box-shadow: inset 0 2px 0 0 #8b1a3e;
    color: #ffffff;
}
.theme-dashboard .dashboard-bottom-nav-item.is-active .material-symbols-outlined {
    opacity: 1;
}
.theme-dashboard .dashboard-bottom-nav-item:not(.is-active):active {
    background: rgba(42, 42, 42, 0.65);
    color: #e5e2e1;
    transform: scale(0.97);
}

@media (min-width: 768px) and (max-width: 1023px) {
    .theme-dashboard .dashboard-bottom-nav-inner {
        max-width: 640px;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .theme-dashboard .dashboard-bottom-nav-item {
        padding: 0.625rem 0.5rem;
        font-size: 11px;
    }
    .theme-dashboard .dashboard-bottom-nav-item .material-symbols-outlined {
        font-size: 24px;
    }
}