:root {
    --primary: #FFAA2C;
    --secondary: #2c87ff;
    --dark: #1A1A1A;
    --darker: #F8F9FA;
    --light: #F8F9FA;
    --accent: #FF6B2C;
    --success: #2CFF57;
    --transition-speed: 0.3s;
    --shadow-hover: 0 4px 12px rgba(44, 142, 255, 0.4);
    --header-bg: rgba(15, 23, 42, 0);
    --nav-link-padding: 0.625rem 1rem;
    --card-bg: rgba(15, 23, 42, 0.6);
    --text-primary: #94a3b8;
    --transparent: #ffffff00;
}

/* ===== GLOBAL RESET & BASE ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-anchor: none; font-size: 16px; }
body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    color: var(--text-primary);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    padding-top: 100px;
    line-height: 1.6;
}

body.shop-page {
    background-attachment: fixed;
    z-index: -2;
}

#particles {
    z-index: -1 !important;
}

/* ===== KEYFRAMES ===== */
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes floatUp {
  0% { transform: translate3d(0, 100%, 0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translate3d(0, -100vh, 0); opacity: 0; }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

@keyframes beat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

@keyframes slowPulse {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 0, 0, 0.4); }
    50% { box-shadow: 0 0 10px rgba(255, 50, 0, 0.9); }
}

/* ===== HEADER & NAVIGATION ===== */
header {
    background-color: var(--header-bg);
    padding: 0;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(5px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 5%;
    gap: 15px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.logo {
    font-size: clamp(1.5rem, 4vw, 1.8rem);
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    order: 1;
    flex: 0 0 30%;
    min-width: 140px;
    z-index: 1001;
    transition: transform var(--transition-speed);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.logo:hover { transform: scale(1.05); }

/* Desktop Navigation */
#desktop-nav { 
    order: 2; 
    flex: 1 1 65%; 
    min-inline-size: 0; 
    overflow: visible; 
}
#desktop-nav ul {
    display: flex; 
    justify-content: flex-end; 
    list-style: none;
    gap: clamp(0.25rem, 1vw, 0.5rem); 
    margin: 0; 
    padding: 0; 
    overflow-x: auto; 
    scrollbar-width: none; 
    flex-wrap: nowrap;
}
#desktop-nav ul::-webkit-scrollbar { display: none; }
#desktop-nav li { flex-shrink: 0; }
#desktop-nav a {
    display: inline-block; 
    padding: var(--nav-link-padding); 
    color: inherit; 
    text-decoration: none; 
    font-weight: 500; 
    border-radius: .25rem; 
    white-space: nowrap;
    transition: transform var(--transition-speed) ease, background var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
#desktop-nav a:hover, #desktop-nav a:focus-visible {
    background: var(--primary); 
    color: #fff; 
    transform: translateY(-0.1875rem); 
    box-shadow: var(--shadow-hover); 
    outline: none;
}
#desktop-nav a.active { background: var(--primary); color: #fff; }

/* Desktop User Area */
#desktop-user-area {
    margin-left: auto;
    order: 3;
}

.user-dropdown {
    position: relative;
    cursor: pointer;
}

.user-icon {
    font-size: 1.5rem;
    color: var(--light);
    transition: color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
}

.user-icon:hover {
    color: var(--secondary);
    background: rgba(255,255,255,0.2);
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background: rgba(30, 30, 40, 0.95);
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    z-index: 1000;
    border-radius: 8px;
    overflow: hidden;
    top: 100%;
    margin-top: 10px;
    backdrop-filter: blur(10px);
}

.user-dropdown:hover .dropdown-content,
.user-dropdown.active .dropdown-content {
    display: block;
    animation: fadeIn 0.3s ease-out;
}

