@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');



::selection {
    background: #000000;
    color: #FFFFFF;
}

body.dark-mode ::selection {
    background: #FFFFFF;
    color: #000000;
}

/* ── Smooth Theme Transition ──
   Applied for 400ms by JS when toggling. Transitions colors without
   affecting transform/animation (avoids jank on animated elements). */
body, body * {
    transition-property: background-color, color, border-color, box-shadow, fill, stroke;
    transition-duration: 0s;
    transition-timing-function: ease;
}

body.theme-transitioning,
body.theme-transitioning * {
    transition-duration: 350ms !important;
}

/* Custom Greyscale Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
    background: #888;
    border: 3px solid var(--bg-color);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

:root{
    /* ── Apple-Inspired Liquid Glass — Light Theme ── */
    --bg-color:#FFFFFF;
    --surface-color:rgba(255,255,255,0.9);
    --surface-solid:#FFFFFF;
    --text-primary:#000000;
    --text-secondary:#3A3A3A;
    --border-color:rgba(0,0,0,0.08);
    --glass-bg:rgba(255,255,255,0.85);
    --glass-border:1px solid rgba(0,0,0,0.05);
    --accent-color:#000000;
    --accent-hover:#1D1D1D;
    --accent-subtle:#F5F5F5;
    --transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
    --spring:all 0.6s cubic-bezier(0.34,1.56,0.64,1);
    --overlay-bg:rgba(0,0,0,0.4);
    --progress-bg:rgba(0,0,0,0.1);
    --skeleton-bg:rgba(0,0,0,0.05);
    --input-bg:#F5F5F5;
    --card-shadow:0 4px 12px rgba(0,0,0,0.05),0 1px 3px rgba(0,0,0,0.02);
    --card-shadow-hover:0 30px 60px rgba(0,0,0,0.12),0 10px 20px rgba(0,0,0,0.04);
    --blur-amount:blur(20px) saturate(180%);

    /* Premium Brand Colors */
    --brand-gradient:linear-gradient(135deg,#050505 0%,#1D1D1D 50%,#4A4A4A 100%);
    --brand-indigo:#333333;
    --brand-gold:#D4AF37;
    
    /* Landing Page Tokens */
    --lp-bg:var(--bg-color);
    --lp-surface:var(--surface-color);
    --lp-text:var(--text-primary);
    --lp-muted:var(--text-secondary);
    --lp-border:var(--border-color);
    --lp-accent:var(--accent-color);
    --lp-gradient:var(--brand-gradient);
    --bg-rgb:251,251,251;

    /* Spacing & Radius */
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:20px;
    --radius-xl:40px;
    --spacing-xs:0.5rem;
    --spacing-sm:1rem;
    --spacing-md:1.5rem;
    --spacing-lg:3rem;
    --spacing-xl:6rem;

    /* Layout Tokens */
    --sidebar-width:280px;
    --container-width:1280px;
}

body.dark-mode{
    --bg-color:#030303;
    --surface-color:rgba(18,18,18,0.85);
    --surface-solid:#0A0A0A;
    --text-primary:#FFFFFF;
    --text-secondary:#A1A1A1;
    --border-color:rgba(255,255,255,0.08);
    --glass-bg:rgba(10,10,10,0.7);
    --glass-border:1px solid rgba(255,255,255,0.08);
    --accent-color:#FFFFFF;
    --accent-hover:#F5F5F5;
    --accent-subtle:rgba(255,255,255,0.08);
    --overlay-bg:rgba(0,0,0,0.8);
    --progress-bg:rgba(255,255,255,0.04);
    --skeleton-bg:rgba(255,255,255,0.02);
    --bg-rgb:3,3,3;
    --input-bg:rgba(255,255,255,0.03);
    --card-shadow:0 4px 20px rgba(0,0,0,0.4),0 1px 3px rgba(0,0,0,0.2);
    --card-shadow-hover:0 20px 60px rgba(0,0,0,0.6),0 5px 15px rgba(0,0,0,0.3);
    --brand-gradient:linear-gradient(135deg,#FFFFFF 0%,#E5E5E5 50%,#8E8E8E 100%);
    --lp-gradient:var(--brand-gradient);
}

/* ── Dark Mode Overrides ── */
body.dark-mode .btn-primary,
body.dark-mode .btn-hero-primary,
body.dark-mode .btn-pricing-solid,
body.dark-mode .nav-btn-primary,
body.dark-mode .btn-form-submit{
    background:#FFFFFF;
    color:#000000 !important;
    border-color:#FFFFFF;
}

body.dark-mode .btn-signin{
    background:rgba(255,255,255,0.05);
    color:#FFFFFF;
    border-color:#333333;
}

body.dark-mode .social-btn{
    background:#FFFFFF;
    color:#000000;
}

/* ── Initial Reset & Core Resilient Styles ── */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background-color:var(--bg-color);
    color:var(--text-primary);
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    letter-spacing:-0.015em;
    opacity:1;
    transition:opacity 0.3s cubic-bezier(0.16,1,0.3,1),background-color 0.4s ease;
}

/* Critical Layout Resilience */
.lp-nav-logo img{
    height:32px !important;
    width:auto;
    display:block;
}

.lp-nav{
    position:fixed;
    top:20px;
    left:40px;
    right:40px;
    z-index:1000;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 32px;
    background:var(--glass-bg);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid var(--glass-border,var(--border-color));
    border-radius:100px;
    /* Pill shape for premium feel */
    transition:var(--transition);
    box-shadow:0 4px 30px rgba(0,0,0,0.05);
    /* Soft shadow */
}

body.loaded{
    opacity:1;
}

body.fade-out{
    opacity:0;
}

h1,
h2,
h3,
.serif{
    font-family:'Inter',system-ui,sans-serif;
    font-weight:700;
    letter-spacing:-0.03em;
    color:var(--text-primary);
}

/* Ensure Paragraphs are Readable */
p,
li{
    color:var(--text-secondary);
}

.serif-accent{
    font-family:'Playfair Display',serif;
    font-weight:400;
    font-style:italic;
}

/* Scroll Progress Bar */
.scroll-progress{
    position:fixed;
    top:0;
    left:0;
    height:3px;
    background:var(--lp-text);
    z-index:2000;
    opacity:0.8;
}

/* Navigation */
nav{
    position:fixed;
    top:0;
    width:100%;
    padding:1.5rem 5%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index:100;
    background:var(--bg-color);
    transition:var(--transition);
    border-bottom:1px solid transparent;
}

nav.scrolled{
    padding:1rem 5%;
    background:var(--glass-bg);
    border-bottom:1px solid var(--border-color);
}

.logo{
    font-size:1.5rem;
    font-weight:700;
    letter-spacing:-0.02em;
    color:var(--text-primary);
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:0.5rem;
}

.logo img{
    height:32px;
    width:auto;
    transition:var(--transition);
}

/* Massive Branding for Auth Pages */
.auth-logo-massive img{
    height:auto;
    width:180px;
    max-width:95%;
    /* High impact but stays within container */
    margin:0 auto 1.5rem;
    display:block;
    opacity:0.95;
    filter:drop-shadow(0 0 15px rgba(255,255,255,0.08));
}

body.light-mode .auth-logo-massive img{
    filter:drop-shadow(0 0 15px rgba(0,0,0,0.08));
}

/* Invert Logo for Light Mode IF the logo is white text. 
   If logo-text-final.png is BLACK text,then we invert in DARK mode.
   User said "text logo and icon logo both in png formats".
   Let's assume text logo is black-on-transparent or white-on-transparent.
   If it's white (for dark mode),then light mode needs invert.
   If it's black (for light mode),then dark mode needs invert.
   Given the screenshot showed it white on dark,it's likely white text.
   So "body.light-mode .logo img{filter:invert(1);}" is correct.
*/
/* Logo Inversion removed - using JS image swap for better quality */
body.light-mode .logo img,
body.light-mode .sidebar-logo img,
body.light-mode .lp-nav-logo img,
body.light-mode .auth-logo img{
    /* filter:invert(1);*/
    filter:none;
}

/* Save Status Colors */
.save-status-red{
    background:#ef4444 !important;
    color:white !important;
}

.save-status-yellow{
    background:#f59e0b !important;
    color:white !important;
}

.save-status-green{
    background:#10b981 !important;
    color:white !important;
}

.logo span:not(.logo-brand-text){
    display:none;
    /* Hide text if logo is huge? Or style it */
}

.nav-links{
    display:flex;
    gap:3rem;
    /* More breathing room */
    align-items:center;
}

.nav-links a{
    text-decoration:none;
    color:var(--text-secondary);
    font-size:0.9rem;
    font-weight:500;
    transition:var(--transition);
}

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

.btn-signin{
    padding:0.75rem 1.5rem;
    border:1px solid var(--border-color);
    border-radius:4px;
    /* Slightly softer */
    transition:var(--transition);
    color:var(--text-primary);
    text-decoration:none;
    background:rgba(255,255,255,0.03);
    /* Subtle fill */
}

.btn-signin:hover{
    background:var(--surface-color);
    border-color:var(--text-primary);
}

.btn-primary{
    background:var(--lp-gradient);
    color:#FFFFFF;
    padding:0.85rem 2.2rem;
    border-radius:100px;
    font-weight:600;
    text-decoration:none;
    transition:var(--transition);
    border:none;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 15px rgba(0,0,0,0.1);
}

.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 25px rgba(0,0,0,0.15);
    filter:brightness(1.1);
}


/* Modern Button Styles */
.btn-modern,
.glow-btn{
    background:linear-gradient(135deg,#ffffff 0%,#e0e0e0 100%);
    color:#000;
    border:none;
    padding:1rem 2rem;
    border-radius:12px;
    font-weight:600;
    font-size:1rem;
    cursor:pointer;
    transition:all 0.3s cubic-bezier(0.25,0.8,0.25,1);
    box-shadow:0 4px 15px rgba(255,255,255,0.1);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.75rem;
    position:relative;
    overflow:hidden;
    letter-spacing:-0.01em;
}

.btn-modern:hover,
.glow-btn:hover{
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 8px 25px rgba(255,255,255,0.2);
    background:linear-gradient(135deg,#ffffff 0%,#f0f0f0 100%);
}

.btn-modern:active,
.glow-btn:active{
    transform:translateY(0) scale(0.98);
}

.btn-modern i,
.glow-btn i{
    font-size:1.1em;
}

/* Secondary Modern Button */
.btn-modern-secondary{
    background:rgba(255,255,255,0.05);
    color:var(--text-primary);
    border:1px solid var(--border-color);
    padding:0.8rem 1.5rem;
    border-radius:10px;
    font-weight:500;
    transition:all 0.2s ease;
}

.btn-modern-secondary:hover{
    background:rgba(255,255,255,0.1);
    border-color:var(--text-primary);
    transform:translateY(-1px);
}

/* Hero Section */
.hero{
    height:90vh;
    /* Slightly reduced height */
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:0 5%;
    position:relative;
    border-bottom:1px solid var(--border-color);
}

/* Removed the glowing .hero::before pseudo-element */

.hero-label{
    color:var(--accent-color);
    font-size:0.8rem;
    font-weight:600;
    letter-spacing:0.3em;
    text-transform:uppercase;
    margin-bottom:2rem;
    opacity:0;
    transform:translateY(20px);
    animation:fadeInUp 0.8s forwards;
}

.hero h1{
    font-size:4.5rem;
    line-height:1.1;
    max-width:900px;
    margin-bottom:2rem;
    opacity:0;
    transform:translateY(20px);
    animation:fadeInUp 0.8s 0.2s forwards;
}

.hero p{
    font-size:1.25rem;
    color:var(--text-secondary);
    max-width:600px;
    margin-bottom:3rem;
    opacity:0;
    transform:translateY(20px);
    animation:fadeInUp 0.8s 0.4s forwards;
}

/* Typewriter Effect - Simplified */
.typewriter-container{
    height:1.2em;
    display:inline-block;
    color:var(--accent-color);
    font-style:italic;
    border-right:none;
    /* Removed cursor */
}

.cta-group{
    opacity:0;
    transform:translateY(20px);
    animation:fadeInUp 0.8s 0.6s forwards;
}

/* Features Grid */
.section{
    padding:8rem 5%;
    /* Reduced padding */
    border-bottom:1px solid var(--border-color);
}

.section-header{
    text-align:center;
    margin-bottom:5rem;
}

.section-header h2{
    font-size:3rem;
    margin-bottom:1rem;
}

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

.card{
    background:var(--surface-color);
    border:1px solid var(--border-color);
    padding:3rem;
    border-radius:2px;
    /* Sharper */
    transition:var(--transition);
    position:relative;
    overflow:hidden;
}

.card:hover{
    border-color:var(--accent-color);
    transform:translateY(-5px);
    /* Reduced movement */
}

.card i{
    font-size:2rem;
    color:var(--accent-color);
    margin-bottom:2rem;
    display:block;
}

.card h3{
    font-size:1.5rem;
    margin-bottom:1rem;
    font-weight:400;
    /* Lighter weight for clean look */
}

.card p{
    color:var(--text-secondary);
    font-size:1rem;
}

.card ul li i{
    font-size:1rem;
    display:inline-block;
    margin-bottom:0;
    width:auto;
    color:var(--accent-color);
}

/* Testimonials / Success Stories */
.testimonials{
    background:var(--bg-color);
    /* Was hardcoded #0D0D0F */
}

.success-story-card{
    background:rgba(255,255,255,0.03);
    border:1px dashed var(--accent-color);
    padding:3rem;
    border-radius:8px;
    max-width:600px;
    margin:0 auto;
}

body.light-mode .success-story-card{
    background:rgba(0,0,0,0.05);
    /* Visible on white */
    border-style:solid;
    /* Optional:make it solid in light mode? Dashed is fine. */
}

.testimonial-card{
    border:none;
    background:transparent;
    border-left:2px solid var(--accent-color);
    padding-left:2rem;
}

.testimonial-text{
    font-style:italic;
    font-size:1.25rem;
    margin-bottom:1.5rem;
}

.author{
    font-weight:600;
    color:var(--accent-color);
}

/* Animations */
@keyframes fadeInUp{
    to{
        opacity:1;
        transform:translateY(0);
}
}

/* Responsive */
@media (max-width:768px){
    .hero h1{
        font-size:2.8rem;
}

    .hero p{
        font-size:1.1rem;
}

    .nav-links{
        display:none;
}

    /* Mobile-specific styles for Note Editor */
    .note-editor-container{
        margin-left:0 !important;
        padding-top:60px;
        /* Room for hamburger toggle */
}

    .editor-header{
        flex-direction:column;
        height:auto !important;
        padding:1rem !important;
        gap:0.75rem;
}

    .header-center{
        order:-1;
        width:100%;
        overflow-x:auto;
        padding-bottom:0.5rem;
}

    .pill-toolbar{
        padding:0.25rem 0.5rem;
}

    .pill-btn{
        padding:0.4rem;
}

    .note-title-large{
        font-size:1.6rem !important;
}

    .editor-content-wrapper{
        padding:2rem 1rem !important;
}

    .ai-interpret-sidebar{
        width:100% !important;
        right:-100% !important;
}

    .ai-interpret-sidebar.active{
        right:0 !important;
}

    .floating-menu{
        bottom:2rem;
        left:50% !important;
        transform:translateX(-50%);
        top:auto !important;
        width:90%;
        max-width:320px;
}

    .section{
        padding:5rem 5%;
}

    .section-header h2{
        font-size:2.2rem;
}

    /* Layout Reset */
    .sidebar{
        transform:translateX(-100%);
        transition:transform 0.3s cubic-bezier(0.16,1,0.3,1);
        width:280px !important;
        box-shadow:20px 0 50px rgba(0,0,0,0.5);
}

    .sidebar.mobile-active{
        transform:translateX(0);
}

    .main-content{
        margin-left:0 !important;
        width:100% !important;
        padding:1.5rem !important;
}

    /* Mobile Header/Toggle */
    .mobile-nav-toggle{
        display:flex !important;
        position:fixed;
        top:1rem;
        left:1rem;
        z-index:1001;
        background:var(--surface-color);
        border:1px solid var(--border-color);
        color:var(--text-primary);
        padding:0.6rem;
        border-radius:8px;
        cursor:pointer;
}

    /* Dashboard Specifics */
    .dashboard-header{
        flex-direction:column;
        align-items:flex-start !important;
        gap:1.5rem;
}

    .welcome-text h1{
        font-size:1.8rem !important;
}

    .section-title{
        font-size:1.25rem !important;
        margin-top:2rem;
}

    .modules-grid{
        grid-template-columns:1fr !important;
}
}

/* Sidebar & Dashboard Styles */
.sidebar{
    width:var(--sidebar-width);
    background:var(--glass-bg);
    backdrop-filter:var(--blur-amount);
    -webkit-backdrop-filter:var(--blur-amount);
    border-right:var(--glass-border);
    padding:0;
    display:flex;
    flex-direction:column;
    gap:0;
    height:100vh;
    max-height:100vh;
    overflow:hidden;
    position:fixed;
    top:0;
    left:0;
    z-index:2000;
    transition:width 0.4s cubic-bezier(0.16,1,0.3,1);
    box-shadow:var(--card-shadow);
}

/* ─── Sidebar Header (Sticky Top) ─── */
.sidebar-header{
    padding:1.5rem 1.5rem 1rem;
    flex-shrink:0;
    display:flex;
    align-items:center;
    min-height:80px;
}

.sidebar-logo img{
    height:32px;
    width:auto;
    display:block;
}

/* ─── Sidebar Nav (Scrollable Middle) ─── */
.sidebar-nav{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    padding:0.5rem 1.5rem;
    scrollbar-width:thin;
    scrollbar-color:var(--border-color) transparent;
}

.sidebar-nav::-webkit-scrollbar{
    width:4px;
}

.sidebar-nav::-webkit-scrollbar-track{
    background:transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb{
    background:var(--border-color);
    border-radius:4px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover{
    background:rgba(255,255,255,0.2);
}

.sidebar-overlay{
    display:none;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.5);
    backdrop-filter:blur(4px);
    z-index:99;
}

.sidebar-overlay.active{
    display:block;
}

/* ─── Sidebar Credits Card ─── */
.sidebar-credits-card{
    margin:1rem 0;
    padding:1.25rem;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.05);
    border-radius:20px;
    transition:var(--transition);
}

.sidebar-credits-card:hover{
    border-color:rgba(255,255,255,0.15);
}

.credits-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:0.6rem;
}

.credits-label{
    font-size:0.73rem;
    color:var(--text-secondary);
    display:flex;
    align-items:center;
    gap:0.4rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.05em;
}

.credits-value{
    font-size:0.9rem;
    font-weight:800;
    color:var(--text-primary);
}

.credits-progress-container{
    height:5px;
    background:var(--border-color);
    border-radius:10px;
    overflow:hidden;
    margin-bottom:0.5rem;
}

.credits-progress-bar{
    height:100%;
    background:linear-gradient(90deg,#667eea,#764ba2);
    border-radius:10px;
    transition:width 0.5s ease,background 0.3s ease;
}

.credits-footer{
    font-size:0.7rem;
    color:var(--text-secondary);
    display:flex;
    justify-content:space-between;
}

.sidebar.minimized .sidebar-credits-card{
    display:none;
}

/* ─── Theme Toggle ─── */
.theme-toggle-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0.75rem 1rem;
    margin:0.5rem 0;
    border-radius:12px;
    cursor:pointer;
    transition:background 0.3s ease;
    user-select:none;
    border:1px solid transparent;
}

.theme-toggle-bar:hover{
    background:var(--progress-bg);
}

.theme-toggle-label{
    display:flex;
    align-items:center;
    gap:0.6rem;
    font-size:0.82rem;
    color:var(--text-secondary);
    font-weight:500;
}

.theme-toggle-label i{
    font-size:0.9rem;
    width:16px;
    text-align:center;
}

.theme-switch{
    position:relative;
    width:40px;
    height:22px;
    background:var(--border-color);
    border-radius:11px;
    transition:background 0.3s ease;
    flex-shrink:0;
}

body.dark-mode .theme-switch{
    background:rgba(255,255,255,0.15);
}

.theme-switch.active{
    background:#4CAF50;
}

.theme-switch-knob{
    position:absolute;
    top:3px;
    left:3px;
    width:16px;
    height:16px;
    background:#FFFFFF;
    border-radius:50%;
    transition:transform 0.25s cubic-bezier(0.4,0,0.2,1);
    box-shadow:0 1px 4px rgba(0,0,0,0.3);
}

.theme-switch.active .theme-switch-knob{
    transform:translateX(18px);
}



.main-content{
    margin-left:260px;
    padding:3rem 4rem;
    /* More air */
    width:calc(100% - 260px);
    height:100vh;
    overflow-y:auto;
    background:var(--bg-color);
    transition:margin-left 0.4s cubic-bezier(0.16,1,0.3,1),width 0.4s cubic-bezier(0.16,1,0.3,1),background-color 0.4s ease;
}

/* Mobile Toggle - Hidden by default */
.mobile-nav-toggle{
    display:none;
}

.sidebar-logo{
    font-family:'Playfair Display',serif;
    font-size:1.25rem;
    font-weight:700;
    color:var(--text-primary);
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:0.5rem;
    margin-bottom:1.5rem;
    padding:0.25rem 0.5rem;
}

.sidebar-logo img{
    width:100%;
    max-width:160px;
    height:auto;
    object-fit:contain;
}

.sidebar-nav{
    flex:1;
    overflow-y:auto;
    padding:0 1rem;
    scrollbar-width:none;/* Firefox */
}

.sidebar-nav::-webkit-scrollbar{
    display:none;/* Safari/Chrome */
}

/* ─── Sidebar Navigation Items ─── */
.sidebar .nav-item{
    display:flex;
    align-items:center;
    gap:1rem;
    color:var(--text-secondary);
    text-decoration:none;
    padding:0.8rem 1rem;
    border-radius:14px;
    margin-bottom:4px;
    transition:var(--transition);
    font-size:0.875rem;
    font-weight:500;
    width:100%;
    cursor:pointer;
    position:relative;
}

.sidebar .nav-item i{
    font-size:0.9rem;
    width:18px;
    text-align:center;
    flex-shrink:0;
}

.sidebar .nav-item:hover{
    background:var(--progress-bg);
    color:var(--text-primary);
}

.sidebar .nav-item.active{
    background:rgba(255,255,255,0.08);
    color:#FFFFFF;
    font-weight:600;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1);
}

