/* ========================================= */
/* CORE VARIABLES & BASE STYLES              */
/* ========================================= */
:root {
    --primary: #00d2ff;
    --secondary: #3a7bd5;
    --bg: #0b0e14;
    --glass: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text: #e0e6ed;
    --text-dim: #94a3b8;
    --max-width: 1680px;
}

* { box-sizing: border-box; }

body { 
    font-family: 'Inter', sans-serif; 
    background: radial-gradient(circle at top right, #1e293b, #0b0e14); 
    color: var(--text); 
    margin: 0; 
    min-height: 100vh;
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

a { text-decoration: none; transition: all 0.3s ease; }
p { line-height: 1.8; color: #999; }

/* ========================================= */
/* PREMIUM GLASS SCROLLBAR                   */
/* ========================================= */
::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(0, 210, 255, 0.2); border-radius: 10px; border: 4px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ========================================= */
/* PREMIUM LIGHT MODE THEME OVERRIDES        */
/* ========================================= */
:root.light-mode {
    --primary: var(--light-primary);
    --bg: #f3f4f6; 
    --card-bg: #ffffff; 
    --glass: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(0, 0, 0, 0.06); 
    --text: #111827; 
    --text-dim: #4b5563; 
}
:root.light-mode body { background: var(--bg); }
:root.light-mode .section-header::after { background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%); opacity: 0.4; box-shadow: none; animation: none; }
:root.light-mode .stat-box, :root.light-mode .profile-bio-text { background: #f9fafb; border: 1px solid rgba(0, 0, 0, 0.05); }

/* ========================================= */
/* ANIMATED GLOWING SECTION DIVIDERS         */
/* ========================================= */
.section-header {
    font-size: 1.2rem; color: var(--primary); text-transform: uppercase;
    letter-spacing: 2px; margin: 80px 0 30px; display: flex; align-items: center; gap: 15px;
}
.section-header::after { 
    content: ""; flex: 1; height: 1.5px; 
    background: linear-gradient(90deg, transparent 0%, rgba(0, 210, 255, var(--glow-core)) 50%, transparent 100%);
    border-radius: 2px; transform-origin: center; animation: centerPulse 3s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}
@keyframes centerPulse {
    0% { transform: scaleX(0.02); opacity: 0.1; box-shadow: 0 0 2px rgba(0, 210, 255, 0.1); }
    100% { transform: scaleX(1); opacity: var(--glow-opacity); box-shadow: 0 0 10px rgba(0, 210, 255, var(--glow-shadow)); }
}

/* ========================================= */
/* GLOBAL LOADERS                            */
/* ========================================= */
#loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1001; }
#loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #3498db; animation: spin 2s linear infinite; z-index: 1002; }
#loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #e74c3c; animation: spin 3s linear infinite; }
#loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #f9c922; animation: spin 1.5s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#loader-wrapper .loader-section { position: fixed; top: 0; width: 51%; height: 100%; background: #222222; z-index: 1001; }
#loader-wrapper .section-left { left: 0; }
#loader-wrapper .section-right { right: 0; }
.loaded #loader-wrapper .section-left { transform: translateX(-100%); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); }
.loaded #loader-wrapper .section-right { transform: translateX(100%); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); }
.loaded #loader { opacity: 0; transition: all 0.3s ease-out; }
.loaded #loader-wrapper { visibility: hidden; transform: translateY(-100%); transition: all 0.3s 1s ease-out; }