:root {
    --bg: #080808;
    --card-surface: #121214;
    --ink-accent: #6366f1; /* Indigo Ink */
    --ink-light: #818cf8;
    --text-primary: #ffffff;
    --text-dim: #a1a1aa;
    --glass: rgba(255, 255, 255, 0.03);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--bg);
    color: var(--text-primary);
    overflow-x: hidden;
}



/* --- GLOBAL LOADER --- */
.loader-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #020617; /* Deep Navy Dark */
    display: none;
    align-items: center; justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: 0.5s ease;
}

.loader-overlay.active { opacity: 1; }

.loader-content { text-align: center; }

/* Ink Drop Animation */
.ink-logo-animation {
    position: relative;
    width: 80px; height: 80px;
    margin: 0 auto 30px;
}



.ink-drop {
    width: 20px; height: 20px;
    background: var(--ink-accent);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    margin: 30px auto;
    animation: dropPulse 1.5s infinite ease-in-out;
}

.ink-circle {
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    border: 2px solid var(--ink-accent);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    animation: ripple 2s infinite cubic-bezier(0.23, 1, 0.32, 1);
}

.ink-circle:nth-child(3) { animation-delay: 0.8s; }

@keyframes dropPulse {
    0%, 100% { transform: rotate(-45deg) scale(1); box-shadow: 0 0 0 rgba(99, 102, 241, 0); }
    50% { transform: rotate(-45deg) scale(1.2); box-shadow: 0 0 30px var(--ink-accent); }
}

@keyframes ripple {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

/* Text Stagger Animation */
.loader-text {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 8px;
    color: white;
    margin-bottom: 20px;
}

.letter {
    display: inline-block;
    animation: letterWave 2s infinite ease-in-out;
}

.letter:nth-child(1) { animation-delay: 0.1s; }
.letter:nth-child(2) { animation-delay: 0.2s; }
.letter:nth-child(3) { animation-delay: 0.3s; }
.letter:nth-child(4) { animation-delay: 0.4s; }
.letter:nth-child(5) { animation-delay: 0.5s; }
.letter:nth-child(6) { animation-delay: 0.6s; }
.letter:nth-child(7) { animation-delay: 0.7s; }

@keyframes letterWave {
    0%, 100% { transform: translateY(0); color: white; }
    50% { transform: translateY(-10px); color: var(--ink-accent); text-shadow: 0 0 15px var(--ink-accent); }
}

.loader-progress-bar {
    width: 150px; height: 2px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
}

.progress-fill {
    width: 40%; height: 100%;
    background: var(--ink-accent);
    animation: progressMoving 1.5s infinite linear;
}

@keyframes progressMoving {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}




/* --- HYPER-MOTION NAVIGATION & SIDEBAR SYSTEM --- */

/* Base Scoped Variables to avoid global conflicts */
.top-nav, .sidebar, .ink-overlay {
    --nav-navy: #020617;
    --nav-accent: #6366f1;
    --nav-glow: #a855f7;
    --nav-white: #f8fafc;
    --nav-glass: rgba(8, 8, 12, 0.7);
    --nav-border: rgba(255, 255, 255, 0.05);
    --nav-card-surface: #070b19;
}

/* 1. LIGHT-WEIGHT FLAT OVERLAY (Lag Fix Modulated) */
.ink-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 4, 10, 0.75); /* Soft premium dark mask without heavy blur rendering load */
    z-index: 999;
    display: none;
    opacity: 0;
    will-change: opacity;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. FUTURISTIC FIXED SIDEBAR (Island Matrix Mode) */
.sidebar {
    position: fixed;
    top: 0;
    left: -300px; /* Safe hidden offscreen space */
    width: 290px;
    height: 100vh;
    background: var(--nav-card-surface);
    border-right: 1px solid var(--nav-border);
    z-index: 9991;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
    transform: translateZ(0); /* Forces hardware GPU caching instantly */
    will-change: left, width;
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sidebar Expanded/Active Logic */
.sidebar.active { 
    left: 0; 
    align-items: flex-start; 
    padding: 40px 24px; 
    box-shadow: 40px 0 80px rgba(0, 0, 0, 0.7), 0 0 30px rgba(99, 102, 241, 0.08);
}





/* Logo Core Graphics */
.logo { 
    font-family: 'Syncopate', sans-serif; 
    font-size: 1.6rem; 
    font-weight: 900;
    color: var(--nav-accent); 
    margin-bottom: 50px; 
    letter-spacing: -1px;
}
.logo span.logo-dot { 
    color: var(--nav-white); 
    animation: pulseDot 1.5s infinite alternate;
}
@keyframes pulseDot { 0% { opacity: 0.3; } 100% { opacity: 1; text-shadow: 0 0 10px #fff; } }

/* Links Alignment Vector */
.nav-items { 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
}

.nav-item {
    color: rgba(248, 250, 252, 0.45);
    text-decoration: none;
    font-size: 1rem;
    padding: 14px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 18px;
    cursor: pointer;
    border: 1px solid transparent;
    width: 100%;
    box-sizing: border-box;
    will-change: background-color, color, border-color, transform;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Icon Wrap Logic for Micro-Transform bounce */
.nav-icon-wrap {
    width: 24px;
    display: flex;
    justify-content: center;
    font-size: 1.25rem;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Smooth Navigation text appearance protection rules */
.nav-item span { 
    display: none; 
    opacity: 0;
    font-weight: 800;
    letter-spacing: 0.5px;
    transition: opacity 0.3s ease;
} 
.sidebar.active .nav-item span { 
    display: block; 
    opacity: 1;
}

/* Active Highlight Hooks */
.nav-item.active, .nav-item:hover {
    background: rgba(99, 102, 241, 0.08);
    color: var(--nav-white);
    border-color: rgba(99, 102, 241, 0.25);
    transform: translateX(4px);
}
.nav-item.active .nav-icon-wrap, 
.nav-item:hover .nav-icon-wrap {
    color: var(--nav-accent);
    transform: scale(1.15) rotate(5deg);
}

/* Section Dividers */
.nav-divider { 
    height: 1px; 
    background: linear-gradient(90deg, var(--nav-border), transparent); 
    margin: 10px 0; 
    width: 100%;
}

/* 3. FLICKER-FREE FIXED TOP NAVIGATION BAR */
.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 5%; /* STATIC LOCKED PADDING - Bug Fix for Heights */
    background: var(--nav-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: sticky;
    top: 0;
    z-index: 9999;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    will-change: background-color, border-color;
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

/* Moving Laser Border Base (Always hidden until scroll position kicks in) */
.top-nav-laser {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--nav-accent), var(--nav-glow), transparent);
    background-size: 200% auto;
    opacity: 0;
    will-change: opacity;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Triggered State Classes via JS Event Loop */
.top-nav.scrolled {
    background-color: rgba(2, 6, 23, 0.96);
    border-bottom-color: transparent;
}
.top-nav.scrolled .top-nav-laser {
    opacity: 1;
    animation: laserShift 4s linear infinite;
}
@keyframes laserShift { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }

/* Interactive Interface Action Triggers */
.menu-trigger { 
    font-size: 1.3rem; 
    color: var(--nav-white); 
    cursor: pointer; 
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--nav-border);
    transition: 0.3s;
}
.menu-trigger:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
    color: var(--nav-accent);
}

.brand-logo { 
    font-family: 'Syncopate', sans-serif; 
    font-size: 1.3rem; 
    font-weight: 900;
    letter-spacing: 2px; 
    color: var(--nav-white);
}
.brand-logo span { color: var(--nav-accent); }

/* Right Profile Blocks Stack */
.user-action { display: flex; gap: 16px; align-items: center; }

.search-circle { 
    width: 45px; 
    height: 45px; 
    border-radius: 50%; 
    background: rgba(255, 255, 255, 0.02); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border: 1px solid var(--nav-border); 
    color: rgba(248, 250, 252, 0.6);
    cursor: pointer; 
    transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.search-circle:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--nav-white);
    transform: scale(1.05);
}

.profile-frame { 
    width: 42px; 
    height: 42px; 
    border-radius: 12px; 
    overflow: hidden; 
    border: 2px solid var(--nav-accent); 
    cursor: pointer;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
    transition: 0.3s;
}
.profile-frame:hover {
    transform: scale(1.08);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
}
.profile-frame img { width: 100%; height: 100%; object-fit: cover; }




















/* ==============================*/







/* Unique Scoping: Hyper Kinetic Creative Studio */
.ti-hyper-hero {
    --h-navy: #020617;
    --h-accent: #6366f1;
    --h-glow: #a855f7;
    --h-white: #f8fafc;
    --h-glass: rgba(255, 255, 255, 0.02);
    --h-border: rgba(255, 255, 255, 0.08);
    
    background-color: var(--h-navy);
    min-height: 65vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 35px; /* Screen edges se gap */
    font-family: 'Inter', sans-serif;
}

/* 1. BACKGROUND MATRIX & FLOATING OBJECTS */
.ti-hyper-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(99, 102, 241, 0.15) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.6;
    z-index: 1;
}

/* Continuous Floating Ambient Orbs */
.ti-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    z-index: 2;
    opacity: 0.4;
    animation: orbFloat 10s ease-in-out infinite alternate;
}
.ti-orb-1 { top: -10%; left: 10%; width: 300px; height: 300px; background: var(--h-accent); }
.ti-orb-2 { bottom: -10%; right: 10%; width: 250px; height: 250px; background: var(--h-glow); animation-delay: -5s; }

@keyframes orbFloat {
    0% { transform: translateY(0) scale(1) rotate(0deg); }
    100% { transform: translateY(-40px) scale(1.2) rotate(90deg); }
}

.ti-hyper-container {
    width: 100%;
    max-width: 1150px;
    z-index: 10;
}

/* 2. THE FLOATING MAIN STAGE (Borders se detached box) */
.ti-hyper-stage {
    background: var(--h-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--h-border);
    border-radius: 20px;
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    box-shadow: 0 50px 100px rgba(0,0,0,0.5);
    overflow: hidden;
}

/* 3. LEFT COLUMN: FLYING TEXT & SHIMMER EFFECTS */
.ti-hyper-left { flex: 1.2; }

/* Metallic Shimmer Badge Loop */
.ti-hyper-badge-shimmer {
    display: inline-block;
    background: linear-gradient(90deg, #1e1b4b, #312e81, #1e1b4b);
    background-size: 200% auto;
    border: 1px solid rgba(99, 102, 241, 0.3);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--h-white);
    margin-bottom: 25px;
    animation: shimmerLoop 3s linear infinite;
}
@keyframes shimmerLoop {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* Typography Layout & Flying Animations */
.ti-hyper-h1 {
    font-size: clamp(2.2rem, 5.5vw, 4.5rem);
    font-weight: 950;
    line-height: 0.9;
    color: var(--h-white);
    margin-bottom: 25px;
}

.ti-fly-in-left, .ti-fly-in-right, .ti-fly-in-up {
    display: block;
    will-change: transform, opacity;
}
.ti-fly-in-left { animation: flyLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.ti-fly-in-right { animation: flyRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards; }
.ti-fly-in-up { animation: flyUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards; }

@keyframes flyLeft { 0% { opacity: 0; transform: translateX(-100px) skewX(15deg); } 100% { opacity: 1; transform: translateX(0) skewX(0); } }
@keyframes flyRight { 0% { opacity: 0; transform: translateX(100px) skewX(-15deg); } 100% { opacity: 1; transform: translateX(0) skewX(0); } }
@keyframes flyUp { 0% { opacity: 0; transform: translateY(60px); } 100% { opacity: 1; transform: translateY(0); } }

/* Neon Glow & Text Stroke Effects */
.ti-glow-text {
    color: var(--h-accent);
    text-shadow: 0 0 30px rgba(99, 102, 241, 0.6);
    animation: pulseGlow 2s ease-in-out infinite alternate;
}
@keyframes pulseGlow { 0% { text-shadow: 0 0 20px rgba(99, 102, 241, 0.4); } 100% { text-shadow: 0 0 40px rgba(99, 102, 241, 0.8), 0 0 20px rgba(168, 85, 247, 0.4); } }

.ti-text-stroke {
    -webkit-text-stroke: 1px var(--h-white);
    color: transparent;
}

.ti-hyper-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(248, 250, 252, 0.5);
    max-width: 450px;
    margin-bottom: 35px;
}

/* Premium Light-Glaze Button */
.ti-hyper-cta-wrapper { position: relative; }
.ti-hyper-btn {
    background: var(--h-white);
    color: var(--h-navy);
    border: none;
    padding: 15px 35px;
    font-weight: 900;
    font-size: 0.75rem;
    letter-spacing: 1px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
}
.ti-btn-glaze {
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    transform: skewX(-25deg);
    animation: buttonGlaze 4s ease-in-out infinite;
}
@keyframes buttonGlaze { 0% { left: -100%; } 30%, 100% { left: 150%; } }
.ti-hyper-btn:hover { background: var(--h-accent); color: var(--h-white); box-shadow: 0 0 30px rgba(99, 102, 241, 0.5); }

/* 4. RIGHT COLUMN: LAYERED PORTRAIT WITH SPINNING CROSSHAIRS */
.ti-hyper-right {
    flex: 0.8;
    display: flex;
    justify-content: flex-end;
}
.ti-hyper-scene-box { position: relative; width: 240px; }

/* Background Energy Portal Ring */
.ti-hyper-ring {
    position: absolute;
    inset: -20px;
    border: 2px dashed rgba(168, 85, 247, 0.2);
    border-radius: 50%;
    animation: spinRing 25s linear infinite;
    z-index: 1;
}
@keyframes spinRing { 100% { transform: rotate(360deg); } }

.ti-hyper-avatar-wrap {
    position: relative;
    z-index: 5;
    background: rgba(2, 6, 23, 0.8);
    border: 1px solid var(--h-border);
    border-radius: 16px;
    padding: 5px;
}
.ti-hyper-png { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6)); }

/* Moving Targeting Objects */
.ti-crosshair {
    position: absolute;
    color: var(--h-accent);
    font-size: 1.2rem;
    font-weight: 300;
    opacity: 0.6;
    animation: crosshairFloat 4s ease-in-out infinite alternate;
}
.ch-1 { top: -10px; left: -10px; animation-delay: 0.2s; }
.ch-2 { bottom: 20px; right: -15px; color: var(--h-glow); }

@keyframes crosshairFloat {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(10px, -10px) rotate(180deg); }
}

/* Floating Curator Tag Badge */
.ti-hyper-floating-tag {
    position: absolute;
    bottom: -15px;
    left: -30px;
    background: rgba(2, 6, 23, 0.9);
    border: 1px solid var(--h-border);
    padding: 10px 20px;
    border-radius: 8px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--h-white);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    animation: tagBounce 3s ease-in-out infinite alternate;
}
.ti-tag-pulse { width: 6px; height: 6px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 10px #22c55e; }
@keyframes tagBounce { 0% { transform: translateY(0); } 100% { transform: translateY(-12px); } }

/* 5. MOBILE KINETIC RETAINER: STRICT ROW PRESERVATION */
@media (max-width: 768px) {
    .ti-hyper-hero { padding: 15px; min-height: 52vh; }
    
    .ti-hyper-stage {
        padding: 30px 20px;
        flex-direction: row; /* Keeping text and PNG on the same horizontal line */
        gap: 15px;
    }

    .ti-hyper-badge-shimmer { margin-bottom: 12px; padding: 4px 10px; font-size: 0.5rem; }
    .ti-hyper-h1 { font-size: 1.4rem; margin-bottom: 15px; }
    .ti-hyper-desc { font-size: 0.68rem; line-height: 1.5; margin-bottom: 20px; }
    
    .ti-hyper-scene-box { width: 125px; } /* Clean sizing constraint */
    .ti-hyper-floating-tag { display: none; } /* Hiding complex overlap on tiny mobile screens */
    .ti-hyper-ring { inset: -10px; }
    
    .ti-hyper-btn { padding: 10px 20px; font-size: 0.65rem; }
}












/* ========================================================== */
/* 🎚️ UI VARIANT 2: SONIC EQUALIZER GRID (AUDIO FIRST) CSS    */
/* ========================================================== */

.ti-hyper-hero.variant-2 {
    background-color: #020617;
    position: relative;
}

/* Audio Wave Matrix Pulse Overlay Background */
.sonic-wave-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 15% 50%, 
        rgba(99, 102, 241, 0.08) 0%, 
        rgba(168, 85, 247, 0.02) 50%, 
        transparent 100%
    );
    z-index: 2;
    pointer-events: none;
}