.dropdown-content a {
    color: var(--light);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: background 0.3s;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.dropdown-content a:last-child {
    border-bottom: none;
}

.dropdown-content a:hover {
    background: rgba(44, 142, 255, 0.3);
}

/* Mobile Navigation */
.mobile-menu {
    position: fixed; 
    top: 0; 
    right: -100%; 
    width: min(85%,320px); 
    height: 100dvh; 
    background: rgba(36, 10, 10, 0.92); 
    backdrop-filter: blur(15px);
    z-index: 10000; 
    transition: right 0.4s cubic-bezier(0.22,0.61,0.36,1); 
    padding: 2rem 1.5rem; 
    box-shadow: -5px 0 25px rgba(0,0,0,0.6);
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
    border-left: 1px solid rgba(255,255,255,0.1);
}
.mobile-menu.active { right: 0; }

.mobile-menu nav ul { 
    display:flex; 
    flex-direction:column; 
    gap:1rem; 
    list-style:none; 
    padding:0; 
    margin-top:3rem; 
}
.mobile-menu nav ul li a {
    color: var(--secondary); 
    text-decoration: none; 
    padding: 1rem; 
    display:block; 
    font-size:1.2rem; 
    border-radius:.5rem;
    background: rgba(255,255,255,0.034); 
    transition: background var(--transition-speed), transform 0.2s ease; 
    backdrop-filter: blur(5px); 
    border: none; 
    margin-bottom:5px;
}
.mobile-menu nav ul li a:hover { 
    background: rgba(44,142,255,0.3); 
    transform: translateX(5px); 
}

/* Mobile User Area */
.mobile-user-area {
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 15px;
}

.mobile-user-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-user-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    color: var(--light);
    text-decoration: none;
    transition: background 0.3s;
}

.mobile-user-links a:hover {
    background: rgba(44,142,255,0.2);
}

.mobile-login-link {
    font-size: 2.5rem;
    color: var(--primary);
    text-decoration: none;
    display: block;
    text-align: center;
    background: none;
    padding: 0;
    transition: transform 0.3s ease;
}

.mobile-login-link i {
    transition: transform 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.mobile-login-link:hover i {
    transform: scale(1.1);
    color: var(--secondary);
}

/* Hamburger Menu */
.hamburger {
    background: rgba(255,255,255,0.1); 
    border: none; 
    cursor: pointer; 
    padding: 10px; 
    z-index:1002;
    order: 4;
    display: none; 
    width:44px; 
    height:44px; 
    border-radius:8px; 
    backdrop-filter: blur(10px); 
    transition: all 0.3s ease; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: relative;
}
.hamburger:hover { 
    background: rgba(255,255,255,0.2); 
    transform: scale(1.05); 
}

.hamburger-line {
    position: absolute;
    width: 24px;
    height: 3px;
    background: white;
    border-radius: 3px;
    transition: all 0.3s cubic-bezier(0.8,0.5,0.2,1.4);
    left: 10px;
}
.hamburger-line:nth-child(1){ top: 13px; }
.hamburger-line:nth-child(2){ top: 20px; }
.hamburger-line:nth-child(3){ top: 27px; }

.hamburger.active .hamburger-line:nth-child(1){
    top: 20px;
    transform: rotate(45deg);
}
.hamburger.active .hamburger-line:nth-child(2){
    opacity: 0;
}
.hamburger.active .hamburger-line:nth-child(3){
    top: 20px;
    transform: rotate(-45deg);
}

.close-menu {
    background: none;
    border: none;
    color: var(--light);
    font-size: 1.5rem;
    cursor: pointer;
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: auto;
    height: auto;
    padding: 0.5rem;
    transition: color 0.3s;
}

.close-menu:hover {
    color: var(--secondary);
}

/* Redirect Notice */
.redirect-notice {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--card-bg);
    padding: 1rem 2rem;
    border-radius: 10px;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(44,142,255,0.3);
    z-index: 1001;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.redirect-notice p {
    margin: 0.5rem 0;
    color: var(--light);
}

.redirect-notice a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.redirect-notice a:hover {
    color: var(--secondary);
    text-decoration: underline;
}

/* ===== LOGIN CONTAINER ===== */
.login-container {
    max-width: 400px;
    margin: 100px auto;
    padding: 2rem;
    background: var(--card-bg);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(44,142,255,0.2);
    animation: fadeIn 1s ease-out;
}

.login-container .logo {
    text-align: center;
    margin-bottom: 2rem;
}

.login-container .logo h1 {
    color: var(--primary);
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.error {
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.3);
    color: #EF4444;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    text-align: center;
}

.btn {
    width: 100%;
    padding: 0.75rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-speed);
    font-size: 1rem;
}