body.dark-mode .sidebar .nav-item.active{
    background:rgba(255,255,255,0.08);
    color:#FFFFFF;
}

.sidebar .nav-item.active::before{
    display:none;
    /* Replaced by full background highlight */
}

/* ─── Sidebar Section Labels ─── */
.sidebar .nav-group-title,
.sidebar .nav-section-title{
    font-size:0.65rem;
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--text-secondary);
    margin:1.25rem 0 0.4rem 0.75rem;
    font-weight:700;
    opacity:0.5;
}

/* ─── Sidebar Profile Card ─── */
.sidebar-profile{
    padding:1.25rem;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.05);
    border-radius:20px;
    margin-bottom:1rem;
    display:flex;
    gap:1rem;
    align-items:center;
    transition:var(--transition);
}

.sidebar-profile:hover{
    background:rgba(255,255,255,0.05);
    border-color:rgba(255,255,255,0.1);
}

.profile-avatar{
    width:36px;
    height:36px;
    border-radius:10px;
    background:linear-gradient(135deg,#667eea,#764ba2);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.85rem;
    font-weight:700;
    flex-shrink:0;
    letter-spacing:0.02em;
}

/* legacy icon avatar */
.profile-avatar i{
    font-size:1.1rem;
}

.profile-info{
    flex:1;
    overflow:hidden;
}

.profile-name{
    font-weight:600;
    font-size:0.875rem;
    color:var(--text-primary);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.profile-tier{
    font-size:0.7rem;
    color:var(--text-secondary);
    text-transform:uppercase;
    letter-spacing:0.06em;
    font-weight:600;
    margin-top:2px;
}

.profile-credits{
    font-size:0.78rem;
    color:var(--text-secondary);
    display:flex;
    align-items:center;
    gap:0.35rem;
}

.profile-credits i{
    color:#F5A623;
    font-size:0.85rem;
}

.sidebar.minimized .sidebar-profile{
    flex-direction:column;
    padding:0.75rem 0.25rem;
    text-align:center;
}

.sidebar.minimized .profile-info{
    display:none;
}

/* ─── Minimized Sidebar State ─── */
.sidebar.minimized{
    width:70px;
}

.sidebar.minimized .sidebar-header{
    padding:1rem 0.5rem 0.5rem;
}

.sidebar.minimized .sidebar-nav{
    padding:0.5rem 0.5rem;
}

.sidebar.minimized .sidebar-logo img{
    max-width:40px;
}

.sidebar.minimized .nav-section-title{
    display:none;
}

.sidebar.minimized .nav-item{
    justify-content:center;
    padding:0.65rem;
}

@media (max-width:768px){
    .settings-modal-content{
        flex-direction:column !important;
        width:95% !important;
        height:90vh !important;
}

    .settings-sidebar{
        width:100% !important;
        border-right:none !important;
        border-bottom:1px solid var(--border-color);
        padding:1rem !important;
        flex-direction:row !important;
        overflow-x:auto;
}

    .settings-nav-item{
        white-space:nowrap;
        padding:0.6rem 1rem !important;
}

    .settings-view{
        padding:1.5rem !important;
}
}

.sidebar.minimized .nav-item:not(:has(i)){
    display:none;
}

/* Adjust main content when sidebar is minimized */
body.sidebar-minimized .main-content,
body.sidebar-minimized .dashboard-container{
    margin-left:70px;
    width:calc(100% - 70px);
}

/* ─── Compact Profile Dropdown ─── */
.sidebar-footer{
    flex-shrink:0;
    padding:0.75rem 1.5rem 1.5rem;
    border-top:1px solid var(--border-color);
}

.sidebar.minimized .sidebar-footer{
    padding:0.5rem 0.5rem 1rem;
}

.sidebar-profile-compact{
    position:relative;
    margin:0.5rem 0;
}

.profile-compact-info{
    display:flex;
    align-items:center;
    gap:0.75rem;
    padding:0.75rem 0.9rem;
    background:var(--progress-bg);
    border:1px solid var(--border-color);
    border-radius:12px;
    cursor:pointer;
    transition:border-color 0.15s ease,background 0.15s ease;
}

/* ─── Dashboard Refactoring (v2) ─── */
.quick-access-section{
    margin-bottom:2rem;
}

.profile-compact-info:hover{
    background:rgba(255,255,255,0.06);
}

.profile-compact-info .profile-avatar{
    font-size:2rem;
    color:var(--text-secondary);
}

.profile-text{
    flex:1;
    overflow:hidden;
}

.profile-name-wrapper{
    display:flex;
    align-items:center;
    gap:0.5rem;
    margin-bottom:2px;
}

.level-tag{
    font-size:0.65rem;
    padding:2px 6px;
    border-radius:4px;
    font-weight:700;
    text-transform:uppercase;
    display:none;
    line-height:1;
}

.level-tag.llb{
    background:rgba(150,150,150,0.1);
    color:#333333;
    border:1px solid rgba(150,150,150,0.2);
}

.level-tag.alevel{
    background:rgba(255,45,85,0.1);
    color:#FF2D55;
    border:1px solid rgba(255,45,85,0.2);
}

.profile-menu-icon{
    font-size:1.1rem;
    color:var(--text-secondary);
    transition:var(--transition);
}

.profile-compact-info:hover .profile-menu-icon{
    color:var(--text-primary);
}

/* ── Legal & Support Layouts ── */
.legal-container{
    max-width:800px;
    margin:0 auto;
    padding:5rem 2rem 8rem;
}

.legal-meta{
    color:var(--text-secondary);
    font-size:0.9rem;
    margin-bottom:3rem;
    border-bottom:1px solid var(--border-color);
    padding-bottom:1.5rem;
}

.support-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:1.5rem;
    margin-bottom:4rem;
}

.support-card{
    background:var(--surface-color);
    border:1px solid var(--border-color);
    border-radius:12px;
    padding:2rem;
    text-align:center;
    transition:var(--transition);
}

.support-card:hover{
    border-color:var(--text-primary);
    transform:translateY(-4px);
    box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

/* ── Form Layouts ── */
.name-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
}

@media (max-width:600px){
    .name-row{
        grid-template-columns:1fr;
        gap:1.25rem;
}

    .legal-container{
        padding:3rem 1.5rem 6rem;
}

    .legal-nav{
        flex-direction:column;
        gap:1rem;
        padding:1.5rem !important;
}
}

/* Dropdown Menu */
.profile-dropdown{
    position:absolute;
    bottom:100%;
    left:0;
    right:0;
    margin-bottom:0.5rem;
    background:var(--surface-color,#1a1a1c);
    border:1px solid var(--border-color);
    border-radius:8px;
    padding:0.5rem;
    display:none;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
    z-index:1000;
}

.profile-dropdown.show{
    display:block;
    animation:dropdownFadeIn 0.2s ease;
}

@keyframes dropdownFadeIn{
    from{
        opacity:0;
        transform:translateY(10px);
}

    to{
        opacity:1;
        transform:translateY(0);
}
}

.dropdown-item{
    display:flex;
    align-items:center;
    gap:0.75rem;
    padding:0.75rem 1rem;
    border-radius:6px;
    cursor:pointer;
    transition:var(--transition);
    font-size:0.9rem;
    color:var(--text-secondary);
}

.dropdown-item:hover{
    background:rgba(255,255,255,0.08);
    color:var(--text-primary);
}

.dropdown-item i{
    font-size:1rem;
    width:20px;
    text-align:center;
}

/* ── Advanced Note Editor Styles ── */

.editor-content-wrapper{
    position:relative;
    display:flex;
    overflow:hidden;
}

/* AI Sidebar */
.ai-interpret-sidebar{
    width:0;
    background:var(--surface-color);
    border-left:1px solid var(--border-color);
    transition:width 0.3s cubic-bezier(0.4,0,0.2,1);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.ai-interpret-sidebar.active{
    width:350px;
}

.sidebar-header{
    padding:1.5rem;
    border-bottom:1px solid var(--border-color);
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.sidebar-header h3{
    margin:0;
    font-size:1.1rem;
    display:flex;
    align-items:center;
    gap:0.75rem;
}

.close-sidebar{
    background:none;
    border:none;
    color:var(--text-secondary);
    cursor:pointer;
    font-size:1.1rem;
}

.sidebar-content{
    padding:1.5rem;
    overflow-y:auto;
    flex:1;
}

.ai-loading{
    text-align:center;
    padding:2rem;
}

.spinner{
    width:30px;
    height:30px;
    border:3px solid rgba(255,255,255,0.1);
    border-top-color:var(--text-primary);
    border-radius:50%;
    animation:spin 1s linear infinite;
    margin:0 auto 1rem;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
}
}

.ai-response-text{
    line-height:1.6;
    color:var(--text-secondary);
}

/* Slash Menu */
.slash-menu{
    position:absolute;
    background:var(--surface-color);
    border:1px solid var(--border-color);
    border-radius:12px;
    box-shadow:0 10px 40px rgba(0,0,0,0.5);
    padding:0.5rem;
    z-index:1000;
    width:280px;
    animation:menuFadeIn 0.2s ease-out;
}

@keyframes menuFadeIn{
    from{
        opacity:0;
        transform:translateY(10px);
}

    to{
        opacity:1;
        transform:translateY(0);
}
}

.slash-item{
    display:flex;
    align-items:center;
    gap:1rem;
    padding:0.75rem 1rem;
    border-radius:8px;
    cursor:pointer;
    transition:var(--transition);
}

.slash-item:hover{
    background:rgba(255,255,255,0.08);
}

.slash-item i{
    width:32px;
    height:32px;
    background:rgba(255,255,255,0.05);
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-primary);
}

.slash-item-info{
    display:flex;
    flex-direction:column;
}

.slash-item-info span{
    font-size:0.95rem;
    font-weight:500;
    color:var(--text-primary);
}

.slash-item-info small{
    font-size:0.75rem;
    color:var(--text-secondary);
}

/* Modal */
.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.8);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2000;
    backdrop-filter:blur(4px);
}

.modal-content{
    background:var(--surface-color);
    border:1px solid var(--border-color);
    border-radius:16px;
    padding:2.5rem;
    max-width:500px;
    width:90%;
}

.modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:1.5rem;
}

.close-modal{
    background:none;
    border:none;
    color:var(--text-secondary);
    cursor:pointer;
    font-size:1.25rem;
}

.upload-area{
    border:2px dashed var(--border-color);
    border-radius:12px;
    padding:3rem;
    text-align:center;
    cursor:pointer;
    transition:var(--transition);
}

.upload-area:hover{
    border-color:var(--text-primary);
    background:rgba(255,255,255,0.02);
}

.upload-icon{
    font-size:2.5rem;
    color:var(--text-secondary);
    margin-bottom:1rem;
}

.progress-bar{
    height:6px;
    background:rgba(255,255,255,0.1);
    border-radius:3px;
    overflow:hidden;
}

.progress-fill{
    height:100%;
    background:var(--text-primary);
    width:0%;
    transition:width 0.3s ease;
}

.progress-status{
    display:flex;
    justify-content:space-between;
    font-size:0.85rem;
    color:var(--text-secondary);
    margin-bottom:0.5rem;
}

.modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:1rem;
    margin-top:2rem;
}

.btn-cancel{
    background:none;
    border:none;
    color:var(--text-secondary);
    cursor:pointer;
}

.btn-upload{
    background:var(--text-primary);
    color:var(--bg-color);
    border:none;
    padding:0.75rem 1.5rem;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
}

.btn-upload:disabled{
    opacity:0.3;
    cursor:not-allowed;
}

/* Legal Templates */
.legal-facts-box{
    background:rgba(255,255,255,0.03);
    border-left:4px solid var(--text-primary);
    padding:1.5rem;
    margin:1.5rem 0;
    border-radius:0 8px 8px 0;
}

/* ── Enhanced Legal & Media Blocks ── */

.legal-case-wrapper{
    margin:2rem 0;
    border:1px solid var(--border-color);
    border-radius:12px;
    background:rgba(255,255,255,0.02);
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    overflow:hidden;
    position:relative;
    border-left:4px solid var(--text-primary);
}

.case-header{
    background:rgba(255,255,255,0.05);
    padding:1rem 1.5rem;
    border-bottom:1px solid var(--border-color);
    display:flex;
    align-items:center;
    gap:0.75rem;
    font-weight:700;
    color:var(--text-primary);
    font-size:0.95rem;
    letter-spacing:0.05em;
}

.case-body{
    padding:1.5rem;
}

.case-section{
    margin-bottom:1.25rem;
}

.case-section-title{
    display:block;
    font-weight:600;
    color:var(--text-primary);
    margin-bottom:0.25rem;
    font-size:0.9rem;
    text-transform:uppercase;
    opacity:0.9;
}

.case-section-content{
    color:var(--text-secondary);
    font-size:0.95rem;
    line-height:1.6;
    outline:none;
}

/* Floating Table Tools */
.table-controls{
    position:absolute;
    background:var(--surface-color);
    border:1px solid var(--border-color);
    border-radius:8px;
    padding:0.25rem;
    display:flex;
    gap:0.25rem;
    z-index:100;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
}

.table-control-btn{
    background:none;
    border:none;
    color:var(--text-secondary);
    padding:0.5rem;
    cursor:pointer;
    border-radius:4px;
    font-size:0.85rem;
    transition:var(--transition);
}

.table-control-btn:hover{
    background:rgba(255,255,255,0.1);
    color:var(--text-primary);
}

/* Highlight Colors */
.highlight-yellow{
    background-color:rgba(255,235,59,0.3);
    color:inherit;
}

.highlight-green{
    background-color:rgba(76,175,80,0.3);
    color:inherit;
}

.highlight-grey{
    background-color:rgba(158,158,158,0.3);
    color:inherit;
}

.highlight-pink{
    background-color:rgba(233,30,99,0.3);
    color:inherit;
}

.selection-colors{
    display:flex;
    gap:0.5rem;
    padding:0 0.5rem;
}