/* Master Grid Stage Matrix with fixed Flex-Distribution */
.sonic-grid-layout {
    display: flex !important;
    flex-direction: row-reverse !important; /* Image Left, Text Right configuration */
    align-items: center;
    justify-content: space-between;
    background: rgba(4, 10, 31, 0.6) !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
    box-shadow: 0 50px 100px rgba(0,0,0,0.65), inset 0 0 30px rgba(168, 85, 247, 0.03) !important;
    padding: 40px !important;
}

/* --- 1. LEFT COLUMN: PORTRAIT IMAGE PORT & SOUND RINGS --- */
.sonic-visual-column {
    flex: 0 0 240px; /* Rigidly forces a minimum fixed space to block layout collapsing */
    display: flex;
    justify-content: flex-start;
}

.sonic-image-capsule {
    position: relative;
    width: 100%;
    background: rgba(2, 6, 23, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 8px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}

.sonic-image-capsule img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    filter: saturate(0.85) contrast(105%);
    z-index: 4;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Concentric soundwaves emitting out of the center avatar portal */
.sonic-frequency-rings {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: none;
}

.s-pulse {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px solid rgba(168, 85, 247, 0.35);
    border-radius: 50%;
    animation: waveRings 2.8s linear infinite;
    opacity: 0;
}
.p-2 { animation-delay: 1.4s; border-color: rgba(99, 102, 241, 0.3); }

@keyframes waveRings {
    0% { transform: scale(0.5); opacity: 0; }
    50% { opacity: 0.5; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* Live Badge styling over avatar */
.sonic-live-pill {
    position: absolute;
    top: 15px; left: 15px;
    background: #ef4444;
    color: var(--h-white);
    font-family: monospace;
    font-size: 0.55rem;
    font-weight: 900;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: 1px;
    z-index: 5;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

/* --- 2. RIGHT COLUMN: HIGH-IMPACT CONCEPTUAL TYPOGRAPHY --- */
.sonic-text-column {
    flex: 1;
    padding-left: 40px; /* Giving clean spacing away from image split */
}

/* Audio Signal Tracker Metadata Strip */
.sonic-db-panel {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-family: monospace;
    font-size: 0.65rem;
    font-weight: 800;
}
.db-node { color: var(--h-accent); letter-spacing: 2px; }
.db-spacer { width: 40px; height: 1px; background: rgba(255, 255, 255, 0.1); margin: 0 10px; }

/* Custom Font Spacing Config to mimic Equalizer Node Streams */
.sonic-h1-waveform {
    font-size: clamp(2rem, 5.5vw, 4.4rem);
    font-weight: 950;
    line-height: 0.85;
    color: var(--h-white);
    text-transform: uppercase;
}

.sonic-txt-compress {
    display: block;
    letter-spacing: -2px;
}

.sonic-txt-glow {
    display: block;
    color: #a855f7;
    text-shadow: 0 0 35px rgba(168, 85, 247, 0.4);
    letter-spacing: 1px;
}

.sonic-txt-split {
    display: block;
    -webkit-text-stroke: 1px var(--h-white);
    color: transparent;
    letter-spacing: 3px;
}

/* --- 3. HORIZONTAL GRAPHICAL FREQUENCY RAIL --- */
.sonic-pulse-rail {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    margin-top: 15px;
    margin-bottom: 25px;
}

.rail-bar {
    width: 15px;
    height: 3px;
    background: var(--h-accent);
    border-radius: 10px;
    animation: horizontalHertz 0.6s ease-in-out infinite alternate;
}
.rb-1 { animation-delay: -0.1s; }
.rb-2 { animation-delay: -0.3s; background: #a855f7; } /* Fluid dynamic mix color */
.rb-3 { animation-delay: -0.2s; }
.rb-4 { animation-delay: -0.5s; }
.rb-5 { animation-delay: -0.4s; background: #a855f7; }
.rb-6 { animation-delay: -0.6s; }

@keyframes horizontalHertz {
    0% { width: 6px; opacity: 0.4; }
    100% { width: 35px; opacity: 1; }
}

.sonic-desc-tweak {
    color: rgba(248, 250, 252, 0.5);
    max-width: 460px;
    margin-bottom: 25px !important;
}

/* Mixer Sound Board deck tags */
.sonic-mixer-channels {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

.mix-node {
    font-family: monospace;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(248, 250, 252, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.01);
    padding: 5px 12px;
    border-radius: 4px;
    transition: 0.3s;
}

.mix-node.active-mix, .mix-node:hover {
    color: #22c55e;
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.08);
    text-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
}

/* Secure Stream CTA Trigger Button */
.sonic-cyber-btn {
    background: transparent;
    color: var(--h-white);
    border: 1px solid var(--h-accent);
    padding: 15px 35px;
    font-weight: 900;
    font-size: 0.75rem;
    letter-spacing: 2px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.sonic-cyber-btn:hover {
    background: var(--h-accent);
    color: var(--h-navy);
    box-shadow: 0 0 35px rgba(99, 102, 241, 0.5);
    border-color: var(--h-white);
}

/* Image scaling macro-tricks */
.sonic-image-capsule:hover img {
    transform: scale(1.03);
}

/* --- 4. PERFECT RESPONSIVE BREAKPOINT OVERRIDES --- */
@media (max-width: 768px) {
    .ti-hyper-hero.variant-2 { padding: 15px; }
    
    .sonic-grid-layout {
        padding: 30px 20px !important;
        flex-direction: row-reverse !important; /* Row locked to match lower sections */
        gap: 15px !important;
    }

    /* Fixed allocation preventing content text from flattening the image wrapper */
    .sonic-visual-column {
        flex: 0 0 110px !important; /* Locks width space on phone screen limits */
    }
    
    .sonic-image-capsule { border-radius: 12px; padding: 4px; }
    .sonic-image-capsule img { border-radius: 8px; }
    .sonic-live-pill { top: 8px; left: 8px; font-size: 0.4rem; padding: 2px 5px; }
    .s-pulse { display: none; } /* Drop radial layers on mobile screens */

    .sonic-text-column {
        flex: 1;
        padding-left: 0px; /* Clear old desktop padding to salvage grid text boundaries */
    }

    .sonic-db-panel, .sonic-pulse-rail, .sonic-mixer-channels { display: none; } /* Cleanup secondary decoration strings */
    
    .sonic-h1-waveform { font-size: 1.35rem; letter-spacing: -0.5px; margin-bottom: 8px; }
    .sonic-desc-tweak { font-size: 0.65rem !important; line-height: 1.4; margin-bottom: 12px !important; }
    .sonic-cyber-btn { padding: 8px 16px; font-size: 0.62rem; letter-spacing: 1px; width: 100%; }
}













/* ========================================================== */
/* 🔒 UI VARIANT 3: CRYPTO VAULT VISUAL-FIRST SYSTEM CSS      */
/* ========================================================== */

.ti-hyper-hero.variant-3 {
    background-color: #020617;
    position: relative;
}

/* Subtle Editorial Border Boundaries */
.luxe-editorial-bg {
    position: absolute;
    inset: 20px;
    border: 1px solid rgba(255, 255, 255, 0.02);
    pointer-events: none;
    z-index: 2;
}

/* Technical vertical anchor line pattern */
.luxe-corner-frame-line {
    position: absolute;
    top: 0; right: 12%; width: 1px; height: 100%;
    background: linear-gradient(to bottom, rgba(168, 85, 247, 0.15), transparent);
    z-index: 2;
}

/* Main Container Frame Breaking Grid Alignment Rules */
.luxe-editorial-stage {
    display: flex;
    flex-direction: column !important; /* Stack vertically: Title on top, splits at bottom */
    justify-content: space-between;
    background: rgba(3, 7, 18, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 50px 100px rgba(0,0,0,0.6) !important;
    padding: 40px !important;
    position: relative;
}

/* --- 1. CRYPTO LOCK VISUAL TYPOGRAPHY --- */
.luxe-title-block {
    width: 100%;
    margin-bottom: 20px;
    text-align: left;
}

.luxe-vault-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.vault-status-dot {
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 8px #22c55e;
}

.vault-status-text {
    font-family: monospace;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--h-accent);
    letter-spacing: 3px;
    opacity: 0.8;
}

.luxe-massive-h1 {
    font-size: clamp(2rem, 5.8vw, 4.8rem);
    font-weight: 950;
    line-height: 0.85;
    text-transform: uppercase;
    letter-spacing: -2px;
}

.luxe-txt-solid {
    display: block;
    color: var(--h-white);
    animation: editorialSlideIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Styling the Lock Icon Bracket Matrix explicitly */
.v-bracket {
    color: #a855f7;
    font-family: monospace;
    font-weight: 400;
    margin: 0 2px;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

.luxe-txt-stroke {
    display: block;
    -webkit-text-stroke: 1px rgba(248, 250, 252, 0.35);
    color: transparent;
    animation: editorialSlideIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards;
}

@keyframes editorialSlideIn {
    0% { opacity: 0; transform: translateY(-15px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- 2. BOTTOM DISPLAY WRAPPER (IMAGE PANEL + METADATA RECEIPT) --- */
.luxe-split-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
}

/* Left Section: Image Locker */
.luxe-portrait-anchor {
    flex: 0.7;
}

.luxe-image-scanner {
    position: relative;
    width: 160px; /* Kept fixed for strict sizing blueprint matching */
    background: #020617;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 6px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}

#minimal-hero-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    filter: brightness(0.7) contrast(115%) grayscale(30%);
    transition: 0.4s ease;
}

/* Laser Scanning Beam bar */
.luxe-scan-beam {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, #a855f7, transparent);
    box-shadow: 0 0 12px #a855f7;
    z-index: 6;
    animation: laserScan 2.5s linear infinite;
}

@keyframes laserScan {
    0% { top: 0%; }
    50% { top: 100%; }
    100% { top: 0%; }
}

/* Absolute Secure Storage Tech Banner Layer Over Image */
.luxe-img-lock-overlay {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    background: rgba(2, 6, 23, 0.85);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: var(--h-white);
    font-family: monospace;
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-align: center;
    padding: 4px 0;
    border-radius: 4px;
    z-index: 5;
    pointer-events: none;
}

/* Right Section: Digital Ledger Technical Data */
.luxe-receipt-panel {
    flex: 1.3;
    border-left: 2px solid rgba(99, 102, 241, 0.15);
    padding-left: 30px;
}

.receipt-row {
    display: flex;
    justify-content: space-between;
    font-family: monospace;
    font-size: 0.62rem;
    margin-bottom: 8px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
    padding-bottom: 4px;
}

.r-label { color: rgba(248, 250, 252, 0.4); }
.r-val { color: var(--h-white); font-weight: 700; }
.status-green { color: #22c55e !important; text-shadow: 0 0 8px rgba(34, 197, 94, 0.3); }

.luxe-clean-para {
    font-size: 0.85rem !important;
    line-height: 1.5;
    color: rgba(248, 250, 252, 0.5);
    margin-top: 15px;
    margin-bottom: 25px !important;
}

/* --- 3. HARDWARE-CUT REPOSITORY CTA BUTTON --- */
.luxe-editorial-btn {
    background: transparent;
    color: var(--h-white);
    border: 1px solid var(--h-accent);
    padding: 14px 32px;
    font-weight: 900;
    font-size: 0.72rem;
    letter-spacing: 2px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    text-transform: uppercase;
}

.luxe-editorial-btn:hover {
    background: var(--h-accent);
    color: var(--h-navy);
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.4);
    border-color: var(--h-white);
}

/* Interactive Image Container Hover Node */
.luxe-image-scanner:hover #minimal-hero-img {
    filter: brightness(0.95) contrast(100%) grayscale(0%); /* Restores vibrant manga details instantly */
}

/* --- 4. PHONE VIEW RETENTION: STRICT STRUCTURAL PARITY --- */
@media (max-width: 768px) {
    .ti-hyper-hero.variant-3 { padding: 15px; }
    
    .luxe-editorial-stage {
        padding: 25px 20px 20px 20px !important;
        gap: 12px;
    }
    
    .luxe-vault-badge { margin-bottom: 4px; }
    .vault-status-text { font-size: 0.5rem; letter-spacing: 1px; }
    .luxe-massive-h1 { font-size: 1.35rem; letter-spacing: -0.5px; margin-bottom: 4px; }
    
    .luxe-split-footer {
        flex-direction: row !important; /* Strict preservation layout row bounds */
        gap: 15px;
        align-items: center;
    }
    
    .luxe-portrait-anchor { width: 90px; flex: 0.6; }
    .luxe-image-scanner { width: 100%; border-radius: 8px; padding: 4px; }
    .luxe-img-lock-overlay { display: none; } /* Drop overlay clutter on fluid breakpoints */
    
    .luxe-receipt-panel { flex: 1.4; border-left: none; padding-left: 0; }
    .receipt-row { display: none; } /* Freezing overflow strings */
    
    .luxe-clean-para { font-size: 0.65rem !important; line-height: 1.4; margin: 0 0 12px 0 !important; }
    .luxe-editorial-btn { padding: 8px 16px; font-size: 0.6rem; letter-spacing: 1px; width: 100%; }
}













/* ========================================================== */
/* --- EXTRA CRAZY HIGH-ENERGY BOOK VAULT MATRIX (3-COL) --- */
/* ========================================================== */

.book-container { 
    /* Scoped Variables - Pure Dynamic Sandbox Model */
    --h-navy: #020617;
    --h-accent: #6366f1;
    --h-glow: #a855f7;
    --h-white: #f8fafc;
    --h-emerald: #10b981;
    --h-dark-surface: #070b19;

    padding: 30px 12px; /* Mobile par padding thodi kam ki taaki screen space bache */
    background-color: var(--h-navy);
    position: relative;
    overflow: visible;
}

/* Section Header Layer with Kinetic Glow Line Behind It */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 10;
}

.section-header h2 {
    font-size: 1.1rem; /* Compact size for mobile header alignment */
    font-weight: 900; 
    letter-spacing: -0.5px;
    color: var(--h-white);
    text-transform: uppercase;
    position: relative;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 40px;
    height: 2.5px;
    background: linear-gradient(90deg, var(--h-accent), transparent);
    border-radius: 2px;
}

.section-header a { 
    color: var(--h-accent); 
    text-decoration: none; 
    font-weight: 900; 
    font-size: 0.65rem; 
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 📱 GRID SYSTEM: 🔥 LOCK: Strict Mobile-First 3-Column Symmetrical Layout */
.ink-grid {
    display: grid;
    /* Mobile view force locked into 3 exact fractional structural dimensions */
    grid-template-columns: repeat(3, minmax(0, 1fr)); 
    gap: 10px; /* Optimized layout tight spacing for 3 items density */
    position: relative;
    z-index: 5;
    width: 100%;
}

/* THE CRAZY CARD ISLAND SHIELD (COMPACT VERSION) */
.ink-card {
    background: var(--h-dark-surface);
    border-radius: 12px; /* Thoda chota radius compact look ke liye */
    padding: 6px; /* Ultra compression padding */
    border: 1px solid rgba(255, 255, 255, 0.04);
    position: relative;
    cursor: pointer;
    overflow: hidden; /* Mask child clips seamlessly */
    will-change: transform, box-shadow;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s ease;
    width: 100%;
    box-sizing: border-box;
}

/* 2. THE CINEMATIC IMAGE FRAME CORE */
.card-visual {
    position: relative;
    border-radius: 8px; /* Matching internal container curves */
    overflow: hidden;
    background: #02040a;
    border: 1px solid rgba(255, 255, 255, 0.03);
    z-index: 2;
    width: 100%;
}

.card-visual img { 
    width: 100%; 
    aspect-ratio: 2 / 3; /* Standard layout book dimension ratio mapping */
    object-fit: cover; 
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); 
}

/* Premium Badge Matrix (Smaller size for 3 columns wrapper) */
.ink-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(2, 4, 10, 0.85);
    border: 1px solid var(--h-accent);
    color: var(--h-white);
    font-size: 0.45rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 6;
    backdrop-filter: blur(4px);
}

/* PDF tag styling layer matching your exact UI rendering outputs */
.pdf-cover-mask, .pdf-tag {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #ef4444; /* Standard Red PDF Badge */
    color: #fff;
    font-size: 0.45rem;
    font-weight: 900;
    padding: 2px 5px;
    border-radius: 4px;
    z-index: 6;
}

/* 3. TYPOGRAPHY & DATA STRUCTURE META */
.card-info { 
    padding: 6px 2px 2px; 
    position: relative;
    z-index: 3;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.card-info h3 { 
    font-size: 0.72rem; /* Compressed font layout token for mobile reading */
    font-weight: 700; 
    color: var(--h-white); 
    margin: 0 0 3px 0;
    letter-spacing: -0.2px;
    line-height: 1.2;
    
    /* 🔥 LOCK: Strict Single Line Text Truncation */
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.ink-card:hover .card-info h3 { color: var(--h-accent); }

/* Meta Author/Tags Cluster */
.meta-tags { 
    display: flex; 
    gap: 4px; 
    margin-bottom: 4px; 
    width: 100%;
    overflow: hidden;
}

.meta-tags span { 
    font-size: 0.55rem; 
    font-weight: 500;
    color: rgba(248, 250, 252, 0.5); 
    text-transform: none; /* Reset uppercase to let "By Author" read smoothly */
    letter-spacing: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Price & Button Action Bars */
.price-bar { 
    display: flex; 
    align-items: center; 
    width: 100%;
}

.price-val { 
    color: var(--h-accent); 
    font-weight: 800; 
    font-size: 0.75rem; 
    letter-spacing: -0.1px;
}

.owned-text { 
    color: var(--h-emerald); 
    font-weight: 800; 
    font-size: 0.62rem; 
    letter-spacing: 0.5px;
}

/* Touch response properties overrides for responsive interactions */
@media (hover: none) {
    .ink-card:active {
        transform: scale(0.97);
        border-color: rgba(255, 255, 255, 0.1);
    }
}

/* ========================================================== */
/* 6. ADVANCED RESPONSIVE SCALING (Symmetrical Refactoring)   */
/* ========================================================== */

@media (min-width: 600px) {
    .ink-grid { 
        /* Table / Landscape models switch cleanly into larger 4/5 items frames */
        grid-template-columns: repeat(4, minmax(0, 1fr)); 
        gap: 14px; 
    }
    .book-container { padding: 40px 24px; }
}

@media (min-width: 900px) {
    .ink-grid { 
        /* Desktop setups scale to 5/6 items grids gracefully */
        grid-template-columns: repeat(5, minmax(0, 1fr)); 
        gap: 18px; 
    }
    .card-info h3 { font-size: 0.85rem; }
}

@media (min-width: 1200px) {
    .ink-grid { 
        grid-template-columns: repeat(6, minmax(0, 1fr)); 
        gap: 20px; 
    }
}



























#profile {
    display: flex;
    justify-content: center;
    padding: 100px 5%;
    min-height: 80vh;
}

.auth-wrapper {
    background: rgba(15, 15, 20, 0.7);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 24px;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Toggle Switch Styling */
.auth-toggle {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    padding: 6px;
    border-radius: 12px;
    margin-bottom: 30px;
}

.auth-toggle button {
    flex: 1;
    padding: 12px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
    border-radius: 8px;
}

.auth-toggle button.active {
    background: var(--ink-accent); /* Indigo */
    color: white;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.auth-title {
    font-size: 1.8rem;
    margin-bottom: 25px;
    text-align: center;
}

.input-box {
    position: relative;
    margin-bottom: 20px;
}

.input-box i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-accent);
}

.input-box input {
    width: 100%;
    padding: 14px 14px 14px 45px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    color: white;
    outline: none;
    transition: 0.3s;
}

.input-box input:focus {
    border-color: var(--ink-accent);
    background: rgba(99, 102, 241, 0.05);
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background: var(--ink-accent);
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}

.divider {
    text-align: center;
    margin: 25px 0;
    position: relative;
}

.divider::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    left: 0;
    top: 50%;
}

.divider span {
    background: #0f0f14;
    padding: 0 15px;
    position: relative;
    color: #64748b;
    font-size: 0.8rem;
}

.social-auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.social-auth button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: white;
    cursor: pointer;
    transition: 0.3s;
}

.social-auth button:hover {
    background: rgba(255, 255, 255, 0.08);
}


/* Show/Hide Password Icon */
.toggle-pass {
    position: absolute;
    right: 15px;
    left: auto !important; /* Resetting the default left icon position */
    cursor: pointer;
    color: #64748b !important;
    transition: 0.3s;
}
.toggle-pass:hover { color: var(--ink-accent) !important; }

/* Subtitle for Forgot Pass */
.auth-subtitle {
    color: #94a3b8;
    text-align: center;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

/* Forgot Password Link */
.forgot-link {
    color: var(--ink-accent);
    font-size: 0.85rem;
    text-align: right;
    cursor: pointer;
    margin-top: -10px;
    margin-bottom: 15px;
    transition: 0.3s;
}
.forgot-link:hover { text-decoration: underline; opacity: 0.8; }

/* Back Button */
.back-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Animation */
.animate-in {
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}




/* =================================== */

.profile-card {
    text-align: center;
    background: rgba(15, 15, 20, 0.7);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 400px;
}

.img-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
}

.profile-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--ink-accent);
}

.status-indicator {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 15px;
    height: 15px;
    background: #10b981;
    border-radius: 50%;
    border: 2px solid #0f0f14;
}

.user-mail {
    color: #64748b;
    font-size: 0.9rem;
    margin-top: 5px;
}

.profile-actions {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.action-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.action-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--ink-accent);
}


/* Custom Modal Styling */
.custom-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}

.confirm-modal {
    background: #0f172a;
    border: 1px solid rgba(99, 102, 241, 0.2);
    padding: 30px;
    border-radius: 24px;
    text-align: center;
    max-width: 350px;
    width: 90%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.modal-icon {
    font-size: 2.5rem;
    color: var(--ink-accent);
    margin-bottom: 15px;
}

.confirm-modal h3 { color: white; margin-bottom: 10px; font-size: 1.5rem; }
.confirm-modal p { color: #94a3b8; font-size: 0.95rem; margin-bottom: 25px; }

.modal-btns {
    display: flex;
    gap: 12px;
}

.cancel-modal, .confirm-modal-btn {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
    border: none;
}

.cancel-modal {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

.confirm-modal-btn {
    background: #ef4444; /* Red for logout */
    color: white;
}

.cancel-modal:hover { background: rgba(255, 255, 255, 0.1); }
.confirm-modal-btn:hover { background: #dc2626; transform: scale(1.02); }











/* --- TALKINK BOOK DETAIL PAGE (ULTIMATE REWRITE) --- */

:root {
    --ink-accent: #6366f1; /* Indigo Theme */
    --ink-bg: #020617;
    --ink-card: rgba(255, 255, 255, 0.05);
    --ink-border: rgba(255, 255, 255, 0.1);
    --ink-text-main: #f8fafc;
    --ink-text-muted: #94a3b8;
}

#BookPage {
    background-color: var(--ink-bg);
    min-height: 100vh;
    color: var(--ink-text-main);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

.book-detail-wrapper {
    max-width: 500px; /* Mobile Responsive Container */
    margin: 0 auto;
    padding-bottom: 110px; /* Action bar ke liye space */
    position: relative;
}

/* 1. Header Logic */
.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    position: sticky;
    top: 0;
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--ink-border);
}

.header-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ink-text-muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* 2. Media Slider (Center Focus) - 🔒 SECURED FLOATING DOTS LOGIC */
.relative-media-wrapper {
    position: relative; /* Fixed dynamic bounding block */
    width: 100%;
    background: #000;
    overflow: hidden;
}

.book-media-container {
    width: 100%;
    height: 420px;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; 
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.book-media-container::-webkit-scrollbar { display: none; }

.media-track { display: flex; height: 100%; }

.media-track img {
    min-width: 100%; /* Robust full-width viewport lock */
    width: 100%;
    max-width: 500px;
    height: 100%;
    object-fit: contain;
    scroll-snap-align: center;
    background: radial-gradient(circle, #1e293b 0%, #020617 100%);
    padding: 20px;
    box-sizing: border-box;
}

/* Dots Styling - Safely Locked Inside Viewport Edge */
.media-dots {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 30px;
    z-index: 10;
    pointer-events: none;
}

.dot {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all 0.4s ease;
}

.dot.active {
    background: var(--ink-accent);
    width: 18px;
    border-radius: 10px;
}

/* 3. Book Info & Pricing */
.book-main-info {
    padding: 30px 20px 10px;
}

#detailTitle {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 8px;
}

.author-tag {
    color: var(--ink-accent);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 20px;
    display: block;
}

.pricing-card {
    display: flex;
    align-items: center;
    gap: 12px;
}

.curr-price { font-size: 2.2rem; font-weight: 800; }
.old-price { font-size: 1.1rem; color: var(--ink-text-muted); text-decoration: line-through; }
.discount-tag { 
    color: #10b981; 
    font-weight: 700; 
    font-size: 0.85rem;
    background: rgba(16, 185, 129, 0.1);
    padding: 4px 10px;
    border-radius: 6px;
}

/* 4. Description & Stats */
.info-section { padding: 20px; }

.section-label {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.description-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--ink-text-muted);
}

.book-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 0 20px 20px;
}

.stat-item {
    background: var(--ink-card);
    border: 1px solid var(--ink-border);
    padding: 15px 5px;
    border-radius: 16px;
    text-align: center;
}

.stat-item i {
    color: var(--ink-accent);
    display: block;
    font-size: 1.2rem;
    margin-bottom: 6px;
}

.stat-item span {
    font-size: 0.7rem;
    color: var(--ink-text-muted);
    font-weight: 600;
    text-transform: uppercase;
}

/* 5. Fixed Bottom Action Bar (FIXED WISHLIST) */
.action-bar-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90px;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--ink-border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 15px;
    z-index: 2000;
}

/* Wrapper for Non-Mobile screens */
@media (min-width: 501px) {
    .action-bar-fixed {
        max-width: 500px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 20px 20px 0 0;
    }
}

/* --- 1. ACTION BAR ADJUSTMENT FOR 3 BUTTONS --- */
.wishlist-btn {
    flex: 0 0 50px; 
    height: 50px;
    background: var(--ink-card);
    border: 1px solid var(--ink-border);
    border-radius: 16px;
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.coupon-btn {
    flex: 0 0 110px; /* Balanced width for text + icon */
    height: 50px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 16px;
    color: var(--ink-accent);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.3s all ease;
}

.coupon-btn i {
    font-size: 1rem;
}

.coupon-btn:active {
    transform: scale(0.95);
    background: rgba(99, 102, 241, 0.1);
}

.buy-now-btn {
    flex: 1;
    height: 50px;
    background: var(--ink-accent);
    border: none;
    border-radius: 16px;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

.buy-now-btn:active, .wishlist-btn:active {
    transform: scale(0.95);
}

/* --- 2. PREMIUM COUPON MODAL OVERLAY --- */
.coupon-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(12px);
    z-index: 3000; 
    display: none; 
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.coupon-modal-overlay.active {
    display: flex;
    opacity: 1;
}

/* Modal Card Structure */
.coupon-modal-card {
    background: #0f172a; 
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
    max-width: 400px;
    border-radius: 24px;
    padding: 30px 24px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transform: translateY(30px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.coupon-modal-overlay.active .coupon-modal-card {
    transform: translateY(0);
}

/* Visual Icon */
.coupon-modal-icon {
    width: 60px;
    height: 60px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.coupon-modal-icon i {
    color: var(--ink-accent);
    font-size: 1.5rem;
}

.coupon-modal-card h3 {
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.coupon-modal-card p {
    font-size: 0.85rem;
    color: var(--ink-text-muted);
    line-height: 1.5;
    margin-bottom: 24px;
}

/* Input Vault Box */
.coupon-input-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 24px;
}

.coupon-input-wrapper .input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-text-muted);
    font-size: 1rem;
}

#couponCodeInput {
    width: 100%;
    height: 52px;
    background: rgba(2, 6, 23, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding-left: 45px;
    padding-right: 16px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    outline: none;
    transition: 0.3s;
}

#couponCodeInput:focus {
    border-color: var(--ink-accent);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.15);
}

/* Modal Interface Buttons */
.coupon-modal-btns {
    display: flex;
    gap: 12px;
}

.coupon-cancel-btn {
    flex: 1;
    height: 48px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: var(--ink-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.coupon-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.02);
    color: #fff;
}

.coupon-apply-btn {
    flex: 1;
    height: 48px;
    background: var(--ink-accent);
    border: none;
    border-radius: 14px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
    transition: 0.2s;
}

.coupon-apply-btn:active, .coupon-cancel-btn:active {
    transform: scale(0.97);
}
/* ========================================================================= */
/* 🪐 PREMIUM HYPER-GLASS DETAIL HEADER ENGINE                              */
/* ========================================================================= */
.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    position: sticky;
    top: 0;
    
    /* ✨ ULTRA-PREMIUM GLASSMORPHISM */
    background: rgba(2, 6, 23, 0.75); /* Translucent strict navy overlay */
    backdrop-filter: blur(20px);       /* Butter smooth background blur */
    -webkit-backdrop-filter: blur(20px);
    
    /* 🥞 LAYERING MATRIX & BORDER PROFILE */
    z-index: 2500; /* Sidebar aur action elements ke sath perfect layering */
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.02);
    
    will-change: background-color, border-color;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 🏷️ CENTRAL TYPOGRAPHY VECTOR */
.header-title {
    font-family: 'Syncopate', sans-serif; /* Branding font sync */
    font-size: 0.85rem;
    font-weight: 800;
    color: #f8fafc; /* Clean premium white */
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.05);
}

/* 🕹️ CONTROLLER BUTTONS (NATIVE APP FEEL) */
.detail-header .icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px; /* Smooth rounded squircle layout */
    background: rgba(255, 255, 255, 0.02); /* Ghost surface */
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #94a3b8; /* Muted slate icons */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    outline: none;
    
    /* Hardware acceleration layer */
    transform: translateZ(0);
    will-change: background-color, color, border-color, transform;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Micro-Interactions on Hover/Desktop */
.detail-header .icon-btn:hover {
    color: #6366f1; /* Premium Indigo Glow */
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.15);
}

/* 📱 Mobile Touch Haptic Feed (Tap Feedback) */
.detail-header .icon-btn:active {
    transform: scale(0.92); /* Micro-bounce contraction */
    background: rgba(99, 102, 241, 0.15);
    border-color: #6366f1;
    color: #fff;
    transition: all 0.1s ease; /* Fast tap trigger */
}

/* Special Case: Share Button Specific Accent Spark */
.detail-header .share-trigger:hover {
    color: #a855f7; /* Purple glow for social vectors */
    background: rgba(168, 85, 247, 0.08);
    border-color: rgba(168, 85, 247, 0.3);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.15);
}
.detail-header .share-trigger:active {
    border-color: #a855f7;
    color: #fff;
}


/* --- NAYA READ FREE BUTTON STYLE --- */
.read-free-btn {
    flex: 1; /* Buy now ke barabar space lega */
    height: 50px;
    background: #10b981; /* Premium Emerald Green for Free Actions */
    border: none;
    border-radius: 16px;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.3s all ease;
}

.read-free-btn:active {
    transform: scale(0.95);
}















/* ==========================================================================
   STRICTLY SCOPED CYBER-VAULT LIBRARY PAGE STYLES (No Global Leakage)
   ========================================================================== */

/* Scoped Utility Isolation & Variables Matrix */
#LibraryPage {
    --lib-navy: #020617;
    --lib-surface: #090f24;
    --lib-accent: #6366f1;
    --lib-glow: #a855f7;
    --lib-emerald: #10b981;
    --lib-white: #f8fafc;
    --lib-text-dim: #64748b;
    
    background-color: var(--lib-navy);
    min-height: 100vh;
    box-sizing: border-box;
}