.btn:hover {
    background: var(--secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ===== CONTENT / CONTAINERS ===== */
.container {
    max-width: 900px;
    margin: 2rem auto;
    padding: clamp(20px,5vw,40px);
    background: var(--card-bg);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    position: relative;
    z-index: 10;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(44,142,255,0.2);
    animation: fadeIn 1s ease-out;
}

.content {
    max-width: 800px;
    margin: 2rem auto;
    padding: clamp(15px,4vw,25px);
    background: var(--card-bg);
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    backdrop-filter: blur(6px);
    z-index: 10;
    position: relative;
    border: 1px solid rgba(44,142,255,0.2);
}

h1, h2 { text-align:center; margin: 1.5rem 0; text-shadow: 0 2px 5px rgba(0,0,0,0.4); line-height:1.3 }
h1 { font-size: clamp(1.8rem,5vw,2.5rem); color: #fff }
h2 { font-size: clamp(1.5rem,4vw,2rem); color: var(--primary) }
h3 { font-size: clamp(1.2rem,3vw,1.6rem); color: #dddddd; margin-bottom:1rem; text-align:center; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif }
p, .content p { font-size: clamp(1rem,2vw,1.1rem); margin-bottom:1.25rem; line-height:1.6; color: var(--text-primary) }

/* Particles */
#particles { position: fixed; top:0; left:0; width:100%; height:100%; z-index:-1; pointer-events:none; overflow:hidden }

/* Cards */
.info-card { background: var(--card-bg); padding: clamp(15px,3vw,25px); border-radius:10px; margin-bottom:1.25rem; border-left:5px solid var(--primary); box-shadow: 0 5px 15px rgba(0,0,0,0.3); transition: transform .2s ease, box-shadow .2s ease; border:1px solid rgba(44,142,255,0.2) }
.info-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.4) }
.info-card h3 { font-size: clamp(1.2rem,3vw,1.4rem); color: var(--secondary); margin-bottom:.75rem }
.info-card .meta { font-size: .85rem; color: rgba(255,255,255,0.5); margin-top:.75rem; font-style: italic }

/* Forms & Inputs */
form { display:flex; flex-direction:column; align-items:center; width:100%; max-width:500px; margin:0 auto }
.form-group { width:100%; margin-bottom:1.25rem }
.form-group label, form label { display:block; margin-bottom:.5rem; font-weight:600; color: var(--primary); text-align:left }
.form-input { width:100%; padding:.75rem; border:2px solid #444; border-radius:8px; background: rgba(20,20,30,0.7); color:#fff; font-size: clamp(.9rem,3vw,1rem); transition: border-color var(--transition-speed) }
.form-input:focus { outline:none; box-shadow: 0 0 0 3px rgba(44,142,255,0.08); border-color: var(--primary) }

button, input[type="submit"] { padding:.75rem 1.5rem; background: var(--primary); color:#fff; border:none; border-radius:8px; font-weight:600; cursor:pointer; transition: all var(--transition-speed); font-size: clamp(.9rem,3vw,1rem) }
button:hover, input[type="submit"]:hover { background: var(--secondary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2) }

.btn-login { background: linear-gradient(45deg,var(--primary),var(--accent)); color:#fff; padding:8px 20px; border-radius:50px; font-size:.9rem; font-weight:600; display:flex; align-items:center; gap:8px; transition: all .3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.2) }
.btn-login:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.3) }

/* Misc small components */
.success-marker { color: var(--success); font-size:1.5rem; margin:0 .25rem; animation: pulse 1.5s infinite }
.confirmation-box { margin-top:20px; padding:15px; background-color:#f8f9fa; border-radius:5px; border:1px solid #dee2e6 }
.confirmation-box label { display:block; margin-bottom:15px; font-weight:normal }
.confirmation-box button { padding:8px 20px; background-color:#0d6efd; color:white; border:none; border-radius:4px; cursor:pointer }
.confirmation-box button:disabled { background-color:#6c757d; cursor:not-allowed }

.tagline { font-size:1.5rem; margin:25px 0; color: var(--primary); font-family:'Minecraft',sans-serif; position:relative; display:inline-block }
.tagline::after { content:''; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); width:50%; height:3px; background: linear-gradient(90deg, transparent, var(--primary), transparent) }
.divider { width:80%; height:2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); margin:30px auto }

/* Discord / iframe styles */
.discord-container { margin:40px 0; padding:20px; background: rgba(44,46,51,0.7); border-radius:15px; display:inline-block; box-shadow:0 5px 15px rgba(0,0,0,0.2); text-align:center }
.discord-iframe { border:none; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,0.3); width: min(350px,90vw); height:500px }

/* Posts / misc */
.post { border:1px solid rgba(255,255,255,0.2); background-color: rgba(173,216,230,0.1); margin-bottom:10px; padding:10px; border-radius:8px }
.custom-error { font-weight:bold; color: var(--accent); background: rgba(231,76,60,0.2); padding:10px; border-radius:5px; margin:10px 0; text-align:center }

/* Team Navigation Styles */
.team-nav {
    background: rgba(40, 40, 60, 0.9);
    border-radius: 10px;
    padding: 5px 10px;
    margin: 0 15px;
}

.team-nav ul {
    display: flex;
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.team-nav a {
    color: #ffcc00;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 5px 10px;
    border-radius: 5px;
    transition: all 0.3s;
}

.team-nav a:hover {
    background: rgba(255, 204, 0, 0.2);
}

.team-nav a.active {
    background: rgba(255, 204, 0, 0.3);
    border-bottom: 2px solid #ffcc00;
}

/* ===== SHOP-SPECIFIC STYLES ===== */
body.shop-page {
  --gradient: linear-gradient(135deg, var(--primary), var(--accent));
  color: var(--light);
  background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  padding-top: 100px;
}

.shop-header { text-align:center; padding:2rem 1rem; background: var(--card-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--primary) }
.shop-header h1 { font-size:2.5rem; background: var(--gradient); background-clip: text; -webkit-text-fill-color: transparent; margin-bottom:.5rem }
.shop-header p { color: #94a3b8; max-width:600px; margin:0 auto }

.purchase-section { background: rgba(15,23,42,0.6); border-radius:16px; padding:2rem; margin-bottom:3rem; box-shadow:0 10px 30px rgba(0,0,0,0.3); border:1px solid rgba(44,142,255,0.2); backdrop-filter: blur(10px) }
.purchase-title { font-size:1.5rem; margin-bottom:1.5rem; color: var(--primary); display:flex; align-items:center; gap:10px }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:1.5rem }
@media (max-width:768px) { .form-grid { grid-template-columns:1fr } }
.form-label { display:block; margin-bottom:.5rem; color:#94a3b8 }
.form-input { background: rgba(30,41,59,0.7); color:#FFAA2C; border:1px solid rgba(44,142,255,0.3); padding:.8rem 1.2rem; border-radius:10px }

.shop-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:2rem; margin-top:1rem }
.shop-item { background: linear-gradient(145deg, rgba(30, 41, 59, 0.152), rgba(15,23,42,0.8)); border-radius:16px; padding:2rem 1.5rem; text-align:center; transition: all .4s ease; border:1px solid rgba(44,142,255,0.2); position:relative; overflow:hidden; display:flex; flex-direction:column; height:100% }
.shop-item::before { content:''; position:absolute; top:0; left:0; width:100%; height:4px; background: var(--gradient); transform: scaleX(0); transform-origin:left; transition: transform .4s ease }
.shop-item:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.4); border-color: rgba(44,142,255,0.4) }
.shop-item:hover::before { transform: scaleX(1) }
.shop-item h3 { font-size:1.5rem; margin-bottom:1rem; color: var(--light) }
.shop-price { font-size:1.8rem; font-weight:bold; color: var(--primary); margin:1rem 0; padding:.5rem; background: rgba(255,170,44,0.1); border-radius:8px }
.shop-features { text-align:left; margin:1.5rem 0; flex-grow:1 }
.shop-features li { margin-bottom:.8rem; position:relative; padding-left:2rem; line-height:1.5 }
.shop-features li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight:900; color: var(--success); position:absolute; left:0; top:0 }
.rank-badge { width:80px; height:80px; background: var(--gradient); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; font-size:2rem }

#paypal-button-container { margin-top:1.5rem; border-radius:10px; overflow:hidden }
.success-popup, .error-popup { padding:1.2rem; border-radius:10px; margin-top:1.5rem; text-align:center; display:none; animation: fadeIn .5s ease }
.success-popup { background: rgba(45,212,112,0.15); border:1px solid rgba(45,212,112,0.3); color:#2DD470 }
.error-popup { background: rgba(239,68,68,0.15); border:1px solid rgba(239,68,68,0.3); color:#EF4444 }

.shop-footer { text-align:center; padding:2rem; color:#64748b; font-size:.9rem; margin-top:3rem }

/* Footer (global) */
footer { background: rgba(26,26,26,0.8); padding: 1rem; text-align:center; margin-top:auto; backdrop-filter: blur(5px); border-top:1px solid rgba(255,255,255,0.1); font-size: clamp(0.8rem,2vw,0.9rem); position:relative; z-index:10 }
.footer-links { display:flex; justify-content:center; gap:clamp(15px,3vw,25px); margin-bottom:.75rem; flex-wrap:wrap }
.footer-links a { color: rgba(255,255,255,0.7); text-decoration:none; transition: color var(--transition-speed) }
.footer-links a:hover { color: var(--primary); text-decoration: underline }
footer hr { border:none; height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); margin:.75rem auto; width: min(80%,400px) }
.footer-copyright { color: rgba(255,255,255,0.7); line-height:1.5 }
.beat-heart { color: #ff4d4d; display:inline-block; animation: beat 1s infinite }

/* small helpers used earlier */
.empty-state { background: linear-gradient(135deg, rgba(245,247,250,0.1) 0%, rgba(228,237,245,0.1) 100%); border-radius:16px; padding:2rem; text-align:center; margin:2rem auto; box-shadow:0 4px 12px rgba(0,0,0,0.1); color:#fff }
.empty-state .icon { font-size:3rem; margin-bottom:1rem }

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (min-width: 992px) {
    .header-container { flex-wrap: nowrap }
    #desktop-nav ul { justify-content: flex-end; padding:0 }
    #desktop-nav ul li a { font-size: clamp(0.75rem, 1.2vw, 0.9rem) }
    .mobile-menu { display: none !important }
    body { padding-top: 120px }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .logo { max-width: 25% }
    #desktop-nav { max-width: 75% }
}

@media (max-width: 991px) {
    #desktop-user-area { display: none; }
    .mobile-user-area { display: block }
    #desktop-nav { display: none }
    .hamburger { display: grid; place-items:center }
    .redirect-notice { position: fixed; bottom:0; left:0; right:0; margin-top:0; border-radius:0; z-index:1001 }
    .mobile-menu nav ul li a { font-size: clamp(1rem,4vw,1.2rem) }

    .mobile-user-area { 
        position: absolute; 
        top: 15px; 
        left: 50%; 
        transform: translateX(-50%); 
        margin: 0; 
        padding: 0; 
        border: none; 
        z-index: 10002; 
        width: auto; 
    }
    
    .mobile-login-link { 
        font-size: 2.5rem; 
        color: var(--primary); 
        text-decoration: none; 
        display: block; 
        text-align: center; 
        background: none; 
        padding: 0; 
    }
    
    .mobile-login-link i { 
        transition: transform .3s ease; 
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); 
    }
    
    .mobile-login-link:hover i { 
        transform: scale(1.1); 
        color: var(--secondary); 
    }
    
    .team-nav {
        display: block;
        margin-top: 15px;
    }
    
    .team-nav ul {
        flex-direction: column;
        gap: 5px;
    }
}

@media (max-width: 768px) {
    .container { padding: 30px 20px; margin: 20px }
    .login-container { margin: 80px 20px; padding: 1.5rem }
    h1 { font-size: 1.8rem }
    h2 { font-size: 1.5rem }
    h3 { font-size: 1.2rem }
    #logo { width: min(350px,90vw) }
    .discord-iframe { width: min(300px,90vw); height: 400px }
    .login-container { min-height: auto }
    #calendar { background: rgba(255,255,255,0.1); border-radius:10px; padding:15px; margin-bottom:30px; backdrop-filter: blur(5px); border:1px solid rgba(255,255,255,0.2) }
    .fc-toolbar-title { color: var(--primary); font-weight: bold }
    .fc-day-today { background: rgba(44,142,255,0.3) !important }
}

@media (max-width: 480px) {
    .logo { min-width: 140px; font-size: 1.4rem }
    .mobile-menu { width: 90%; padding: 1.5rem }
    .hamburger { padding: 8px; width: 40px; height: 40px }
    .hamburger-line { width: 20px; left: 10px; }
}

@media (max-width: 576px) {
  .modal-content { padding: 1.5rem; width: 95% }
}

/* ===== TEAM NAVIGATION STYLES ===== */
.team-nav {
    background: rgba(30, 30, 46, 0.35);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 170, 44, 0.3);
}

.team-nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.team-nav li {
    flex: 1;
    text-align: center;
}

.team-nav a {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: #FFAA2C;
    transition: all 0.3s;
    font-weight: 500;
    border-bottom: 3px solid transparent;
}

.team-nav a.active, 
.team-nav a:hover {
    background: var(--primary);
    color: white;
    border-bottom-color: var(--secondary);
}

.team-nav a.active {
    background: rgba(255, 170, 44, 0.2);
    color: var(--primary);
    font-weight: 600;
}

/* Highlight Box */
.highlight {
    background: rgba(255, 170, 44, 0.15);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid #FFAA2C;
}

.highlight p {
    margin-bottom: 0.5rem;
}

.highlight p:last-child {
    margin-bottom: 0;
}

/* Emergency Button */
.issue-call-global {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

/* Responsive Team Navigation */
@media (max-width: 768px) {
    .team-nav ul {
        flex-direction: column;
    }
    
    .team-nav li {
        flex: none;
    }
    
    .team-nav a {
        padding: 12px;
        font-size: 0.9rem;
    }
}

/* ===== FONT AWESOME ICON STYLES ===== */
.info-card h3 i,
.highlight p i,
.team-nav a i {
    margin-right: 8px;
    color: var(--primary);
}

.meeting-item h3 i {
    margin-right: 10px;
    color: var(--secondary);
}

.empty-state .icon i {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.btn-login i {
    margin-right: 8px;
}

/* Specific icon colors */
.fa-check-circle {
    color: var(--success) !important;
}

.fa-heart {
    color: #ff4d4d !important;
}

.fa-exclamation-triangle {
    color: #ffcc00 !important;
}

.fa-info-circle {
    color: var(--secondary) !important;
}

/* Badge Styles */
.badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--success);
    color: white;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

.today-badge {
    background: var(--primary);
}

/* Button Styles */
.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
}

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