.color-dot{
    width:20px;
    height:20px;
    border-radius:50%;
    cursor:pointer;
    border:2px solid transparent;
    transition:var(--transition);
}

.color-dot:hover{
    transform:scale(1.2);
}

.color-dot.active{
    border-color:var(--text-primary);
}

.dot-yellow{
    background:#FFEB3B;
}

.dot-green{
    background:#4CAF50;
}

.dot-grey{
    background:#9E9E9E;
}

.dot-pink{
    background:#E91E63;
}

.dot-none{
    border:1px solid var(--border-color);
    position:relative;
}

.dot-none::after{
    content:'';
    position:absolute;
    width:100%;
    height:1px;
    background:#ff4444;
    top:50%;
    left:0;
    transform:rotate(45deg);
}

/* Selection Menu Enhancements */
.color-swatch{
    width:24px;
    height:24px;
    border-radius:4px;
    cursor:pointer;
    border:1px solid rgba(255,255,255,0.1);
}

/* Table Styles */
.editor-table{
    width:100%;
    border-collapse:collapse;
    margin:1.5rem 0;
}

.editor-table th,
.editor-table td{
    border:1px solid var(--border-color);
    padding:1rem;
    min-width:100px;
}

/* Module Card Menu (3 Dots) */
.module-card{
    position:relative !important;
    display:flex;
    flex-direction:column;
    height:100%;
    min-height:240px;
}

.deadline-meta{
    margin-top:auto;
    font-size:0.85rem;
    font-weight:700;
    color:var(--text-primary);
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 0 5px 0;
}

.deadline-meta .urgent{
    color:var(--accent-red,#ff4d4d);
    font-weight:800;
}

.deadline-meta .expired{
    color:#ff4444;
    text-shadow:0 0 5px rgba(255,0,0,0.2);
}

.deadline-progress{
    height:4px;
    background:rgba(255,255,255,0.1);
    border-radius:2px;
    margin-top:4px;
    overflow:hidden;
}

.deadline-progress .progress-fill{
    height:100%;
    background:var(--accent-color);
    transition:width 0.5s ease;
}

.deadline-progress.expired .progress-fill{
    background:#444;
}

.module-menu-btn{
    position:absolute;
    top:1rem;
    right:1rem;
    background:transparent;
    border:none;
    color:var(--text-secondary);
    padding:0.5rem;
    cursor:pointer;
    border-radius:50%;
    transition:var(--transition);
    z-index:10;
    opacity:0;
    /* Hidden by default until hover */
}

.module-card:hover .module-menu-btn,
.module-menu-btn.active{
    opacity:1;
    background:rgba(255,255,255,0.1);
}

body.light-mode .module-card:hover .module-menu-btn,
body.light-mode .module-menu-btn.active{
    background:rgba(0,0,0,0.05);
}

.module-menu-dropdown{
    position:absolute;
    top:3rem;
    right:1rem;
    background:var(--surface-color);
    border:1px solid var(--border-color);
    border-radius:8px;
    padding:0.5rem;
    display:none;
    flex-direction:column;
    min-width:140px;
    z-index:20;
    box-shadow:0 4px 20px rgba(0,0,0,0.3);
}

.module-menu-dropdown.show{
    display:flex;
}

.module-sorting-row{
    display:flex;
    justify-content:space-between;
    padding:0.25rem;
    margin-bottom:0.5rem;
    border-bottom:1px solid var(--border-color);
    gap:4px;
}

.sort-btn{
    flex:1;
    background:rgba(255,255,255,0.05);
    border:1px solid var(--border-color);
    border-radius:4px;
    padding:0.5rem;
    color:var(--text-secondary);
    cursor:pointer;
    transition:all 0.2s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.8rem;
}

.sort-btn:hover{
    background:rgba(255,255,255,0.1);
    color:var(--text-primary);
    border-color:var(--accent-color);
}

.module-menu-item{
    padding:0.75rem 1rem;
    text-align:left;
    background:transparent;
    border:none;
    color:var(--text-primary);
    cursor:pointer;
    border-radius:4px;
    font-size:0.9rem;
    display:flex;
    align-items:center;
    gap:0.5rem;
    transition:var(--transition);
}

.module-menu-item:hover{
    background:rgba(255,255,255,0.05);
}

body.light-mode .module-menu-item:hover{
    background:rgba(0,0,0,0.05);
}

.module-menu-item.delete{
    color:#ff5555;
    background:rgba(255,85,85,0.05);
}

.module-menu-item.delete:hover{
    background:rgba(255,85,85,0.1);
}

/* Delete Confirmation Modal */
.delete-modal-content{
    background:var(--surface-color);
    padding:2.5rem;
    border-radius:16px;
    width:400px;
    text-align:center;
    position:relative;
    border:1px solid var(--border-color);
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
    margin:0 auto;
}

.delete-icon-wrapper{
    width:60px;
    height:60px;
    border-radius:50%;
    background:rgba(255,85,85,0.1);
    color:#ff5555;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.5rem;
    margin:0 auto 1.5rem;
}

.delete-modal h3{
    margin-bottom:0.5rem;
    color:var(--text-primary);
}

.delete-modal p{
    color:var(--text-secondary);
    margin-bottom:2rem;
    font-size:0.95rem;
}

/* Slide to Delete Slider */
.slide-delete-container{
    position:relative;
    width:100%;
    height:54px;
    background:rgba(255,85,85,0.1);
    border-radius:27px;
    user-select:none;
    overflow:hidden;
    transition:background 0.3s;
    border:1px solid rgba(255,85,85,0.2);
}

.slide-delete-container.completed{
    background:#ff5555 !important;
    border-color:#ff5555 !important;
}

.slide-text{
    position:absolute;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ff5555;
    font-weight:600;
    font-size:0.9rem;
    pointer-events:none;
    letter-spacing:0.5px;
    transition:opacity 0.3s;
}

.slide-delete-container.completed .slide-text{
    opacity:0;
}

.slide-thumb{
    position:absolute;
    top:2px;
    left:2px;
    width:48px;
    height:48px;
    background:#ff5555;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    cursor:grab;
    transition:transform 0.1s;
    z-index:2;
    box-shadow:0 2px 8px rgba(255,85,85,0.3);
}

.slide-thumb:active{
    cursor:grabbing;
    transform:scale(0.95);
}

.slide-thumb i{
    font-size:1rem;
    pointer-events:none;
}

/* --- UI Polish & Fixes --- */

/* Fix:Module Menu Clipping */
.module-card{
    overflow:visible !important;
}

/* Note Editor Modernization */
.editor-body{
    outline:none !important;
    border:none !important;
    padding:1rem 0 3rem;
    font-size:1.1rem;
    line-height:1.75;
    color:var(--text-primary);
    min-height:60vh;
}

/* Placeholder for Editor */
.editor-body:empty:before{
    content:attr(data-placeholder);
    color:var(--text-secondary);
    opacity:0.5;
    pointer-events:none;
    font-style:italic;
}

/* Ensure Dropdowns are above everything */
.module-menu-dropdown{
    z-index:1000 !important;
}

/* Slide to Delete Fix */
.delete-modal{
    z-index:9999 !important;
}

/* Signup Page Blank Fix (if CSS related) */
.login-left,
.login-right{
    opacity:1 !important;
    visibility:visible !important;
}

/* Create Lecture Card */
.create-card{
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px dashed var(--border-color);
    border-radius:12px;
    background:transparent;
    cursor:pointer;
    transition:var(--transition);
    min-height:200px;
    color:var(--text-secondary);
    font-size:2.5rem;
    position:relative;
    overflow:hidden;
}

.create-card:hover{
    border-color:var(--text-primary);
    color:var(--text-primary);
    background:rgba(255,255,255,0.03);
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.create-card:active{
    transform:translateY(0);
}

/* Optional:Label on hover */
.create-card::after{
    content:"New Lecture";
    position:absolute;
    bottom:2rem;
    font-size:1rem;
    font-weight:500;
    opacity:0;
    transform:translateY(10px);
    transition:var(--transition);
}

.create-card:hover::after{
    opacity:1;
    transform:translateY(0);
}

/* ── Brand Text ── */
.logo-brand-text{
    font-family:'Inter',sans-serif;
    font-size:1.15rem;
    font-weight:700;
    letter-spacing:-0.02em;
    color:var(--text-primary);
    margin-left:0.5rem;
    vertical-align:middle;
}

.sidebar-logo{
    display:flex;
    align-items:center;
    gap:0.5rem;
    text-decoration:none;
    padding:0.5rem 0;
}

.sidebar-logo .logo-brand-text{
    font-size:1.1rem;
}

/* Hide brand text when sidebar is minimized */
.sidebar.minimized .logo-brand-text{
    display:none;
}

/* Navbar brand text */
nav .logo .logo-brand-text{
    font-size:1.2rem;
}

/* ── Lecture Card Consistency ── */
.lecture-card{
    display:flex;
    flex-direction:column;
    padding:1.5rem;
    background:var(--surface-color);
    border:1px solid var(--border-color);
    border-radius:12px;
    cursor:pointer;
    transition:var(--transition);
    position:relative;
    overflow:visible !important;
    min-height:160px;
}

.lecture-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,0.3);
    border-color:var(--accent-color);
}

/* ── Button Primary consistency ── */
.btn-action.btn-primary{
    background:var(--accent-color);
    color:#fff;
    border:none;
}

.btn-action.btn-primary:hover{
    filter:brightness(1.15);
}

/* ── Cookie Consent Banner ── */
.cookie-banner{
    position:fixed;
    bottom:-100%;
    left:2rem;
    right:2rem;
    background:var(--glass-bg);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid var(--border-color);
    border-radius:16px;
    padding:2rem;
    z-index:9999;
    box-shadow:0 20px 50px rgba(0,0,0,0.2);
    transition:bottom 0.6s cubic-bezier(0.16,1,0.3,1);
    max-width:800px;
    margin:0 auto;
}

.cookie-banner.active{
    bottom:2rem;
}

.cookie-content{
    max-width:100%;
}

.cookie-header{
    display:flex;
    align-items:center;
    gap:0.75rem;
    margin-bottom:1rem;
}

.cookie-header i{
    font-size:1.5rem;
    color:var(--accent-color);
}

.cookie-header h3{
    font-size:1.25rem;
    margin:0;
}

.cookie-banner p{
    font-size:0.95rem;
    line-height:1.6;
    color:var(--text-secondary);
    margin-bottom:1.5rem;
}

.cookie-banner p a{
    color:var(--accent-color);
    text-decoration:underline;
}

.cookie-actions{
    display:flex;
    align-items:center;
    gap:1.5rem;
    flex-wrap:wrap;
}

.btn-cookie-primary{
    background:var(--accent-color);
    color:#FFF;
    border:none;
    padding:0.75rem 2rem;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
}

.btn-cookie-secondary{
    background:transparent;
    color:var(--text-primary);
    border:1px solid var(--border-color);
    padding:0.75rem 2rem;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
}

.btn-cookie-primary:hover{
    background:var(--accent-hover);
    transform:translateY(-1px);
}

.btn-cookie-secondary:hover{
    background:rgba(0,0,0,0.05);
}

.cookie-settings-link{
    color:var(--text-secondary);
    font-size:0.85rem;
    text-decoration:none;
    font-weight:500;
}

.cookie-settings-link:hover{
    text-decoration:underline;
}

@media (max-width:768px){
    .cookie-banner{
        left:1rem;
        right:1rem;
        padding:1.5rem;
}

    .cookie-actions{
        gap:1rem;
}

    .btn-cookie-primary,
    .btn-cookie-secondary{
        width:100%;
}
}

/* ── Cookie Settings Panel ── */
.cookie-settings-panel{
    display:none;
    margin-top:2rem;
    padding-top:2rem;
    border-top:1px solid var(--border-color);
}

.cookie-settings-panel.active{
    display:block;
    animation:fadeInSlideUp 0.4s ease forwards;
}

@keyframes fadeInSlideUp{
    from{
        opacity:0;
        transform:translateY(10px);
}

    to{
        opacity:1;
        transform:translateY(0);
}
}

.settings-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:1.5rem;
}

.settings-header h4{
    font-size:1.1rem;
    margin:0;
}

.close-btn{
    background:none;
    border:none;
    color:var(--text-secondary);
    font-size:1.5rem;
    cursor:pointer;
    line-height:1;
}

.setting-item{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    padding:1.25rem 0;
    border-bottom:1px solid rgba(255,255,255,0.05);
}

.setting-item:last-child{
    border-bottom:none;
}

.setting-info strong{
    display:block;
    font-size:0.95rem;
    margin-bottom:0.25rem;
}

.setting-info p{
    font-size:0.85rem !important;
    margin-bottom:0 !important;
}

/* ── Toggle Switch ── */
.switch{
    position:relative;
    display:inline-block;
    width:44px;
    height:24px;
}

.switch input{
    opacity:0;
    width:0;
    height:0;
}

.slider{
    position:absolute;
    cursor:pointer;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(255,255,255,0.1);
    transition:.4s;
    border:1px solid var(--border-color);
}

.slider:before{
    position:absolute;
    content:"";
    height:16px;
    width:16px;
    left:3px;
    bottom:3px;
    background-color:white;
    transition:.4s;
}

input:checked+.slider{
    background-color:var(--accent-color);
    border-color:var(--accent-color);
}

input:focus+.slider{
    box-shadow:0 0 1px var(--accent-color);
}

input:checked+.slider:before{
    transform:translateX(20px);
}

input:disabled+.slider{
    opacity:0.5;
    cursor:not-allowed;
}

.slider.round{
    border-radius:24px;
}

.slider.round:before{
    border-radius:50%;
}



/* ─── Modules Page Refactoring ─── */

/* Main Content Area */
.main-content{
    margin-left:260px;
    flex:1;
    padding:2rem 3rem;
    overflow-y:auto;
    width:calc(100% - 260px);
}

/* Breadcrumbs */
.breadcrumbs{
    display:flex;
    align-items:center;
    gap:0.5rem;
    color:var(--text-secondary);
    font-size:0.9rem;
    margin-bottom:1.5rem;
}

.breadcrumbs a{
    color:var(--text-secondary);
    text-decoration:none;
    transition:var(--transition);
}

.breadcrumbs a:hover{
    color:var(--text-primary);
}

.breadcrumbs span{
    color:var(--text-primary);
    font-weight:500;
}

/* Module Header & Actions */
.module-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:3rem;
    flex-wrap:wrap;
    gap:1rem;
}

.header-left{
    display:flex;
    align-items:center;
    gap:1rem;
}

.header-title{
    font-size:2.5rem;
    font-weight:700;
    margin:0;
}

.edit-icon{
    color:var(--text-secondary);
    font-size:1.2rem;
    cursor:pointer;
    transition:var(--transition);
}

.edit-icon:hover{
    color:var(--text-primary);
}

.header-actions{
    display:flex;
    gap:0.75rem;
}

.btn-action{
    display:flex;
    align-items:center;
    gap:0.5rem;
    padding:0.6rem 1rem;
    border-radius:6px;
    font-size:0.9rem;
    font-weight:500;
    cursor:pointer;
    transition:var(--transition);
    text-decoration:none;
    background:transparent;
    border:1px solid var(--border-color);
    color:var(--text-primary);
}

.btn-action:hover{
    background:rgba(255,255,255,0.05);
    border-color:var(--text-secondary);
}

/* Grid Layout */
.content-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:1.5rem;
}

.lecture-card{
    background:var(--surface-color);
    border:1px solid var(--border-color);
    border-radius:12px;
    padding:1.5rem;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:180px;
    transition:var(--transition);
    cursor:pointer;
    position:relative;
}

.lecture-card:hover{
    transform:translateY(-4px);
    border-color:var(--text-secondary);
    box-shadow:0 4px 20px rgba(0,0,0,0.2);
}

.card-badge{
    background:rgba(255,255,255,0.1);
    color:var(--text-secondary);
    font-size:0.7rem;
    font-weight:700;
    padding:0.25rem 0.6rem;
    border-radius:4px;
    width:fit-content;
    margin-bottom:1rem;
    text-transform:uppercase;
    letter-spacing:0.05em;
}

.card-title{
    font-size:1.5rem;
    font-weight:700;
    margin:0 0 1rem 0;
    line-height:1.3;
}

.card-footer{
    margin-top:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:var(--text-secondary);
    font-size:0.85rem;
}

.card-menu{
    padding:0.5rem;
    border-radius:50%;
    transition:var(--transition);
}

.card-menu:hover{
    background:rgba(255,255,255,0.1);
    color:var(--text-primary);
}

.create-card{
    border:2px dashed var(--border-color);
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:180px;
    cursor:pointer;
    transition:var(--transition);
    color:var(--text-secondary);
    font-size:2rem;
}

.create-card:hover{
    border-color:var(--text-primary);
    color:var(--text-primary);
    background:rgba(255,255,255,0.02);
}

/* Modal Overlay */
.modal-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:1000;
    backdrop-filter:blur(4px);
}

.modal-overlay.active{
    display:flex;
}