/* Ensuring box sizing inside this specific section loop */
#LibraryPage *, #LibraryPage *::before, #LibraryPage *::after {
    box-sizing: border-box;
}

/* 1. CONTAINER PRECISION MATRIX */
#LibraryPage .lib-wrapper {
    padding: 40px 16px 60px;
    max-width: 1300px;
    margin: 0 auto;
}

/* 2. NAVIGATION HEADER COMPONENT (Scoped Structure) */
#LibraryPage .lib-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.03), transparent);
    padding: 20px;
    border-radius: 16px;
    border-left: 3px solid var(--lib-accent);
}

#LibraryPage .mini-back-btn {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--lib-accent);
    width: 45px;
    height: 45px;
    border-radius: 12px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#LibraryPage .mini-back-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--lib-white);
    transform: translateX(-4px);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
}

/* Extreme Syncopate Typography for Isolated Header */
#LibraryPage h1.glitch-text {
    font-family: 'Syncopate', sans-serif;
    font-size: clamp(1.2rem, 4vw, 1.8rem);
    font-weight: 950;
    color: var(--lib-white);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 4px 0;
}

#LibraryPage h1.glitch-text span {
    color: var(--lib-glow);
    animation: vaultScopedBlink 2s infinite alternate;
}
@keyframes vaultScopedBlink { 0% { opacity: 0.2; } 100% { opacity: 1; text-shadow: 0 0 10px var(--lib-glow); } }

