//public/style.css
/* --- BASE STYLES --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    overflow-x: hidden; background: #0a0e27; min-height: 100vh; color: white;
}

/* --- ANIMATED BG --- */
.bg-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.6; animation: float 20s ease-in-out infinite; }
.blob1 { width: 400px; height: 400px; background: radial-gradient(circle, #ff6b9d, #c44569); top: -100px; left: -100px; }
.blob2 { width: 350px; height: 350px; background: radial-gradient(circle, #4facfe, #00f2fe); top: 50%; right: -100px; animation-delay: -7s; }
.blob3 { width: 450px; height: 450px; background: radial-gradient(circle, #a8edea, #fed6e3); bottom: -150px; left: 30%; animation-delay: -14s; }
.blob4 { width: 300px; height: 300px; background: radial-gradient(circle, #fbc2eb, #a6c1ee); top: 20%; left: 50%; animation-delay: -10s; }
@keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(100px, -50px) scale(1.1); } 66% { transform: translate(-50px, 100px) scale(0.9); } }

/* --- GLASS UTILS --- */
.glass {
    background: rgba(173, 216, 230, 0.12);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    position: relative; overflow: hidden;
}
.glass::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
}
.squircle { border-radius: 28px; }

/* --- SIDEBAR --- */
.menu-btn { position: fixed; top: 20px; right: 20px; width: 50px; height: 50px; z-index: 1001; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; cursor: pointer; transition: 0.3s; }
.bar { width: 25px; height: 3px; background: white; border-radius: 2px; }
.sidebar { position: fixed; top: 0; right: -300px; width: 280px; height: 100vh; z-index: 1000; padding: 80px 30px; transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; align-items: center; }
.sidebar.active { right: 0; background: rgba(10, 14, 39, 0.95); backdrop-filter: blur(15px); border-left: 1px solid rgba(255,255,255,0.1); }
.logo { font-size: 24px; font-weight: 700; margin-bottom: 50px; color: #fff; }
.nav-links li { list-style: none; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); cursor: pointer; font-weight: 600; text-align: center; transition: 0.3s; }
.nav-links li:hover { color: #fff; transform: translateX(-5px); }

/* --- LAYOUT --- */
.container { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; padding: 80px 20px 20px; }
.view-section { animation: fadeIn 0.5s ease-out; padding-bottom: 50px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* --- HOME --- */
.header-card { padding: 40px; text-align: center; display: flex; flex-direction: column; align-items: center;}
.logo-text { font-size: 40px; font-weight: 800; background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px; }
.tagline { font-size: 14px; letter-spacing: 2px; text-transform: uppercase; opacity: 0.8; margin-bottom: 30px; }
.guild-stats { display: flex; justify-content: center; gap: 20px; margin: 25px 0; flex-wrap: wrap; }
.stat-box { padding: 15px 25px; background: rgba(255,255,255,0.05); border-radius: 18px; border: 1px solid rgba(255,255,255,0.1); min-width: 100px; }
.stat-box h3 { font-size: 20px; font-weight: 800; color: #4facfe; }
.stat-box span { font-size: 11px; opacity: 0.6; text-transform: uppercase; letter-spacing: 1px; }
.description { max-width: 600px; line-height: 1.6; opacity: 0.9; font-size: 15px; margin-bottom: 20px; }

/* --- MEMBERS --- */
.members-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; height: 45px; }
.section-title { font-size: 24px; font-weight: 700; background: linear-gradient(to right, #a6c1ee, #fbc2eb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform: uppercase; }
.subsection-label { font-size: 12px; color: rgba(255,255,255,0.5); margin: 25px 0 10px 5px; letter-spacing: 1px; }

.action-icons { display: flex; gap: 10px; align-items: center; }
.icon-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); transition: 0.3s; z-index: 10; }
.search-wrapper { position: relative; display: flex; align-items: center; justify-content: flex-end; }
.search-input-hidden { position: absolute; right: 45px; width: 0; padding: 10px 0; background: rgba(10, 14, 39, 0.95); border: 1px solid rgba(255,255,255,0.2); border-radius: 20px; color: white; outline: none; opacity: 0; pointer-events: none; transition: all 0.4s; }
.search-input-hidden.active { width: 220px; padding: 10px 15px; opacity: 1; pointer-events: all; }

/* --- FEATURED SLIDER --- */
.featured-slider { display: flex; overflow-x: auto; gap: 20px; padding: 10px 5px 30px 5px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.featured-slider::-webkit-scrollbar { display: none; }
.featured-card { min-width: 250px; padding: 25px; display: flex; flex-direction: column; align-items: center; scroll-snap-align: center; background: rgba(173, 216, 230, 0.15); transition: transform 0.3s; }
.featured-card:hover { transform: scale(1.03); }
.featured-img { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,0.3); margin-bottom: 15px; }

/* --- GRID LAYOUTS --- */
.members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; }
.grid-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }

/* --- TIERS --- */
.mini-card { padding: 20px; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; transition: transform 0.3s; position: relative; }
.mini-card:hover { transform: translateY(-5px); }
.mini-img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.1); margin-bottom: 10px; }
.mini-name { font-weight: 700; font-size: 13px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.mini-uid { font-size: 10px; color: #4facfe; font-family: monospace; }

.tier-bronze { border: 1px solid #cd7f32 !important; }
.tier-silver { border: 1px solid #e0e0e0 !important; background: linear-gradient(135deg, rgba(224,224,224,0.1), transparent) !important; }
.tier-active { border: 1px solid #90ee90 !important; box-shadow: 0 0 10px rgba(144, 238, 144, 0.1); }
.tier-platinum { border: 2px solid #00f2fe !important; background: linear-gradient(135deg, rgba(0,242,254,0.15), transparent) !important; box-shadow: 0 0 15px rgba(0,242,254,0.2); }
.tier-platinum::after { content: '💎'; position: absolute; top: -8px; right: -8px; font-size: 16px; }
.tier-creator { border: 2px solid #ff4757 !important; background: linear-gradient(135deg, rgba(255, 71, 87, 0.15), transparent) !important; }
.tier-creator::after { content: '🎥'; position: absolute; top: -8px; right: -8px; font-size: 16px; }
.tier-prime { border: 2px solid #a29bfe !important; box-shadow: 0 0 20px rgba(162, 155, 254, 0.4); }
.tier-gold { border: 2px solid #FFD700 !important; background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), transparent) !important; box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }
.tier-gold::after { content: '👑'; position: absolute; top: -12px; right: -5px; font-size: 24px; animation: bounce 2s infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* --- ACHIEVEMENTS --- */
.achievement-card {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s;
}
.achievement-card:hover { transform: translateY(-5px); }
.emoji-icon {
    font-size: 50px;
    margin-bottom: 10px;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
    z-index: 2;
    display: inline-block;
}
.achievement-card h2 { 
    font-size: 16px; 
    font-weight: 800; 
    margin-bottom: 5px; 
    color: #fff;
}
.achievement-card p { 
    font-size: 12px; 
    color: rgba(255,255,255,0.7); 
    line-height: 1.4; 
}

/* --- NOTICES --- */
.notice-list { display: flex; flex-direction: column; gap: 15px; }
.notice-card { padding: 20px; border-left: 4px solid #4facfe; }
.notice-date { font-size: 11px; color: rgba(255,255,255,0.5); margin-bottom: 5px; }
.notice-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.notice-body { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.5; }
.notice-urgent { border-left-color: #ff4757; background: rgba(255, 71, 87, 0.1); }

/* --- MODALS (Base) --- */
.video-placeholder { width: 100%; height: 200px; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; border: 1px dashed rgba(255,255,255,0.2); margin-bottom: 20px; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 14, 39, 0.9); z-index: 2000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.modal-overlay.active { display: flex; }
.profile-card { width: 90%; max-width: 400px; max-height: 85vh; overflow-y: auto; background: #1a1e38; }
.close-btn { position: absolute; top: 15px; right: 15px; width: 35px; height: 35px; border-radius: 50%; background: rgba(0,0,0,0.5); border: none; color: white; cursor: pointer; z-index: 10; font-size: 20px; }
.modal-img-container { height: 250px; background: #000; }
#modal-img, #member-modal-img { width: 100%; height: 100%; object-fit: cover; }
.modal-content { padding: 25px; }

/* ------------------------------------------------ */
/* --- NEW FEATURES STYLES (Clean & Integrated) --- */
/* ------------------------------------------------ */

/* SIDEBAR SUBMENU */
#submenu {
    transition: all 0.3s ease;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}
#submenu.active {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 15px;
}
#submenu li:hover {
    background: rgba(255, 255, 255, 0.05);
    padding-left: 5px;
}

/* GLASS BUTTONS & FORMS */
.glass-button {
    position: relative; padding: 16px 40px; font-size: 16px; font-weight: 700; color: white;
    background: transparent; border: none; cursor: pointer; overflow: hidden;
    transition: all 0.4s ease; text-transform: uppercase; letter-spacing: 1.5px;
    display: flex; align-items: center; justify-content: center;
}
.btn-primary {
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.btn-primary:hover {
    transform: translateY(-3px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.1);
}
.btn-primary:active { transform: scale(0.98); }
.btn-glow {
    position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: 0.5s;
}
.glass-button:hover .btn-glow { left: 100%; transition: 0.5s ease-in-out; }

.input-section { padding: 30px; background: rgba(16, 21, 50, 0.6); }
.form-heading { font-size: 14px; color: #a6c1ee; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); margin: 25px 0; }
.req-list li { padding: 10px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.1); font-size: 14px; color: rgba(255, 255, 255, 0.8); display: flex; align-items: center; }
.req-list li::before { content: '•'; color: #fbc2eb; font-size: 20px; margin-right: 10px; line-height: 0; }
.input-group { margin-bottom: 20px; position: relative; }
.input-label { display: block; font-size: 12px; margin-bottom: 8px; color: rgba(255, 255, 255, 0.6); font-weight: 600; margin-left: 10px; }
.glass-input { width: 100%; padding: 15px 20px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); color: white; font-size: 16px; outline: none; transition: 0.3s; }
.glass-input:focus { background: rgba(0, 0, 0, 0.4); border-color: #fbc2eb; box-shadow: 0 0 15px rgba(251, 194, 235, 0.15); }
.glass-input::placeholder { color: rgba(255, 255, 255, 0.2); }

/* APK CARDS & BADGES */
.apk-card-icon { width: 60px; height: 60px; border-radius: 18px; object-fit: cover; margin-bottom: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.apk-type-badge { position: absolute; top: 10px; left: 10px; font-size: 9px; padding: 3px 8px; border-radius: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; z-index: 5; }
.badge-premium { background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(166, 193, 238, 0.2)); border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; box-shadow: 0 0 10px rgba(166, 193, 238, 0.2); }
.badge-exclusive { background: rgba(255, 71, 87, 0.15); color: #ff4757; border: 1px solid rgba(255, 71, 87, 0.3); }

/* APK DETAIL VIEW */
.back-btn { margin-bottom: 20px; padding: 10px 20px; color: white; background: rgba(255,255,255,0.05); border: none; cursor: pointer; font-weight: 600; }
.apk-detail-card { padding: 40px; min-height: 60vh; }
.detail-header { display: flex; gap: 30px; align-items: center; }
.detail-icon { width: 120px; height: 120px; border-radius: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.detail-info h1 { font-size: 32px; margin-bottom: 10px; background: linear-gradient(135deg, #fff, #a6c1ee); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.detail-meta { font-size: 14px; color: rgba(255,255,255,0.6); margin-bottom: 15px; font-family: monospace; }
.tag-container { display: flex; flex-wrap: wrap; gap: 8px; }
.app-tag { font-size: 11px; padding: 5px 12px; background: rgba(255,255,255,0.1); border-radius: 20px; color: rgba(255,255,255,0.8); }
.detail-body { padding: 20px 0; }
.detail-body h3 { margin-bottom: 15px; color: #fbc2eb; }
.detail-body p { line-height: 1.7; color: rgba(255,255,255,0.8); }
.detail-actions { margin-top: 30px; padding-top: 20px; border-top: 1px dashed rgba(255,255,255,0.1); }
.auth-warning { margin-top: 15px; font-size: 13px; color: #ff4757; text-align: center; }
.btn-locked { background: rgba(255,255,255,0.05) !important; opacity: 0.5; cursor: not-allowed; filter: grayscale(1); }
@media (max-width: 600px) { .detail-header { flex-direction: column; text-align: center; } .tag-container { justify-content: center; } }

/* AUTH STATUS */
.auth-status-box { margin-top: auto; padding: 15px; width: 100%; text-align: center; background: rgba(255, 255, 255, 0.05); border-top: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; transition: 0.3s; color: #a6c1ee; font-weight: 700; font-size: 12px; letter-spacing: 1px; text-decoration: none; }
.auth-status-box:hover { background: rgba(255, 255, 255, 0.1); }

/* SOCIAL CONTACT */
.social-banner-container { display: flex; flex-direction: column; gap: 15px; width: 100%; }
.social-card { position: relative; display: flex; align-items: center; gap: 20px; padding: 18px 25px; text-decoration: none; color: white; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; overflow: hidden; transition: all 0.3s ease; backdrop-filter: blur(10px); cursor: pointer; opacity: 0; animation: cardEntrance 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.social-card:nth-child(1) { animation-delay: 0.1s; } .social-card:nth-child(2) { animation-delay: 0.2s; } .social-card:nth-child(3) { animation-delay: 0.3s; }
.social-card:hover { transform: translateY(-3px) scale(1.01); background: rgba(255, 255, 255, 0.08); }
.social-logo { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(0,0,0,0.3)); opacity: 0; transform: rotate(90deg) scale(0.8); animation: logoRotate 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.social-card:nth-child(1) .social-logo { animation-delay: 0.1s; } .social-card:nth-child(2) .social-logo { animation-delay: 0.2s; } .social-card:nth-child(3) .social-logo { animation-delay: 0.3s; }
.text-wrapper { display: flex; flex-direction: column; justify-content: center; }
.platform-name { font-size: 10px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; margin-bottom: 4px; }
.user-handle { font-size: 16px; font-weight: 600; letter-spacing: 0.5px; color: #ffffff; }
.instagram:hover { border-color: rgba(225, 48, 108, 0.5); box-shadow: 0 0 30px rgba(225, 48, 108, 0.15), inset 0 0 20px rgba(225, 48, 108, 0.05); }
.telegram:hover { border-color: rgba(0, 136, 204, 0.5); box-shadow: 0 0 30px rgba(0, 136, 204, 0.15), inset 0 0 20px rgba(0, 136, 204, 0.05); }
.email:hover { border-color: rgba(234, 67, 53, 0.5); box-shadow: 0 0 30px rgba(234, 67, 53, 0.15), inset 0 0 20px rgba(234, 67, 53, 0.05); }
.report-btn { background: rgba(255, 71, 87, 0.05) !important; border: 1px solid rgba(255, 71, 87, 0.2) !important; }
.report-btn:hover { background: rgba(255, 71, 87, 0.15) !important; box-shadow: 0 0 30px rgba(255, 71, 87, 0.2); }
@keyframes cardEntrance { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes logoRotate { 0% { opacity: 0; transform: rotate(90deg) scale(0.5); } 100% { opacity: 1; transform: rotate(0deg) scale(1); } }
@media (min-width: 768px) { .social-banner-container { flex-direction: row; flex-wrap: wrap; } .social-card { flex: 1; min-width: 250px; } }

/* BLOG & READ MODE */
#blog-grid .mini-card { transition: transform 0.3s, box-shadow 0.3s; cursor: default; }
#blog-grid .mini-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
.markdown-body { line-height: 1.8; font-size: 16px; color: rgba(255, 255, 255, 0.9); }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { color: #fff; margin-top: 30px; margin-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 5px; }
.markdown-body p { margin-bottom: 15px; }
.markdown-body ul, .markdown-body ol { padding-left: 25px; margin-bottom: 20px; color: rgba(255,255,255,0.8); }
.markdown-body li { margin-bottom: 8px; }
.markdown-body blockquote { border-left: 4px solid #fbc2eb; padding-left: 15px; margin: 20px 0; font-style: italic; background: rgba(251, 194, 235, 0.1); padding: 10px 15px; border-radius: 0 8px 8px 0; }
.markdown-body code { background: rgba(0,0,0,0.3); padding: 2px 5px; border-radius: 4px; font-family: monospace; color: #fbc2eb; }
.markdown-body pre { background: #0a0e27; padding: 15px; border-radius: 8px; overflow-x: auto; border: 1px solid rgba(255,255,255,0.1); }
.markdown-body pre code { background: none; color: #a6c1ee; }
.markdown-body img { max-width: 100%; border-radius: 8px; margin: 20px 0; border: 1px solid rgba(255,255,255,0.2); }
.markdown-body a { color: #4facfe; text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }
.expand-btn { position: absolute; bottom: 15px; right: 15px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.3); cursor: pointer; transition: 0.3s; z-index: 10; }
.expand-btn:hover { background: rgba(0,0,0,0.8); transform: scale(1.1); }
.img-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; background: linear-gradient(to top, #0a0e27, transparent); pointer-events: none; }

/* MISC UPDATES */
#my-apps-list { max-height: 200px; overflow-y: auto; margin-top: 15px; padding-right: 5px; }
#my-apps-list::-webkit-scrollbar { width: 4px; }
#my-apps-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
#my-apps-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
#logout-btn:hover { background: rgba(255, 71, 87, 0.25) !important; border-color: rgba(255, 71, 87, 0.6) !important; }
.status-badge { font-size: 9px; font-weight: 800; text-transform: uppercase; padding: 3px 6px; border-radius: 4px; margin-left: 8px; letter-spacing: 1px; }
.status-published { background: rgba(46, 204, 113, 0.2); color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.3); }
.status-draft { background: rgba(255, 255, 255, 0.1); color: #aaa; border: 1px solid rgba(255, 255, 255, 0.2); }
.tool-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: white; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.tool-btn:hover { background: rgba(255,255,255,0.2); }
.icon-container { width: 50px; height: 50px; position: relative; display: flex; align-items: center; justify-content: center; }
.login-media { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; background: white; border: 1px solid rgba(255,255,255,0.5); }


/* ------------------------------------------------ */
/* --- NEW DASHBOARD & BUILDER STYLES (Added) --- */
/* ------------------------------------------------ */

/* Custom Scrollbar for Dashboard Lists */
#user-projects-list::-webkit-scrollbar,
#user-apps-list::-webkit-scrollbar,
#user-reports-list::-webkit-scrollbar { width: 3px; }
#user-projects-list::-webkit-scrollbar-track,
#user-apps-list::-webkit-scrollbar-track,
#user-reports-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
#user-projects-list::-webkit-scrollbar-thumb,
#user-apps-list::-webkit-scrollbar-thumb,
#user-reports-list::-webkit-scrollbar-thumb { background: rgba(79, 172, 254, 0.3); border-radius: 3px; }

/* Dashboard Project Item Layout */
.project-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px; margin-bottom: 8px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; transition: 0.2s;
}
.project-item:hover { background: rgba(255,255,255,0.06); transform: translateX(2px); }

.project-info h4 { font-size: 13px; color: white; margin-bottom: 2px; }
.project-info span { font-size: 10px; color: rgba(255,255,255,0.5); }

.project-actions { display: flex; gap: 6px; }
.action-icon-btn {
    width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7); cursor: pointer; transition: 0.2s;
}
.action-icon-btn:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.action-edit:hover { background: rgba(79, 172, 254, 0.2); border-color: #4facfe; color: #4facfe; }
.action-copy:hover { background: rgba(46, 204, 113, 0.2); border-color: #2ecc71; color: #2ecc71; }

/* Dashboard Status Items */
.dashboard-list-item {
    padding: 10px; margin-bottom: 5px; border-radius: 10px;
    font-size: 12px; display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.02);
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-green { background: #2ecc71; box-shadow: 0 0 5px #2ecc71; }
.dot-red { background: #ff4757; box-shadow: 0 0 5px #ff4757; }
.dot-yellow { background: #fbc2eb; box-shadow: 0 0 5px #fbc2eb; }

/* Ensure Sidebar Auth Wrapper Pushes Down */
.auth-wrapper { margin-top: auto; width: 100%; animation: fadeIn 0.5s ease; }


/* --- NEW: ESPORTS & TEAMS STYLES --- */

/* Tournament Card Layout */
.tournament-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.tournament-card:hover {
    transform: translateY(-5px);
    border-color: rgba(79, 172, 254, 0.5);
}

/* Tournament Banner Area */
.tourney-banner-box {
    width: 100%;
    height: 120px;
    position: relative;
    background: #000;
}
.tourney-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

/* Rank Badges (Gold/Silver/Bronze) */
.rank-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    backdrop-filter: blur(5px);
    z-index: 2;
}
.rank-1 { background: linear-gradient(135deg, #FFD700, #FDB931); color: #000; border: 1px solid #fff; }
.rank-2 { background: linear-gradient(135deg, #E0E0E0, #BDBDBD); color: #000; border: 1px solid #fff; }
.rank-3 { background: linear-gradient(135deg, #CD7F32, #A0522D); color: #fff; border: 1px solid #fff; }
.rank-participation { background: rgba(255,255,255,0.1); color: #fff; }

/* Stats Grid inside Card */
.tourney-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 15px;
    background: rgba(0,0,0,0.2);
    margin-top: 10px;
    border-radius: 12px;
}
.stat-item {
    display: flex;
    flex-direction: column;
}
.stat-label { font-size: 9px; opacity: 0.6; text-transform: uppercase; }
.stat-val { font-size: 14px; font-weight: 700; color: #fff; }

/* Squad/Team Roster Layout */
.squad-section { margin-bottom: 40px; }
.squad-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
}
.squad-title { font-size: 20px; font-weight: 700; color: #a6c1ee; }
.squad-role-badge { 
    font-size: 10px; 
    padding: 4px 8px; 
    background: rgba(255,255,255,0.1); 
    border-radius: 4px; 
    color: rgba(255,255,255,0.7);
}



/* --- SRC/APP/GLOBALS.CSS --- */

/* Fix Next.js default link styling */
a {
  text-decoration: none;
  color: inherit;
}

/* Force remove underlines for buttons and nav */
.glass-button, 
.nav-links a, 
.back-btn, 
.social-card {
  text-decoration: none !important;
}

/* Ensure hover states don't re-add it unless we want them to */
.glass-button:hover,
.nav-links a:hover {
  text-decoration: none;
}