.modal-content{
    background:var(--surface-color);
    border:1px solid var(--border-color);
    border-radius:16px;
    width:90%;
    max-width:700px;
    max-height:85vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.modal-header{
    padding:2rem 2rem 1rem 2rem;
    border-bottom:1px solid var(--border-color);
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

.modal-title{
    font-size:2rem;
    font-weight:700;
    margin:0 0 0.25rem 0;
}

.modal-subtitle{
    color:var(--text-secondary);
    margin:0;
    font-size:0.95rem;
}

.modal-close{
    background:none;
    border:none;
    color:var(--text-secondary);
    font-size:1.5rem;
    cursor:pointer;
    padding:0.5rem;
    border-radius:6px;
    transition:var(--transition);
}

.modal-close:hover{
    background:rgba(255,255,255,0.05);
    color:var(--text-primary);
}

.modal-tabs{
    display:flex;
    padding:0 2rem;
    border-bottom:1px solid var(--border-color);
}

.tab-btn{
    background:none;
    border:none;
    color:var(--text-secondary);
    padding:0.75rem 0;
    margin-right:2rem;
    font-size:0.95rem;
    font-weight:500;
    cursor:pointer;
    border-bottom:2px solid transparent;
    transition:var(--transition);
}

.tab-btn.active{
    color:var(--text-primary);
    border-bottom-color:var(--text-primary);
}

.modal-subtabs{
    display:flex;
    padding:1rem 2rem 0 2rem;
    gap:0.5rem;
}

.subtab-btn{
    background:none;
    border:none;
    color:var(--text-secondary);
    padding:0.5rem 1rem;
    font-size:0.9rem;
    font-weight:500;
    cursor:pointer;
    border-radius:6px;
    transition:var(--transition);
}

.subtab-btn.active{
    background:rgba(255,255,255,0.08);
    color:var(--text-primary);
}

.modal-body{
    padding:1.5rem 2rem;
    overflow-y:auto;
    flex:1;
    display:block;
    /* Ensure block display */
}

.search-input{
    width:100%;
    background:rgba(255,255,255,0.03);
    border:1px solid var(--border-color);
    color:var(--text-primary);
    padding:0.75rem 1rem;
    border-radius:8px;
    font-size:0.95rem;
    margin-bottom:1rem;
    outline:none;
    transition:var(--transition);
}

.search-input:focus{
    border-color:var(--text-secondary);
    background:rgba(255,255,255,0.05);
}

.modal-actions-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:1rem;
    padding:0.5rem 0;
}

.text-btn{
    background:none;
    border:none;
    color:var(--text-secondary);
    font-size:0.9rem;
    cursor:pointer;
    transition:var(--transition);
}

.text-btn:hover{
    color:var(--text-primary);
}

.selected-counter{
    color:var(--text-secondary);
    font-size:0.9rem;
}

.lecture-list{
    display:flex;
    flex-direction:column;
    gap:0.75rem;
}

.lecture-item{
    border:1px solid var(--border-color);
    border-radius:12px;
    padding:1.25rem;
    display:flex;
    align-items:flex-start;
    gap:1rem;
    transition:var(--transition);
    cursor:pointer;
}

.lecture-item:hover{
    border-color:var(--text-secondary);
    background:rgba(255,255,255,0.02);
}

.lecture-checkbox{
    width:20px;
    height:20px;
    cursor:pointer;
    accent-color:var(--text-primary);
    margin-top:2px;
}

.lecture-info h4{
    margin:0 0 0.25rem 0;
    font-size:1.1rem;
    font-weight:600;
}

.lecture-meta{
    margin:0;
    color:var(--text-secondary);
    font-size:0.85rem;
}

.modal-footer{
    padding:1.5rem 2rem;
    border-top:1px solid var(--border-color);
    display:flex;
    justify-content:flex-end;
    gap:1rem;
}

/* Skeleton Loaders */
.skeleton{
    background:linear-gradient(90deg,
            rgba(255,255,255,0.03) 25%,
            rgba(255,255,255,0.08) 50%,
            rgba(255,255,255,0.03) 75%);
    background-size:200% 100%;
    animation:skeleton-loading 1.5s ease-in-out infinite;
    border-radius:8px;
}

@keyframes skeleton-loading{
    0%{
        background-position:200% 0;
}

    100%{
        background-position:-200% 0;
}
}

.skeleton-text{
    height:1rem;
    margin-bottom:0.5rem;
    width:100%;
}

.skeleton-text.short{
    width:60%;
}

.skeleton-text.medium{
    width:80%;
}

/* Lecture Action Menu */
.card-menu-wrapper{
    position:relative;
}

.lecture-action-menu{
    position:absolute;
    top:100%;
    right:0;
    background:var(--surface-color);
    border:1px solid var(--border-color);
    border-radius:8px;
    padding:0.5rem;
    min-width:180px;
    box-shadow:0 4px 12px rgba(0,0,0,0.5);
    z-index:1000;
}

.lecture-action-menu button{
    width:100%;
    background:none;
    border:none;
    color:var(--text-secondary);
    padding:0.75rem 1rem;
    text-align:left;
    border-radius:6px;
    cursor:pointer;
    transition:var(--transition);
    display:flex;
    align-items:center;
    gap:0.75rem;
    font-size:0.9rem;
}

.lecture-action-menu button:hover{
    background:rgba(255,255,255,0.05);
    color:var(--text-primary);
}

.lecture-action-menu button.danger:hover{
    background:rgba(255,68,68,0.1);
    color:#ff4444;
}

/* ─── Dashboard Refactoring (100/100) ─── */

/* Quick Access */
.quick-access-section{
    margin-bottom:2rem;
}

.quick-access-header{
    font-size:1rem;
    color:var(--text-secondary);
    margin-bottom:1rem;
    font-weight:600;
}

.quick-access-header i{
    color:var(--accent-color);
    margin-right:0.5rem;
}

.quick-access-card{
    background:var(--surface-color);
    border:1px solid var(--border-color);
    border-radius:12px;
    padding:1.25rem 1.5rem;
    cursor:pointer;
    transition:all 0.2s ease;
    display:flex;
    align-items:center;
    gap:1rem;
    max-width:400px;
}

.quick-access-card:hover{
    border-color:var(--accent-color);
    transform:translateY(-2px);
}

.quick-access-icon{
    width:42px;
    height:42px;
    background:rgba(255,255,255,0.05);
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    color:var(--accent-color);
}

.quick-access-info{
    flex:1;
}

.quick-access-title{
    font-weight:700;
    font-size:1rem;
}

.quick-access-breadcrumbs{
    color:var(--text-secondary);
    font-size:0.8rem;
}

.quick-access-breadcrumbs span:first-child{
    color:var(--text-secondary);
}

.quick-access-breadcrumbs i{
    font-size:0.55rem;
    margin:0 0.3rem;
}

.quick-access-arrow{
    color:var(--text-secondary);
    font-size:0.9rem;
}

/* Modules */
.module-add-card{
    border:1px dashed var(--border-color);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:var(--text-secondary);
}

.module-add-icon{
    font-size:2rem;
    margin-bottom:0.5rem;
    color:var(--accent-color);
}

.module-add-text{
    font-weight:600;
}

.module-card--archived{
    opacity:0.7;
}

.archived-header{
    display:flex;
    align-items:center;
    gap:0.5rem;
    cursor:pointer;
    color:var(--text-secondary);
    margin-bottom:1.5rem;
}

.archived-icon{
    transition:transform 0.2s;
}

.archived-header h3{
    font-size:1.1rem;
    font-weight:600;
    margin:0;
}

/* Metrics */
.dashboard-metrics{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
    margin-bottom:2.5rem;
}

@media (max-width:900px){
    .dashboard-metrics{
        grid-template-columns:1fr;
}
}

.metric-card{
    background:var(--surface-color);
    border:1px solid var(--border-color);
    border-radius:16px;
    padding:1.5rem;
    display:flex;
    gap:1.25rem;
    position:relative;
    overflow:hidden;
    transition:transform 0.2s ease,border-color 0.2s ease;
}

.metric-card:hover{
    transform:translateY(-2px);
    border-color:rgba(255,255,255,0.1);
}

.metric-icon-box{
    width:48px;
    height:48px;
    background:rgba(255,255,255,0.03);
    border:1px solid var(--border-color);
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.25rem;
    color:var(--text-primary);
    flex-shrink:0;
}

.metric-content{
    flex:1;
}

.metric-header{
    font-size:0.75rem;
    font-weight:600;
    letter-spacing:0.05em;
    color:var(--text-secondary);
    margin-bottom:0.4rem;
}

.metric-value{
    font-size:1.75rem;
    font-weight:700;
    color:var(--text-primary);
}

.font-serif{
    font-family:'Inter',sans-serif;
    /* Consistently using Inter for values now */
}

.metric-trend{
    font-size:0.8rem;
    color:#4CAF50;
    margin-top:0.5rem;
    font-weight:500;
}

.metric-subtext{
    font-size:0.75rem;
    color:var(--text-secondary);
    margin-top:0.4rem;
}

.metric-status-glow{
    position:absolute;
    bottom:-20px;
    right:-20px;
    width:60px;
    height:60px;
    background:radial-gradient(circle,rgba(255,255,255,0.05) 0%,transparent 70%);
    pointer-events:none;
}

/* Leaderboard Specifics */
.leaderboard-card{
    flex-direction:column;
    padding-bottom:0.75rem;
}

.leaderboard-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:1.25rem;
}

.segmented-control{
    background:rgba(255,255,255,0.05);
    padding:3px;
    border-radius:8px;
    display:flex;
    gap:2px;
}

.segmented-control button{
    background:transparent;
    border:none;
    color:rgba(255,255,255,0.5);
    padding:5px 14px;
    font-size:0.75rem;
    font-weight:600;
    border-radius:6px;
    cursor:pointer;
    transition:background 0.2s ease,color 0.2s ease;
}

.segmented-control button:hover:not(.active){
    color:rgba(255,255,255,0.8);
}

.segmented-control button.active{
    background:var(--text-primary);
    color:var(--bg-color);
}

.leaderboard-rank-summary{
    display:flex;
    align-items:baseline;
    gap:0.75rem;
    margin-bottom:1rem;
}

.rank-number{
    font-size:2rem;
    font-weight:800;
    color:var(--text-primary);
}

.rank-message{
    font-size:0.8rem;
    color:var(--text-secondary);
}

.leaderboard-scroll-area{
    margin-top:0.5rem;
    height:140px;
    overflow-y:auto;
    padding-right:4px;
}

/* Custom Scrollbar for Leaderboard */
.leaderboard-scroll-area::-webkit-scrollbar{
    width:4px;
}

.leaderboard-scroll-area::-webkit-scrollbar-track{
    background:transparent;
}

.leaderboard-scroll-area::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,0.1);
    border-radius:10px;
}

.lb-item{
    display:flex;
    align-items:center;
    padding:0.6rem 0.5rem;
    gap:0.75rem;
    border-radius:8px;
    transition:background 0.2s ease;
}

.lb-item:not(:last-child){
    border-bottom:1px solid rgba(255,255,255,0.03);
}

.lb-item:hover{
    background:rgba(255,255,255,0.03);
}

.lb-item--me{
    background:rgba(255,255,255,0.05);
    border-left:3px solid var(--text-primary);
}

.lb-rank{
    width:20px;
    font-size:0.75rem;
    font-weight:800;
    color:var(--text-secondary);
    text-align:center;
}

.lb-info{
    flex:1;
}

.lb-name{
    font-size:0.85rem;
    font-weight:600;
    color:var(--text-primary);
}

.lb-uni{
    font-size:0.7rem;
    color:var(--text-secondary);
}

.lb-score{
    font-size:0.85rem;
    font-weight:700;
    color:var(--text-primary);
}

/* Rank Highlights */
.rank-1 .lb-rank{
    color:#f59e0b;
    font-size:1rem;
}

.rank-2 .lb-rank{
    color:#94a3b8;
}

.rank-3 .lb-rank{
    color:#b45309;
}

/* Leaderboard loading state */
.leaderboard-loading{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    padding:2rem;
    font-size:0.8rem;
    color:var(--text-secondary);
}

.leaderboard-spinner{
    width:18px;
    height:18px;
    border:2px solid rgba(255,255,255,0.15);
    border-top-color:var(--text-primary);
    border-radius:50%;
    animation:leaderboard-spin 0.7s linear infinite;
}

@keyframes leaderboard-spin{
    to{
        transform:rotate(360deg);
}
}

.btn-leaderboard-retry{
    margin-top:0.5rem;
    padding:0.35rem 0.75rem;
    font-size:0.75rem;
    font-weight:600;
    color:var(--accent-color);
    background:transparent;
    border:1px solid var(--accent-color);
    border-radius:6px;
    cursor:pointer;
    transition:background 0.2s,color 0.2s;
}

.btn-leaderboard-retry:hover{
    background:var(--accent-color);
    color:var(--bg-color);
}

.empty-leaderboard,
.loader-placeholder{
    padding:2rem 0.75rem;
    text-align:center;
    font-size:0.8rem;
    color:var(--text-secondary);
    opacity:0.85;
}

/* Dashboard & Signup Helpers */
.module-card--highlight{
    border-color:var(--accent-color);
}

.module-action-link{
    font-size:0.8rem;
    color:var(--accent-color);
    font-weight:600;
}

/* ─── Signup / Login Refactoring ─── */
.split-screen{
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:100vh;
}

.login-left{
    background:var(--bg-color);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:10%;
    border-right:1px solid var(--border-color);
}

.login-right{
    background:var(--surface-color);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:6% 10%;
    overflow-y:auto;
}

.login-form{
    max-width:400px;
    width:100%;
    margin:0 auto;
}

.form-group{
    margin-bottom:1.25rem;
}

.form-label{
    display:block;
    font-size:0.8rem;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:var(--text-secondary);
    margin-bottom:0.5rem;
}

.form-input{
    width:100%;
    padding:1rem;
    background:rgba(255,255,255,0.05);
    border:1px solid var(--border-color);
    color:var(--text-primary);
    border-radius:4px;
    outline:none;
    transition:var(--transition);
    font-size:1rem;
}

.form-input:focus{
    border-color:var(--accent-color);
    background:rgba(255,255,255,0.08);
}

.pill-btn:focus,
.icon-btn:focus{
    outline:none;
    box-shadow:none;
}

.social-btn{
    width:100%;
    padding:1rem;
    background:white;
    color:black;
    border:none;
    border-radius:4px;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    cursor:pointer;
    margin-bottom:2rem;
    transition:var(--transition);
    font-size:1rem;
}

.social-btn:hover{
    background:#e5e5e5;
}

.divider{
    display:flex;
    align-items:center;
    text-align:center;
    margin:1.5rem 0;
    color:var(--text-secondary);
    font-size:0.8rem;
}

.divider::before,
.divider::after{
    content:'';
    flex:1;
    border-bottom:1px solid var(--border-color);
}

.divider:not(:empty)::before{
    margin-right:1rem;
}

.divider:not(:empty)::after{
    margin-left:1rem;
}

.auth-error{
    display:none;
    background:rgba(255,85,85,0.1);
    border:1px solid rgba(255,85,85,0.3);
    color:#ff5555;
    padding:0.75rem 1rem;
    border-radius:4px;
    font-size:0.9rem;
    margin-bottom:1.25rem;
}

.password-hint{
    font-size:0.75rem;
    color:var(--text-secondary);
    margin-top:0.25rem;
}

/* University Autocomplete */
.uni-autocomplete-wrapper{
    position:relative;
}

.uni-dropdown{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    max-height:200px;
    overflow-y:auto;
    background:var(--surface-color);
    border:1px solid var(--border-color);
    border-top:none;
    border-radius:0 0 6px 6px;
    z-index:100;
    display:none;
    box-shadow:0 8px 24px rgba(0,0,0,0.2);
}

.uni-dropdown.show{
    display:block;
}

.uni-option{
    padding:0.7rem 1rem;
    cursor:pointer;
    font-size:0.9rem;
    color:var(--text-secondary);
    transition:background 0.15s;
}

.uni-option:hover,
.uni-option.highlighted{
    background:rgba(255,255,255,0.08);
    color:var(--text-primary);
}

body.light-mode .uni-option:hover,
body.light-mode .uni-option.highlighted{
    background:rgba(0,0,0,0.05);
}

.uni-dropdown::-webkit-scrollbar{
    width:6px;
}

.uni-dropdown::-webkit-scrollbar-track{
    background:transparent;
}

.uni-dropdown::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,0.1);
    border-radius:3px;
}

body.light-mode .uni-dropdown::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,0.1);
}

@media (max-width:992px){
    .split-screen{
        grid-template-columns:1fr;
}

    .login-left{
        display:none;
}
}

/* Inline Style Replacements */
.auth-logo{
    margin-bottom:3rem;
    margin-top:-1rem;
    /* Pull it slightly higher as requested */
    display:block;
}

.auth-logo-img{
    height:120px;
    width:auto;
    vertical-align:middle;
}

.auth-hero-title{
    font-size:3rem;
    margin-bottom:2rem;
}

.auth-hero-text{
    color:var(--text-secondary);
    font-size:1.1rem;
}

.auth-page-title{
    font-size:2rem;
    margin-bottom:0.75rem;
}

.auth-page-subtitle{
    color:var(--text-secondary);
    margin-bottom:2rem;
}

.btn-primary.auth-btn-submit{
    width:100%;
    margin-bottom:2rem;
}

.auth-footer{
    padding:4rem 5%;
    border-top:1px solid var(--border-color);
    text-align:center;
    color:var(--text-secondary);
}

.auth-footer-links{
    margin-top:1rem;
    display:flex;
    justify-content:center;
    gap:2rem;
}

.auth-footer-link{
    color:var(--text-secondary);
    text-decoration:none;
}

.auth-switch-text{
    text-align:center;
    color:var(--text-secondary);
    font-size:0.9rem;
}

.auth-switch-link{
    color:var(--accent-color);
    text-decoration:none;
}

.checkbox-container{
    display:flex;
    align-items:flex-start;
    gap:0.75rem;
    cursor:pointer;
}

.checkbox-label{
    font-size:0.85rem;
    color:var(--text-secondary);
    line-height:1.4;
}

.checkbox-input{
    margin-top:0.25rem;
}

.checkbox-link{
    color:var(--accent-color);
    text-decoration:none;
}

/* ─── Landing Page — Premium SaaS ─── */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --lp-bg:#FFFFFF;
    --lp-surface:#F8F9FA;
    --lp-text:#111111;
    --lp-muted:#5A5A5A;
    --lp-border:rgba(0,0,0,0.08);
    --lp-accent:#000000;
    --lp-gradient:linear-gradient(135deg,#000000 0%,#444444 100%);
}