/* Real-time Status Synchronization Indicator */
#LibraryPage .lib-meta-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

#LibraryPage .status-indicator {
    width: 6px;
    height: 6px;
    background-color: var(--lib-emerald);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--lib-emerald);
    animation: pulseScopedGlow 1.5s infinite ease-in-out;
}
@keyframes pulseScopedGlow { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.4); opacity: 1; } }

#LibraryPage span#lib-count {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lib-text-dim);
}

/* 3. DYNAMIC GRID MATRIX SYSTEM */
#LibraryPage .compact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Mobile: Strict 2 Columns Layout */
    gap: 16px;
}

/* 4. GPU-ACCELERATED MINI CARD ARCHITECTURE (Fully Isolated) */
#LibraryPage .mini-card {
    background: var(--lib-surface);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.03);
    position: relative;
    cursor: pointer;
    transform: translateZ(0); /* Forces layout acceleration on mobile hardware caches */
    will-change: transform, border-color, box-shadow;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s ease,
                box-shadow 0.4s ease;
}

/* Image Frame Core with Projection Limits */
#LibraryPage .mini-cover {
    position: relative;
    aspect-ratio: 2 / 3;
    width: 100%;
    background: #02040a;
    overflow: hidden;
}

#LibraryPage .mini-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform, filter;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

/* Futuristic Minimal Badges Inside Isolated Context */
#LibraryPage .mini-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

/* Badge States Variants Structure */
#LibraryPage .alpha-badge {
    background: rgba(99, 102, 241, 0.85);
    color: var(--lib-white);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
#LibraryPage .unread-badge {
    background: rgba(15, 23, 42, 0.9);
    color: var(--lib-text-dim);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
#LibraryPage .complete-badge {
    background: rgba(16, 185, 129, 0.85);
    color: var(--lib-white);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 5. METADATA & DATA-TEXT BLOCKS CONTROLLER */
#LibraryPage .mini-info {
    padding: 14px 12px;
    background: linear-gradient(180deg, transparent 0%, rgba(2, 6, 23, 0.4) 100%);
    position: relative;
}

#LibraryPage .mini-info h3 {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--lib-white);
    margin: 0 0 8px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
    transition: color 0.3s ease;
}

#LibraryPage .mini-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

#LibraryPage .progress-percent {
    font-size: 0.65rem;
    font-weight: 900;
    color: var(--lib-accent);
    font-family: monospace;
}

/* Finished Card Specific Overrides Scoped */
#LibraryPage .mini-card.finished .progress-percent {
    color: var(--lib-emerald);
}

/* 6. LIQUID MOTION PROGRESS BARS ENGINE */
#LibraryPage .mini-progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

#LibraryPage .mini-progress-bar .fill {
    height: 100%;
    background: linear-gradient(90deg, var(--lib-accent), var(--lib-glow));
    border-radius: 4px;
    will-change: transform;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

#LibraryPage .mini-card.finished .mini-progress-bar .fill {
    background: var(--lib-emerald);
    box-shadow: 0 0 8px var(--lib-emerald);
}

/* 7. HIGH-ENERGY HOVER ENGINE FOR INTERACTIONS */
@media (hover: hover) {
    #LibraryPage .mini-card:hover {
        transform: translateY(-8px) scale(1.02);
        border-color: rgba(99, 102, 241, 0.2);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(99, 102, 241, 0.05);
    }
    #LibraryPage .mini-card.finished:hover {
        border-color: rgba(16, 185, 129, 0.25);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(16, 185, 129, 0.05);
    }
    #LibraryPage .mini-card:hover img {
        transform: scale(1.08);
        filter: saturate(120%) brightness(0.85);
    }
    #LibraryPage .mini-card:hover .mini-info h3 {
        color: var(--lib-accent);
    }
    #LibraryPage .mini-card.finished:hover .mini-info h3 {
        color: var(--lib-emerald);
    }
}

/* Touch Response Scaling Mechanism for Mobile Screen */
#LibraryPage .mini-card:active {
    transform: scale(0.96) translateY(-2px);
    transition: transform 0.1s ease;
}

/* 8. ADAPTIVE RESPONSIVE MATRIX CONFIGURATIONS */
@media (min-width: 600px) {
    #LibraryPage .compact-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}

@media (min-width: 900px) {
    #LibraryPage .compact-grid { 
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); 
        gap: 24px; 
    }
    #LibraryPage .lib-wrapper { padding: 60px 30px 80px; }
    #LibraryPage .mini-info h3 { font-size: 0.9rem; }
}














/* ========================================= */
/* TALKINK 3D VIRTUAL READER - ULTRA-PREMIUM */
/* ========================================= */

#ReaderPage {
    background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Bahar bhagne se rokta hai */
    touch-action: none; /* Default browser scroll ko block karke smooth flip deta hai */
}

/* --- NAVIGATION BAR (Glassmorphism) --- */
.reader-nav {
    height: 70px;
    width: 100%;
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    display: flex;
    align-items: center;
    padding: 0 25px;
    z-index: 1001;
    border-bottom: 1px solid rgba(99, 102, 241, 0.15);
    box-sizing: border-box;
}

.reader-back {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.reader-back:hover { 
    background: rgba(99, 102, 241, 0.3); 
    transform: translateX(-3px); /* Back jane ka visual feedback */
}

.reader-title-info { margin-left: 15px; flex-grow: 1; }
.reader-title-info h2 { font-size: 0.95rem; color: #f8fafc; margin: 0; font-weight: 700; letter-spacing: 0.5px; }

#pageCounter { font-size: 0.7rem; color: #6366f1; font-weight: 800; letter-spacing: 1px; }

/* --- PROGRESS BAR (Animated Glow) --- */
.reading-progress-container {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.03);
    position: relative;
    z-index: 1002;
}
#readingProgress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.6);
    transition: width 0.5s cubic-bezier(0.15, 0.85, 0.45, 1);
}

/* --- THE 3D STAGE --- */
.reader-container {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    perspective: 3000px; /* 3D depth ko aur real banata hai */
    overflow: hidden; /* Boundary limits ke liye zaroori */
}

#flipbook-wrapper {
    position: relative;
    will-change: transform;
    transform-style: preserve-3d;
    /* Extra Ordinary Smoothness Curve */
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); 
    backface-visibility: hidden;
}

/* Jab hum manual drag (Pan) karte hain, tab transition slow nahi honi chahiye */
#flipbook-wrapper.panning {
    transition: transform 0.05s linear !important;
}


/* Response Fixes */
#flipbook-wrapper, 
.dock-group button, 
.reader-back {
    /* Click delay khatam karne ke liye */
    touch-action: manipulation;
    
    /* Touch highlight hatao (Jo blue box aata hai) */
    -webkit-tap-highlight-color: transparent;
    
    /* Interaction boost */
    cursor: pointer;
}

/* Page renders ko optimize karo taaki zoom ke waqt processor na fase */
canvas {
    will-change: transform;
    transform: translateZ(0);
}


#flipbook {
    box-shadow: 0 50px 100px rgba(0,0,0,0.9), 0 0 50px rgba(99, 102, 241, 0.1);
    transition: margin 0.3s ease;
}

/* --- PAGE STYLING (The Paper Feel) --- */
.page-wrapper {
    background: #fff;
    overflow: hidden;
    /* Paper ki halki si texture shadow */
    box-shadow: inset 0 0 30px rgba(0,0,0,0.05);
}

canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    /* Canvas rendering ko smooth aur crisp banata hai */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
}

/* --- ACTIONS AREA --- */
.reader-actions { display: flex; gap: 12px; margin-left: 15px; }
.reader-actions i {
    color: #94a3b8;
    background: rgba(255,255,255,0.05);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255,255,255,0.05);
}

.reader-actions i:hover { 
    color: #fff; 
    background: rgba(99,102,241,0.2); 
    border-color: rgba(99,102,241,0.4);
    transform: translateY(-2px);
}


/* ======================================================= */
/* 🔥 ULTRA-PREMIUM NAVIGATION BUTTONS (NEON GLASS DESIGN) */
/* ======================================================= */

.reader-actions { 
    display: flex; 
    gap: 10px; 
    margin-left: 15px; 
    align-items: center;
}

/* Base Button Styling (Bypassing dull gray/white layout) */
.reader-actions .action-dock-btn {
    background: rgba(99, 102, 241, 0.05) !important; /* Extremely soft indigo glass tint */
    border: 1px solid rgba(99, 102, 241, 0.15) !important; /* Neon indigo sub-border */
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

/* Inner Icons Glowing Correction */
.reader-actions .action-dock-btn i {
    color: #94a3b8 !important; /* Slate steel color default mode me */
    background: none !important; /* Purana background strip completely wiped */
    border: none !important;
    width: auto !important;
    height: auto !important;
    font-size: 1rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-block !important;
    transform: none !important;
}

/* ✨ THE MAGIC HOVER EFFECT: Soft Neon Glow Aura */
.reader-actions .action-dock-btn:hover {
    background: rgba(99, 102, 241, 0.2) !important; /* Deepening indigo glass background */
    border-color: rgba(99, 102, 241, 0.6) !important; /* Strong neon glowing borders */
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.4) !important; /* Soft backdrop aura light glow */
    transform: translateY(-2px) !important; /* Smooth crisp float animation */
}

/* Hover par text/icon ka color ekdum vibrant bright white ho jayega */
.reader-actions .action-dock-btn:hover i {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
}

/* Active/Clicked State (Halka sa feedback push button effect) */
.reader-actions .action-dock-btn:active {
    transform: translateY(1px) !important;
    box-shadow: 0 0 5px rgba(99, 102, 241, 0.2) !important;
}


/* --- DARK MODE FILTER (Smart) --- */
.dark-mode-reader .page-wrapper { background: #111; }
.dark-mode-reader canvas { 
    filter: invert(0.9) hue-rotate(180deg) brightness(0.9) contrast(1.1); 
}

/* --- MOBILE OPTIMIZATIONS (SOUND BUTTON & OVERFLOW FIXED) --- */
@media (max-width: 768px) {
    .reader-nav { 
        height: 60px; 
        padding: 0 12px; 
        display: flex;
        justify-content: space-between; /* Space ko barabar baantne ke liye */
    }
    
    /* 1. Title ko wrap hone se roko aur truncate karo taaki buttons ke liye jagah bache */
    .reader-title-info { 
        margin-left: 10px; 
        flex-grow: 1; 
        min-width: 0; /* Flexbox text truncation fix */
    }
    
    .reader-title-info h2 { 
        font-size: 0.8rem; 
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* Lamba naam hone par ... lag jayega, layout nahi tootega */
    }
    
    .brand-tag {
        font-size: 0.65rem;
    }

    /* 2. Actions container ko flex alignment mein rakho aur margin set karo */
    .reader-actions {
        display: flex;
        gap: 8px;
        margin-left: 10px;
        flex-shrink: 0; /* Buttons ko shrink hone se rokega */
    }

    /* 3. 🔥 FIX: Pehle jo sab band ho raha tha use hataya. Ab button ke icons and buttons dono safe rahenge */
    .reader-actions button.action-dock-btn {
        display: flex !important; /* Forcefully icons ko visible rakhega mobile par */
        align-items: center;
        justify-content: center;
    }

    /* Custom sizing for navbar buttons on smaller touch screens */
    .action-dock-btn {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
    }

    .action-dock-btn i {
        font-size: 0.9rem !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
    }
    
    /* Mobile par book container ki padding set */
    .reader-container { padding: 10px; }
}


/* High-Quality Zoom rendering fix */
.zoomed-canvas {
    transform: translateZ(0); /* Force GPU */
}





/* --- PREMIUM BOTTOM DOCK ENGINE (V7.5) --- */
.reader-bottom-dock {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 550px;
    background: rgba(15, 23, 42, 0.75); /* Deep Glass */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 28px;
    padding: 10px 20px;
    z-index: 10005;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 
                inset 0 0 15px rgba(255, 255, 255, 0.03);
    transition: all 0.4s cubic-bezier(0.15, 0.85, 0.45, 1);
}

/* Jab zoom ho raha ho toh dock ko thoda transparent kar sakte hain (Optional) */
.reader-bottom-dock:hover {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(99, 102, 241, 0.5);
}

.dock-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* Groups Styling */
.dock-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dock-group button {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.dock-group button:hover {
    background: rgba(99, 102, 241, 0.2);
    color: #fff;
    transform: translateY(-3px);
    border-color: rgba(99, 102, 241, 0.3);
}

/* Center Navigation (Flip Buttons) */
.main-nav .nav-btn {
    width: 48px;
    height: 48px;
    background: none;
    border: none;
}

.main-nav .nav-btn i {
    font-size: 2rem;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: 0.3s;
}

.main-nav .nav-btn:hover i {
    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.6));
    transform: scale(1.1);
}