/* ─── Dark Mode Variables ─── */
body.dark-mode{
    --lp-bg:#0A0A0A;
    --lp-surface:#141414;
    --lp-text:#FFFFFF;
    --lp-muted:#A0A0A0;
    --lp-border:rgba(255,255,255,0.1);
    --lp-accent:#FFFFFF;
    --lp-gradient:linear-gradient(135deg,#FFFFFF 0%,#AAAAAA 100%);
}

/* Fix Featured Pricing Card in Dark Mode */
body.dark-mode .pricing-card.featured{
    background:linear-gradient(180deg,#1E1E1E 0%,#141414 100%);
    border-color:rgba(255,255,255,0.1);
    box-shadow:0 20px 50px rgba(0,0,0,0.5);
}

body.dark-mode .pricing-card.featured li{
    border-bottom-color:rgba(255,255,255,0.05);
}

/* ─── Cookie Banner CSS (Injected) ─── */
.cookie-banner{
    position:fixed;
    bottom:-100%;
    left:2rem;
    right:2rem;
    background:rgba(20,20,20,0.95);
    /* Darker default for contrast */
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:16px;
    padding:2rem;
    z-index:9999;
    box-shadow:0 20px 50px rgba(0,0,0,0.5);
    transition:bottom 0.6s cubic-bezier(0.16,1,0.3,1);
    max-width:800px;
    margin:0 auto;
    color:#FFF;
}

/* Light Mode Cookie Banner Override */
body:not(.dark-mode) .cookie-banner{
    background:rgba(255,255,255,0.95);
    border:1px solid rgba(0,0,0,0.1);
    color:#000;
    box-shadow:0 20px 50px rgba(0,0,0,0.15);
}

.cookie-banner.active{
    bottom:2rem;
}

.cookie-content{
    max-width:100%;
}

.cookie-header{
    display:flex;
    align-items:center;
    gap:0.75rem;
    margin-bottom:1rem;
}

.cookie-header i{
    font-size:1.5rem;
    color:#4CAF50;
    /* Green accent */
}

.cookie-header h3{
    font-size:1.25rem;
    margin:0;
    font-weight:600;
}

.cookie-banner p{
    font-size:0.95rem;
    line-height:1.6;
    margin-bottom:1.5rem;
    opacity:0.8;
}

.cookie-banner p a{
    text-decoration:underline;
    font-weight:600;
}

.cookie-actions{
    display:flex;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
}

.btn-cookie-primary{
    background:#FFFFFF;
    color:#000;
    border:none;
    padding:0.75rem 2rem;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.2s;
}

body:not(.dark-mode) .btn-cookie-primary{
    background:#000;
    color:#FFF;
}

.btn-cookie-secondary{
    background:transparent;
    color:inherit;
    border:1px solid rgba(255,255,255,0.2);
    padding:0.75rem 2rem;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.2s;
}

body:not(.dark-mode) .btn-cookie-secondary{
    border-color:rgba(0,0,0,0.2);
}

.cookie-settings-link{
    background:none;
    border:none;
    color:inherit;
    opacity:0.7;
    text-decoration:underline;
    cursor:pointer;
    font-size:0.9rem;
}

/* Settings Panel */
.cookie-settings-panel{
    display:none;
    margin-top:1.5rem;
    padding-top:1.5rem;
    border-top:1px solid rgba(255,255,255,0.1);
}

body:not(.dark-mode) .cookie-settings-panel{
    border-top-color:rgba(0,0,0,0.1);
}

.cookie-settings-panel.active{
    display:block;
    animation:fadeIn 0.3s ease;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(5px);
}

    to{
        opacity:1;
        transform:translateY(0);
}
}

.settings-header{
    display:flex;
    justify-content:space-between;
    margin-bottom:1rem;
}

.close-btn{
    background:none;
    border:none;
    font-size:1.5rem;
    cursor:pointer;
    color:inherit;
}

.setting-item{
    display:flex;
    justify-content:space-between;
    padding:1rem 0;
    border-bottom:1px solid rgba(255,255,255,0.05);
}

body:not(.dark-mode) .setting-item{
    border-bottom-color:rgba(0,0,0,0.05);
}

.setting-info strong{
    display:block;
    margin-bottom:0.25rem;
}

.setting-info p{
    font-size:0.85rem;
    opacity:0.6;
    margin:0;
}

/* Toggle Switch */
.switch{
    position:relative;
    display:inline-block;
    width:44px;
    height:24px;
}

.switch input{
    opacity:0;
    width:0;
    height:0;
}

.slider{
    position:absolute;
    cursor:pointer;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(255,255,255,0.2);
    transition:.4s;
    border-radius:24px;
}

body:not(.dark-mode) .slider{
    background-color:#ccc;
}

.slider:before{
    position:absolute;
    content:"";
    height:16px;
    width:16px;
    left:4px;
    bottom:4px;
    background-color:white;
    transition:.4s;
    border-radius:50%;
}

input:checked+.slider{
    background-color:#4CAF50;
}

input:checked+.slider:before{
    transform:translateX(20px);
}

.settings-footer{
    margin-top:1.5rem;
    text-align:right;
}

body{
    background:var(--lp-bg);
    color:var(--lp-text);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

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

/* ─── Reveal Animations ─── */
.reveal{
    opacity:1;
    /* Emergency fix:was 0 */
    transform:none;
    /* Emergency fix:was translateY(40px) */
    transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),
        transform 0.8s cubic-bezier(0.16,1,0.3,1);
}

.reveal.visible{
    opacity:1;
    transform:translateY(0);
}

.reveal-left{
    opacity:1;
    /* Emergency fix:was 0 */
    transform:none;
    /* Emergency fix:was translateX(-60px) */
    transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),
        transform 0.8s cubic-bezier(0.16,1,0.3,1);
}

.reveal-left.visible{
    opacity:1;
    transform:translateX(0);
}

.reveal-right{
    opacity:1;
    /* Emergency fix:was 0 */
    transform:none;
    /* Emergency fix:was translateX(60px) */
    transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),
        transform 0.8s cubic-bezier(0.16,1,0.3,1);
}

.reveal-right.visible{
    opacity:1;
    transform:translateX(0);
}

.stagger-1{
    transition-delay:0.1s;
}

.stagger-2{
    transition-delay:0.2s;
}

.stagger-3{
    transition-delay:0.3s;
}


.stagger-4{
    transition-delay:0.4s;
}

/* ─── Navbar ─── */
.lp-nav{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    padding:1.25rem 5%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    transition:all 0.4s ease;
}

.lp-nav.scrolled{
    padding:0.75rem 5%;
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(20px) saturate(1.2);
    -webkit-backdrop-filter:blur(20px) saturate(1.2);
    border-bottom:1px solid var(--lp-border);
}

/* Dark Mode Nav Scrolled Override */
body.dark-mode .lp-nav.scrolled{
    background:rgba(10,10,10,0.85);
    border-bottom:1px solid rgba(255,255,255,0.1);
}

/* ── Landing Page Navbar ── */
.lp-nav-logo{
    display:flex;
    align-items:center;
    gap:0.75rem;
    font-weight:700;
    font-size:1.2rem;
    color:var(--lp-text);
}

.lp-nav-logo img{
    height:32px;
}

.lp-nav-links{
    display:flex;
    align-items:center;
    gap:2.5rem;
    list-style:none;
    margin:0;
    padding:0;
}

.lp-nav-links li{
    display:flex;
    align-items:center;
    gap:8px;
}

.lp-nav-links a{
    font-size:0.9rem;
    font-weight:500;
    color:var(--lp-text);
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:6px;
    transition:var(--transition);
}

.lp-nav-links a:hover{
    color:var(--text-secondary);
    opacity:0.8;
}

.lp-nav-links a i{
    font-size:0.85rem;
    opacity:0.7;
}

.nav-btn-outline{
    padding:0.55rem 1.25rem;
    border:1px solid rgba(136,136,136,0.3);
    /* Adjusted for visibility */
    border-radius:8px;
    font-size:0.9rem;
    font-weight:500;
    color:var(--lp-text);
    transition:all 0.3s;
}

.nav-btn-outline:hover{
    border-color:var(--lp-text);
    background:rgba(136,136,136,0.1);
}

.nav-btn-primary{
    padding:0.55rem 1.25rem;
    background:var(--lp-text) !important;
    color:#ffffff !important;
    /* FORCE WHITE TEXT FOR READABILITY */
    border-radius:8px;
    font-size:0.9rem;
    font-weight:600;
    transition:all 0.3s ease;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.nav-btn-primary:hover{
    transform:translateY(-1px);
    opacity:0.9;
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
    color:#ffffff;
}

/* Dark Mode Toggle Button Base */
.nav-icon-btn{
    background:none;
    border:none;
    color:var(--lp-text);
    font-size:1.1rem;
    cursor:pointer;
    padding:0.5rem;
    transition:transform 0.3s ease;
}

.nav-icon-btn:hover{
    transform:rotate(15deg);
}

.nav-control-group{
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(136,136,136,0.05);
    padding:4px 12px;
    border-radius:8px;
    margin-right:10px;
    border:1px solid var(--border-color);
}

#audio-narration-btn.active i{
    color:#4CAF50;
    text-shadow:0 0 10px rgba(76,175,80,0.4);
}

/* ─── Hero ─── */
.hero-section{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:12rem 5% 8rem;
    /* More spacious */
    position:relative;
    overflow:hidden;
}

/* Gradient orb background */
.hero-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(100px);
    opacity:0.25;
    pointer-events:none;
}