/* Page Indicator */
.page-indicator {
    background: rgba(99, 102, 241, 0.12);
    padding: 6px 16px;
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.2);
    min-width: 70px;
    text-align: center;
}

#dockPageCounter {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.5px;
}

/* Labels */
.dock-label {
    font-size: 0.65rem;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- MOBILE SPECIFIC FIXES --- */
@media (max-width: 600px) {
    .reader-bottom-dock {
        width: 95%;
        padding: 8px 12px;
        bottom: 15px;
    }
    
    .dock-label {
        display: none; /* Mobile pe jagah bachane ke liye */
    }

    .zoom-controls button, .quick-actions button {
        width: 36px;
        height: 36px;
    }

    .main-nav .nav-btn i {
        font-size: 1.7rem;
    }

    .page-indicator {
        padding: 4px 10px;
        min-width: 60px;
    }
}

/* Smooth Pulse Animation for the Page Indicator when turned */
@keyframes counterPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.counter-update {
    animation: counterPulse 0.3s ease-out;
}






/* --- JUMP TO PAGE MODAL (REWRITTEN STRUCTURE) --- */
.jump-modal {
    display: none; /* JS control */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 6, 23, 0.85); /* Thoda gehra dark overlay */
    backdrop-filter: blur(8px);
    z-index: 20000;
}

.modal-content {
    position: absolute;
    /* Isse modal hamesha top se 20% niche rahega, keyboard se bachkar */
    top: 20%; 
    left: 50%;
    transform: translateX(-50%);
    
    background: #0f172a;
    padding: 30px;
    border-radius: 24px;
    border: 1px solid rgba(99, 102, 241, 0.5);
    width: 290px;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
}

.modal-content h3 { 
    color: #f8fafc; 
    margin-top: 0;
    margin-bottom: 20px; 
    font-size: 1.2rem;
    font-weight: 700;
}

.modal-content input {
    width: 100%;
    padding: 15px;
    background: #1e293b;
    border: 2px solid #334155;
    border-radius: 12px;
    color: white;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 25px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.modal-content input:focus {
    border-color: #6366f1;
}

.modal-actions { 
    display: flex; 
    gap: 12px; 
}

.modal-actions button {
    flex: 1; 
    padding: 12px; 
    border-radius: 10px; 
    border: none; 
    cursor: pointer; 
    font-weight: 800;
    font-size: 0.9rem;
    text-transform: uppercase;
    transition: 0.2s;
}

.btn-cancel { 
    background: #334155; 
    color: #94a3b8; 
}

.btn-go { 
    background: linear-gradient(135deg, #6366f1, #a855f7); 
    color: white; 
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.btn-go:active {
    transform: scale(0.95);
}






/* Progress Container Click Area */
.reading-progress-container {
    height: 12px; /* Thoda bada area taaki touch karne mein aasani ho */
    padding: 4px 0;
    background: rgba(255,255,255,0.1);
}
/* Container ko touch area do */
.reading-progress-container {
    width: 100%;
    height: 12px; 
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    cursor: pointer;
    touch-action: none; /* Mobile scroll block */
}



/* Main Progress Bar */
#readingProgress {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    width: 0%;
    position: relative;
    transition: width 0.1s linear;
}

/* Sliding Lever (The Thumb) */
#progressThumb {
    width: 18px;
    height: 18px;
    background: #fff;
    border: 3px solid #6366f1;
    border-radius: 50%;
    position: absolute;
    right: -9px; /* Half of width to center it */
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.8);
    display: none; /* Sirf tab dikhega jab user touch karega ya book load hogi */
}

.reading-progress-container:hover #progressThumb {
    display: block;
}

/* Floating Page Number (Tooltip) */
#progressTooltip {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: #6366f1;
    color: white;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Tooltip ke niche ka chhota triangle */
#progressTooltip::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #6366f1;
}














/* --- DARK MODE READER STYLING --- */

/* 1. Base Background Change */
#ReaderPage.dark-mode-reader {
    background: #020617 !important; /* Ek dum gehra black-blue */
}

/* 2. PDF Canvas Inversion (Sabse important) */
.dark-mode-reader canvas {
    /* Step 1: Colors ulte karo (Black -> White) */
    /* Step 2: Hue rotate 180deg taaki blue blue hi rahe aur red red hi */
    /* Step 3: Brightness thodi kam taaki aankhon pe na lage */
    filter: invert(0.9) hue-rotate(180deg) brightness(0.8) contrast(1.2) !important;
    transition: filter 0.3s ease;
}

/* 3. Dark Mode mein UI elements ka color adjust karna */
.dark-mode-reader .reader-nav,
.dark-mode-reader .reader-bottom-dock {
    background: rgba(15, 23, 42, 0.9) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
}

.dark-mode-reader .page-wrapper {
    background: #111 !important; /* Page ki edge dark dikhegi */
}






/* ==========================================================================
   ⚙️ READER SETTINGS MODAL STYLING (STYLE.CSS)
   ========================================================================== */

/* 1. Modal Background overlay (Agar jump-modal pehle se styled hai toh isko skips kar sakte ho) */
.jump-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Dark transparent dim screen */
    display: none; /* Controlled by JS */
    justify-content: center;
    align-items: center;
    z-index: 3000;
    backdrop-filter: blur(4px); /* Premium blur effect */
}

/* 2. Modal Center Card Box */
.jump-modal .modal-content {
    background-color: #1e293b; /* Premium slate dark background */
    color: #ffffff;
    padding: 25px;
    border-radius: 16px;
    width: 90%;
    max-width: 360px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(99, 102, 241, 0.2); /* Soft indigo border */
}

.jump-modal .modal-content h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5px;
}

/* 3. Settings List Container */
.settings-options-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
}

/* 4. Individual Setting Row (Flex layout for text and toggle placement) */
.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Icon and Text grouping */
.setting-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.setting-info i {
    font-size: 1.1rem;
    color: #6366f1; /* Indigo color theme for icons */
    width: 20px;
    text-align: center;
}

.setting-info span {
    font-size: 0.95rem;
    font-weight: 500;
}

/* ==========================================================================
   🎛️ CUSTOM TOGGLE SWITCH STYLING (IOS/MATERIAL STYLE)
   ========================================================================== */
.switch-control {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
}

/* Hide default HTML checkbox */
.switch-control input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The Slider tracks */
.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #475569; /* Gray state when OFF */
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 24px;
}

/* The internal moving circle thumb */
.switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* When checked/active -> Change background to indigo */
.switch-control input:checked + .switch-slider {
    background-color: #6366f1;
}

/* Move the circle thumb to the right when checked */
.switch-control input:checked + .switch-slider:before {
    transform: translateX(22px);
}


























/* ==========================================================================
   CYBER-VAULT SETTINGS MATRIX STYLESHEET
   ========================================================================== */

/* 1. SECTION WRAPPER & NAV */
.settings-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 80px 16px;
    font-family: 'Inter', sans-serif;
    color: #f8fafc;
}

.settings-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 35px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.settings-title-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-meta-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.settings-meta-status .status-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
}

/* 2. GRID ARCHITECTURE */
.settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .settings-grid {
        grid-template-columns: 380px 1fr;
    }
    .preferences-matrix-card {
        grid-column: 1 / -1;
    }
}

/* 3. SETTINGS CORE CARDS */
.settings-card {
    background: #090d16; /* Clean deep background match */
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s ease;
}

.settings-card:hover {
    border-color: rgba(99, 102, 241, 0.2);
}

.card-terminal-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #6366f1; /* Premium Brand Color */
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    opacity: 0.9;
}

/* 4. AVATAR CONFIGURATION CORE */
.avatar-configuration-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 10px 0;
}

.settings-avatar-frame {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    position: relative;
    padding: 4px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(255, 255, 255, 0.02));
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.settings-avatar-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: #020617;
}

.frame-glaze-overlay {
    position: absolute;
    top: 4px; left: 4px; right: 4px; bottom: 4px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.avatar-action-triggers {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 12px;
}

/* 5. CYBER BUTTONS */
.cyber-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.upload-trigger-btn {
    background: rgba(99, 102, 241, 0.06);
    color: #818cf8;
}

.upload-trigger-btn:hover {
    background: #6366f1;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

.delete-trigger-btn {
    background: rgba(239, 68, 68, 0.04);
    color: #f87171;
}

.delete-trigger-btn:hover {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

/* 6. CYBER INPUT FORMS */
.cyber-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cyber-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-node-label {
    font-size: 0.82rem;
    color: #94a3b8;
    font-weight: 500;
}

.cyber-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.cyber-input-wrapper .input-icon {
    position: absolute;
    left: 16px;
    color: #475569;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.cyber-input-wrapper input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    background: #020617; /* Slate dark base field */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 0.9rem;
    outline: none;
    transition: all 0.3s ease;
}

.cyber-input-wrapper input:focus {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(2, 6, 23, 0.8);
}

.cyber-input-wrapper input:focus ~ .input-icon {
    color: #818cf8;
}

/* Laser underline indicator simulation */
.input-focus-laser {
    position: absolute;
    bottom: 0; left: 50%;
    width: 0; height: 1px;
    background: #6366f1;
    transition: all 0.3s ease;
}

.cyber-input-wrapper input:focus ~ .input-focus-laser {
    width: 100%;
    left: 0;
    box-shadow: 0 0 8px #6366f1;
}

/* Readonly fields styling */
.readonly-node .cyber-input-wrapper input {
    background: rgba(255, 255, 255, 0.01) !important;
    color: #64748b;
    border-style: dashed;
    cursor: not-allowed;
}

.input-tip-nodes {
    font-size: 0.75rem;
    color: #475569;
    margin-top: 2px;
}

/* 7. COMMIT SAVE BUTTON */
.settings-form-actions {
    margin-top: 10px;
}

.cyber-save-btn {
    position: relative;
    width: 100%;
    background: #6366f1;
    color: white;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cyber-save-btn:hover {
    box-shadow: 0 0 25px rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
}

.cyber-save-btn:active {
    transform: translateY(1px);
}

/* Glaze shine button animation */
.btn-glaze {
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%);
    transition: all 0.6s ease;
}

.cyber-save-btn:hover .btn-glaze {
    left: 150%;
}

/* 8. PREFERENCES TOGGLE SWITCHES */
.preference-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    gap: 20px;
}

.preference-toggle-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.toggle-info h4 {
    font-size: 0.9rem;
    font-weight: 500;
    color: #e2e8f0;
    margin-bottom: 4px;
}

.toggle-info p {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}

/* Custom Cyber Switch Styling */
.cyber-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

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

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #1e293b;
    border-radius: 34px;
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: #64748b;
    border-radius: 50%;
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cyber-switch input:checked + .switch-slider {
    background-color: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
}

.cyber-switch input:checked + .switch-slider:before {
    transform: translateX(20px);
    background-color: #818cf8;
    box-shadow: 0 0 8px #6366f1;
}


/* --- NEW COMPLEMENTARY SELECT DROPDOWN PARAMETERS --- */
.cyber-select-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.select-node-label {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cyber-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.cyber-select-wrapper .select-icon {
    position: absolute;
    left: 14px;
    color: #475569;
    font-size: 0.85rem;
    pointer-events: none;
    transition: color 0.3s ease;
}

.cyber-select-node {
    width: 100%;
    padding: 12px 16px 12px 42px;
    background: #020617; /* Slate dark base field */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 0.85rem;
    outline: none;
    cursor: pointer;
    appearance: none; /* Default browser select arrow remove */
    -webkit-appearance: none;
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
}

.cyber-select-node:focus {
    border-color: rgba(99, 102, 241, 0.4);
    color: #fff;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.1);
}

.cyber-select-node:focus ~ .select-icon {
    color: #818cf8;
}

/* Disabled System Parameters Configuration */
.switch-slider.disabled-lock {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.02) !important;
    cursor: not-allowed;
}

.switch-slider.disabled-lock:before {
    background-color: #334155 !important;
    transform: translateX(20px) !important;
    box-shadow: none !important;
}

/* Mini Back Button Core Refinement */
.mini-back-btn {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s all ease;
}

.mini-back-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    color: #fff;
    border-color: rgba(99, 102, 241, 0.3);
}




















/* ==========================================================================
   YOUTUBE-STYLE FULL SCREEN SLIDING SEARCH INTERFACE
   ========================================================================== */

.search-overlay-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #020617; /* Cyber-vault deep slate ink background */
    z-index: 9999; /* Highest depth core layer */
    transform: translateX(200%); /* Completely hidden off-screen left initially */
    transition: transform 0.3s cubic-bezier(0.1, 0.9, 0.2, 1); /* Ultra smooth snappy slide */
    display: flex;
    flex-direction: column;
}

/* Active State Trigger */
.search-overlay-panel.active {
    transform: translateX(0); /* Slides right into screen grid view */
}

/* Header Node Bar Layout */
.search-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #090d16;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.search-close-btn, .voice-search-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.2rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.search-close-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.voice-search-btn {
    background: rgba(255, 255, 255, 0.03);
    color: #cbd5e1;
}

.voice-search-btn:hover {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
}