.hero-orb-1{
    width:600px;
    height:600px;
    background:radial-gradient(circle,#F3F4F6 0%,transparent 70%);
    top:-200px;
    right:-200px;
    animation:orbFloat 12s ease-in-out infinite;
}

.hero-orb-2{
    width:400px;
    height:400px;
    background:radial-gradient(circle,#F9FAFB 0%,transparent 70%);
    bottom:-100px;
    left:-100px;
    animation:orbFloat 15s ease-in-out infinite reverse;
}

@keyframes orbFloat{

    0%,
    100%{
        transform:translate(0,0);
}

    50%{
        transform:translate(30px,-20px);
}
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.5rem 1.25rem;
    background:rgba(0,0,0,0.03);
    border:1px solid rgba(0,0,0,0.08);
    border-radius:999px;
    font-size:0.8rem;
    color:var(--lp-muted);
    font-weight:500;
    margin-bottom:2.5rem;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:all 0.3s ease;
}

.hero-badge:hover{
    background:rgba(0,0,0,0.05);
    transform:translateY(-1px);
}

.hero-badge-dot{
    width:6px;
    height:6px;
    background:#4CAF50;
    border-radius:50%;
    animation:pulse 2s ease-in-out infinite;
}

@keyframes pulse{

    0%,
    100%{
        opacity:1;
        transform:scale(1);
}

    50%{
        opacity:0.5;
        transform:scale(1.3);
}
}

/* ─── Mode Toggle Pill ─── */
.mode-toggle{
    display:inline-flex;
    position:relative;
    background:#e8e8e8;
    border:1px solid #d0d0d0;
    border-radius:50px;
    padding:4px;
    margin-bottom:1.5rem;
    box-shadow:inset 0 1px 3px rgba(0,0,0,0.06);
}

.mode-btn{
    position:relative;
    z-index:2;
    padding:0.55rem 1.8rem;
    border:none;
    border-radius:50px;
    background:transparent;
    color:rgba(0,0,0,0.55);
    font-weight:700;
    font-size:0.85rem;
    cursor:pointer;
    transition:color 0.3s ease;
    font-family:'Inter',sans-serif;
    letter-spacing:0.05em;
    text-transform:uppercase;
}

.mode-btn.active{
    color:#fff;
}

.mode-slider{
    position:absolute;
    top:4px;
    left:4px;
    width:calc(50% - 4px);
    height:calc(100% - 8px);
    background:#1A1A1A;
    border-radius:50px;
    transition:transform 0.35s cubic-bezier(0.16,1,0.3,1);
    z-index:1;
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
}

.mode-toggle[data-active="alevel"] .mode-slider{
    transform:translateX(100%);
}

/* Dark Mode */
body.dark-mode .mode-toggle{
    background:rgba(255,255,255,0.08);
    border-color:rgba(255,255,255,0.12);
}

body.dark-mode .mode-btn{
    color:rgba(255,255,255,0.4);
}

body.dark-mode .mode-btn.active{
    color:#000;
}

body.dark-mode .mode-slider{
    background:#fff;
    box-shadow:0 2px 8px rgba(255,255,255,0.1);
}

.hero-title{
    font-family:'Playfair Display',Georgia,serif;
    font-size:clamp(3rem,6vw,5.5rem);
    line-height:1.1;
    max-width:900px;
    min-height:1.2em;
    margin-bottom:1.5rem;
    font-weight:600;
    letter-spacing:-0.03em;
}

.hero-title .gradient-text{
    background:var(--lp-gradient);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* Dark Mode Gradient Override for Hero Title */
body.dark-mode .hero-title .gradient-text{
    background:linear-gradient(135deg,#FFFFFF 0%,#D1D1D1 50%,#8E8E8E 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero-sub{
    font-size:1.2rem;
    color:var(--lp-muted);
    max-width:540px;
    line-height:1.6;
    margin-bottom:3rem;
}

.hero-cta-group{
    display:flex;
    gap:1rem;
    align-items:center;
}

.hero-subtitle{
    font-size:clamp(1.1rem,2vw,1.25rem);
    color:var(--lp-muted);
    max-width:600px;
    margin:0 auto 3rem;
    line-height:1.6;
}

.hero-cta-group{
    display:flex;
    gap:1rem;
    align-items:center;
}

.btn-hero-primary{
    padding:1rem 2.5rem;
    background:var(--lp-text);
    color:#FFFFFF;
    border-radius:6px;
    /* Sharper,more premium */
    font-weight:600;
    font-size:1.05rem;
    transition:all 0.3s ease;
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
}

.btn-hero-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 35px rgba(0,0,0,0.15);
}

.btn-hero-secondary{
    padding:1rem 2.5rem;
    border:1px solid rgba(0,0,0,0.1);
    border-radius:6px;
    /* Sharper,more premium */
    font-weight:600;
    font-size:1.05rem;
    color:var(--lp-text);
    transition:all 0.3s;
}

.btn-hero-secondary:hover{
    border-color:rgba(0,0,0,0.3);
    background:rgba(0,0,0,0.03);
}

/* ─── Trusted By / Logos Strip ─── */
.trust-strip{
    padding:3rem 0;
    text-align:center;
    border-top:1px solid var(--lp-border);
    border-bottom:1px solid var(--lp-border);
    overflow:hidden;
    background:rgba(var(--bg-rgb),0.5);
}

.trust-strip p{
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.2em;
    color:var(--lp-muted);
    margin-bottom:1.5rem;
    opacity:0.8;
}

.trust-marquee{
    display:flex;
    overflow:hidden;
    user-select:none;
    mask-image:linear-gradient(to right,
            transparent,
            black 20%,
            black 80%,
            transparent);
}

.trust-marquee-content{
    display:flex;
    flex-shrink:0;
    justify-content:space-around;
    gap:5rem;
    min-width:100%;
    animation:marquee-scroll 40s linear infinite;
    padding:0 2.5rem;
}

.trust-marquee-content span{
    font-size:1rem;
    font-weight:700;
    letter-spacing:0.05em;
    color:var(--lp-text);
    opacity:0.4;
    white-space:nowrap;
    transition:opacity 0.3s ease;
}

.trust-marquee-content span:hover{
    opacity:1;
}

@keyframes marquee-scroll{
    from{
        transform:translateX(0);
}

    to{
        transform:translateX(-50%);
}
}

/* ─── Stats Counter ─── */
.stats-section{
    padding:5rem 5%;
    display:flex;
    justify-content:center;
    gap:4rem;
    flex-wrap:wrap;
}

.stat-item{
    text-align:center;
}

.stat-number{
    font-size:3.5rem;
    font-weight:800;
    letter-spacing:-0.03em;
    line-height:1;
    margin-bottom:0.5rem;
}


.stat-label{
    font-size:0.9rem;
    color:var(--lp-muted);
}

/* ─── Problem/Solution Section ─── */
.problem-section{
    padding:12rem 5%;
    /* Increased spacing */
    background:var(--lp-surface);
    border-top:1px solid var(--lp-border);
    border-bottom:1px solid var(--lp-border);
    position:relative;
    overflow:hidden;
}

.problem-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6rem;
    max-width:1200px;
    margin:0 auto;
    align-items:center;
}

.typing-wrapper{
    font-family:'Playfair Display',serif;
    font-size:clamp(2.5rem,5vw,4rem);
    font-weight:600;
    line-height:1.1;
    min-height:200px;
}

.static-text{
    display:block;
    font-size:1.1rem;
    font-family:'Inter',sans-serif;
    color:var(--lp-muted);
    text-transform:uppercase;
    letter-spacing:0.1em;
    margin-bottom:1.5rem;
    font-weight:500;
}

.dynamic-text{
    color:var(--lp-text);
    background:linear-gradient(90deg,#000 0%,#666 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

body.dark-mode .dynamic-text{
    background:linear-gradient(90deg,#fff 0%,#aaa 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.cursor{
    display:inline-block;
    width:4px;
    height:clamp(2.5rem,5vw,4rem);
    background-color:var(--lp-text);
    margin-left:5px;
    animation:blink 1s infinite;
    vertical-align:middle;
}

body.dark-mode .cursor{
    background-color:#ffffff;
}

@keyframes blink{

    0%,
    100%{
        opacity:1;
}

    50%{
        opacity:0;
}
}

.uvp-list{
    display:flex;
    flex-direction:column;
    gap:2.5rem;
}

.uvp-item{
    display:flex;
    gap:1.5rem;
    opacity:1;
    /* Emergency fix:was 0 */
    transform:none;
    /* Emergency fix:was translateX(30px) */
    animation:none;
}

.uvp-item.visible{
    animation:slideInRight 0.6s cubic-bezier(0.16,1,0.3,1) forwards;
}

@keyframes slideInRight{
    to{
        opacity:1;
        transform:translateX(0);
}
}

.uvp-icon{
    width:56px;
    height:56px;
    background:rgba(0,0,0,0.03);
    border:1px solid var(--lp-border);
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4rem;
    color:var(--lp-text);
    flex-shrink:0;
    transition:all 0.3s ease;
}

.uvp-item:hover .uvp-icon{
    background:rgba(255,255,255,0.08);
    border-color:rgba(255,255,255,0.2);
    transform:scale(1.05);
}

.uvp-content h3{
    font-size:1.3rem;
    font-weight:600;
    margin-bottom:0.5rem;
    color:var(--lp-text);
}

.uvp-content p{
    color:var(--lp-muted);
    line-height:1.6;
    font-size:1rem;
}

@media (max-width:768px){
    .problem-grid{
        grid-template-columns:1fr;
        gap:4rem;
        text-align:center;
}

    .uvp-item{
        flex-direction:column;
        align-items:center;
}

    .typing-wrapper{
        min-height:auto;
        margin-bottom:2rem;
}
}

/* ─── Feature Showcase ─── */
.feature-showcase{
    padding:10rem 5%;
    /* Increased spacing */
}

.showcase-header{
    text-align:center;
    max-width:600px;
    margin:0 auto 5rem;
}

.showcase-badge{
    display:inline-block;
    padding:0.4rem 1rem;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--lp-border);
    border-radius:999px;
    font-size:0.8rem;
    color:var(--lp-muted);
    text-transform:uppercase;
    letter-spacing:0.1em;
    margin-bottom:1.5rem;
}

.showcase-header h2{
    font-family:'Playfair Display',Georgia,serif;
    font-size:clamp(2rem,4vw,3rem);
    font-weight:600;
    margin-bottom:1rem;
}

.showcase-header p{
    color:var(--lp-muted);
    font-size:1.05rem;
    line-height:1.6;
}

/* Alternating Feature Row */
.feature-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4rem;
    align-items:center;
    margin-bottom:6rem;
    max-width:1100px;
    margin-left:auto;
    margin-right:auto;
}

.feature-row.reversed{
    direction:rtl;
}

.feature-row.reversed>*{
    direction:ltr;
}

.feature-info{
    padding:1rem 0;
}

.feature-icon-badge{
    width:48px;
    height:48px;
    border-radius:12px;
    background:rgba(0,0,0,0.03);
    border:1px solid var(--lp-border);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:1.5rem;
    font-size:1.2rem;
    color:var(--lp-accent);
}

.feature-info h3{
    font-family:'Playfair Display',Georgia,serif;
    font-size:1.8rem;
    font-weight:600;
    margin-bottom:1rem;
}

.feature-info p{
    color:var(--lp-muted);
    line-height:1.7;
    font-size:1rem;
    margin-bottom:1.5rem;
}

.feature-points{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:0.75rem;
}

.feature-points li{
    display:flex;
    align-items:center;
    gap:0.65rem;
    color:var(--lp-muted);
    font-size:0.9rem;
}

.feature-points li i{
    color:#4CAF50;
    font-size:0.8rem;
}

.feature-preview{
    background:var(--lp-surface);
    border:1px solid var(--lp-border);
    border-radius:16px;
    padding:2rem;
    min-height:300px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
}

.feature-preview-mockup{
    width:100%;
    border-radius:10px;
    background:#FFFFFF;
    border:1px solid var(--lp-border);
    padding:1.5rem;
    min-height:240px;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

/* Mini mockup elements */
.mockup-toolbar{
    background:#F3F4F6;
    border-radius:999px;
    padding:0.4rem 1rem;
    display:inline-flex;
    gap:0.5rem;
    margin-bottom:1.5rem;
}

.mockup-btn{
    width:24px;
    height:24px;
    border-radius:4px;
    background:rgba(0,0,0,0.05);
}

.mockup-line{
    height:8px;
    border-radius:4px;
    background:rgba(0,0,0,0.05);
    margin-bottom:0.75rem;
}

.mockup-line.w-75{
    width:75%;
}

.mockup-line.w-50{
    width:50%;
}

.mockup-line.w-90{
    width:90%;
}

.mockup-line.highlight{
    background:rgba(255,243,191,0.2);
}

/* ─── Pricing Section ─── */
.pricing-section{
    padding:12rem 5%;
    /* Increased spacing */
    text-align:center;
}

/* ─── FAQ Section ─── */
.faq-section{
    padding:10rem 5%;
    /* Increased spacing */
    border-top:1px solid var(--lp-border);
}

.faq-header{
    text-align:center;
    max-width:600px;
    margin:0 auto 4rem;
}

.faq-header h2{
    font-family:'Playfair Display',Georgia,serif;
    font-size:2.5rem;
    margin-bottom:1rem;
}

.faq-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:3rem;
    max-width:1000px;
    margin:0 auto;
}

.faq-item h4{
    font-size:1.1rem;
    font-weight:600;
    margin-bottom:0.75rem;
    color:var(--lp-text);
}

.faq-item p{
    color:var(--lp-muted);
    line-height:1.6;
    font-size:0.95rem;
}

/* ─── Contact Form Section ─── */
.support-form-section{
    padding:6rem 5% 10rem;
    background:linear-gradient(to bottom,transparent,rgba(255,255,255,0.05));
}

.support-form-container{
    max-width:800px;
    margin:0 auto;
}

.support-form-card{
    background:var(--lp-card-bg,rgba(255,255,255,0.05));
    backdrop-filter:blur(10px);
    border:1px solid var(--lp-border);
    border-radius:20px;
    padding:3rem;
    box-shadow:0 20px 40px rgba(0,0,0,0.1);
}

.support-form-card h3{
    font-family:'Playfair Display',serif;
    font-size:2rem;
    margin-bottom:0.5rem;
    text-align:center;
}

.support-form-card p{
    color:var(--lp-muted);
    text-align:center;
    margin-bottom:2.5rem;
}

.premium-form .form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
    margin-bottom:1.5rem;
}

.form-group{
    margin-bottom:1.5rem;
    display:flex;
    flex-direction:column;
}

.form-group label{
    font-size:0.85rem;
    font-weight:600;
    margin-bottom:0.5rem;
    color:var(--lp-text);
    opacity:0.8;
}

.form-group input,
.form-group textarea,
.form-group select{
    background:rgba(255,255,255,0.03);
    border:1px solid var(--lp-border);
    border-radius:8px;
    padding:0.8rem 1rem;
    color:var(--lp-text);
    font-family:inherit;
    transition:all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
    outline:none;
    border-color:var(--accent-color);
    background:rgba(255,255,255,0.06);
    box-shadow:0 0 0 4px rgba(255,255,255,0.1);
}

.select-wrapper{
    position:relative;
}

.select-wrapper select{
    width:100%;
    appearance:none;
    cursor:pointer;
}

.select-wrapper i{
    position:absolute;
    right:1.2rem;
    top:50%;
    transform:translateY(-50%);
    pointer-events:none;
    font-size:0.8rem;
    opacity:0.5;
}

.btn-form-submit{
    width:100%;
    background:var(--accent-color);
    color:white;
    border:none;
    padding:1rem;
    border-radius:10px;
    font-weight:700;
    font-size:1rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.75rem;
    transition:all 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
    margin-top:1rem;
}

.btn-form-submit:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(0,0,0,0.1);
    background:var(--accent-hover);
}

.btn-form-submit:active{
    transform:translateY(0);
}

.form-status{
    margin-top:1.5rem;
    text-align:center;
    font-size:0.9rem;
    padding:0.75rem;
    border-radius:8px;
    display:none;
}

.form-status.visible{
    display:block;
    animation:fadeIn 0.3s ease;
}

.form-status.success{
    background:rgba(16,185,129,0.1);
    color:#10b981;
    border:1px solid rgba(16,185,129,0.2);
}

.form-status.error{
    background:rgba(239,68,68,0.1);
    color:#ef4444;
    border:1px solid rgba(239,68,68,0.2);
}

/* ─── Newsletter Strip ─── */
.newsletter-strip{
    background:#000000;
    padding:5rem 5%;
    border-top:1px solid var(--border-color);
    position:relative;
    overflow:hidden;
}

.newsletter-strip::before{
    content:'';
    position:absolute;
    top:-50%;
    right:-10%;
    width:400px;
    height:400px;
    background:radial-gradient(circle,rgba(255,255,255,0.05) 0%,transparent 70%);
}

.newsletter-content{
    max-width:1100px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:3rem;
    position:relative;
    z-index:1;
}

.newsletter-text h3{
    font-family:'Playfair Display',serif;
    font-size:2.2rem;
    margin-bottom:0.5rem;
    color:#ffffff;
}

.newsletter-text p{
    color:rgba(255,255,255,0.8);
    font-size:1.1rem;
}

.newsletter-form{
    display:flex;
    gap:1rem;
    flex-grow:1;
    max-width:500px;
}

.newsletter-form input{
    flex-grow:1;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:12px;
    padding:1rem 1.5rem;
    color:#ffffff;
    font-size:1rem;
    outline:none;
    transition:border-color 0.3s ease;
}

.newsletter-form input:focus{
    border-color:rgba(255,255,255,0.5);
}

.btn-newsletter{
    background:#ffffff;
    color:#000000;
    border:none;
    padding:1rem 2rem;
    border-radius:12px;
    font-weight:700;
    cursor:pointer;
    transition:all 0.3s ease;
}

.btn-newsletter:hover{
    background:var(--accent-color);
    color:#ffffff;
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(255,255,255,0.2);
}

.newsletter-status-msg{
    text-align:center;
    margin-top:1.5rem;
    font-size:0.9rem;
    color:#10b981;
    opacity:0;
    transition:opacity 0.3s ease;
}

.newsletter-status-msg.visible{
    opacity:1;
}

@media (max-width:768px){
    .newsletter-content{
        flex-direction:column;
        text-align:center;
}

    .newsletter-form{
        width:100%;
}

    .premium-form .form-row{
        grid-template-columns:1fr;
}

    .support-form-card{
        padding:2rem 1.5rem;
}
}

.pricing-header{
    max-width:600px;
    margin:0 auto 4rem;
}

.pricing-header h2{
    font-family:'Playfair Display',Georgia,serif;
    font-size:clamp(2rem,4vw,3rem);
    font-weight:600;
    margin-bottom:1rem;
}

.pricing-header p{
    color:var(--lp-muted);
    font-size:1.05rem;
}

.pricing-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:1.5rem;
    max-width:1050px;
    margin:0 auto;
}

.pricing-card{
    background:var(--lp-surface);
    border:1px solid var(--lp-border);
    border-radius:20px;
    padding:2.5rem 2rem;
    text-align:left;
    transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
    position:relative;
}

.pricing-card:hover{
    transform:translateY(-6px);
    border-color:rgba(255,255,255,0.12);
    box-shadow:0 20px 50px rgba(0,0,0,0.3);
}

.pricing-card.featured{
    border-color:rgba(0,0,0,0.15);
    background:linear-gradient(180deg,#FFFFFF 0%,#FAFAFA 100%);
    box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.pricing-popular{
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);
    background:#FFFFFF;
    color:#000000;
    border:1px solid rgba(0,0,0,0.1);
    padding:0.3rem 1rem;
    border-radius:999px;
    font-size:0.7rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.05em;
    z-index:10;
}

body.dark-mode .pricing-popular{
    border:none;
}

.pricing-card h3{
    font-size:1rem;
    font-weight:600;
    color:var(--lp-muted);
    margin-bottom:1rem;
    text-transform:uppercase;
    letter-spacing:0.05em;
}

.pricing-amount{
    font-size:3rem;
    font-weight:800;
    margin-bottom:0.25rem;
    letter-spacing:-0.03em;
}

.pricing-period{
    font-size:0.9rem;
    color:var(--lp-muted);
    margin-bottom:2rem;
}

.pricing-features{
    list-style:none;
    margin-bottom:2rem;
}

.pricing-features li{
    padding:0.5rem 0;
    border-bottom:1px solid rgba(0,0,0,0.04);
    font-size:0.9rem;
    color:var(--lp-muted);
    display:flex;
    align-items:center;
    gap:0.65rem;
}

.pricing-features li:last-child{
    border-bottom:none;
}

.pricing-features li i{
    color:#4CAF50;
    font-size:0.75rem;
}

.pricing-features li i.fa-times{
    color:#555;
}

.btn-pricing{
    display:block;
    width:100%;
    padding:0.85rem;
    border-radius:10px;
    font-weight:700;
    font-size:0.95rem;
    text-align:center;
    transition:all 0.3s ease;
    cursor:pointer;
}

.btn-pricing-outline{
    border:1px solid rgba(255,255,255,0.15);
    color:var(--lp-text);
    background:transparent;
}

.btn-pricing-outline:hover{
    border-color:rgba(255,255,255,0.3);
    background:rgba(255,255,255,0.03);
}

.btn-pricing-solid{
    background:var(--lp-text);
    color:var(--lp-bg);
    border:none;
}

.btn-pricing-solid:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 25px rgba(255,255,255,0.15);
}

/* ─── CTA Section ─── */
.cta-section{
    padding:8rem 5%;
    text-align:center;
    position:relative;
}

.cta-glow{
    position:absolute;
    width:600px;
    height:600px;
    background:radial-gradient(circle,rgba(0,0,0,0.02) 0%,transparent 70%);
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    pointer-events:none;
}

.cta-section h2{
    font-family:'Playfair Display',Georgia,serif;
    font-size:clamp(2.5rem,5vw,4rem);
    font-weight:600;
    margin-bottom:1.5rem;
    position:relative;
}

.cta-section p{
    color:var(--lp-muted);
    font-size:1.1rem;
    max-width:500px;
    margin:0 auto 2.5rem;
}

/* ─── Footer ─── */
.lp-footer{
    border-top:1px solid var(--lp-border);
    padding:4rem 5% 2rem;
}

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

.footer-brand p{
    color:var(--lp-muted);
    font-size:0.9rem;
    line-height:1.6;
    margin-top:1rem;
    max-width:280px;
}

.footer-col h4{
    font-size:0.8rem;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:var(--lp-muted);
    margin-bottom:1.25rem;
}

.footer-col a{
    display:block;
    color:var(--lp-muted);
    font-size:0.9rem;
    padding:0.3rem 0;
    transition:color 0.3s;
}

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

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

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

.footer-social a{
    color:var(--lp-muted);
    font-size:1rem;
    transition:color 0.3s;
}

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

/* ─── Mobile Responsive ─── */
@media (max-width:768px){
    .lp-nav-links{
        display:none;
}

    .feature-row{
        grid-template-columns:1fr;
        gap:2rem;
}

    .feature-row.reversed{
        direction:ltr;
}

    .pricing-grid{
        grid-template-columns:1fr;
        max-width:400px;
}

    .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:2rem;
}

    .hero-cta-group{
        flex-direction:column;
}

    .stats-section{
        gap:2.5rem;
}

    .footer-bottom{
        flex-direction:column;
        gap:1rem;
        text-align:center;
}
}

/* ─── Scroll Progress ─── */
.scroll-progress{
    position:fixed;
    top:0;
    left:0;
    height:2px;
    background:var(--lp-text);
    z-index:9999;
    width:0%;
    transition:width 0.1s;
}

/* Early Access Banner */
.early-access-banner{
    background:#000000;
    /* Black in Light Mode */
    color:#FFFFFF;
    text-align:center;
    padding:0.75rem 5%;
    font-size:0.8rem;
    font-weight:500;
    letter-spacing:0.02em;
    position:relative;
    z-index:1001;
    border-bottom:1px solid rgba(255,255,255,0.1);
}

body.dark-mode .early-access-banner{
    background:#FFFFFF;
    /* White in Dark Mode */
    color:#000000;
    border-bottom:1px solid rgba(0,0,0,0.1);
}

.early-access-banner a{
    text-decoration:none;
    font-weight:600;
    margin-left:0.5rem;
    color:inherit;
    border-bottom:1px solid currentColor;
}

.early-access-banner i{
    margin-right:0.5rem;
}

/* Adjust Nav for Banner */
.lp-nav{
    top:36px;
    /* Offset for banner height approx */
}

.lp-nav.scrolled{
    top:0;
}

@media (max-width:768px){
    .early-access-banner{
        font-size:0.75rem;
        padding:0.75rem 5%;
}

    .lp-nav{
        top:48px;
}
}

/* ─── Refactored Inline Styles ─── */
.slider-container{
    margin-bottom:1.5rem;
}

.slider-label-row{
    font-size:0.8rem;
    color:var(--lp-muted);
    display:flex;
    justify-content:space-between;
    margin-bottom:0.5rem;
}

.slider-value-accent{
    color:var(--lp-accent);
    font-weight:bold;
}

.slider-input{
    width:100%;
    height:6px;
    background:#EEE;
    border-radius:3px;
    outline:none;
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
}

.fa-bolt-gold{
    color:#F5A623 !important;
}

.pricing-amount-custom{
    font-size:2.2rem;
}

.btn-hero-inline{
    display:inline-flex;
}

.arrow-icon-sm{
    font-size:0.85rem;
}

.footer-logo-img{
    height:28px;
}

.fa-infinity-green{
    color:#4CAF50 !important;
}

/* Slider Thumb Styling */
.slider-input::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:18px;
    height:18px;
    background:var(--lp-text);
    border-radius:50%;
    cursor:pointer;
    transition:transform 0.1s;
}

.slider-input::-webkit-slider-thumb:hover{
    transform:scale(1.2);
}

/* Mockup Utilities */
.mockup-btn-dark{
    background:#ddd;
}

.mockup-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
}


.mockup-line-lg{
    height:100px;
}

/* =========================================
   Create Module Modal & Toast Styles
   (Moved from dashboard.html to fixes issues)
   ========================================= */

/* Create Module Modal */
.create-modal-overlay{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:var(--overlay-bg);
    backdrop-filter:blur(4px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:2000;
}

.create-modal-overlay.active{
    display:flex;
}

.create-modal{
    background:var(--surface-color);
    border:1px solid var(--border-color);
    border-radius:16px;
    padding:2.5rem;
    width:90%;
    max-width:480px;
    box-shadow:0 8px 32px rgba(0,0,0,0.5);
}

.create-modal h2{
    margin:0 0 0.5rem 0;
    font-size:1.5rem;
    color:var(--text-primary);
}

.create-modal p{
    color:var(--text-secondary);
    margin:0 0 1.5rem 0;
    font-size:0.9rem;
}

.create-modal label{
    display:block;
    color:var(--text-secondary);
    font-size:0.85rem;
    margin-bottom:0.5rem;
    font-weight:500;
}

.create-modal input,
.create-modal select{
    width:100%;
    padding:0.75rem 1rem;
    background:var(--input-bg);
    border:1px solid var(--border-color);
    color:var(--text-primary);
    border-radius:8px;
    font-size:1rem;
    outline:none;
    transition:var(--transition);
    margin-bottom:1.25rem;
    box-sizing:border-box;
}

.create-modal input:focus,
.create-modal select:focus{
    border-color:var(--accent-color);
    background:var(--bg-color);
}

.create-modal-actions{
    display:flex;
    gap:0.75rem;
    justify-content:flex-end;
    margin-top:0.5rem;
}

.modal-btn-cancel{
    padding:0.75rem 1.5rem;
    background:transparent;
    border:1px solid var(--border-color);
    color:var(--text-primary);
    border-radius:8px;
    cursor:pointer;
    font-size:0.9rem;
    transition:var(--transition);
}

.modal-btn-cancel:hover{
    background:var(--progress-bg);
}

.modal-btn-create{
    padding:0.75rem 1.5rem;
    background:var(--text-primary);
    /* Fixed contrast */
    color:var(--bg-color);
    /* Fixed contrast */
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-weight:600;
    font-size:0.9rem;
    transition:var(--transition);
}

.modal-btn-create:hover{
    opacity:0.9;
}

.icon-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:0.5rem;
    margin-bottom:1.25rem;
}