/* Dynamic Input Capsule Wrapper */
.search-input-container {
    flex: 1;
    display: flex;
    align-items: center;
    background: #1e293b; /* Dark pill container background */
    border-radius: 24px;
    padding: 2px 14px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.search-input-container form {
    display: flex;
    width: 100%;
    align-items: center;
}

.search-input-container input {
    width: 100%;
    height: 38px;
    background: transparent;
    border: none;
    outline: none;
    color: #f1f5f9;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
}

.search-input-container input::placeholder {
    color: #475569;
}

.clear-search-btn {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 1rem;
    cursor: pointer;
    padding: 0 4px;
}

/* Suggestions Node Grid List */
.search-suggestions-zone {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.suggestion-nodes-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 20px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.suggestion-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.suggestion-item i {
    font-size: 0.95rem;
}

.suggestion-item .history-icon {
    color: #64748b;
}

.suggestion-item .trending-icon {
    color: #818cf8;
}

.suggestion-item .search-icon {
    color: #475569;
}

.suggestion-item span {
    flex: 1;
    color: #cbd5e1;
    font-size: 0.92rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-item .arrow-diagonal {
    color: #475569;
    font-size: 0.8rem;
    transform: rotate(0deg); /* YouTube diagonal arrow style symmetry */
}
















/* ==========================================================================
   ST-PAGE-FLIP MASTER VIEWPORT & PERFORMANCE ENGINE (ULTRA-CLEAN TRANS-LOOK)
   ========================================================================== */

/* 1. CORE WRAPPER: Normal mode mein saari fuzool padding aur black layers hatayi */
#flipbook-wrapper {
    width: 100%;
    display: block;
    position: relative;
    margin: 0 auto;
    touch-action: none; 
    perspective: 2500px; /* Real 3D depth bending perspective */
    
    /* 🔥 CONTROLLER MODE SPACING FIX: Pure borderless clean alignment */
    background: transparent !important;
    padding: 0 !important; 
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 0px;
    box-shadow: none !important;
    border: none !important;
}

/* 2. THE MAIN ST-PAGE-FLIP ENGINE CONTAINER */
.st-page-flip-container {
    margin: 0 auto;
    display: block;
    position: relative;
    
    /* Clean natural shadow around the sheet */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    background: transparent !important; 
    overflow: visible !important; /* Page curl live shadow visualization */
}

/* 3. INDIVIDUAL HTML LAYER BLOCKS (HAR EK SHEET FRONT FACE) */
.st-html-page {
    width: 100%;
    height: 100%;
    background: transparent !important; /* 🔥 Peeche ka carbon dark block khatam */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
    
    /* Hardware acceleration on page components */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 4. THE ULTIMATE BACK-PAGE LOOK FIX (PANNA PALATATE WAQT PICHHE KA SCENE) */
.st-html-page:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* Soft light gradient trace behind paper while flipping */
    background: linear-gradient(to left, rgba(15, 23, 42, 0.15), rgba(9, 13, 22, 0.18));
    pointer-events: none;
    transform: rotateY(180deg); 
    z-index: -1;
}

/* Library direct structural back-page injection rules override */
.st-page-flip-container .--back {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* 5. THE CANVAS MATRIX (THE ACTUAL PDF TEXT CONTENT) */
.st-html-page canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain; 
    background: transparent !important; /* 🔥 Base black tint bypassed */
    
    /* Frequent animation hardware flags */
    will-change: transform;
    transform: translateZ(0);
    
    /* Book spine depth illusion (Clean Golden-Smoke Spine Layer) */
    box-shadow: inset 12px 0 18px rgba(0, 0, 0, 0.4),
                inset -4px 0 8px rgba(0, 0, 0, 0.15);
}

/* 6. FIXING THE ENGINE INTERNAL CANVAS OVERRIDES */
.st-page-flip-container canvas {
    pointer-events: none; 
}

/* 7. GLOBAL CORE VIEWPORT LAYOUT FIX */
.reader-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 auto;
    overflow: hidden;
}


/* ==========================================================================
   📱 MOBILE NORMAL-CONTROLLER VIEWPORT MATRIX (MERGED & SPILL-PROOF)
   ========================================================================== */
@media (max-width: 768px) {
    #flipbook-wrapper {
        padding: 0 !important; /* Flush edge boundaries */
        background: transparent !important;
        min-height: auto;
        display: block;
        box-shadow: none !important;
        border: none !important;
    }

    .st-page-flip-container {
        max-width: 96% !important;
        width: 100% !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    }
    
    .st-html-page {
        background: transparent !important;
        padding: 0 !important; 
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
    
    .st-html-page canvas {
        border-radius: 0px !important;
        box-shadow: inset 8px 0 12px rgba(0, 0, 0, 0.35) !important;
    }

    .st-page-flip-container .--back {
        background: transparent !important;
        box-shadow: none !important;
    }

    .st-page-flip-container::-webkit-scrollbar {
        display: none !important;
    }
}


/* ==========================================================================
   📺 NATIVE HTML5 FULLSCREEN OVERLAYS (PURE GESTURE IMMERSIVE ENGINE)
   ========================================================================== */

/* Fullscreen mode active hote hi saare navigation bar aur docks gayab */
#ReaderPage:fullscreen .reader-nav,
#ReaderPage:-webkit-full-screen .reader-nav,
#ReaderPage:fullscreen .reader-bottom-dock,
#ReaderPage:-webkit-full-screen .reader-bottom-dock,
#ReaderPage:fullscreen .reading-progress-container,
#ReaderPage:-webkit-full-screen .reading-progress-container {
    display: none !important; /* Zero-Distraction Mode Layer ON */
}

/* Fullscreen Core Engine Layout */
#ReaderPage:fullscreen,
#ReaderPage:-webkit-full-screen {
    background: #020617 !important; /* Absolute deep rich premium dark canvas */
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Immersive 100% space allocation to book wrapper */
#ReaderPage:fullscreen .reader-container,
#ReaderPage:-webkit-full-screen .reader-container {
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

#ReaderPage:fullscreen #flipbook-wrapper,
#ReaderPage:-webkit-full-screen #flipbook-wrapper {
    max-height: 100vh !important;
    width: 100% !important;
}










/* --- FIXED AUDIO PLAYER DOCK (BODY LEVEL) --- */
.audio-player-dock {
    position: fixed; /* 🔥 Changed to fixed to float over everything */
    bottom: 95px;    /* Screen ke bottom se thoda upar taaki nav dock na chhupe */
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    width: 92%;
    max-width: 380px;
    background: #0f172a; /* Solid Deep Slate Background */
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 10px 10px -5px rgba(0, 0, 0, 0.7);
    z-index: 999999 !important; /* 🔥 Sabse highest z-index taaki koi layer iske upar na aaye */
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active State */
.audio-player-dock.active {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}

.audio-player-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.audio-status-info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f1f5f9;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
}

.pulse-icon {
    color: #6366f1;
    animation: wavePulse 1.2s infinite ease-in-out;
}

@keyframes wavePulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.15); opacity: 1; color: #818cf8; }
}

.audio-controls-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.audio-controls-group button {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #f1f5f9;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.audio-controls-group button:hover {
    background: rgba(99, 102, 241, 0.3);
    color: #818cf8;
}

#audioStopBtn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}












/* --- FIXED AMBIENT POPUP (BODY LEVEL) --- */
.ambient-popup {
    position: fixed; /* 🔥 Changed to fixed to bypass layout constraints */
    top: 70px;       /* Top navbar ke just niche float karne ke liye */
    right: 20px;     /* Screen ke right corner se thodi doori */
    width: 260px;
    background: #0f172a; 
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.7);
    z-index: 9999999 !important; /* 🔥 Highest z-index fallback */
    display: none; 
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ambient-popup.show {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Baaki core inner classes same rahengi */
.ambient-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 6px;
}
.ambient-popup-header h4 {
    color: #f1f5f9;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}
.ambient-close-btn {
    background: none;
    border: none;
    color: #64748b;
    font-size: 1.2rem;
    cursor: pointer;
}
.ambient-close-btn:hover { color: #f1f5f9; }
.ambient-options-list { display: flex; flex-direction: column; gap: 6px; }
.ambient-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #94a3b8;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.ambient-item:hover { background: rgba(255, 255, 255, 0.04); color: #f1f5f9; }
.ambient-item.active {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    font-weight: 500;
    border: 1px solid rgba(99, 102, 241, 0.3);
}
.ambient-volume-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #64748b;
}
.ambient-volume-row input[type="range"] { flex: 1; accent-color: #6366f1; height: 4px; cursor: pointer; }


.ambient-mute-btn {
    background: none;
    border: none;
    color: #ef4444; /* Premium Red tone for mute function */
    font-size: 0.9rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    margin-left: auto; /* Aligns it perfectly to the right side next to close */
    margin-right: 10px;
}

.ambient-mute-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}









/* --- FREE BOOK POPUP OVERLAY --- */
.free-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(2, 6, 23, 0.85); /* Deep dark tint background */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 9999999; /* Highest overlay matrix */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.free-popup-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* POPUP CARD CONTAINER */
.free-popup-card {
    background: #0f172a; /* Deep slate theme background */
    border: 1px solid rgba(99, 102, 241, 0.3); /* Neon Indigo stroke */
    border-radius: 24px;
    padding: 30px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 30px rgba(99, 102, 241, 0.15);
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.free-popup-overlay.active .free-popup-card {
    transform: scale(1) translateY(0);
}

/* ICON GLOW DESIGN */
.free-popup-icon {
    width: 65px;
    height: 65px;
    background: rgba(168, 85, 247, 0.15); /* Purple tint */
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px auto;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
}

.free-popup-icon i {
    font-size: 1.8rem;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.free-popup-card h3 {
    color: #f8fafc;
    font-size: 1.3rem;
    margin: 0 0 10px 0;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}

.free-popup-card p {
    color: #94a3b8;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 24px 0;
}

/* ACTIONS GRID SETUP */
.free-popup-actions {
    display: flex;
    gap: 12px;
}

.free-btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: none;
}

/* Secondary Mode (Just Read Button) */
.free-btn.secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

.free-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Primary Mode (Free Purchase Button) */
.free-btn.primary {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.free-btn.primary:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.5);
    transform: translateY(-1px);
}

.free-btn:active {
    transform: translateY(1px);
}

/* CLOSE CROSS BUTTON */
.free-popup-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    color: #64748b;
    font-size: 1.4rem;
    cursor: pointer;
    transition: color 0.2s;
}

.free-popup-close:hover { color: #f1f5f9; }




















/* --- LATEST BOOKS PAGE WRAPPER --- */
#latestBooksPage {
    /* Safe dynamic backups agar global variables loaded na hon */
    background-color: var(--ink-bg, #020617);
    min-height: 100vh;
    color: var(--ink-text-main, #f8fafc);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    display: none; 
}

/* Page active class inside your router */
#latestBooksPage.active {
    display: block;
}

.latest-container-wrapper {
    max-width: 500px; /* Rigid smartphone viewport simulator */
    margin: 0 auto;
    padding-bottom: 80px; /* Safe cushion for custom bottom navigation links */
}

/* Header UI Style */
.latest-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    position: sticky;
    top: 0;
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--ink-border, rgba(255, 255, 255, 0.05));
    z-index: 100; /* High stack visibility during card translate lifts */
}

.latest-header .icon-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.2s;
}

.latest-header .icon-btn:active {
    background: rgba(255, 255, 255, 0.05);
    transform: scale(0.9);
}

.latest-header-title {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* 📱 GRID MATRIX: Strict 50% Mobile Shield Lock Layout */
.books-grid-layout {
    display: grid;
    /* 🔥 FIX 1: Strict column restriction prevents large text title expansions */
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    gap: 16px; /* High fidelity balanced aesthetic gap spacing */
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* 🚨 RE-ENFORCING CARD PARAMETERS SPECIFICALLY INSIDE LATEST RELEASES GRID */
.books-grid-layout .ink-card {
    width: 100%;
    box-sizing: border-box;
    padding: 12px; /* Adaptive grid responsive space management */
}

.books-grid-layout .card-visual {
    width: 100%;
}

.books-grid-layout .card-info {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* 🔥 FIX 2: Text Clamping Framework for Newest Book Titles */
.books-grid-layout .card-info h3 {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* Clean Truncation logic applied directly to dynamic metadata tags as well */
.books-grid-layout .meta-tags {
    display: flex;
    gap: 6px;
    width: 100%;
    overflow: hidden;
}
.books-grid-layout .meta-tags span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

















/* --- PREMIUM STORE LOGIC SCHEME --- */
#premiumBooksPage {
    background-color: var(--ink-bg);
    min-height: 100vh;
    color: var(--ink-text-main);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    display: none;
}

#premiumBooksPage.active { display: block; }

.premium-container-wrapper {
    max-width: 500px;
    margin: 0 auto;
    padding-bottom: 50px;
}

.premium-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    position: sticky;
    top: 0;
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--ink-border);
}

.premium-header .icon-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.2s;
}

.premium-header .icon-btn:active {
    background: rgba(255, 255, 255, 0.05);
    transform: scale(0.9);
}

.premium-header-title { font-size: 1.1rem; font-weight: 800; }

/* Filter Chip Display Bar */
.active-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    margin: 15px 20px 0;
    padding: 10px 16px;
    border-radius: 14px;
}

.filter-chip-text { font-size: 0.85rem; font-weight: 700; color: var(--ink-accent); }
.clear-filter-btn { background: transparent; border: none; color: #fff; cursor: pointer; font-size: 1rem; }

/* --- FILTER POPUP OVERLAY WINDOW --- */
.filter-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(12px);
    z-index: 3500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.filter-modal-overlay.active { display: flex; opacity: 1; }

.filter-modal-card {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
    max-width: 400px;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
    transform: translateY(40px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.filter-modal-overlay.active .filter-modal-card { transform: translateY(0); }

.filter-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.filter-modal-header h3 { font-size: 1.25rem; font-weight: 800; }
.modal-close-icon { background: transparent; border: none; color: var(--ink-text-muted); font-size: 1.1rem; cursor: pointer; }

.filter-subtitle { font-size: 0.85rem; color: var(--ink-text-muted); margin-bottom: 20px; }

/* Radio Grid Matrix Setup */
.filter-options-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}

.filter-radio-tile { position: relative; cursor: pointer; }
.filter-radio-tile input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

.tile-content {
    background: rgba(2, 6, 23, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 14px 10px;
    border-radius: 14px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink-text-muted);
    transition: 0.2s all ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.filter-radio-tile input[type="radio"]:checked + .tile-content {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--ink-accent);
    color: #fff;
}

.text-accent { color: var(--ink-accent); }

/* Footer Action Buttons Inside Modal */
.filter-modal-footer { display: flex; gap: 12px; }
.filter-reset-btn {
    flex: 1; height: 48px; background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px;
    color: var(--ink-text-muted); font-weight: 600; font-size: 0.9rem; cursor: pointer;
}
.filter-apply-btn {
    flex: 1; height: 48px; background: var(--ink-accent);
    border: none; border-radius: 14px; color: #fff;
    font-weight: 700; font-size: 0.9rem; cursor: pointer;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}















/* ==========================================================================
   YOUTUBE-STYLE FULL SCREEN RIGHT SLIDING VOICE SEARCH
   ========================================================================== */

.voice-overlay-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #090d16; /* Slightly darker midnight ink for focusing focus state */
    z-index: 10000; /* Stays above the standard search panel layer */
    transform: translateX(100%); /* Hidden completely on the right side initially */
    transition: transform 0.3s cubic-bezier(0.1, 0.9, 0.2, 1);
    display: flex;
    flex-direction: column;
}

/* Active State for Right Slide In Trigger */
.voice-overlay-panel.active {
    transform: translateX(0);
}

.voice-overlay-header {
    display: flex;
    justify-content: flex-end;
    padding: 16px;
}

.voice-close-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.5rem;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.voice-close-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

/* Interactive Center Core layout */
.voice-core-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 40px 24px 120px 24px;
    text-align: center;
}

.voice-status-prompt {
    color: #f1f5f9;
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
}

.voice-transcript-subtext {
    color: #64748b;
    font-size: 0.95rem;
    max-width: 280px;
    line-height: 1.5;
    min-height: 50px;
}

/* --- DYNAMIC PULSING WAVE ANIMATION TARGETS --- */
.voice-mic-wave-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
}

.giant-mic-trigger {
    position: relative;
    width: 80px;
    height: 80px;
    background: #ef4444; /* Premium YouTube red mic active shade */
    border: none;
    border-radius: 50%;
    color: #ffffff;
    font-size: 2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: 0 10px 25px rgba(239, 68, 68, 0.4);
}

.voice-pulse-ring {
    position: absolute;
    width: 80px;
    height: 80px;
    background: rgba(239, 68, 68, 0.25);
    border-radius: 50%;
    animation: voicePulseEffect 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
    z-index: 1;
}

.ring-2 {
    animation-delay: 0.6s;
}

@keyframes voicePulseEffect {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}












/* ==========================================================================
   📦 WISHLIST MULTI-SELECTION SYSTEM DESIGN TOKENS
   ========================================================================== */
.wishlist-screen-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #020617; /* Dark navy brand accent color code (#020617) */
    color: #f8fafc;
}

.wishlist-header {
    background: #090d16;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 12px 16px;
    min-height: 60px;
}

.header-mode-standard, .header-mode-selection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.selection-left-zone, .selection-actions-zone {
    display: flex;
    align-items: center;
    gap: 16px;
}

.selection-count {
    font-size: 1.05rem;
    font-weight: 600;
    color: #38bdf8;
}

.action-text-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.action-text-btn:hover { color: #f8fafc; }

.action-icon-danger-btn {
    background: rgba(239, 68, 68, 0.1);
    border: none;
    color: #ef4444;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.2s ease;
}

.action-icon-danger-btn:hover {
    background: #ef4444;
    color: #fff;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}

/* GRID CONTROLLERS */
.wishlist-grid-scroll-pane {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.wishlist-dynamic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

/* WISHLIST SMART BOOK CARD */
.wishlist-book-node {
    position: relative;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    user-select: none; /* Disables web text selections during active longpress triggers */
    -webkit-user-select: none;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.wishlist-book-node:active { transform: scale(0.97); }

.wishlist-card-cover-wrap {
    position: relative;
    aspect-ratio: 2/3;
    background: #1e293b;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
}

.wishlist-card-cover-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* MULTI-SELECT CHECK OVERLAY SHIELD */
.card-selection-shield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 6, 23, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 3;
}

.card-selection-shield i {
    background: #38bdf8;
    color: #020617;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transform: scale(0.5);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ACTIVE SELECTION STATES */
.wishlist-book-node.selected-state {
    border-color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.15);
}

.wishlist-book-node.selected-state .card-selection-shield {
    opacity: 1;
}

.wishlist-book-node.selected-state .card-selection-shield i {
    transform: scale(1);
}

/* LOWER CARD CONTENT SYSTEM */
.wishlist-card-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wishlist-card-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wishlist-card-author {
    font-size: 0.74rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* PAGINATION MODULE */
.pagination-trigger-zone {
    display: flex;
    justify-content: center;
    padding: 24px 0 40px 0;
}

.load-more-btn {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.load-more-btn:hover {
    color: #fff;
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.15);
}














/* ========================================================== */
/* 🎁 FLOATING REWARD CIRCULAR WIDGET STYLING                */
/* ========================================================== */

.ti-floating-reward-widget {
    position: fixed;
    bottom: 25px; /* Screen ke bottom se distance */
    left: 25px;  /* Screen ke right se distance */
    width: 56px;   /* Perfectly compact circular footprint */
    height: 56px;
    border-radius: 50%; /* Makes it perfectly circular */
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); /* Premium Neon Gradient */
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 25px rgba(168, 85, 247, 0.4), 
                inset 0 0 12px rgba(255, 255, 255, 0.2);
    cursor: pointer;
    z-index: 9999; /* Ensures yeh baaki sabhi elements ke hamesha upar rahe */
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

/* Inside Center Icon/Emoji Adjustments */
.ti-floating-reward-widget .widget-icon {
    font-size: 1.35rem;
    line-height: 1;
    z-index: 3;
    animation: widgetWiggle 3s ease-in-out infinite; /* Continuous micro-animation to draw attention */
}

/* Small Live Status Notification Counter Badge */
.widget-status-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ef4444; /* High-alert notification red */
    color: #ffffff;
    font-family: monospace;
    font-size: 0.65rem;
    font-weight: 900;
    min-width: 18px;
    height: 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 1px solid #020617;
    z-index: 4;
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4);
}

/* ⚡ Dynamic Glow Ping Ring (Radar Visual Wave effect) */
.widget-ping-ring {
    position: absolute;
    inset: -4px;
    border: 2px solid rgba(168, 85, 247, 0.5);
    border-radius: 50%;
    z-index: 1;
    animation: widgetRadar 2s cubic-bezier(0.25, 0, 0, 1) infinite;
    pointer-events: none;
}

/* --- MICRO-ANIMATIONS KEYFRAMES --- */
@keyframes widgetWiggle {
    0%, 90%, 100% { transform: rotate(0deg) scale(1); }
    92% { transform: rotate(-15deg) scale(1.1); }
    94% { transform: rotate(12deg) scale(1.1); }
    96% { transform: rotate(-10deg) scale(1.1); }
    98% { transform: rotate(8deg) scale(1.1); }
}

@keyframes widgetRadar {
    0% { transform: scale(0.85); opacity: 1; }
    100% { transform: scale(1.3); opacity: 0; }
}

/* --- HOVER & ACTIVE INTERACTIONS --- */
.ti-floating-reward-widget:hover {
    transform: scale(1.08) translateY(-3px); /* Subtle hover lift */
    box-shadow: 0 15px 30px rgba(168, 85, 247, 0.6), 
                0 0 20px rgba(99, 102, 241, 0.4);
}

.ti-floating-reward-widget:active {
    transform: scale(0.95) translateY(0); /* Press down feedback click feel */
}

/* --- MOBILE BREAKPOINT ADJUSTMENT (Stays clean on mobile screens) --- */
@media (max-width: 768px) {
    .ti-floating-reward-widget {
        bottom: 16px; /* Squeeze down slightly closer to edges on mobile screen limits */
        right: 16px;
        width: 48px;  /* Slightly smaller profile for compact phone views */
        height: 48px;
    }
    .ti-floating-reward-widget .widget-icon {
        font-size: 1.15rem;
    }
}









/* ========================================================== */
/* 🎛️ DYNAMIC REWARD MODAL GLASSMORPHISM STYLING            */
/* ========================================================== */

/* Backdrop Overlay Blur Layout */
.ti-reward-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.75); /* Dark translucent background */
    backdrop-filter: blur(12px); /* High fidelity premium blur effect */
    -webkit-backdrop-filter: blur(12px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000; /* Floating widget button se bhi upar */
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 20px;
}

/* Smooth Fade-in Animation State trigger via JS */
.ti-reward-overlay.modal-active {
    opacity: 1;
}

/* Central Dashboard Container Card */
.reward-modal-card {
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 24px;
    width: 100%;
    max-width: 420px; /* Sized perfectly for mobile and desktop viewports */
    padding: 28px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), 
                inset 0 0 24px rgba(99, 102, 241, 0.05);
    transform: scale(0.9) translateY(15px);
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ti-reward-overlay.modal-active .reward-modal-card {
    transform: scale(1) translateY(0); /* Bounce pop up effect */
}

/* --- HEADER MODULE --- */
.reward-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.reward-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reward-pulse-dot {
    width: 8px;
    height: 8px;
    background: #a855f7;
    border-radius: 50%;
    box-shadow: 0 0 10px #a855f7;
    animation: livePulse 1s ease-in-out infinite alternate;
}

.reward-title-group h2 {
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 1px;
    font-family: system-ui, -apple-system, sans-serif;
}

.reward-close-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}
.reward-close-btn:hover { background: rgba(239, 68, 68, 0.2); color: #ffffff; border-color: rgba(239, 68, 68, 0.4); }

/* --- WALLET COIN SECTION --- */
.reward-wallet-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.wallet-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
}

.wallet-amount {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.4rem;
    font-weight: 900;
    color: #ffffff;
    font-family: monospace;
}

.coin-glow-icon {
    filter: drop-shadow(0 0 8px #eab308);
    animation: coinSpin 4s linear infinite;
}

/* --- PROGRESS GAUGE BAR --- */
.reward-progress-grid {
    margin-bottom: 25px;
}

.progress-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}