.icon-option{
    width:100%;
    aspect-ratio:1;
    border:1px solid var(--border-color);
    border-radius:8px;
    background:transparent;
    color:var(--text-secondary);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.1rem;
    transition:var(--transition);
}

.icon-option:hover{
    border-color:var(--text-primary);
    color:var(--text-primary);
}

.icon-option.selected{
    border-color:var(--accent-color);
    background:rgba(197,160,89,0.1);
    color:var(--accent-color);
}

/* Success toast */
.toast{
    position:fixed;
    bottom:2rem;
    right:2rem;
    background:var(--surface-color);
    border:1px solid var(--border-color);
    border-radius:12px;
    padding:1rem 1.5rem;
    display:flex;
    align-items:center;
    gap:0.75rem;
    box-shadow:0 4px 12px rgba(0,0,0,0.5);
    z-index:3000;
    transform:translateY(100px);
    opacity:0;
    transition:all 0.3s ease;
}

.toast.show{
    transform:translateY(0);
    opacity:1;
}

.toast.success{
    border-left:3px solid #4CAF50;
}

/* ─── Missing Landing Page Styles (Restored) ─── */

.problem-section{
    padding:8rem 5%;
    border-bottom:1px solid var(--border-color);
    background:var(--bg-color);
    /* Ensure it respects theme */
}

.problem-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4rem;
    align-items:center;
    max-width:1200px;
    margin:0 auto;
}

.typing-wrapper{
    font-size:3.5rem;
    font-family:'Playfair Display',serif;
    font-weight:700;
    line-height:1.2;
    color:var(--text-primary);
}

.static-text{
    display:block;
    font-size:1rem;
    font-family:'Inter',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.2em;
    color:var(--text-secondary);
    margin-bottom:1.5rem;
    font-weight:600;
}

.dynamic-text{
    color:var(--text-primary);
}

.cursor{
    display:inline-block;
    width:3px;
    height:1em;
    background-color:var(--accent-color);
    margin-left:0.2rem;
    animation:blink 1s infinite;
    vertical-align:text-bottom;
}

@keyframes blink{

    0%,
    100%{
        opacity:1;
}

    50%{
        opacity:0;
}
}

.uvp-list{
    display:flex;
    flex-direction:column;
    gap:2rem;
}

.uvp-item{
    display:flex;
    gap:1.5rem;
    padding:1.5rem;
    border-radius:12px;
    transition:var(--transition);
    background:transparent;
    /* Default transparent */
}

.uvp-item:hover{
    background:var(--surface-color);
    /* Subtle hover effect */
}

.uvp-item.visible{
    opacity:1;
    transform:translateY(0);
}

/* Initially hidden for animation */
.uvp-item{
    opacity:0;
    transform:translateY(20px);
}

.uvp-icon{
    width:50px;
    height:50px;
    background:var(--surface-color);
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.5rem;
    color:var(--text-primary);
    flex-shrink:0;
}

.uvp-content h3{
    font-size:1.25rem;
    margin-bottom:0.5rem;
    color:var(--text-primary);
}

.uvp-content p{
    font-size:1rem;
    color:var(--text-secondary);
    margin:0;
    line-height:1.6;
}

@media (max-width:900px){
    .problem-grid{
        grid-template-columns:1fr;
        gap:3rem;
}

    .typing-wrapper{
        font-size:2.5rem;
        text-align:center;
}

    .static-text{
        text-align:center;
}
}

/* Fix Stats Section if missing */
.stats-section{
    display:flex;
    justify-content:space-around;
    padding:4rem 5%;
    border-bottom:1px solid var(--border-color);
    background:var(--surface-color);
}

.stat-item{
    text-align:center;
}

.stat-number{
    font-size:3rem;
    font-weight:700;
    color:var(--text-primary);
    margin-bottom:0.5rem;
    font-family:'Playfair Display',serif;
}

.stat-label{
    color:var(--text-secondary);
    font-weight:500;
    font-size:0.9rem;
    text-transform:uppercase;
    letter-spacing:0.1em;
}

/* Trust Strip */
.trust-strip{
    padding:2rem 5%;
    border-bottom:1px solid var(--border-color);
    text-align:center;
    background:var(--bg-color);
}

.trust-strip p{
    margin-bottom:1rem;
    font-size:0.85rem;
    color:var(--text-secondary);
    text-transform:uppercase;
    letter-spacing:0.1em;
}

.trust-logos{
    display:flex;
    justify-content:center;
    gap:3rem;
    flex-wrap:wrap;
    opacity:0.5;
}

.trust-logos span{
    font-weight:700;
    color:var(--text-primary);
    font-size:1.1rem;
    letter-spacing:0.05em;
}

/* Feature Showcase Fixes */
.feature-showcase{
    padding:8rem 5%;
    background:var(--bg-color);
    /* Ensure background is correct */
}

.showcase-header{
    text-align:center;
    max-width:800px;
    margin:0 auto 6rem;
}

.showcase-badge{
    display:inline-block;
    padding:0.5rem 1rem;
    background:var(--surface-color);
    border-radius:50px;
    font-size:0.85rem;
    font-weight:600;
    color:var(--text-primary);
    margin-bottom:1.5rem;
    border:1px solid var(--border-color);
}

.showcase-header h2{
    font-size:3.5rem;
    font-family:'Playfair Display',serif;
    margin-bottom:1.5rem;
}

.showcase-header p{
    font-size:1.2rem;
    color:var(--text-secondary);
}

.feature-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4rem;
    align-items:center;
    margin-bottom:8rem;
}

.feature-row.reversed{
    direction:rtl;
    /* Trick to reverse grid */
}

.feature-row.reversed>*{
    direction:ltr;
    /* Reset content direction */
}

.feature-info{
    max-width:500px;
}

.feature-icon-badge{
    width:60px;
    height:60px;
    background:var(--surface-color);
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.5rem;
    color:var(--text-primary);
    margin-bottom:2rem;
    border:1px solid var(--border-color);
}

.feature-preview{
    position:relative;
}

.feature-preview-mockup{
    background:var(--surface-color);
    border:1px solid var(--border-color);
    border-radius:16px;
    padding:2rem;
    box-shadow:0 20px 60px rgba(0,0,0,0.1);
    transition:var(--transition);
}

body.dark-mode .feature-preview-mockup{
    box-shadow:0 20px 60px rgba(0,0,0,0.4);
}

.feature-preview:hover .feature-preview-mockup{
    transform:translateY(-10px);
}

/* Mockup Lines */
.mockup-toolbar{
    display:flex;
    gap:0.5rem;
    margin-bottom:2rem;
}

.mockup-btn{
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--border-color);
}

.mockup-btn-dark{
    background:var(--text-secondary);
}

.mockup-line{
    height:8px;
    background:var(--border-color);
    border-radius:4px;
    margin-bottom:1rem;
}

.mockup-line.highlight{
    background:var(--text-primary);
    opacity:0.2;
}

.w-75{
    width:75%;
}

.w-90{
    width:90%;
}

.w-50{
    width:50%;
}

.mockup-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
}

.mockup-line-lg{
    height:100px;
    background:var(--border-color);
    /* Was #F3F4F6 which is white-ish */
    opacity:0.5;
    border-radius:8px;
}

.feature-points{
    list-style:none;
    margin-top:2rem;
}

.feature-points li{
    display:flex;
    align-items:center;
    gap:1rem;
    margin-bottom:1rem;
    font-size:1rem;
    color:var(--text-primary);
}

.feature-points li i{
    color:var(--accent-color);
    /* Green tick? No,accent is black/white */
}

/* FAQ Grid */
.faq-section{
    padding:8rem 5%;
    background:var(--surface-color);
    border-top:1px solid var(--border-color);
}

.faq-header{
    text-align:center;
    margin-bottom:4rem;
}

.faq-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
    gap:3rem;
    max-width:1200px;
    margin:0 auto;
}

.faq-item h4{
    font-size:1.2rem;
    margin-bottom:1rem;
}

/* CTA Section */
.cta-section{
    padding:8rem 5%;
    text-align:center;
    position:relative;
    overflow:hidden;
    background:var(--bg-color);
}

.cta-glow{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:600px;
    height:600px;
    background:radial-gradient(circle,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 70%);
    pointer-events:none;
}

body.dark-mode .cta-glow{
    background:radial-gradient(circle,rgba(255,255,255,0.05) 0%,rgba(0,0,0,0) 70%);
}

.cta-section h2{
    font-size:4rem;
    font-family:'Playfair Display',serif;
    margin-bottom:1.5rem;
    position:relative;
}

.cta-section p{
    font-size:1.25rem;
    max-width:600px;
    margin:0 auto 3rem;
    position:relative;
}

/* Footer Styles */
.lp-footer{
    background:var(--surface-color);
    padding:5rem 5% 2rem;
    border-top:1px solid var(--border-color);
}

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

.footer-brand p{
    margin-top:1.5rem;
    max-width:300px;
    font-size:0.95rem;
}

.footer-col h4{
    font-size:0.9rem;
    text-transform:uppercase;
    letter-spacing:0.1em;
    margin-bottom:1.5rem;
    color:var(--text-primary);
}

.footer-col a{
    display:block;
    color:var(--text-secondary);
    text-decoration:none;
    margin-bottom:0.8rem;
    transition:var(--transition);
}

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

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

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

.footer-social a{
    color:var(--text-secondary);
    font-size:1.2rem;
    transition:var(--transition);
}

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

@media (max-width:768px){

    .feature-row,
    .feature-row.reversed{
        grid-template-columns:1fr;
        direction:ltr;
        gap:3rem;
}

    .footer-grid{
        grid-template-columns:1fr;
        gap:3rem;
}

    .faq-grid{
        grid-template-columns:1fr;
}

    .showcase-header h2,
    .cta-section h2{
        font-size:2.5rem;
}
}

/* ─── Hero Typing Effect ─── */
.d-block{
    display:block;
    margin-bottom:0.5rem;
    /* Add spacing between "Master..." and typing text */
}

.hero-typing-wrapper{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:1.2em;
    /* Reserve height to prevent layout shift */
}

.hero-title .cursor{
    display:inline-block;
    width:3px;
    /* Slightly thicker */
    height:1em;
    background-color:var(--accent-color);
    margin-left:4px;
    animation:blink 1s step-end infinite;
}

/* Ensure dynamic text has gradient if desired,or just inheriting */
#hero-typewriter{
    background:linear-gradient(135deg,var(--text-primary) 0%,var(--text-secondary) 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    padding-right:2px;
}

/* ─── Real Screenshot Preview Styles ─── */
.feature-preview-img-wrapper{
    overflow:hidden;
    border-radius:12px;
    box-shadow:0 20px 60px rgba(0,0,0,0.2);
    /* Deep shadow instead of border */
    border:1px solid var(--border-color);
    /* Subtle border matching theme */
    background:var(--surface-color);
    transition:var(--transition);
}

.feature-img{
    width:100%;
    height:auto;
    display:block;
    transition:transform 0.5s ease;
}

.feature-preview:hover .feature-preview-img-wrapper{
    transform:translateY(-5px);
    box-shadow:0 30px 80px rgba(0,0,0,0.3);
}

/* Subtle zoom effect on hover */
.feature-preview:hover .feature-img{
    transform:scale(1.02);
}

/* Resources Section - Onyx Theme Premium */
.resources-section{
    padding:120px 5%;
    background:var(--bg-color);
    border-bottom:1px solid var(--border-color);
    position:relative;
    overflow:hidden;
}

.resources-glow-bg{
    position:absolute;
    top:20%;
    left:10%;
    width:400px;
    height:400px;
    background:radial-gradient(circle,rgba(255,255,255,0.03) 0%,transparent 70%);
    filter:blur(80px);
    z-index:0;
    pointer-events:none;
}

.resources-container{
    max-width:1200px;
    margin:0 auto;
    position:relative;
    z-index:1;
}

.resources-header{
    text-align:center;
    margin-bottom:80px;
}

.editorial-line{
    width:40px;
    height:2px;
    background:var(--accent-color);
    margin:0 auto 20px;
}

/* Resource Spotlight */
.resource-spotlight{
    background:var(--surface-color);
    border:1px solid var(--border-color);
    border-radius:24px;
    padding:60px;
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:60px;
    margin-bottom:60px;
    position:relative;
    overflow:hidden;
}

.resource-spotlight::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(90deg,transparent,var(--accent-color),transparent);
    opacity:0.3;
}

.spotlight-content h3{
    font-size:2.5rem;
    margin-bottom:20px;
    line-height:1.2;
}

.spotlight-content p{
    font-size:1.1rem;
    margin-bottom:30px;
    color:var(--text-secondary);
}

.spotlight-features{
    display:flex;
    gap:30px;
    margin-bottom:40px;
}

.s-feature{
    display:flex;
    flex-direction:column;
    gap:10px;
    font-size:0.8rem;
    color:var(--text-secondary);
    text-transform:uppercase;
    letter-spacing:0.05em;
}

.s-feature i{
    font-size:1.5rem;
    color:var(--text-primary);
}

.btn-modern-spotlight{
    background:var(--text-primary);
    color:var(--bg-color) !important;
    padding:1rem 2.5rem;
    border-radius:40px;
    text-decoration:none;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:15px;
    transition:var(--transition);
}

.btn-modern-spotlight:hover{
    transform:translateX(5px);
    box-shadow:0 10px 30px rgba(255,255,255,0.1);
}

.spotlight-visual{
    background:rgba(255,255,255,0.02);
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
}

.legal-paper-preview{
    width:200px;
    background:var(--bg-color);
    padding:30px;
    border-radius:8px;
    box-shadow:0 30px 60px rgba(0,0,0,0.5);
    display:flex;
    flex-direction:column;
    gap:15px;
}

.paper-line{
    height:4px;
    background:var(--border-color);
    width:100%;
    border-radius:2px;
}

.paper-line-hi{
    height:4px;
    background:var(--accent-color);
    width:60%;
    border-radius:2px;
}

/* ── Resources & Blog Grid ── */
.resources-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:60px;
    row-gap:80px;
    margin-bottom:80px;
}

.resource-card{
    background:var(--surface-color);
    border:1px solid var(--border-color);
    border-radius:20px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
    position:relative;
    box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);
}

.resource-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,0.15);
    border-color:rgba(0,0,0,0.2);
}

body.dark-mode .resource-card:hover{
    box-shadow:0 20px 40px rgba(0,0,0,0.5);
    border-color:rgba(255,255,255,0.2);
}

.resource-visual{
    background:linear-gradient(135deg,rgba(150,150,150,0.08) 0%,rgba(150,150,150,0.02) 100%);
    padding:48px 32px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:3.5rem;
    color:var(--accent-color);
    position:relative;
    border-bottom:1px solid var(--border-color);
}

.resource-tag{
    position:absolute;
    top:16px;
    right:16px;
    background:var(--bg-color);
    color:var(--text-primary);
    padding:6px 14px;
    border-radius:24px;
    font-size:0.7rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.06em;
    border:1px solid var(--border-color);
    box-shadow:0 2px 5px rgba(0,0,0,0.05);
}

.resource-content{
    padding:32px;
    display:flex;
    flex-direction:column;
    flex-grow:1;
}

.resource-content h3{
    font-size:1.4rem;
    color:var(--text-primary);
    margin-bottom:14px;
    line-height:1.4;
    font-weight:700;
}

.resource-content p{
    color:var(--text-secondary);
    font-size:0.95rem;
    line-height:1.6;
    margin-bottom:24px;
    flex-grow:1;
}

.resource-highlights{
    list-style:none;
    padding:0;
    margin:0 0 24px 0;
}

.resource-highlights li{
    font-size:0.85rem;
    color:var(--text-secondary);
    margin-bottom:10px;
    display:flex;
    align-items:center;
    gap:12px;
}

.resource-highlights li i{
    color:var(--accent-color);
    font-size:0.8rem;
    opacity:0.8;
}

.resource-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:24px;
    border-top:1px solid var(--border-color);
    margin-top:auto;
}

.read-time{
    font-size:0.8rem;
    color:var(--text-secondary);
    font-weight:500;
}

.resource-link{
    color:var(--accent-color);
    text-decoration:none;
    font-weight:600;
    font-size:0.9rem;
    display:flex;
    align-items:center;
    gap:8px;
    transition:all 0.2s ease;
}

.resource-link:hover{
    gap:12px;
    opacity:0.8;
}

/* ── PRO Badge (Sleek/Modern SaaS) ── */
.pro-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:0.65rem;
    font-weight:700;
    letter-spacing:0.05em;
    padding:0.1rem 0.45rem;
    border-radius:6px;
    background:rgba(0,0,0,0.05);
    /* Glass-like subtle dark */
    color:#333;
    margin-left:0.6rem;
    vertical-align:middle;
    border:1px solid rgba(0,0,0,0.1);
    box-shadow:0 1px 4px rgba(0,0,0,0.05);
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}

body.dark-mode .pro-badge{
    background:rgba(255,255,255,0.1);
    color:#FFF;
    border-color:rgba(255,255,255,0.2);
    box-shadow:0 0 10px rgba(255,255,255,0.05);
}