.progress-info-row strong { color: #6366f1; font-family: monospace; }

.modal-progress-bar-bg {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.modal-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    border-radius: 10px;
    transition: width 0.5s ease-in-out;
}

.reward-hint-text {
    font-size: 0.68rem;
    color: rgba(248, 250, 252, 0.4);
    line-height: 1.4;
}

/* --- ACTION TRIGGER BUTTON & COOLDOWN ZONE --- */
.reward-action-zone {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.modal-watch-ad-btn {
    width: 100%;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    color: #ffffff;
    border: none;
    padding: 16px;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 1px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 8px 20px rgba(168, 85, 247, 0.3);
    transition: transform 0.2s active, box-shadow 0.3s;
}
.modal-watch-ad-btn:hover { box-shadow: 0 12px 25px rgba(168, 85, 247, 0.5); }
.modal-watch-ad-btn:active { transform: scale(0.98); }

/* Cooldown Blocking Overlay Layer */
.cooldown-lock-layer {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.9);
    border: 1px dashed rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    z-index: 5;
}

.cooldown-lock-layer strong { color: #ef4444; font-family: monospace; font-size: 0.9rem; }

/* --- COUPON REVEAL CABINET --- */
.modal-coupon-reveal {
    margin-top: 25px;
    background: rgba(34, 197, 94, 0.04);
    border: 1px dashed rgba(34, 197, 94, 0.3);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    animation: cardSlideUp 0.4s ease-out;
}

.coupon-alert-badge {
    color: #22c55e;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.coupon-code-wrapper {
    background: rgba(2, 6, 23, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.coupon-code-wrapper code {
    font-family: monospace;
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 2px;
}

.coupon-expiry-note { font-size: 0.65rem; color: rgba(255,255,255,0.4); margin-bottom: 15px; }

.coupon-claim-btn {
    width: 100%;
    background: #22c55e;
    color: #ffffff;
    border: none;
    padding: 12px;
    font-weight: 800;
    font-size: 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}
.coupon-claim-btn:hover { background: #16a34a; box-shadow: 0 0 15px rgba(34, 197, 94, 0.4); }

/* --- STRUCTURAL ANIMATIONS --- */
@keyframes livePulse { 0% { opacity: 0.3; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.1); } }
@keyframes coinSpin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
@keyframes cardSlideUp { 0% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

/* --- SMALL MOBILE FIXES --- */
@media (max-width: 480px) {
    .reward-modal-card { padding: 20px; }
    .reward-title-group h2 { font-size: 1rem; }
    .wallet-amount { font-size: 1.2rem; }
}



















/* =========================================================================
   🔮 MODERN GLASSMORPHIC PDF UPLOAD MODAL SCHEME
   ========================================================================= */
.pdf-upload-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pdf-upload-modal-card {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 24px;
    width: 100%;
    max-width: 460px;
    padding: 32px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5),
                inset 0 0 20px rgba(99, 102, 241, 0.05);
}

.animate-modal-in {
    animation: modalSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.1rem;
    cursor: pointer;
    transition: color 0.2s;
}
.modal-close-btn:hover { color: #ef4444; }

.modal-header-block h3 {
    margin: 0 0 6px 0;
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.modal-header-block p {
    margin: 0 0 24px 0;
    color: rgba(248, 250, 252, 0.5);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* 📥 DRAG & DROP ZONE DESIGN */
.upload-drop-zone {
    border: 2px dashed rgba(99, 102, 241, 0.3);
    background: rgba(30, 41, 59, 0.4);
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
}
.upload-drop-zone:hover {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.05);
}
.upload-drop-zone.file-attached {
    border-style: dashed;
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.02);
}

.upload-icon-wrap {
    font-size: 2.2rem;
    color: #6366f1;
    margin-bottom: 12px;
}
.main-upload-text {
    color: #ffffff;
    font-size: 0.9rem;
    margin: 0 0 4px 0;
    font-weight: 500;
}
.browse-highlight {
    color: #a855f7;
    text-decoration: underline;
    font-weight: 600;
}
.sub-upload-text {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
    margin: 0;
}

/* 📁 FILE METADATA CONTAINER */
.selected-file-feedback {
    margin-top: 18px;
    background: rgba(2, 6, 23, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 12px 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.feedback-pdf-icon {
    font-size: 1.6rem;
    color: #ef4444;
}
.file-meta { display: flex; flex-direction: column; gap: 2px; overflow: hidden;}
.file-name-txt {
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.file-size-txt {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

/* 🚀 INTERACTIVE ACTION BUTTON */
.action-read-btn {
    width: 100%;
    margin-top: 24px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #ffffff;
    border: none;
    padding: 14px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: opacity 0.2s, transform 0.2s;
}
.action-read-btn:active { transform: scale(0.98); }
.action-read-btn.disabled-state {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.2);
    cursor: not-allowed;
}

@keyframes modalSlideUp {
    0% { transform: translateY(30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}




















/* ========================================================================= */
/* 🪐 SLEEK HORIZONTAL CATEGORIES MENU ARCHITECTURE                          */
/* ========================================================================= */
.ti-categories-navbar {
    width: 100%;
    padding: 14px 20px;
    background: transparent;
    overflow: hidden;
    margin: 8px 0;
    box-sizing: border-box;
}

/* Horizontal Scroll Controller Frame */
.categories-scroll-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 8px; /* Safe line height for scroll glow */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Butter smooth scrolling for mobile touch */
}

/* Hide Default Desktop Scrollbar for Ultra Minimal Visuals */
.categories-scroll-wrapper::-webkit-scrollbar {
    height: 4px; /* Thin subtle scroll tracer */
}

.categories-scroll-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.categories-scroll-wrapper::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.15); /* Subtle Indigo indicator on desktop drag */
    border-radius: 10px;
}

/* Premium Category Action Pills Styling */
.category-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(15, 23, 42, 0.5); /* Semi-transparent background matching app style */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    color: #94a3b8; /* Muted slate text initialization */
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    user-select: none;
    -webkit-user-select: none;
}

/* Category Hover States for Interactive Feel */
.category-pill:hover {
    color: #ffffff;
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-1px);
}

/* Active Category Configuration Matrix (Indigo Laser Glow) */
.category-pill.active {
    color: #ffffff;
    background: linear-gradient(135deg, #6366f1, #4f46e5); /* Solid premium Indigo signature gradient */
    border-color: #6366f1;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35); /* Cyber glow effect under active pill */
    font-weight: 600;
}

/* Icon Accents Inside Pills */
.category-pill i {
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.category-pill.active i {
    color: #ffffff;
}

/* Responsive Adaptive Adjustments for Micro Device Boundaries */
@media (max-width: 480px) {
    .ti-categories-navbar {
        padding: 10px 15px;
        margin: 4px 0;
    }
    .category-pill {
        padding: 8px 14px;
        font-size: 0.8rem;
    }
}

/* ========================================================================= */
/* 🪐 SLEEK HORIZONTAL CATEGORIES MENU ARCHITECTURE                          */
/* ========================================================================= */
.ti-categories-navbar {
    width: 100%;
    padding: 14px 20px;
    background: transparent;
    overflow: hidden;
    margin: 8px 0;
    box-sizing: border-box;
}

/* Horizontal Scroll Controller Frame */
.categories-scroll-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 8px; /* Safe line height for scroll glow */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Butter smooth scrolling for mobile touch */
}

/* Hide Default Desktop Scrollbar for Ultra Minimal Visuals */
.categories-scroll-wrapper::-webkit-scrollbar {
    height: 4px; /* Thin subtle scroll tracer */
}

.categories-scroll-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.categories-scroll-wrapper::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.15); /* Subtle Indigo indicator on desktop drag */
    border-radius: 10px;
}

/* Premium Category Action Pills Styling */
.category-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(15, 23, 42, 0.5); /* Semi-transparent background matching app style */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    color: #94a3b8; /* Muted slate text initialization */
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    user-select: none;
    -webkit-user-select: none;
}

/* Category Hover States for Interactive Feel */
.category-pill:hover {
    color: #ffffff;
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-1px);
}

/* Active Category Configuration Matrix (Indigo Laser Glow) */
.category-pill.active {
    color: #ffffff;
    background: linear-gradient(135deg, #6366f1, #4f46e5); /* Solid premium Indigo signature gradient */
    border-color: #6366f1;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35); /* Cyber glow effect under active pill */
    font-weight: 600;
}

/* Icon Accents Inside Pills */
.category-pill i {
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.category-pill.active i {
    color: #ffffff;
}

/* Responsive Adaptive Adjustments for Micro Device Boundaries */
@media (max-width: 480px) {
    .ti-categories-navbar {
        padding: 10px 15px;
        margin: 4px 0;
    }
    .category-pill {
        padding: 8px 14px;
        font-size: 0.8rem;
    }
}

/* ========================================================================= */
/* 🪐 SLEEK HORIZONTAL CATEGORIES MENU ARCHITECTURE (FIXED STICKY LOGIC)     */
/* ========================================================================= */
.ti-categories-navbar {
    width: 100%;
    padding: 14px 20px;
    
    /* 🔴 STICKY FIX ENGINES */
    position: -webkit-sticky; /* Safari support */
    position: sticky;         /* Element ko scroll par lock karega */
    
    /* 📐 TOP NAV HEIGHT OFFSET
       Tumhare top navbar ki estimated height ~88px hai padding aur font size ko mila kar.
       Isliye humne isko thik uske niche se start kiya hai. */
    top: 86px; 
    
    /* 🔒 SOLID BRANDING BACKGROUND
       Pehle background transparent tha. Agar transparent rahega toh jab books upar scroll hongi,
       to woh text is navbar ke peeche dhundhla sa dikhega jo ganda lagta hai. 
       Isliye humne top-nav wala strict navy variable use kiya hai. */
    background: #020617; 
    
    /* 🥞 LAYERING MATRIX
       Top navbar ka z-index 9999 hai, isliye humne iska z-index 9990 rakho 
       taaki yeh books ke upar rahe par side-drawer aur main top-nav ke peeche safely chale. */
    z-index: 9990; 
    
    overflow: hidden;
    margin: 0; /* Margin top-bottom ko 0 kiya taaki gap mein se white space ya cards leak na ho */
    box-sizing: border-box;
    
    /* ✨ PREMIUM TRANSITION INTEGRATION */
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    will-change: top;
}





/* --- 🪐 FUTURE-PROOF APP-OPEN AD INFRASTRUCTURE --- */
.app-ad-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 99999;
    display: none; /* Controlled strictly by JS Logic */
    align-items: center; justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    animation: adFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ad-card-wrapper {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%; max-width: 380px;
    border-radius: 28px;
    padding: 35px 24px 24px;
    position: relative;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
}

.ad-badge {
    position: absolute; top: 16px; left: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2px 8px; border-radius: 6px;
    font-size: 0.65rem; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: 1px;
}

.ad-close-trigger {
    position: absolute; top: 14px; right: 20px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.04); border: none;
    color: #64748b; font-size: 1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.ad-close-trigger:active { transform: scale(0.9); background: rgba(255, 255, 255, 0.1); color: #fff; }

/* Ad Slot Box Dimensions Setup */
.ad-content-slot {
    min-height: 280px; /* Standard Responsive Google Ad Unit Container height */
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    margin-top: 15px;
}

/* Shimmer Loading State style */
.ad-loading-shimmer {
    color: #6366f1; font-size: 1.5rem;
}
.ad-loading-shimmer p {
    font-size: 0.85rem; color: #64748b; margin-top: 10px; font-family: 'Inter', sans-serif;
}

/* Dynamic Core Animations */
@keyframes adFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes adFadeOut { from { opacity: 1; } to { opacity: 0; } }






























/* --- HYPER-MOTION APP-DOCK FOOTER CORE CORE --- */
.ti-core-footer {
    --f-navy: #020617;
    --f-accent: #6366f1;
    --f-glow: #a855f7;
    --f-white: #f8fafc;
    --f-border: rgba(255, 255, 255, 0.04);
    --f-surface: #070b19;
    
    background: linear-gradient(180deg, var(--f-navy) 0%, var(--f-surface) 100%);
    border-top: 1px solid var(--f-border);
    padding: 60px 0 20px 0;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Moving Laser Top Border Effect */
.footer-laser-line {
    position: absolute;
    top: -1px; left: 0; width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--f-accent), var(--f-glow), transparent);
    background-size: 200% auto;
    animation: footerLaserShift 6s linear infinite;
}
@keyframes footerLaserShift { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }

/* Structure Layout Wrapper */
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 40px;
}

/* Brand Branding Typography Frame */
.footer-brand-section .footer-logo {
    font-family: 'Syncopate', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--f-white);
    letter-spacing: 2px;
    margin-bottom: 16px;
}
.footer-brand-section .footer-logo .logo-dot {
    color: var(--f-accent);
}
.footer-tagline {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 320px;
    margin-bottom: 24px;
}

/* Micro-Animated App Style Links */
.footer-heading {
    font-family: 'Syncopate', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #475569;
    letter-spacing: 1px;
    margin-bottom: 20px;
    font-weight: 800;
}
.links-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.app-link-node {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.app-link-node .link-icon {
    color: #475569;
    font-size: 1rem;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s;
}
.app-link-node:hover {
    background: rgba(99, 102, 241, 0.06);
    color: var(--f-white);
    border-color: rgba(99, 102, 241, 0.15);
    transform: translateX(4px);
}
.app-link-node:hover .link-icon {
    color: var(--f-accent);
    transform: scale(1.2) rotate(-5deg);
}

/* Futuristic Social Grid Controller Nodes */
.footer-social-grid {
    display: flex;
    gap: 12px;
}
.social-node {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--f-border);
    color: #94a3b8;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.social-node:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.4);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
}

/* Bottom Copyright Bar */
.footer-meta-bar {
    max-width: 1200px; margin: 40px auto 0 auto;
    padding: 20px 5% 0 5%;
    border-top: 1px solid rgba(255, 255, 255, 0.02);
    display: flex; justify-content: space-between;
    color: #334155; font-size: 0.8rem; font-weight: 500;
}

/* ========================================================================= */
/* 📱 ULTRA-PWA ADAPTIVE MOBILE BREAKPOINT MAPPING                           */
/* ========================================================================= */
@media (max-width: 768px) {
    /* Pure App Bottom Nav Bar transformation setup */
    .ti-core-footer {
        padding: 30px 0 90px 0; /* Extra space at bottom so app content doesn't get cut by screen */
    }
    .footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    .footer-brand-section .footer-tagline {
        margin: 12px auto 20px auto;
    }
    .footer-social-grid {
        justify-content: center;
    }
    .links-grid {
        align-items: center;
    }
    .app-link-node {
        width: 80%;
        justify-content: center;
    }
    .footer-meta-bar {
        text-align: center;
        justify-content: center;
    }
}





















/* --- 🪐 COIN GATEWAY MODAL LOGIC SYSTEM --- */
.coin-modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 9999999 !important;
    display: none; /* Controlled strictly by JS Engine */
    align-items: center; justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Central Elastic Premium Card Structure */
.coin-modal-card {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%; max-width: 400px;
    border-radius: 32px;
    padding: 36px 24px 28px;
    position: relative;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7);
    box-sizing: border-box;
    animation: modalElasticPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.coin-modal-close {
    position: absolute; top: 20px; right: 24px;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.04); border: none;
    color: #64748b; font-size: 1.1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.coin-modal-close:active { transform: scale(0.85); background: rgba(255, 255, 255, 0.1); color: #fff; }

/* Header & Current Wallet style */
.coin-modal-header { text-align: center; margin-bottom: 24px; }
.wallet-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    padding: 6px 14px; border-radius: 50px;
    font-size: 0.85rem; color: #818cf8; font-weight: 600; margin-bottom: 16px;
}
.wallet-badge i { font-size: 0.95rem; }
.coin-modal-header h2 { font-size: 1.5rem; font-weight: 800; color: #fff; margin: 0 0 6px 0; }
.coin-modal-header p { font-size: 0.85rem; color: #94a3b8; margin: 0; line-height: 1.4; }

/* Error Warning Dynamic Alert Toast */
.modal-error-toast {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 14px; padding: 12px 16px;
    display: flex; align-items: center; gap: 10px;
    color: #f87171; font-size: 0.85rem; font-weight: 600;
    margin-bottom: 20px; text-align: left;
    animation: toastShake 0.3s ease-in-out;
}

/* Gateway Interactive Selection Cards Layout */
.gateway-options-grid { display: flex; flex-direction: column; gap: 14px; }
.gateway-card-btn {
    width: 100%; display: flex; align-items: center; gap: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px; padding: 16px; cursor: pointer;
    text-align: left; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}
.gateway-card-btn:active { transform: scale(0.97); background: rgba(255, 255, 255, 0.06); }

/* Decorative Icon Enclosures */
.gate-icon-wrapper {
    width: 46px; height: 46px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.gold-glow { background: rgba(245, 158, 11, 0.1); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.15); }
.blue-glow { background: rgba(16, 185, 129, 0.1); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.15); }

.gate-info-meta { display: flex; flex-direction: column; flex-grow: 1; }
.gate-title { font-size: 0.8rem; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.gate-cost-cost { font-size: 1.2rem; color: #fff; font-weight: 800; margin-top: 2px; }
.gate-action-arrow { color: #475569; font-size: 0.9rem; transition: transform 0.2s; }
.gateway-card-btn:active .gate-action-arrow { transform: translateX(3px); color: #fff; }

/* Central Visual Module Divider */
.gateway-divider {
    text-align: center; position: relative; margin: 4px 0;
}
.gateway-divider::before {
    content: ""; position: absolute; top: 50%; left: 0; width: 100%;
    height: 1px; background: rgba(255, 255, 255, 0.06); z-index: 1;
}
.gateway-divider span {
    position: relative; z-index: 2; background: #0f172a;
    padding: 0 12px; font-size: 0.75rem; font-weight: 700; color: #475569;
}

/* System Base Keyframe Core Definitions */
@keyframes modalElasticPop {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes toastShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}



















/* --- 🚨 CONFIRMATION LAYER MODULE STYLES --- */
.confirm-modal-overlay {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(2, 6, 23, 0.9); /* Dark background veil */
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    z-index: 99999999 !important; /* Stacked right above coin modal */
    display: none; align-items: center; justify-content: center;
    padding: 20px; box-sizing: border-box;
}

.confirm-modal-card {
    background: #0f172a; border: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%; max-width: 340px; border-radius: 24px; padding: 28px 20px;
    text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    animation: confirmElasticPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
}

.confirm-icon-wrapper {
    width: 56px; height: 56px; background: rgba(99, 102, 241, 0.1);
    color: #6366f1; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 16px;
}

.confirm-modal-card h3 { font-size: 1.25rem; font-weight: 800; color: #fff; margin: 0 0 8px 0; }
.confirm-modal-card p { font-size: 0.85rem; color: #94a3b8; margin: 0 0 24px 0; line-height: 1.4; }

.confirm-actions-row { display: flex; gap: 12px; }
.confirm-cancel-btn {
    flex: 1; height: 44px; background: rgba(255, 255, 255, 0.04); border: none;
    border-radius: 12px; color: #64748b; font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.confirm-proceed-btn {
    flex: 1; height: 44px; background: #6366f1; border: none;
    border-radius: 12px; color: #fff; font-size: 0.9rem; font-weight: 600; cursor: pointer;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}
.confirm-cancel-btn:active, .confirm-proceed-btn:active { transform: scale(0.96); }

@keyframes confirmElasticPop {
    from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; }
}









/* =======================================================
   TALKINK SYSTEMS CORE TYPOGRAPHY & MANIFESTO MATRIX CSS
   ======================================================= */

.ti-core-manifesto-v3 {
    background-color: #020617; /* Matches specified dark base */
    color: #94a3b8;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    padding: 80px 24px;
    margin: 60px auto;
    border-top: 1px solid rgba(99, 102, 241, 0.05);
    border-bottom: 1px solid rgba(99, 102, 241, 0.05);
    position: relative;
    overflow: hidden;
}

.ti-manifesto-grid-container {
    max-width: 1140px;
    margin: 0 auto;
}

/* Status Line & Pulse Animation */
.ti-matrix-status-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
}

.ti-pulse-node {
    width: 6px;
    height: 6px;
    background-color: #6366f1;
    border-radius: 50%;
    box-shadow: 0 0 10px #6366f1;
    animation: tiCoreGlowPulse 2s infinite ease-in-out;
}

.ti-spec-caps {
    font-family: 'Syncopate', 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #6366f1;
    text-transform: uppercase;
}

/* Premium Typography Accents */
.ti-cyber-glow-title {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.15;
    margin: 0 0 25px 0;
    text-align: center;
}

.ti-manifesto-abstract {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #94a3b8;
    max-width: 840px;
    margin: 0 auto 60px auto;
    text-align: center;
    font-weight: 400;
}

.ti-section-vector-title {
    font-family: 'Syncopate', sans-serif;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 35px;
    text-transform: uppercase;
    opacity: 0.85;
}

/* Scoped Vector Matrix Grid Layout */
.ti-manifesto-pillars-section {
    margin-bottom: 60px;
}

.ti-vector-matrix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.ti-vector-card {
    background: rgba(3, 7, 28, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 30px 24px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ti-vector-card:hover {
    border-color: rgba(99, 102, 241, 0.2);
    transform: translateY(-2px);
}

.ti-card-laser-edge {
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
}

.ti-card-index {
    display: block;
    font-family: 'Syncopate', sans-serif;
    font-size: 0.8rem;
    color: rgba(99, 102, 241, 0.4);
    margin-bottom: 15px;
    font-weight: 700;
}

.ti-vector-card h4 {
    color: #f8fafc;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 12px 0;
    letter-spacing: -0.01em;
}

.ti-vector-card p {
    font-size: 0.88rem;
    line-height: 1.65;
    color: #64748b;
    margin: 0;
}

/* Specs Panel Block Rows */
.ti-specs-panel-row {
    margin-bottom: 60px;
}

.ti-specs-flex-matrix {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ti-spec-item-box {
    background: rgba(255, 255, 255, 0.01);
    border-left: 2px solid rgba(168, 85, 247, 0.2);
    padding: 24px;
    border-radius: 0 8px 8px 0;
    transition: border-color 0.2s;
}

.ti-spec-item-box:hover {
    border-left-color: #a855f7;
}

.ti-spec-item-header {
    margin-bottom: 8px;
}

.ti-cyber-accent {
    font-family: 'Syncopate', sans-serif;
    color: #a855f7;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.ti-cyber-accent i {
    margin-right: 8px;
    font-size: 0.85rem;
}

.ti-spec-item-box p {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

/* Executive Vault Manifest Block */
.ti-manifesto-executive-vault {
    background: linear-gradient(180deg, rgba(3, 7, 28, 0.6) 0%, rgba(2, 6, 23, 0.9) 100%);
    border: 1px solid rgba(99, 102, 241, 0.08);
    border-radius: 16px;
    padding: 40px 30px;
    position: relative;
    text-align: center;
    margin-bottom: 50px;
}

.ti-executive-quote {
    font-size: 1.15rem;
    line-height: 1.75;
    color: #e2e8f0;
    font-style: italic;
    max-width: 880px;
    margin: 0 auto 25px auto;
    font-weight: 300;
}

.ti-executive-signature .ti-sig-name {
    display: block;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ti-executive-signature .ti-sig-title {
    font-family: 'Syncopate', sans-serif;
    font-size: 0.68rem;
    color: #64748b;
    letter-spacing: 1px;
    margin-top: 4px;
    display: block;
}

/* Compliance Interface Details */
.ti-manifesto-compliance-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.02);
}

.ti-compliance-node {
    font-size: 0.8rem;
    color: #475569;
    font-weight: 500;
}

.ti-compliance-node i {
    margin-right: 6px;
    color: rgba(99, 102, 241, 0.4);
}

/* System Animation Frames */
@keyframes tiCoreGlowPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* Mobile Spatial Scaling */
@media (max-width: 768px) {
    .ti-core-manifesto-v3 { padding: 50px 16px; }
    .ti-cyber-glow-title { font-size: 1.85rem; }
    .ti-manifesto-abstract { font-size: 0.95rem; margin-bottom: 40px; }
    .ti-manifesto-compliance-footer { flex-direction: column; text-align: center; gap: 10px; }
}