/* Custom Toolbars & Selectors */
.custom-dropdown-btn{
    position:relative;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.custom-dropdown-menu{
    position:absolute;
    top:calc(100%  8px);
    background:var(--surface-light);
    border:1px solid rgba(0,0,0,0.1);
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
    padding:0.5rem;
    display:none;
    z-index:1000;
    min-width:120px;
    flex-direction:column;
    gap:0.25rem;
}

[data-theme='dark'] .custom-dropdown-menu{
    background:var(--surface-dark-menu,#2A2D33);
    border-color:rgba(255,255,255,0.1);
}

.custom-dropdown-menu.active{
    display:flex;
}

.dropdown-item{
    padding:0.5rem 0.75rem;
    border-radius:6px;
    cursor:pointer;
    color:var(--text-light);
    transition:background 0.2s;
    text-align:left;
}

[data-theme='dark'] .dropdown-item{
    color:var(--text-dark);
}

.dropdown-item:hover{
    background:rgba(0,0,0,0.05);
}

[data-theme='dark'] .dropdown-item:hover{
    background:rgba(255,255,255,0.05);
}

/* Color Picker UI */
.color-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:0.4rem;
    padding:0.25rem;
}

.color-swatch{
    width:24px;
    height:24px;
    border-radius:50%;
    cursor:pointer;
    border:2px solid rgba(0,0,0,0.1);
    transition:transform 0.2s,border 0.2s;
}

.color-swatch:hover{
    transform:scale(1.15);
}

.color-swatch.selected{
    border-color:#333;
}

[data-theme='dark'] .color-swatch.selected{
    border-color:#FFF;
}

/* AI Modal */
.custom-modal-overlay{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.5);
    backdrop-filter:blur(4px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
    opacity:0;
    transition:opacity 0.3s;
}

.custom-modal-overlay.active{
    display:flex;
    opacity:1;
}

.custom-modal{
    background:var(--bg-light);
    border-radius:12px;
    padding:1.5rem;
    width:90%;
    max-width:400px;
    box-shadow:0 10px 30px rgba(0,0,0,0.2);
    transform:translateY(20px);
    transition:transform 0.3s;
}

[data-theme='dark'] .custom-modal{
    background:var(--bg-dark);
    box-shadow:0 10px 30px rgba(0,0,0,0.5);
}

.custom-modal-overlay.active .custom-modal{
    transform:translateY(0);
}

.custom-modal h3{
    margin:0 0 1rem 0;
    color:var(--text-light);
    font-size:1.1rem;
    display:flex;
    align-items:center;
    gap:0.5rem;
}

[data-theme='dark'] .custom-modal h3{
    color:var(--text-dark);
}

.custom-modal input{
    width:100%;
    padding:0.75rem;
    border-radius:8px;
    border:1px solid rgba(0,0,0,0.1);
    background:transparent;
    color:var(--text-light);
    margin-bottom:1rem;
    font-size:1rem;
}

[data-theme='dark'] .custom-modal input{
    border-color:rgba(255,255,255,0.1);
    color:var(--text-dark);
}

.custom-modal .modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:0.5rem;
}

.custom-modal .btn-cancel{
    background:transparent;
    border:none;
    color:#888;
    padding:0.5rem 1rem;
    border-radius:6px;
    cursor:pointer;
}

.custom-modal .btn-cancel:hover{
    background:rgba(0,0,0,0.05);
}

.custom-modal .btn-submit{
    background:var(--accent-color);
    color:white;
    border:none;
    padding:0.5rem 1.25rem;
    border-radius:6px;
    cursor:pointer;
    font-weight:500;
}

.custom-modal .btn-submit:hover{
    opacity:0.9;
}

/* Slash Menu Dark Mode Fixes */
[data-theme='dark'] .slash-menu{
    background:var(--surface-dark-menu,#2A2D33);
    border:1px solid rgba(255,255,255,0.1);
}

[data-theme='dark'] .slash-item{
    color:#E0E0E0;
}

[data-theme='dark'] .slash-item:hover,
[data-theme='dark'] .slash-item.selected{
    background:rgba(255,255,255,0.08);
}

[data-theme='dark'] .slash-item .slash-icon{
    background:rgba(255,255,255,0.1);
    border-color:rgba(255,255,255,0.1);
}

[data-theme='dark'] .slash-item small{
    color:#999;
}

/* Specific Credit Cost UI inside Slash Menu */
.credit-cost-badge{
    display:inline-flex;
    align-items:center;
    gap:0.2rem;
    font-size:0.75rem;
    background:rgba(245,166,35,0.15);
    /* Gold tint */
    color:#E67E22;
    padding:0.1rem 0.4rem;
    border-radius:4px;
    margin-left:0.5rem;
    font-weight:600;
    line-height:1;
}

[data-theme='dark'] .credit-cost-badge{
    background:rgba(245,166,35,0.2);
    color:#F8C471;
}

/* Enhancing dark mode readability for Note Editor specifically */
[data-theme='dark'] .slash-item-info small{
    color:#A0AAB5;
    /* Brighter grey for legibility on dark backgrounds */
}

[data-theme='dark'] .ai-response-text{
    color:#E2E8F0;
}

[data-theme='dark'] .ai-interpret-sidebar{
    border-left:1px solid rgba(255,255,255,0.1);
}

/* Sizing UI Adjustments for formatting-group */
.formatting-group .pill-btn:hover{
    background-color:var(--surface-hover) !important;
}

[data-theme='dark'] .formatting-group{
    background:var(--surface-dark-menu) !important;
    border-color:rgba(255,255,255,0.1) !important;
}

[data-theme='dark'] .formatting-group span{
    color:var(--text-dark) !important;
}

[data-theme='dark'] .formatting-group div{
    background:rgba(255,255,255,0.1) !important;
}

/* Major Dark Mode Overhaul for the Slash command menu */
[data-theme='dark'] .slash-menu{
    background:#1E232A !important;
    border:1px solid rgba(255,255,255,0.08) !important;
    box-shadow:0 10px 30px rgba(0,0,0,0.5) !important;
}

[data-theme='dark'] .slash-item{
    border-bottom:1px solid rgba(255,255,255,0.03) !important;
    padding:12px 16px !important;
    transition:all 0.2s ease;
}

[data-theme='dark'] .slash-item:hover,
[data-theme='dark'] .slash-item.selected{
    background:rgba(255,255,255,0.05) !important;
}

[data-theme='dark'] .slash-item-info span{
    color:#F8FAFC !important;
    font-weight:500 !important;
    font-size:0.95rem !important;
}

[data-theme='dark'] .slash-item-info small{
    color:#94A3B8 !important;
    /* Extremely high legibility,beautiful slate grey */
    font-size:0.8rem !important;
    margin-top:2px !important;
}

[data-theme='dark'] .credit-cost-badge{
    background:rgba(245,166,35,0.15) !important;
    color:#F5A623 !important;
    border:1px solid rgba(245,166,35,0.2) !important;
}

/* Soft padding adjustments for sizing grouping */
.formatting-group{
    height:32px;
    border-radius:6px !important;
    background:transparent !important;
    border:1px solid var(--border-color) !important;
}

.formatting-group .pill-btn{
    height:100% !important;
    padding:0 0.5rem !important;
}

[data-theme='dark'] .formatting-group{
    border-color:rgba(255,255,255,0.1) !important;
}

/* Sizing UI Adjustments for formatting-group Redux 2 */
.formatting-group .pill-btn{
    height:100% !important;
    padding:0 0.75rem !important;
    /* Slightly wider click area for the A buttons */
    border-radius:4px !important;
}

[data-theme='dark'] .formatting-group span#current-text-size{
    color:#F8FAFC !important;
    /* Bright white instead of muted grey for the number */
    font-weight:600 !important;
}

/* =========================================================
   NOTE EDITOR MOBILE COMPATIBILITY REFINEMENTS
   ========================================================= */

@media (max-width:768px){

    /* 1. Swipeable Mobile Toolbar */
    .header-center{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        /* Smooth scrolling on iOS */
        scrollbar-width:none;
        /* Firefox */
        -ms-overflow-style:none;
        /* IE/Edge */
}

    .header-center::-webkit-scrollbar{
        display:none;
        /* Chrome/Safari */
}

    /* 2. Compact Format Sizing Group */
    .formatting-group .pill-btn{
        padding:0 0.4rem !important;
        /* Tighter click targets to save horizontal space */
}

    #current-text-size{
        font-size:0.8rem !important;
        min-width:20px !important;
        padding:0 0.25rem !important;
}

    /* 3. Slash Menu Viewport Safeguard */
    .slash-menu{
        max-width:calc(100vw - 32px) !important;
        /* Prevent it from overflowing off-screen */
        width:100% !important;
        /* Take up available safe width if needed */
        left:16px !important;
        /* Force to safe bounds if too far right */
        transform:translateY(10px) !important;
        /* Standardize pop animation */
}

    .slash-item{
        padding:0.6rem 0.8rem !important;
        /* Slightly denser items */
}

    .slash-item-info small{
        white-space:normal !important;
        /* Ensure descriptions wrap nicely */
        line-height:1.3 !important;
}

    /* 4. AI Modal Mobile Polish */
    .custom-modal{
        padding:1.25rem !important;
        width:95% !important;
}

    .custom-modal h3{
        font-size:1.1rem !important;
}
}

/* Arrange Mode & UI Fixes */
.lecture-card.menu-active{
    z-index:9999 !important;
    overflow:visible !important;
}

.content-grid.arrange-mode .lecture-card{
    cursor:grab;
    border:1px dashed var(--accent-color) !important;
    opacity:0.9;
}

.content-grid.arrange-mode .lecture-card:active{
    cursor:grabbing;
}

.drag-handle{
    display:none;
    position:absolute;
    top:1rem;
    right:1rem;
    color:var(--text-secondary);
    font-size:1.2rem;
    cursor:grab;
    z-index:2;
}

.content-grid.arrange-mode .drag-handle{
    display:block;
}

.content-grid.arrange-mode .card-menu-wrapper{
    display:none;
}

/* =========================================================
   LANDING PAGE REDESIGN:MEET BEN & ECOSYSTEM
   ========================================================= */

.meet-ben-section{
    padding:100px 5% 150px;
    background:var(--lp-bg);
    display:flex;
    align-items:center;
    gap:80px;
    position:relative;
    overflow:hidden;
    max-width:1400px;
    margin:0 auto;
}

.meet-ben-content{
    flex:1;
    z-index:2;
}

.meet-ben-visual{
    flex:0.8;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:400px;
}

.ben-hero-glow{
    position:absolute;
    width:300px;
    height:300px;
    background:radial-gradient(circle,var(--accent-color) 0%,transparent 70%);
    opacity:0.1;
    filter:blur(50px);
    animation:benPulse 4s infinite ease-in-out;
}

@keyframes benPulse{

    0%,
    100%{
        transform:scale(1);
        opacity:0.1;
}

    50%{
        transform:scale(1.2);
        opacity:0.15;
}
}

.ben-feature-card{
    background:var(--glass-bg);
    backdrop-filter:blur(15px);
    border:1px solid var(--border-color);
    padding:32px;
    border-radius:32px;
    box-shadow:0 30px 60px rgba(0,0,0,0.05);
    margin-top:40px;
}

.ben-feature-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
    list-style:none;
    padding:0;
}

.ben-feature-item{
    display:flex;
    flex-direction:column;
    gap:12px;
    min-width:0;
    /* Allow shrinking in grid */
}

.ben-feature-item i{
    font-size:2rem;
    color:var(--accent-color);
    margin-bottom:8px;
    display:inline-block;
}

.ben-feature-item h4{
    font-size:1.1rem;
    margin:0;
}

.ben-feature-item p{
    font-size:0.95rem;
    color:#bbbbbb;
    line-height:1.6;
}

.ecosystem-section{
    padding:120px 5%;
    background:var(--lp-surface);
    text-align:center;
}

.ecosystem-container{
    max-width:1200px;
    margin:0 auto;
}

.ecosystem-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:40px;
    margin-top:60px;
}

.eco-card{
    background:var(--bg-color);
    padding:48px 32px;
    border-radius:32px;
    border:1px solid var(--border-color);
    transition:var(--transition);
    text-align:left;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.eco-card:hover{
    transform:translateY(-10px) scale(1.03);
    box-shadow:0 40px 80px rgba(0,0,0,0.08),0 0 40px rgba(200,160,100,0.1);
    border-color:var(--accent-color);
}

.eco-icon{
    width:64px;
    height:64px;
    background:var(--progress-bg);
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.8rem;
    color:var(--accent-color);
}

.eco-card h3{
    font-size:1.4rem;
    margin:0;
}

.eco-card p{
    color:#bbbbbb;
    line-height:1.6;
    font-size:1rem;
}

.eco-link{
    margin-top:auto;
    color:var(--accent-color);
    text-decoration:none;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.95rem;
}

@media (max-width:992px){
    .meet-ben-section{
        flex-direction:column;
        text-align:center;
        gap:60px;
        padding:80px 5%;
}

    .ben-feature-list{
        grid-template-columns:1fr;
        gap:40px;
}

    .meet-ben-visual{
        min-height:300px;
}
}

/* ─── Utility Animations ─── */

/* Page Fade-In */
body{
    animation:pageFadeIn 0.5s ease;
}

@keyframes pageFadeIn{
    from{
        opacity:0;
}

    to{
        opacity:1;
}
}

/* Skeleton Loading Pulse */
.skeleton-pulse{
    background:linear-gradient(90deg,var(--surface-color) 25%,rgba(255,255,255,0.05) 50%,var(--surface-color) 75%);
    background-size:200% 100%;
    animation:skeletonShimmer 1.5s ease infinite;
    border-radius:12px;
}

@keyframes skeletonShimmer{
    0%{
        background-position:200% 0;
}

    100%{
        background-position:-200% 0;
}
}

/* Slide Up (for error panel) */
@keyframes slideUp{
    from{
        opacity:0;
        transform:translateY(20px);
}

    to{
        opacity:1;
        transform:translateY(0);
}
}

/* Pulse (for social proof dot) */
@keyframes pulse{

    0%,
    100%{
        opacity:1;
        transform:scale(1);
}

    50%{
        opacity:0.5;
        transform:scale(1.5);
}
}

/* Empty State */
.empty-state{
    text-align:center;
    padding:4rem 2rem;
    opacity:0.6;
}

.empty-state i{
    font-size:4rem;
    color:var(--accent-color);
    margin-bottom:1.5rem;
    display:block;
}

.empty-state h3{
    font-family:'Playfair Display',serif;
    font-size:1.5rem;
    margin-bottom:0.5rem;
}

.empty-state p{
    margin-bottom:1.5rem;
    font-size:0.95rem;
}

/* --- Global Loading Screen --- */
#global-loader{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background:var(--bg-color,#0A0A0A);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999999;
    transition:opacity 0.5s cubic-bezier(0.16,1,0.3,1),transform 0.5s cubic-bezier(0.16,1,0.3,1);
}

body.light-mode #global-loader{
    background:var(--bg-color);
}

#global-loader img{
    width:80px;
    height:80px;
    animation:loader-spin 1.5s cubic-bezier(0.5,0,0.5,1) infinite,loader-pulse 1.5s ease-in-out infinite;
    filter:drop-shadow(0 0 15px rgba(255,255,255,0.2));
}

@keyframes loader-spin{
    from{
        transform:rotate(0deg);
}

    to{
        transform:rotate(360deg);
}
}

@keyframes loader-pulse{

    0%,
    100%{
        transform:scale(1) rotate(0deg);
}

    50%{
        transform:scale(1.1) rotate(180deg);
}
}

#global-loader.fade-out{
    opacity:0;
    transform:scale(1.05);
    pointer-events:none;
}

/* --- Module Arranging Controls --- */
.dashboard-section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:2.5rem;
    margin-bottom:1.5rem;
    flex-wrap:wrap;
    gap:1rem;
}

.module-arranging-controls{
    display:flex;
    align-items:center;
    gap:1.5rem;
}

.view-toggles{
    display:flex;
    background:rgba(255,255,255,0.05);
    border:1px solid var(--border-color);
    border-radius:8px;
    padding:0.25rem;
}

body.light-mode .view-toggles{
    background:rgba(0,0,0,0.05);
}

.view-toggles .view-btn{
    background:none;
    border:none;
    color:var(--text-secondary);
    padding:0.5rem 0.75rem;
    border-radius:6px;
    cursor:pointer;
    font-size:1rem;
    transition:all 0.2s ease;
}

.view-toggles .view-btn:hover{
    color:var(--text-primary);
}

.view-toggles .view-btn.active{
    background:var(--surface-color);
    color:var(--accent-color);
    box-shadow:0 2px 5px rgba(0,0,0,0.2);
}

.view-all-link{
    font-size:0.85rem;
    font-weight:500;
    color:var(--text-secondary);
    text-decoration:none;
    transition:var(--transition);
}

.view-all-link:hover{
    color:var(--text-primary);
}

/* --- Layout Views --- */
.modules-grid.layout-list{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.modules-grid.layout-list .lecture-card{
    min-height:auto;
    flex-direction:row;
    align-items:center;
    padding:1.25rem 1.5rem;
    gap:1.5rem;
}

.modules-grid.layout-list .card-title{
    margin:0;
    font-size:1.25rem;
    flex:1;
}

.modules-grid.layout-list .card-badge{
    margin:0;
    flex-shrink:0;
}

.modules-grid.layout-compact{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:1rem;
}

.modules-grid.layout-compact .lecture-card{
    padding:1rem;
    min-height:100px;
    justify-content:center;
    text-align:center;
}

.modules-grid.layout-compact .card-title{
    font-size:1.1rem;
    margin-bottom:0.5rem;
}

.modules-grid.layout-compact .card-footer{
    justify-content:center;
}

/* Dashboard Module Card Drag Handle */
.module-card{
    position:relative;
}

.module-card .drag-handle{
    display:none;
    position:absolute;
    top:1rem;
    left:1rem;
    color:var(--text-secondary);
    font-size:1.2rem;
    cursor:grab;
    z-index:10;
}

.module-card:hover .drag-handle{
    display:block;
}

.sortable-ghost{
    opacity:0.4;
    border:2px dashed var(--accent-color) !important;
}