:root {
    --bg-primary: #0c0c1d;
    --bg-secondary: #111128;
    --bg-card: #161638;
    --cyan: #00ffff;
    --blue: #0066ff;
    --magenta: #ff00ff;
    --cyan-glow: rgba(0,255,255,0.25);
    --magenta-glow: rgba(255,0,255,0.2);
    --discord: #5865F2;
    --discord-hover: #4752c4;
    --green: #10b981;
    --red: #ef4444;
    --text-primary: #fff;
    --text-secondary: #6b7280;
    --text-gray: #9ca3af;
    --dark-gray: #4b5563;
    --border: rgba(0,255,255,0.09);
    --border-hover: rgba(0,255,255,0.2);
    --sidebar-width: 260px;
    --gradient-neo: linear-gradient(135deg, #00ffff, #0066ff);
    --gradient-mine: linear-gradient(135deg, #0066ff, #ff00ff);
    --gradient-full: linear-gradient(135deg, #00ffff, #0066ff, #ff00ff);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:var(--bg-primary); color:var(--text-primary); min-height:100vh; overflow-x:hidden; }

/* ===== BACKGROUND ===== */
.bg-animation { position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; overflow:hidden; }
.grid-overlay {
    position:absolute; width:200%; height:200%; top:-50%; left:-50%;
    background-image: linear-gradient(rgba(0,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,255,0.02) 1px, transparent 1px);
    background-size:60px 60px;
    animation:gridMove 20s linear infinite;
    transform:perspective(500px) rotateX(60deg);
}
@keyframes gridMove { 0%{transform:perspective(500px) rotateX(60deg) translateY(0)} 100%{transform:perspective(500px) rotateX(60deg) translateY(60px)} }

.orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:0.35; animation:orbFloat 12s ease-in-out infinite; }
.orb-1 { width:400px; height:400px; background:radial-gradient(circle,rgba(0,255,255,0.3),transparent 70%); top:10%; left:10%; }
.orb-2 { width:350px; height:350px; background:radial-gradient(circle,rgba(255,0,255,0.25),transparent 70%); top:50%; right:10%; animation-delay:-4s; animation-duration:15s; }
.orb-3 { width:300px; height:300px; background:radial-gradient(circle,rgba(0,102,255,0.3),transparent 70%); bottom:10%; left:30%; animation-delay:-8s; animation-duration:18s; }
@keyframes orbFloat { 0%,100%{transform:translate(0,0) scale(1)} 25%{transform:translate(50px,-30px) scale(1.1)} 50%{transform:translate(-30px,50px) scale(0.9)} 75%{transform:translate(30px,30px) scale(1.05)} }

.shooting-stars { position:absolute; width:100%; height:100%; }
.shooting-star { position:absolute; width:100px; height:2px; background:linear-gradient(90deg,var(--cyan),transparent); border-radius:50%; opacity:0; animation:shootingStar 4s ease-in-out infinite; }
.shooting-star:nth-child(1){top:10%;left:20%} .shooting-star:nth-child(2){top:30%;left:60%;animation-delay:1.5s;width:80px;background:linear-gradient(90deg,var(--magenta),transparent)} .shooting-star:nth-child(3){top:50%;left:40%;animation-delay:3s;width:120px} .shooting-star:nth-child(4){top:70%;left:10%;animation-delay:2s;width:60px;background:linear-gradient(90deg,var(--blue),transparent)} .shooting-star:nth-child(5){top:20%;left:80%;animation-delay:3.5s;width:90px;background:linear-gradient(90deg,var(--magenta),transparent)}
@keyframes shootingStar { 0%{transform:translateX(0) translateY(0) rotate(-35deg);opacity:0} 5%{opacity:1} 15%{transform:translateX(300px) translateY(150px) rotate(-35deg);opacity:0} 100%{opacity:0} }

.particles { position:absolute; width:100%; height:100%; }
.particle { position:absolute; border-radius:50%; opacity:0; animation:floatParticle 8s infinite; }
.particle:nth-child(odd){background:var(--cyan);box-shadow:0 0 6px var(--cyan)} .particle:nth-child(even){background:var(--magenta);box-shadow:0 0 6px var(--magenta)} .particle:nth-child(3n){background:var(--blue);box-shadow:0 0 6px var(--blue)}
@keyframes floatParticle { 0%{opacity:0;transform:translateY(100vh) scale(0)} 20%{opacity:0.6} 100%{opacity:0;transform:translateY(-10vh) scale(1)} }

/* ===== MINECRAFT ELEMENTS ===== */
.mc-elements { position:absolute; width:100%; height:100%; pointer-events:none; }
.mc-item { position:absolute; animation:mcFloat var(--dur,18s) ease-in-out infinite; animation-delay:var(--delay,0s); filter:drop-shadow(0 0 12px rgba(0,255,255,0.15)); z-index:1; }
@keyframes mcFloat { 0%,100%{transform:translateY(0) rotate(0deg) scale(1);opacity:0.6} 15%{opacity:0.85} 25%{transform:translateY(-40px) rotate(5deg) scale(1.05)} 50%{transform:translateY(-80px) rotate(-3deg) scale(0.95);opacity:0.7} 75%{transform:translateY(-30px) rotate(4deg) scale(1.02)} }

.mc-block { width:50px; height:50px; transform-style:preserve-3d; animation:mcBlockFloat var(--dur,18s) ease-in-out infinite; animation-delay:var(--delay,0s); }
@keyframes mcBlockFloat { 0%,100%{transform:translateY(0) rotateX(-20deg) rotateY(0deg);opacity:0.7} 25%{transform:translateY(-50px) rotateX(-25deg) rotateY(90deg);opacity:0.9} 50%{transform:translateY(-90px) rotateX(-15deg) rotateY(180deg);opacity:0.6} 75%{transform:translateY(-40px) rotateX(-22deg) rotateY(270deg);opacity:0.85} }
.block-front,.block-top,.block-side { position:absolute; width:50px; height:50px; border:1px solid rgba(0,0,0,0.3); }
.block-front{transform:translateZ(25px)} .block-top{transform:rotateX(90deg) translateZ(25px)} .block-side{transform:rotateY(90deg) translateZ(25px)}

.grass-block .block-front{background:linear-gradient(to bottom,#4a8c2a 0%,#4a8c2a 20%,#8B6914 20%,#7a5a12 100%)} .grass-block .block-top{background:#4a8c2a} .grass-block .block-side{background:linear-gradient(to bottom,#4a8c2a 0%,#4a8c2a 20%,#8B6914 20%,#7a5a12 100%)}
.diamond-block .block-front{background:linear-gradient(135deg,#48D1CC,#00CED1,#40E0D0);box-shadow:inset 0 0 20px rgba(0,255,255,0.3)} .diamond-block .block-top{background:linear-gradient(135deg,#7FFFD4,#48D1CC)} .diamond-block .block-side{background:linear-gradient(135deg,#00CED1,#20B2AA)}
.tnt-block .block-front{background:linear-gradient(to bottom,#ccc 0%,#ccc 15%,#e74c3c 15%,#c0392b 85%,#ccc 85%)} .tnt-block .block-top{background:#ccc} .tnt-block .block-side{background:linear-gradient(to bottom,#ccc 0%,#ccc 15%,#e74c3c 15%,#c0392b 85%,#ccc 85%)}
.ender-block .block-front{background:linear-gradient(135deg,#1a0a2e,#2d1b4e,#0f0a1f);box-shadow:inset 0 0 15px rgba(150,0,255,0.3)} .ender-block .block-top{background:#1a0a2e} .ender-block .block-side{background:linear-gradient(135deg,#2d1b4e,#1a0a2e)}
.redstone-block .block-front{background:#b91c1c;box-shadow:inset 0 0 20px rgba(255,0,0,0.3)} .redstone-block .block-top{background:#dc2626} .redstone-block .block-side{background:#991b1b}
.gold-block .block-front{background:linear-gradient(135deg,#f59e0b,#d97706)} .gold-block .block-top{background:#fbbf24} .gold-block .block-side{background:#d97706}

.mc-tool { animation:mcToolFloat var(--dur,18s) ease-in-out infinite; animation-delay:var(--delay,0s); }
@keyframes mcToolFloat { 0%,100%{transform:translateY(0) rotate(-15deg);opacity:0.5} 25%{transform:translateY(-60px) rotate(5deg);opacity:0.8} 50%{transform:translateY(-100px) rotate(-25deg);opacity:0.5} 75%{transform:translateY(-40px) rotate(10deg);opacity:0.7} }

.mc-creeper { animation:creeperFloat var(--dur,24s) ease-in-out infinite; animation-delay:var(--delay,0s); }
@keyframes creeperFloat { 0%,100%{transform:translateY(0) scale(1);opacity:0.4} 20%{transform:translateY(-30px) scale(1.05);opacity:0.7} 40%{transform:translateY(-70px) scale(0.95);opacity:0.5} 60%{transform:translateY(-50px) scale(1.08);opacity:0.75} 80%{transform:translateY(-20px) scale(0.98);opacity:0.5} }

.mc-heart { animation:heartFloat var(--dur,15s) ease-in-out infinite; animation-delay:var(--delay,0s); }
@keyframes heartFloat { 0%,100%{transform:translateY(0) scale(1);opacity:0.5} 25%{transform:translateY(-40px) scale(1.15);opacity:0.8} 50%{transform:translateY(-70px) scale(0.9);opacity:0.45} 75%{transform:translateY(-30px) scale(1.1);opacity:0.7} }

.mc-star { animation:starFloat var(--dur,13s) ease-in-out infinite; animation-delay:var(--delay,0s); }
@keyframes starFloat { 0%,100%{transform:translateY(0) rotate(0deg) scale(1);opacity:0.4} 33%{transform:translateY(-60px) rotate(120deg) scale(1.2);opacity:0.8} 66%{transform:translateY(-30px) rotate(240deg) scale(0.9);opacity:0.5} }

.pearl-orb { width:28px; height:28px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#7B68EE,#2d1b4e,#0f0a1f); box-shadow:0 0 15px rgba(123,104,238,0.5),0 0 30px rgba(123,104,238,0.2); animation:pearlGlow 2s ease-in-out infinite; }
@keyframes pearlGlow { 0%,100%{box-shadow:0 0 15px rgba(123,104,238,0.5),0 0 30px rgba(123,104,238,0.2)} 50%{box-shadow:0 0 25px rgba(123,104,238,0.7),0 0 50px rgba(123,104,238,0.4)} }
.mc-pearl { animation:pearlFloat var(--dur,16s) ease-in-out infinite; animation-delay:var(--delay,0s); }
@keyframes pearlFloat { 0%,100%{transform:translateY(0);opacity:0.5} 50%{transform:translateY(-80px);opacity:0.8} }

.mc-diamond { animation:diamondFloat var(--dur,18s) ease-in-out infinite; animation-delay:var(--delay,0s); }
@keyframes diamondFloat { 0%,100%{transform:translateY(0) rotate(0deg);opacity:0.45;filter:drop-shadow(0 0 8px rgba(0,206,209,0.3))} 50%{transform:translateY(-90px) rotate(15deg);opacity:0.75;filter:drop-shadow(0 0 20px rgba(0,206,209,0.6))} }

.mc-sparkle { width:6px; height:6px; animation:sparkle var(--dur,8s) ease-in-out infinite; animation-delay:var(--delay,0s); }
.mc-sparkle::before,.mc-sparkle::after { content:''; position:absolute; background:white; }
.mc-sparkle::before { width:2px; height:10px; top:-2px; left:2px; border-radius:1px; box-shadow:0 0 6px var(--cyan); }
.mc-sparkle::after { width:10px; height:2px; top:2px; left:-2px; border-radius:1px; box-shadow:0 0 6px var(--cyan); }
@keyframes sparkle { 0%,100%{transform:scale(0) rotate(0deg);opacity:0} 20%{transform:scale(1) rotate(0deg);opacity:0.8} 40%{transform:scale(0.5) rotate(45deg);opacity:0.3} 60%{transform:scale(1.2) rotate(90deg);opacity:0.9} 80%{transform:scale(0.3) rotate(135deg);opacity:0.2} }

/* ===== LOGIN ===== */
.login-wrapper { position:relative; z-index:10; display:flex; align-items:center; justify-content:center; min-height:100vh; padding:2rem; }

.login-card {
    background:rgba(10,10,31,0.88);
    backdrop-filter:blur(30px);
    border:1px solid rgba(0,255,255,0.08);
    border-radius:28px;
    padding:3rem 2.5rem;
    width:100%; max-width:460px;
    text-align:center;
    animation:cardEntrance 1s cubic-bezier(0.16,1,0.3,1);
    box-shadow:0 30px 80px rgba(0,0,0,0.6), 0 0 60px rgba(0,255,255,0.06), 0 0 120px rgba(255,0,255,0.04), inset 0 1px 0 rgba(255,255,255,0.05);
}

@keyframes cardEntrance { 0%{opacity:0;transform:translateY(60px) scale(0.9);filter:blur(10px)} 100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)} }

.logo-section { margin-bottom:1.5rem; }

.logo-icon {
    width:85px; height:85px;
    background:var(--gradient-full);
    border-radius:22px;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 1.2rem;
    font-size:2.2rem; color:white;
    animation:logoFloat 4s ease-in-out infinite, logoGlow 3s ease-in-out infinite;
    box-shadow:0 10px 40px var(--cyan-glow), 0 10px 40px var(--magenta-glow);
}

@keyframes logoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes logoGlow { 0%,100%{box-shadow:0 10px 40px var(--cyan-glow),0 10px 40px var(--magenta-glow)} 50%{box-shadow:0 15px 60px rgba(0,255,255,0.45),0 15px 60px rgba(255,0,255,0.35)} }
.logo-icon i { animation:cubeRotate 6s ease-in-out infinite; }
@keyframes cubeRotate { 0%,100%{transform:rotateY(0deg)} 50%{transform:rotateY(360deg)} }

.logo-text { font-size:2.6rem; font-weight:900; letter-spacing:-0.5px; }
.logo-text .neo { background:var(--gradient-neo); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-weight:900; }
.logo-text .mine { background:var(--gradient-mine); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-weight:900; }

.logo-separator { display:flex; align-items:center; justify-content:center; gap:0.75rem; margin:0.5rem 0; }
.sep-line { height:1px; animation:lineExpand 2s ease-out forwards; }
.sep-line.left { background:linear-gradient(90deg,transparent,var(--cyan)); }
.sep-line.right { background:linear-gradient(90deg,var(--magenta),transparent); }
@keyframes lineExpand { from{width:0;opacity:0} to{width:60px;opacity:1} }
.sep-icon { color:var(--dark-gray); font-size:1.2rem; animation:sepPulse 2s ease-in-out infinite; }
@keyframes sepPulse { 0%,100%{opacity:0.4;transform:scale(1)} 50%{opacity:1;transform:scale(1.3);color:var(--cyan)} }

.logo-subtitle { display:flex; justify-content:center; gap:3px; font-size:0.95rem; font-weight:500; text-transform:uppercase; letter-spacing:3px; }
.subtitle-letter { color:var(--text-gray); animation:letterWave 3s ease-in-out infinite; animation-delay:calc(var(--i)*0.1s); display:inline-block; }
@keyframes letterWave { 0%,100%{transform:translateY(0);color:var(--text-gray)} 25%{transform:translateY(-4px);color:var(--cyan);text-shadow:0 0 10px var(--cyan-glow)} 50%{transform:translateY(0)} }

.animated-divider { position:relative; height:2px; margin:1.5rem 0; background:linear-gradient(90deg,transparent,rgba(0,255,255,0.1),rgba(255,0,255,0.1),transparent); overflow:hidden; }
.divider-pulse { position:absolute; top:0; left:-100%; width:50%; height:100%; background:linear-gradient(90deg,transparent,var(--cyan),var(--magenta),transparent); animation:dividerSlide 3s ease-in-out infinite; }
@keyframes dividerSlide { 0%{left:-50%} 100%{left:100%} }

.info-section { margin-bottom:1.5rem; }
.info-badge { position:relative; display:inline-flex; align-items:center; gap:0.5rem; background:rgba(0,255,255,0.05); border:1px solid rgba(0,255,255,0.15); border-radius:50px; padding:0.5rem 1.2rem; font-size:0.8rem; color:var(--cyan); margin-bottom:1rem; overflow:hidden; }
.badge-pulse { position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(0,255,255,0.1),transparent); animation:badgePulse 2s ease-in-out infinite; }
@keyframes badgePulse { 0%,100%{transform:translateX(-100%)} 50%{transform:translateX(100%)} }
.info-text { color:var(--text-secondary); font-size:0.9rem; line-height:1.6; min-height:1.6em; }
.typing-cursor { display:inline-block; width:2px; height:1em; background:var(--cyan); margin-left:2px; animation:blink 0.8s infinite; vertical-align:text-bottom; }
@keyframes blink { 0%,50%{opacity:1} 51%,100%{opacity:0} }

.discord-btn { position:relative; width:100%; padding:1.1rem; background:var(--discord); border:none; border-radius:16px; color:white; font-size:1.05rem; font-weight:600; cursor:pointer; overflow:hidden; transition:all 0.4s cubic-bezier(0.16,1,0.3,1); margin-bottom:1.5rem; }
.discord-btn:hover { background:var(--discord-hover); transform:translateY(-3px) scale(1.02); box-shadow:0 15px 40px rgba(88,101,242,0.5),0 0 30px rgba(88,101,242,0.2); }
.discord-btn:active { transform:translateY(-1px) scale(0.98); }
.btn-content { display:flex; align-items:center; justify-content:center; gap:0.75rem; position:relative; z-index:2; }
.btn-shine { position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent); animation:shine 3s infinite; }
@keyframes shine { 0%{left:-100%} 50%{left:100%} 100%{left:100%} }

.status-bar { display:flex; justify-content:center; gap:1.5rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.status-item { display:flex; align-items:center; gap:0.4rem; font-size:0.7rem; color:var(--text-secondary); }
.status-dot { width:6px; height:6px; border-radius:50%; }
.status-dot.online { background:var(--green); box-shadow:0 0 6px var(--green); animation:statusPulse 2s ease-in-out infinite; }
@keyframes statusPulse { 0%,100%{box-shadow:0 0 6px var(--green)} 50%{box-shadow:0 0 12px var(--green),0 0 20px rgba(16,185,129,0.3)} }

.features { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.5rem; }
.feature-item { display:flex; flex-direction:column; align-items:center; gap:0.5rem; color:var(--text-secondary); font-size:0.72rem; cursor:default; transition:all 0.3s ease; }
.feature-item:hover { color:var(--text-primary); transform:translateY(-4px); }
.feature-icon-wrap { position:relative; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:rgba(0,255,255,0.04); border:1px solid rgba(0,255,255,0.1); border-radius:12px; transition:all 0.3s ease; }
.feature-item:hover .feature-icon-wrap { border-color:rgba(0,255,255,0.3); background:rgba(0,255,255,0.08); box-shadow:0 5px 20px rgba(0,255,255,0.15); }
.feature-icon-wrap i { font-size:1rem; background:var(--gradient-full); -webkit-background-clip:text; -webkit-text-fill-color:transparent; transition:transform 0.3s ease; }
.feature-item:hover .feature-icon-wrap i { transform:scale(1.2); }
.feature-glow { position:absolute; width:100%; height:100%; border-radius:12px; background:var(--gradient-full); opacity:0; filter:blur(15px); transition:opacity 0.3s ease; }
.feature-item:hover .feature-glow { opacity:0.15; }

.login-footer { position:relative; }
.footer-line { width:100%; height:1px; background:linear-gradient(90deg,transparent,rgba(0,255,255,0.1),rgba(255,0,255,0.1),transparent); margin-bottom:1rem; }
.login-footer p { color:var(--dark-gray); font-size:0.75rem; }
.version-badge { display:inline-block; margin-top:0.5rem; padding:0.2rem 0.6rem; background:rgba(0,255,255,0.05); border:1px solid rgba(0,255,255,0.1); border-radius:50px; font-size:0.6rem; color:var(--cyan); letter-spacing:1px; animation:versionPulse 3s ease-in-out infinite; }
@keyframes versionPulse { 0%,100%{opacity:0.5} 50%{opacity:1} }

/* ===== DASHBOARD ===== */
.dashboard-wrapper { display:flex; min-height:100vh; }
.sidebar { position:fixed; left:0; top:0; width:var(--sidebar-width); height:100vh; background:var(--bg-secondary); border-right:1px solid var(--border); display:flex; flex-direction:column; z-index:100; transition:transform 0.3s ease; }
.sidebar-header { padding:1.5rem; border-bottom:1px solid var(--border); }
.sidebar-logo { display:flex; align-items:center; gap:0.75rem; font-size:1.3rem; }
.sidebar-logo i { background:var(--gradient-full); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-size:1.5rem; }
.sidebar-logo .neo { background:var(--gradient-neo); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-weight:800; }
.sidebar-logo .mine { background:var(--gradient-mine); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-weight:800; }
.sidebar-menu { list-style:none; padding:1rem 0.75rem; flex:1; }
.menu-item { display:flex; align-items:center; gap:0.75rem; padding:0.85rem 1rem; border-radius:12px; color:var(--text-secondary); cursor:pointer; transition:all 0.2s ease; margin-bottom:0.25rem; }
.menu-item:hover { background:rgba(0,102,255,0.08); color:var(--text-primary); }
.menu-item.active { background:linear-gradient(135deg,rgba(0,255,255,0.1),rgba(0,102,255,0.15),rgba(255,0,255,0.08)); color:var(--cyan); font-weight:600; border:1px solid rgba(0,255,255,0.1); }
.menu-item.active i { background:var(--gradient-neo); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.menu-item i { width:20px; text-align:center; }
.sidebar-footer { padding:1rem; border-top:1px solid var(--border); display:flex; align-items:center; gap:0.75rem; }
.user-info { display:flex; align-items:center; gap:0.6rem; flex:1; min-width:0; }
.user-avatar,.topbar-avatar { width:36px; height:36px; border-radius:50%; border:2px solid var(--cyan); box-shadow:0 0 10px rgba(0,255,255,0.2); }
.user-details { min-width:0; }
.user-name { font-size:0.85rem; font-weight:600; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role { font-size:0.7rem; color:var(--cyan); }
.logout-btn { background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.2); color:var(--red); width:36px; height:36px; border-radius:10px; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; justify-content:center; }
.logout-btn:hover { background:rgba(239,68,68,0.2); }
.main-content { margin-left:var(--sidebar-width); flex:1; min-height:100vh; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:1rem 2rem; background:var(--bg-secondary); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; }
.topbar-left { display:flex; align-items:center; gap:1rem; }
.menu-toggle { display:none; background:none; border:none; color:var(--text-primary); font-size:1.2rem; cursor:pointer; }
.page-title { font-size:1.3rem; font-weight:700; background:var(--gradient-full); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.topbar-right { display:flex; align-items:center; gap:1rem; }
.topbar-user { display:flex; align-items:center; gap:0.6rem; font-size:0.9rem; font-weight:500; }
.content { padding:2rem; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.25rem; margin-bottom:2rem; }
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:1.5rem; display:flex; align-items:center; gap:1rem; transition:all 0.3s ease; }
.stat-card:hover { transform:translateY(-3px); border-color:var(--border-hover); box-shadow:0 10px 30px rgba(0,0,0,0.3); }
.stat-icon { width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.stat-icon.cyan{background:rgba(0,255,255,0.1);color:var(--cyan)} .stat-icon.blue{background:rgba(0,102,255,0.15);color:var(--blue)} .stat-icon.magenta{background:rgba(255,0,255,0.1);color:var(--magenta)} .stat-icon.mixed{background:linear-gradient(135deg,rgba(0,255,255,0.1),rgba(255,0,255,0.1));color:var(--cyan)}
.stat-info h3 { font-size:1.6rem; font-weight:800; background:var(--gradient-full); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.stat-info p { color:var(--text-secondary); font-size:0.8rem; margin-top:0.2rem; }
.dashboard-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(400px,1fr)); gap:1.25rem; }
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.card-header { padding:1.25rem 1.5rem; border-bottom:1px solid var(--border); background:linear-gradient(135deg,rgba(0,255,255,0.03),rgba(255,0,255,0.02)); }
.card-header h3 { font-size:1rem; font-weight:600; display:flex; align-items:center; gap:0.5rem; }
.card-header h3 i { background:var(--gradient-neo); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.card-body { padding:1.25rem 1.5rem; }
.activity-item { display:flex; align-items:flex-start; gap:0.75rem; padding:0.75rem 0; border-bottom:1px solid var(--border); }
.activity-item:last-child { border-bottom:none; }
.activity-dot { width:10px; height:10px; border-radius:50%; margin-top:5px; flex-shrink:0; }
.activity-dot.cyan{background:var(--cyan);box-shadow:0 0 8px rgba(0,255,255,0.5)} .activity-dot.blue{background:var(--blue);box-shadow:0 0 8px rgba(0,102,255,0.5)} .activity-dot.magenta{background:var(--magenta);box-shadow:0 0 8px rgba(255,0,255,0.5)} .activity-dot.mixed{background:linear-gradient(135deg,var(--cyan),var(--magenta))}
.activity-info p { font-size:0.88rem; }
.activity-info span { font-size:0.75rem; color:var(--dark-gray); }
.server-item { display:flex; align-items:center; gap:0.75rem; padding:0.85rem 0; border-bottom:1px solid var(--border); }
.server-item:last-child { border-bottom:none; }
.server-status { width:10px; height:10px; border-radius:50%; }
.server-status.online { background:var(--cyan); box-shadow:0 0 10px rgba(0,255,255,0.5); }
.server-info { flex:1; }
.server-info h4 { font-size:0.9rem; font-weight:600; }
.server-info p { font-size:0.78rem; color:var(--text-secondary); }
.server-badge { padding:0.3rem 0.75rem; border-radius:50px; font-size:0.7rem; font-weight:600; }
.server-badge.online { background:rgba(0,255,255,0.1); color:var(--cyan); border:1px solid rgba(0,255,255,0.2); }
.team-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; }
.team-card { background:var(--bg-secondary); border:1px solid var(--border); border-radius:14px; padding:1.25rem; display:flex; align-items:center; gap:1rem; transition:all 0.3s ease; }
.team-card:hover { border-color:var(--border-hover); transform:translateY(-2px); }
.team-avatar { width:48px; height:48px; border-radius:50%; }
.team-details h4 { font-size:0.95rem; font-weight:600; }
.team-details p { font-size:0.78rem; }
.console-output { background:#050510; border-radius:12px; padding:1rem; height:300px; overflow-y:auto; font-family:'Courier New',monospace; font-size:0.82rem; margin-bottom:1rem; border:1px solid var(--border); }
.console-line { padding:0.25rem 0; }
.console-time { color:var(--dark-gray); }
.console-info { color:var(--cyan); }
.console-success { color:#10b981; }
.console-cmd { color:var(--magenta); }
.console-input-wrapper { display:flex; align-items:center; gap:0.5rem; background:#050510; border-radius:12px; padding:0.75rem 1rem; border:1px solid var(--border); transition:border-color 0.3s; }
.console-input-wrapper:focus-within { border-color:rgba(0,255,255,0.3); box-shadow:0 0 15px rgba(0,255,255,0.05); }
.console-prompt { color:var(--cyan); font-family:monospace; font-weight:bold; }
.console-input { flex:1; background:none; border:none; color:var(--text-primary); font-family:monospace; font-size:0.9rem; outline:none; }
.console-send { background:var(--gradient-full); border:none; color:white; width:36px; height:36px; border-radius:10px; cursor:pointer; transition:opacity 0.2s; }
.console-send:hover { opacity:0.85; }
.page { display:none; animation:fadeIn 0.3s ease; }
.page.active { display:block; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-primary); }
::-webkit-scrollbar-thumb { background:rgba(0,255,255,0.2); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(0,255,255,0.4); }
@media (max-width:768px) { .sidebar{transform:translateX(-100%)} .sidebar.open{transform:translateX(0)} .main-content{margin-left:0} .menu-toggle{display:block} .dashboard-grid{grid-template-columns:1fr} .login-card{padding:2rem 1.5rem} .features{grid-template-columns:repeat(2,1fr)} }

/* ===== KICKED OUT ANIMATION ===== */

/* Screen Shake */
.screen-shake {
    animation: screenShake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
}

@keyframes screenShake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-10px) rotate(-1deg); }
    20% { transform: translateX(10px) rotate(1deg); }
    30% { transform: translateX(-8px) rotate(-0.5deg); }
    40% { transform: translateX(8px) rotate(0.5deg); }
    50% { transform: translateX(-5px); }
    60% { transform: translateX(5px); }
    70% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* Card slam down */
@keyframes slamDown {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    30% { transform: translateY(-30px) scale(1.05); }
    100% { transform: translateY(120vh) scale(0.3) rotate(15deg); opacity: 0; }
}

/* Kicked Overlay */
#kickedOverlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #060613;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: overlayFadeIn 0.3s ease;
    overflow: hidden;
}

@keyframes overlayFadeIn {
    from { opacity: 0; } to { opacity: 1; }
}

.kicked-container {
    position: relative;
    text-align: center;
    z-index: 2;
    padding: 2rem;
    width: 100%;
    max-width: 600px;
}

/* Red Flash */
.kicked-flash {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(239,68,68,0.4), transparent 70%);
    animation: redFlash 0.8s ease-out forwards;
    pointer-events: none;
    z-index: -1;
}

@keyframes redFlash {
    0% { opacity: 1; background: rgba(239,68,68,0.6); }
    30% { opacity: 0.8; }
    100% { opacity: 0.15; background: radial-gradient(circle, rgba(239,68,68,0.15), transparent 70%); }
}

/* Screen Crack Effect */
.crack-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crack-svg {
    width: 100%; height: 100%;
    max-width: 400px;
    opacity: 0.5;
}

.crack-line {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: crackDraw 0.8s ease-out 0.2s forwards;
}

.crack-line.delay1 { animation-delay: 0.4s; }
.crack-line.delay2 { animation-delay: 0.6s; }
.crack-line.delay3 { animation-delay: 0.8s; }

@keyframes crackDraw {
    to { stroke-dashoffset: 0; }
}

/* Ban Hammer */
.kicked-icon-area {
    position: relative;
    height: 140px;
    margin-bottom: 1rem;
}

.ban-hammer {
    display: inline-block;
    animation: hammerEntry 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.hammer-swing {
    animation: hammerSmash 0.8s cubic-bezier(0.55, 0, 1, 0.45) 0.5s both;
    transform-origin: 50% 10%;
    filter: drop-shadow(0 0 20px rgba(239,68,68,0.5));
}

@keyframes hammerEntry {
    from { transform: translateY(-100px) scale(0); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes hammerSmash {
    0% { transform: rotate(-60deg); }
    40% { transform: rotate(20deg); }
    55% { transform: rotate(-15deg); }
    70% { transform: rotate(8deg); }
    85% { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}

/* Impact Sparks */
.impact-sparks {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
}

.spark {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: sparkFly 0.8s ease-out var(--delay, 0s) both;
}

@keyframes sparkFly {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(
        calc(cos(var(--angle)) * var(--distance)),
        calc(sin(var(--angle)) * var(--distance))
    ) scale(0); opacity: 0; }
}

/* Kicked User Avatar */
.kicked-user {
    animation: userKicked 1s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
    margin-bottom: 2rem;
}

@keyframes userKicked {
    0% { transform: translateX(0) rotate(0); opacity: 0; }
    20% { opacity: 1; transform: translateX(0) rotate(0); }
    100% { opacity: 1; transform: translateX(0) rotate(0); }
}

.kicked-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #ef4444;
    box-shadow: 0 0 30px rgba(239,68,68,0.5);
    animation: avatarPulse 1.5s ease-in-out infinite 1.5s;
    margin-bottom: 0.5rem;
}

@keyframes avatarPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(239,68,68,0.3); border-color: #ef4444; }
    50% { box-shadow: 0 0 50px rgba(239,68,68,0.6); border-color: #ff6b6b; }
}

.kicked-username {
    font-size: 1rem;
    color: #9ca3af;
    font-weight: 500;
}

/* Kicked Text */
.kicked-text {
    animation: textSlamIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1s both;
}

@keyframes textSlamIn {
    0% { transform: scale(3) rotate(-5deg); opacity: 0; filter: blur(10px); }
    60% { transform: scale(0.9) rotate(1deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; filter: blur(0); }
}

.kicked-title {
    font-size: 2.5rem;
    font-weight: 900;
    color: #ef4444;
    text-shadow: 0 0 30px rgba(239,68,68,0.5), 0 0 60px rgba(239,68,68,0.2);
    letter-spacing: 4px;
    animation: titleGlitch 3s ease-in-out infinite 2s;
    margin-bottom: 1rem;
}

@keyframes titleGlitch {
    0%, 95%, 100% { text-shadow: 0 0 30px rgba(239,68,68,0.5); transform: translate(0); }
    96% { text-shadow: -3px 0 #00ffff, 3px 0 #ff00ff; transform: translate(-2px, 1px); }
    97% { text-shadow: 3px 0 #00ffff, -3px 0 #ff00ff; transform: translate(2px, -1px); }
    98% { text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff; transform: translate(1px, 2px); }
}

.kicked-subtitle-line {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ef4444, transparent);
    margin: 0 auto 1rem;
    animation: lineGrow 0.8s ease-out 1.3s both;
}

@keyframes lineGrow {
    from { width: 0; opacity: 0; }
    to { width: 200px; opacity: 1; }
}

.kicked-reason {
    font-size: 1.1rem;
    color: #9ca3af;
    line-height: 1.6;
    animation: fadeInUp2 0.5s ease 1.5s both;
}

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

/* Glitch Bars */
.glitch-bars {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}

.glitch-bar {
    position: absolute;
    width: 100%;
    height: 3px;
    background: rgba(239,68,68,0.15);
    animation: glitchBar 4s ease-in-out infinite;
}

.glitch-bar:nth-child(1) { top: 15%; animation-delay: 0s; }
.glitch-bar:nth-child(2) { top: 35%; animation-delay: 0.8s; height: 2px; }
.glitch-bar:nth-child(3) { top: 55%; animation-delay: 1.6s; }
.glitch-bar:nth-child(4) { top: 72%; animation-delay: 2.4s; height: 4px; }
.glitch-bar:nth-child(5) { top: 88%; animation-delay: 3.2s; height: 1px; }

@keyframes glitchBar {
    0%, 90%, 100% { opacity: 0; transform: translateX(0); }
    92% { opacity: 0.8; transform: translateX(-20px); }
    94% { opacity: 0; transform: translateX(20px); }
    96% { opacity: 0.5; transform: translateX(-10px); }
    98% { opacity: 0; }
}

/* Warning Stripes */
.warning-stripe {
    position: fixed;
    left: 0;
    width: 100%;
    height: 30px;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        rgba(239,68,68,0.1) 10px,
        rgba(239,68,68,0.1) 20px
    );
    z-index: 0;
    animation: stripeSlide 2s linear infinite;
}

.warning-stripe.top { top: 0; }
.warning-stripe.bottom { bottom: 0; }

@keyframes stripeSlide {
    from { background-position: 0 0; }
    to { background-position: 28px 0; }
}

/* Denied Stamps */
.denied-stamp {
    position: absolute;
    font-size: 4rem;
    font-weight: 900;
    color: rgba(239,68,68,0.06);
    text-transform: uppercase;
    letter-spacing: 10px;
    pointer-events: none;
    animation: stampAppear 0.5s ease both;
}

.stamp-1 { top: 5%; left: 10%; transform: rotate(-20deg); animation-delay: 1.8s; }
.stamp-2 { bottom: 15%; right: 5%; transform: rotate(15deg); animation-delay: 2.2s; font-size: 3rem; }
.stamp-3 { top: 60%; left: -5%; transform: rotate(-10deg); animation-delay: 2.6s; font-size: 3.5rem; }

@keyframes stampAppear {
    0% { opacity: 0; transform: scale(3) rotate(var(--r, -20deg)); }
    50% { opacity: 0.08; }
    100% { opacity: 0.06; }
}

/* Countdown */
.kicked-countdown {
    margin-top: 2.5rem;
    animation: fadeInUp2 0.5s ease 2s both;
}

.kicked-countdown p {
    color: #6b7280;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.kicked-countdown span {
    color: #ef4444;
    font-weight: 700;
    font-size: 1.1rem;
}

.kicked-back-btn {
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.3);
    color: #ef4444;
    padding: 0.7rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.kicked-back-btn:hover {
    background: rgba(239,68,68,0.2);
    box-shadow: 0 5px 20px rgba(239,68,68,0.2);
    transform: translateY(-2px);
}

.kicked-back-btn i {
    margin-right: 0.5rem;
}

@media (max-width: 768px) {
    .kicked-title { font-size: 1.8rem; letter-spacing: 2px; }
    .denied-stamp { font-size: 2rem !important; }
    .kicked-avatar { width: 60px; height: 60px; }
}

/* ===== KICKED - INFO BOX & DISCORD JOIN ===== */
.kicked-info-box {
    background: rgba(88, 101, 242, 0.08);
    border: 1px solid rgba(88, 101, 242, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    margin-top: 2rem;
    animation: fadeInUp2 0.6s ease 2s both;
}

.info-box-icon {
    font-size: 1.5rem;
    color: #5865F2;
    margin-bottom: 0.75rem;
}

.info-box-text {
    color: #9ca3af;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.discord-join-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #5865F2;
    color: white;
    text-decoration: none;
    padding: 0.8rem 1.8rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3);
}

.discord-join-btn:hover {
    background: #4752c4;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 30px rgba(88, 101, 242, 0.5);
}

.discord-join-btn:active {
    transform: translateY(-1px) scale(0.98);
}

.discord-join-btn svg {
    flex-shrink: 0;
}

/* ===== EXTRA MINECRAFT BLOCK STYLES ===== */
.lapis-block .block-front{background:linear-gradient(135deg,#1D3D8F,#2248A0);box-shadow:inset 0 0 15px rgba(34,72,160,0.4)} .lapis-block .block-top{background:#2850B0} .lapis-block .block-side{background:#15296B}
.emerald-block .block-front{background:linear-gradient(135deg,#17DD62,#0E9B41);box-shadow:inset 0 0 20px rgba(23,221,98,0.3)} .emerald-block .block-top{background:#1AE96A} .emerald-block .block-side{background:#0E9B41}
.obsidian-block .block-front{background:linear-gradient(135deg,#1a0a28,#0D0915);box-shadow:inset 0 0 15px rgba(60,20,100,0.4)} .obsidian-block .block-top{background:#150D22} .obsidian-block .block-side{background:#0F0A18}

/* Torch glow effect */
.mc-torch { animation:torchFloat var(--dur,15s) ease-in-out infinite; animation-delay:var(--delay,0s); filter:drop-shadow(0 0 15px rgba(255,140,0,0.4)) !important; }
@keyframes torchFloat { 0%,100%{transform:translateY(0) rotate(-5deg);opacity:0.6} 25%{transform:translateY(-45px) rotate(3deg);opacity:0.85} 50%{transform:translateY(-75px) rotate(-3deg);opacity:0.65} 75%{transform:translateY(-30px) rotate(5deg);opacity:0.8} }

/* Potion bubble animation */
.mc-potion { animation:potionFloat var(--dur,16s) ease-in-out infinite; animation-delay:var(--delay,0s); }
@keyframes potionFloat { 0%,100%{transform:translateY(0) rotate(-8deg) scale(1);opacity:0.5} 30%{transform:translateY(-55px) rotate(5deg) scale(1.08);opacity:0.8} 60%{transform:translateY(-85px) rotate(-5deg) scale(0.95);opacity:0.55} 85%{transform:translateY(-30px) rotate(3deg) scale(1.05);opacity:0.75} }

/* Ender eye float */
.mc-endereye { animation:enderEyeFloat var(--dur,14s) ease-in-out infinite; animation-delay:var(--delay,0s); filter:drop-shadow(0 0 12px rgba(26,255,178,0.4)) !important; }
@keyframes enderEyeFloat { 0%,100%{transform:translateY(0) rotate(0deg) scale(1);opacity:0.45} 20%{transform:translateY(-50px) rotate(15deg) scale(1.1);opacity:0.8} 40%{transform:translateY(-90px) rotate(-10deg) scale(0.95);opacity:0.5} 60%{transform:translateY(-60px) rotate(20deg) scale(1.15);opacity:0.85} 80%{transform:translateY(-25px) rotate(-5deg) scale(0.98);opacity:0.55} }

/* XP Bottle animation */
.mc-xpbottle { animation:xpFloat var(--dur,19s) ease-in-out infinite; animation-delay:var(--delay,0s); filter:drop-shadow(0 0 10px rgba(125,255,0,0.3)) !important; }
@keyframes xpFloat { 0%,100%{transform:translateY(0) rotate(10deg);opacity:0.5} 25%{transform:translateY(-60px) rotate(-15deg);opacity:0.8} 50%{transform:translateY(-95px) rotate(8deg);opacity:0.5} 75%{transform:translateY(-40px) rotate(-10deg);opacity:0.75} }

/* Steve head float */
.mc-steve { animation:steveFloat var(--dur,28s) ease-in-out infinite; animation-delay:var(--delay,0s); }
@keyframes steveFloat { 0%,100%{transform:translateY(0) rotate(0deg);opacity:0.3} 25%{transform:translateY(-40px) rotate(8deg);opacity:0.55} 50%{transform:translateY(-70px) rotate(-5deg);opacity:0.35} 75%{transform:translateY(-25px) rotate(3deg);opacity:0.5} }

/* Enhanced shooting stars - more variety */
.shooting-star:nth-child(1){animation-duration:3.5s} .shooting-star:nth-child(2){animation-duration:4.5s} .shooting-star:nth-child(3){animation-duration:3s} .shooting-star:nth-child(4){animation-duration:5s} .shooting-star:nth-child(5){animation-duration:3.8s}

/* Canvas background z-index fix */
#mcCanvas { z-index: 0 !important; }
.mc-elements { z-index: 1 !important; }
.login-wrapper { z-index: 10 !important; }

/* Extra shooting stars */
.shooting-star:nth-child(6){top:45%;left:5%;animation-delay:0.5s;width:110px;background:linear-gradient(90deg,#00ff88,transparent);animation-duration:3.2s}
.shooting-star:nth-child(7){top:15%;left:50%;animation-delay:2.5s;width:70px;background:linear-gradient(90deg,#00ffff,transparent);animation-duration:4.8s}
.shooting-star:nth-child(8){top:65%;left:70%;animation-delay:1s;width:95px;background:linear-gradient(90deg,#ff00ff,transparent);animation-duration:3.6s}
.shooting-star:nth-child(9){top:85%;left:30%;animation-delay:3.8s;width:85px;background:linear-gradient(90deg,#7dff00,transparent);animation-duration:4.2s}
.shooting-star:nth-child(10){top:35%;left:85%;animation-delay:4.5s;width:65px;background:linear-gradient(90deg,#00ccff,transparent);animation-duration:5s}






/* ===== TEAM PAGE ===== */
.team-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 1rem;
}
.search-wrapper {
    flex: 1;
    position: relative;
    max-width: 360px;
}
.search-wrapper i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.search-wrapper input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.3s;
}
.search-wrapper input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(0,255,255,0.08);
}
.team-count {
    color: var(--text-secondary);
    font-size: 0.85rem;
    white-space: nowrap;
}
.team-count span {
    color: var(--cyan);
    font-weight: 600;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
}
.team-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all 0.25s ease;
    cursor: pointer;
}
.team-card:hover {
    border-color: rgba(0,255,255,0.2);
    background: rgba(15,16,41,0.9);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.team-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.team-details {
    flex: 1;
    min-width: 0;
}
.team-details h4 {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.team-details p {
    font-size: 0.78rem;
    font-weight: 500;
}
.team-role-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.role-badge {
    font-size: 0.62rem;
    padding: 1px 7px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Team Card Joined Date */
.team-joined {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 4px;
}
.team-joined i {
    font-size: 0.6rem;
    opacity: 0.7;
}
.team-card-arrow {
    color: var(--dark-gray);
    font-size: 0.7rem;
    opacity: 0;
    transition: all 0.25s;
    padding-left: 4px;
}
.team-card:hover 
/* Team Card Joined Date */
.team-joined {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 4px;
}
.team-joined i {
    font-size: 0.6rem;
    opacity: 0.7;
}
.team-card-arrow {
    opacity: 1;
    color: var(--cyan);
}
.team-placeholder {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
    grid-column: 1 / -1;
}
.team-placeholder i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    display: block;
    background: var(--gradient-full);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.team-placeholder p {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}

/* ===== MEMBER DETAIL MODAL ===== */
.member-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(3,0,13,0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.member-modal-overlay.visible {
    opacity: 1;
}
.member-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    position: relative;
    transform: scale(0.92) translateY(16px);
    transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(0,255,255,0.04);
}
.member-modal-overlay.visible .member-modal {
    transform: scale(1) translateY(0);
}

/* Close */
.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.5);
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.modal-close:hover {
    background: rgba(255,50,50,0.6);
    color: #fff;
    transform: rotate(90deg);
}

/* Header */
.modal-header {
    position: relative;
    padding: 28px 24px 20px;
    overflow: hidden;
}
.modal-header-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--rc, #00ffff)15, transparent 70%);
    opacity: 0.5;
}
.modal-avatar-section {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
}
.modal-avatar-ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, var(--rc, #00ffff), transparent);
    flex-shrink: 0;
}
.modal-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.modal-name-section h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 3px;
}
.modal-rank {
    font-size: 0.82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}
.modal-rank i { font-size: 0.72rem; }

/* Content */
.modal-content {
    padding: 0 24px 24px;
}

/* Stats row */
.modal-stats-row {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 8px;
    margin-bottom: 16px;
}
.modal-stat {
    flex: 1;
    text-align: center;
}
.modal-stat-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.modal-stat-label {
    font-size: 0.68rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}
.modal-stat-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
}

/* Level bar */
.modal-level-section {
    margin-bottom: 16px;
}
.modal-level-bar {
    height: 4px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}
.modal-level-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s ease;
    box-shadow: 0 0 10px currentColor;
}

/* Discord info */
.modal-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 16px;
}
.modal-info-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(88,101,242,0.15);
    color: #5865F2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.modal-info-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.modal-info-label {
    font-size: 0.68rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}
.modal-info-val {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    letter-spacing: 0.3px;
}

/* Roles */
.modal-roles-section {
    margin-bottom: 4px;
}
.modal-roles-label {
    display: block;
    font-size: 0.68rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    margin-bottom: 8px;
}
.modal-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.modal-role-badge {
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rc, #6b7280);
    background: color-mix(in srgb, var(--rc, #6b7280) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--rc, #6b7280) 25%, transparent);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: transform 0.15s;
}
.modal-role-badge i { font-size: 0.6rem; }
.modal-role-badge.primary {
    background: color-mix(in srgb, var(--rc, #6b7280) 18%, transparent);
    border-color: color-mix(in srgb, var(--rc, #6b7280) 35%, transparent);
}
.modal-role-badge:hover { transform: translateY(-1px); }

@media (max-width: 768px) {
    .team-grid { grid-template-columns: 1fr; }
    .team-search { flex-direction: column; align-items: stretch; }
    .search-wrapper { max-width: none; }
}
@media (max-width: 440px) {
    .member-modal-overlay { padding: 0.75rem; }
    .modal-stats-row { flex-direction: column; gap: 8px; padding: 12px; }
    .modal-stat-divider { width: 80%; height: 1px; }
}

/* ===== MEMBER DETAIL PAGE ===== */
.member-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 6px 0;
    margin-bottom: 1rem;
    transition: color 0.2s;
}
.member-back:hover { color: var(--cyan); }
.member-back i { font-size: 0.75rem; }

/* Header Banner */
.mh-banner {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
}
.mh-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--rc, var(--cyan)), transparent);
}
.mh-info {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}
.mh-avatar-ring {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, var(--rc, var(--cyan)), transparent);
    flex-shrink: 0;
}
.mh-avatar-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.mh-text h1 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 2px;
}
.mh-rank {
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mh-rank i { font-size: 0.75rem; }

.mh-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.mh-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
}
.mh-stat-val {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1px;
    word-break: break-all;
}
.mh-stat-lbl {
    font-size: 0.68rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.mh-level {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mh-level-bar {
    flex: 1;
    height: 4px;
    background: var(--bg-card);
    border-radius: 4px;
    overflow: hidden;
}
.mh-level-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s ease;
    box-shadow: 0 0 8px currentColor;
}
.mh-level span {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    font-weight: 500;
}

/* Grid Layout */
.member-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

/* Sections */
.member-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 1.25rem;
}
.member-col-left .member-section:last-child,
.member-col-right .member-section:last-child { margin-bottom: 0; }

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.section-head h3 {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-head h3 i {
    font-size: 0.8rem;
    color: var(--cyan);
}
.section-btn {
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--cyan);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
}
.section-btn:hover {
    background: rgba(0,255,255,0.08);
    border-color: var(--cyan);
}
.section-btn.warn-btn { color: #f59e0b; }
.section-btn.warn-btn:hover { background: rgba(245,158,11,0.08); border-color: #f59e0b; }

/* Roles List */
.roles-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.role-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.2s;
}
.role-item:hover { border-color: var(--border-hover); }
.role-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 6px currentColor;
}
.role-name {
    font-size: 0.88rem;
    font-weight: 600;
    flex: 1;
}
.role-remove {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transition: all 0.2s;
}
.role-remove:hover {
    background: rgba(239,68,68,0.15);
    color: #ef4444;
}


/* Role Emoji/Icon Styles */
.role-emoji {
    font-size: 0.85rem;
    line-height: 1;
}
.role-icon-img {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    vertical-align: middle;
}
.role-emoji-lg {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
}
.role-icon-lg {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Role Groups & Sub-Level Badges */
.roles-group-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
    padding: 8px 4px 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.roles-group-label i {
    font-size: 0.65rem;
}
.roles-group-label:first-child {
    padding-top: 0;
}

.sub-level-badge {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
    letter-spacing: 0.5px;
}
.sub-level-tag {
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(52, 152, 219, 0.2);
    color: #3498db;
    margin-left: 4px;
}
.sub-level-tag-sm {
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
    margin-left: 4px;
}

/* Sub-roles in member header */
.mh-sub-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.mh-sub-badge {
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Dropdown group labels */
.dd-group-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
    padding: 8px 14px 4px;
    border-bottom: 1px solid var(--border);
}
/* Add Role Dropdown */
.add-role-dropdown {
    background: var(--bg-card);
    border: 1px solid var(--border-hover);
    border-radius: 10px;
    margin-bottom: 10px;
    max-height: 200px;
    overflow-y: auto;
}
.dd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: background 0.15s;
}
.dd-item:hover { background: rgba(0,255,255,0.06); }
.dd-item:not(:last-child) { border-bottom: 1px solid var(--border); }
.dd-empty {
    padding: 14px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

/* Warnings */
.warnings-list, .notes-list, .log-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.warning-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: rgba(239,68,68,0.05);
    border: 1px solid rgba(239,68,68,0.15);
    border-radius: 10px;
}
.warning-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(239,68,68,0.12);
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.warning-body { flex: 1; }
.warning-body p {
    font-size: 0.88rem;
    color: var(--text-primary);
    margin-bottom: 3px;
    line-height: 1.4;
}
.warning-body span {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* Notes */
.add-note-inline {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.add-note-inline textarea {
    flex: 1;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    resize: none;
    outline: none;
    transition: border-color 0.2s;
}
.add-note-inline textarea:focus { border-color: var(--cyan); }
.btn-note-send {
    width: 42px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--cyan);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
    flex-shrink: 0;
}
.btn-note-send:hover {
    background: rgba(0,255,255,0.1);
    border-color: var(--cyan);
}

.note-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.note-body { flex: 1; }
.note-body p {
    font-size: 0.85rem;
    color: var(--text-primary);
    margin-bottom: 3px;
    line-height: 1.4;
}
.note-body span {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* Log */
.log-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
}
.log-item:not(:last-child) { border-bottom: 1px solid var(--border); }
.log-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
}
.log-body { flex: 1; }
.log-body p {
    font-size: 0.82rem;
    color: var(--text-primary);
    margin-bottom: 1px;
}
.log-body span {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* Add Forms */
.add-form {
    margin-bottom: 12px;
}
.add-form textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    resize: none;
    outline: none;
    margin-bottom: 8px;
}
.add-form textarea:focus { border-color: #f59e0b; }
.add-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.btn-cancel {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}
.btn-confirm {
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Inter', sans-serif;
}
.btn-confirm.warn {
    background: rgba(245,158,11,0.15);
    color: #f59e0b;
}
.btn-confirm.warn:hover { background: rgba(245,158,11,0.25); }

/* Delete buttons */
.item-delete {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
    transition: all 0.2s;
}
.item-delete:hover { background: rgba(239,68,68,0.12); color: #ef4444; }
.item-delete.small { width: 24px; height: 24px; font-size: 0.65rem; }

/* Empty State */
.empty-state {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.empty-state i { font-size: 0.8rem; }

/* Danger Zone */
.danger-zone {
    border-color: rgba(239,68,68,0.2);
    background: rgba(239,68,68,0.03);
}
.danger-zone .section-head h3 i { color: #ef4444; }
.danger-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.danger-info p {
    font-size: 0.88rem;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.danger-info span {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.btn-danger {
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid rgba(239,68,68,0.3);
    background: rgba(239,68,68,0.1);
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
}
.btn-danger:hover {
    background: rgba(239,68,68,0.2);
    border-color: #ef4444;
}

@media (max-width: 900px) {
    .member-grid { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
    .mh-stats { grid-template-columns: 1fr 1fr; }
    .danger-content { flex-direction: column; align-items: stretch; }
}




/* Floating Theme Toggle (Login Page) */
.floating-theme-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(10,10,31,0.6);
    backdrop-filter: blur(10px);
    color: #ffd700;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: all 0.3s ease;
}
.floating-theme-btn:hover {
    transform: scale(1.15) rotate(15deg);
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255,215,0,0.3);
}
body.light-mode .floating-theme-btn {
    background: rgba(255,255,255,0.7);
    border-color: rgba(245,158,11,0.3);
    color: #f59e0b;
}
body.light-mode .floating-theme-btn:hover {
    border-color: #f59e0b;
    box-shadow: 0 0 20px rgba(245,158,11,0.3);
}

/* Theme Toggle Button */
.theme-toggle-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--cyan);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.theme-toggle-btn:hover {
    border-color: var(--cyan);
    background: rgba(0,255,255,0.08);
    transform: scale(1.1);
    box-shadow: 0 0 15px var(--cyan-glow);
}
.theme-toggle-btn i {
    transition: transform 0.5s ease, color 0.3s ease;
}
.theme-toggle-btn:hover i {
    transform: rotate(30deg);
}
body.light-mode .theme-toggle-btn {
    border-color: rgba(8,145,178,0.2);
    background: rgba(255,255,255,0.8);
    color: #f59e0b;
}
body.light-mode .theme-toggle-btn:hover {
    border-color: #f59e0b;
    background: rgba(245,158,11,0.08);
    box-shadow: 0 0 15px rgba(245,158,11,0.2);
}


/* ===== SETTINGS PAGE ===== */
.settings-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px;
}
.settings-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}
.settings-tab:hover { color: var(--text-primary); background: rgba(0,255,255,0.04); }
.settings-tab.active {
    background: var(--bg-card);
    color: var(--cyan);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.settings-tab i { font-size: 0.75rem; }
.settings-tab-content { display: none; }
.settings-tab-content.active { display: block; }

/* Role Permission Cards */
.settings-role-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 10px;
    overflow: hidden;
}
.settings-role-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.15s;
}
.settings-role-header:hover { background: rgba(0,255,255,0.03); }
.settings-role-emoji { font-size: 1.1rem; width: 24px; text-align: center; flex-shrink: 0; }
.settings-role-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.settings-role-name { font-size: 0.9rem; font-weight: 700; flex: 1; }
.settings-role-count {
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(0,255,255,0.08);
    color: var(--cyan);
    font-weight: 600;
}
.settings-role-arrow {
    color: var(--text-secondary);
    font-size: 0.7rem;
    transition: transform 0.2s;
}
.settings-role-card.open .settings-role-arrow { transform: rotate(90deg); }

.settings-role-perms {
    display: none;
    padding: 0 16px 14px;
}
.settings-role-card.open .settings-role-perms { display: block; }

/* Permission Toggle Grid */
.perm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.perm-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.perm-toggle:hover { border-color: var(--border-hover); }
.perm-toggle.active {
    border-color: rgba(16,185,129,0.3);
    background: rgba(16,185,129,0.06);
}
.perm-toggle .perm-check {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: transparent;
    transition: all 0.15s;
    flex-shrink: 0;
}
.perm-toggle.active .perm-check {
    background: var(--green);
    border-color: var(--green);
    color: white;
}
.perm-toggle .perm-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(0,255,255,0.06);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
}
.perm-toggle.active .perm-icon { color: var(--cyan); }
.perm-toggle .perm-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.perm-toggle.active .perm-label { color: var(--text-primary); }

/* User Search */
.user-perm-search {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.2s;
}
.user-perm-search:focus { border-color: var(--cyan); }
.user-search-wrap { position: relative; }
.user-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-hover);
    border-radius: 10px;
    margin-top: 4px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 50;
}
.user-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s;
}
.user-result-item:hover { background: rgba(0,255,255,0.06); }
.user-result-item:not(:last-child) { border-bottom: 1px solid var(--border); }
.user-result-item img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.user-result-item span {
    font-size: 0.85rem;
    font-weight: 500;
}

/* User Permission Card */
.user-perm-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 10px;
}
.user-perm-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.user-perm-header img { width: 36px; height: 36px; border-radius: 50%; }
.user-perm-header .user-perm-name { font-size: 0.9rem; font-weight: 700; flex: 1; }
.user-perm-remove {
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid rgba(239,68,68,0.2);
    background: transparent;
    color: #ef4444;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
}
.user-perm-remove:hover { background: rgba(239,68,68,0.1); border-color: #ef4444; }

/* Light mode */
body.light-mode .settings-tabs { background: rgba(255,255,255,0.92); }
body.light-mode .settings-tab.active { background: rgba(241,245,249,0.9); color: #0891b2; }
body.light-mode .settings-role-card { background: rgba(255,255,255,0.92); }
body.light-mode .perm-toggle { background: rgba(241,245,249,0.9); }
body.light-mode .user-perm-search { background: rgba(255,255,255,0.9); }
body.light-mode .user-search-results { background: rgba(255,255,255,0.98); }
body.light-mode .user-perm-card { background: rgba(255,255,255,0.92); }

@media (max-width: 600px) {
    .perm-grid { grid-template-columns: 1fr; }
    .settings-tabs { flex-direction: column; }
}

.maintenance-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}
.maintenance-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 48px 40px;
    text-align: center;
    max-width: 480px;
    width: 100%;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.maintenance-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(245,158,11,0.1);
    border: 2px solid rgba(245,158,11,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 2rem;
    color: #f59e0b;
    animation: pulse-warn 2s infinite;
}
@keyframes pulse-warn {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.2); }
    50% { box-shadow: 0 0 0 15px rgba(245,158,11,0); }
}
.maintenance-card h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--text-primary);
}
.maintenance-card p {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 20px;
}
.maintenance-info {
    padding: 12px 16px;
    background: rgba(0,255,255,0.05);
    border: 1px solid rgba(0,255,255,0.1);
    border-radius: 10px;
    font-size: 0.8rem;
    color: var(--cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Settings: Maintenance Section */
.maintenance-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 8px;
}
.maintenance-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.maintenance-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}
.maintenance-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.maintenance-dot.off {
    background: #6b7280;
    box-shadow: 0 0 6px rgba(107,114,128,0.4);
}
.maintenance-dot.on {
    background: #f59e0b;
    box-shadow: 0 0 8px rgba(245,158,11,0.5);
    animation: pulse-dot 1.5s infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Toggle Switch */
.switch-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}
.switch-toggle input { opacity: 0; width: 0; height: 0; }
.switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 26px;
    transition: all 0.3s;
}
.switch-slider:before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background: var(--text-secondary);
    border-radius: 50%;
    transition: all 0.3s;
}
.switch-toggle input:checked + .switch-slider {
    background: rgba(245,158,11,0.15);
    border-color: #f59e0b;
}
.switch-toggle input:checked + .switch-slider:before {
    transform: translateX(22px);
    background: #f59e0b;
}

.maintenance-message-wrap {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    align-items: center;
}
.maintenance-input {
    flex: 1;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.2s;
}
.maintenance-input:focus { border-color: var(--cyan); }
.btn-small {
    padding: 9px 16px;
    border-radius: 10px;
    border: none;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.2s;
}
.btn-save {
    background: rgba(16,185,129,0.12);
    color: #10b981;
    border: 1px solid rgba(16,185,129,0.2);
}
.btn-save:hover {
    background: rgba(16,185,129,0.2);
    border-color: #10b981;
}

/* Light mode maintenance */
body.light-mode .maintenance-card { background: rgba(255,255,255,0.95); }
body.light-mode .maintenance-section { background: rgba(255,255,255,0.92); }
body.light-mode .switch-slider { background: #f1f5f9; }
body.light-mode .maintenance-input { background: rgba(255,255,255,0.9); }

/* ===== WARTUNGS-ANIMATION ===== */
.maint-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: maintFadeIn 0.8s ease-out;
}
@keyframes maintFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.maint-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Rotating gears background */
.maint-gears {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.maint-gear {
    position: absolute;
    color: rgba(0,255,255,0.04);
}
.maint-gear.gear-1 {
    top: -60px;
    right: -40px;
    font-size: 12rem;
    animation: gearSpin 20s linear infinite;
}
.maint-gear.gear-2 {
    bottom: -80px;
    left: -60px;
    font-size: 15rem;
    animation: gearSpin 25s linear infinite reverse;
}
.maint-gear.gear-3 {
    top: 30%;
    left: 10%;
    font-size: 6rem;
    animation: gearSpin 15s linear infinite;
}
@keyframes gearSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Main card */
.maint-card {
    position: relative;
    z-index: 2;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 48px 44px;
    max-width: 520px;
    width: 90%;
    text-align: center;
    backdrop-filter: blur(20px);
    box-shadow: 0 25px 80px rgba(0,0,0,0.4), 0 0 40px rgba(0,255,255,0.03);
    animation: maintCardIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
@keyframes maintCardIn {
    from { opacity: 0; transform: translateY(40px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Animated wrench icon */
.maint-icon-wrap {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 24px;
}
.maint-icon-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(245,158,11,0.2);
    animation: ringPulse 3s ease-in-out infinite;
}
.maint-icon-ring.ring-2 {
    inset: -10px;
    border-color: rgba(245,158,11,0.1);
    animation-delay: 1s;
}
@keyframes ringPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.3; }
}
.maint-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: #f59e0b;
    background: rgba(245,158,11,0.08);
    border-radius: 50%;
    border: 2px solid rgba(245,158,11,0.25);
    animation: wrenchSwing 3s ease-in-out infinite;
}
@keyframes wrenchSwing {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-15deg); }
    40% { transform: rotate(10deg); }
    60% { transform: rotate(-8deg); }
    80% { transform: rotate(3deg); }
}

/* User avatar */
.maint-user {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    animation: maintFadeIn 0.5s ease-out 0.6s both;
}
.maint-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--border);
}
.maint-username {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Title */
.maint-title {
    font-size: 1.8rem;
    font-weight: 900;
    color: #f59e0b;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
    animation: maintFadeIn 0.5s ease-out 0.5s both;
}

/* Divider */
.maint-divider {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    animation: maintFadeIn 0.5s ease-out 0.6s both;
}
.maint-divider span {
    width: 60px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, #f59e0b, transparent);
}

/* Message */
.maint-message {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 24px;
    animation: maintFadeIn 0.5s ease-out 0.7s both;
}

/* Progress bar */
.maint-progress-wrap {
    width: 100%;
    height: 4px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
    animation: maintFadeIn 0.5s ease-out 0.8s both;
}
.maint-progress-bar {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #f59e0b, #f97316, #f59e0b);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: progressSlide 2s ease-in-out infinite;
}
@keyframes progressSlide {
    0% { transform: translateX(-100%); background-position: 0% 0%; }
    50% { background-position: 100% 0%; }
    100% { transform: translateX(400%); background-position: 0% 0%; }
}
.maint-progress-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
    animation: maintFadeIn 0.5s ease-out 0.9s both;
}
.maint-progress-text i {
    color: #f59e0b;
    margin-right: 4px;
}

/* Info box */
.maint-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    background: rgba(0,255,255,0.04);
    border: 1px solid rgba(0,255,255,0.1);
    border-radius: 12px;
    font-size: 0.78rem;
    color: var(--cyan);
    margin-bottom: 24px;
    animation: maintFadeIn 0.5s ease-out 1s both;
}

/* Buttons */
.maint-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    animation: maintFadeIn 0.5s ease-out 1.1s both;
}
.maint-btn {
    padding: 11px 22px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    border: none;
    text-decoration: none;
}
.maint-btn.discord-btn {
    background: rgba(88,101,242,0.12);
    color: #5865F2;
    border: 1px solid rgba(88,101,242,0.2);
}
.maint-btn.discord-btn:hover {
    background: rgba(88,101,242,0.2);
    border-color: #5865F2;
    transform: translateY(-2px);
}
.maint-btn.retry-btn {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
    border: 1px solid rgba(245,158,11,0.2);
}
.maint-btn.retry-btn:hover {
    background: rgba(245,158,11,0.2);
    border-color: #f59e0b;
    transform: translateY(-2px);
}

/* Floating tool particles */
.maint-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.maint-particle {
    position: absolute;
    bottom: -30px;
    color: rgba(245,158,11,0.08);
    animation: floatUp linear infinite;
}
@keyframes floatUp {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 0.1; }
    90% { opacity: 0.05; }
    100% {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Light mode overrides */
body.light-mode .maint-card {
    background: rgba(255,255,255,0.95);
    box-shadow: 0 25px 80px rgba(0,0,0,0.1), 0 0 40px rgba(0,0,0,0.03);
}
body.light-mode .maint-gear { color: rgba(245,158,11,0.06); }
body.light-mode .maint-particle { color: rgba(245,158,11,0.12); }

@media (max-width: 600px) {
    .maint-card { padding: 32px 24px; }
    .maint-title { font-size: 1.4rem; }
    .maint-buttons { flex-direction: column; }
    .maint-btn { justify-content: center; }
}



/* ===== SIDEBAR MENU LABELS & DIVIDERS ===== */
.menu-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
    padding: 16px 20px 6px;
    opacity: 0.6;
    list-style: none;
}

.menu-divider {
    height: 1px;
    background: var(--border);
    margin: 8px 16px;
    list-style: none;
}

body.light-mode .menu-label {
    color: #64748b;
}

/* ===== LIGHT MODE ===== */
body {
    transition: background-color 0.8s ease, color 0.8s ease;
}

body.light-mode {
    --bg-primary: #f0f4f8;
    --bg-secondary: rgba(255,255,255,0.92);
    --bg-card: rgba(248,250,252,0.95);
    --cyan: #0891b2;
    --blue: #2563eb;
    --magenta: #a855f7;
    --cyan-glow: rgba(8,145,178,0.15);
    --magenta-glow: rgba(168,85,247,0.1);
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-gray: #94a3b8;
    --dark-gray: #cbd5e1;
    --border: rgba(8,145,178,0.12);
    --border-hover: rgba(8,145,178,0.3);
    --gradient-neo: linear-gradient(135deg, #0891b2, #2563eb);
    --gradient-mine: linear-gradient(135deg, #2563eb, #a855f7);
    --gradient-full: linear-gradient(135deg, #0891b2, #2563eb, #a855f7);
}

body.light-mode .sidebar {
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(20px);
    border-right-color: rgba(8,145,178,0.15);
}

body.light-mode .menu-item {
    color: #475569;
}
body.light-mode .menu-item:hover {
    background: rgba(8,145,178,0.08);
    color: #0891b2;
}
body.light-mode .menu-item.active {
    background: rgba(8,145,178,0.12);
    color: #0891b2;
}

body.light-mode .main-header {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px);
    border-bottom-color: rgba(8,145,178,0.12);
}

body.light-mode .stat-card,
body.light-mode .member-section,
body.light-mode .mh-banner {
    background: rgba(255,255,255,0.92);
    border-color: rgba(8,145,178,0.1);
}

body.light-mode .mh-stat {
    background: rgba(241,245,249,0.9);
    border-color: rgba(8,145,178,0.08);
}

body.light-mode .team-card {
    background: rgba(255,255,255,0.9);
    border-color: rgba(8,145,178,0.1);
}
body.light-mode .team-card:hover {
    border-color: rgba(8,145,178,0.3);
    box-shadow: 0 4px 20px rgba(8,145,178,0.1);
}

body.light-mode .role-item {
    background: rgba(241,245,249,0.9);
    border-color: rgba(8,145,178,0.08);
}

body.light-mode .team-search input {
    background: rgba(255,255,255,0.9);
    border-color: rgba(8,145,178,0.15);
    color: #1e293b;
}
body.light-mode .team-search input::placeholder {
    color: #94a3b8;
}

body.light-mode .note-item,
body.light-mode .add-note-inline textarea,
body.light-mode .add-form textarea {
    background: rgba(241,245,249,0.9);
    border-color: rgba(8,145,178,0.1);
    color: #1e293b;
}

body.light-mode .section-btn {
    background: rgba(241,245,249,0.9);
    border-color: rgba(8,145,178,0.15);
}

body.light-mode .btn-note-send {
    background: rgba(241,245,249,0.9);
    border-color: rgba(8,145,178,0.15);
}

body.light-mode .add-role-dropdown {
    background: rgba(255,255,255,0.95);
    border-color: rgba(8,145,178,0.2);
}
body.light-mode .dd-item:hover {
    background: rgba(8,145,178,0.06);
}

body.light-mode .warning-item {
    background: rgba(239,68,68,0.05);
    border-color: rgba(239,68,68,0.12);
}

body.light-mode .danger-zone {
    background: rgba(239,68,68,0.03);
    border-color: rgba(239,68,68,0.15);
}

body.light-mode .login-card {
    background: rgba(255,255,255,0.92);
    border-color: rgba(8,145,178,0.12);
    box-shadow: 0 30px 80px rgba(0,0,0,0.08), 0 0 60px rgba(8,145,178,0.06);
}

body.light-mode .info-text {
    color: #475569;
}

body.light-mode .info-badge {
    background: rgba(8,145,178,0.08);
    border-color: rgba(8,145,178,0.2);
    color: #0891b2;
}

body.light-mode .status-item {
    color: #475569;
}

body.light-mode .feature-item {
    color: #475569;
}
body.light-mode .feature-item:hover {
    color: #1e293b;
}
body.light-mode .feature-icon-wrap {
    background: rgba(8,145,178,0.06);
    border-color: rgba(8,145,178,0.15);
}
body.light-mode .feature-item:hover .feature-icon-wrap {
    border-color: rgba(8,145,178,0.35);
    background: rgba(8,145,178,0.1);
    box-shadow: 0 5px 20px rgba(8,145,178,0.12);
}

body.light-mode .login-footer p {
    color: #94a3b8;
}
body.light-mode .footer-line {
    background: linear-gradient(90deg, transparent, rgba(8,145,178,0.15), rgba(168,85,247,0.1), transparent);
}
body.light-mode .version-badge {
    background: rgba(8,145,178,0.08);
    border-color: rgba(8,145,178,0.15);
    color: #0891b2;
}

body.light-mode .animated-divider {
    background: linear-gradient(90deg, transparent, rgba(8,145,178,0.15), rgba(168,85,247,0.1), transparent);
}

body.light-mode .subtitle-letter {
    color: #94a3b8;
}

body.light-mode .typing-cursor {
    background: #0891b2;
}

body.light-mode ::-webkit-scrollbar-track {
    background: #f1f5f9;
}
body.light-mode ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}
body.light-mode ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Smooth transitions for all themed elements */
.sidebar, .main-header, .stat-card, .team-card, .member-section,
.mh-banner, .mh-stat, .role-item, .note-item, .warning-item,
.section-btn, .btn-note-send, .add-role-dropdown, .login-card {
    transition: background-color 0.6s ease, border-color 0.6s ease, color 0.6s ease, box-shadow 0.6s ease;
}

/* ===== CHANGELOG SYSTEM ===== */
.cl-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    transition: border-color 0.3s ease;
}
.cl-section:hover {
    border-color: var(--border-hover);
}
.cl-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.cl-header i {
    font-size: 1.1rem;
    background: var(--gradient-neo);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cl-header h3 {
    font-size: 1rem;
    font-weight: 700;
    background: var(--gradient-full);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cl-header .cl-header-sub {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-left: auto;
}
.cl-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    align-items: end;
}
.cl-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cl-field label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cl-input {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-family: inherit;
    transition: all 0.2s ease;
    outline: none;
    width: 100%;
}
.cl-input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(0,255,255,0.08), 0 0 20px rgba(0,255,255,0.05);
}
.cl-input::placeholder {
    color: var(--dark-gray);
}
.cl-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding-bottom: 2px;
}
.cl-checkbox-label input[type="checkbox"] {
    accent-color: var(--cyan);
    width: 16px;
    height: 16px;
}
.cl-entry-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: all 0.2s ease;
}
.cl-entry-row:hover {
    border-color: var(--border-hover);
    background: rgba(17,17,40,0.9);
}
.cl-entry-row select {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
    cursor: pointer;
}
.cl-entry-row select:focus {
    border-color: var(--cyan);
}
.cl-entry-row .cl-input {
    background: var(--bg-primary);
    padding: 8px 12px;
}
.cl-entry-remove {
    background: transparent;
    border: 1px solid rgba(239,68,68,0.2);
    color: var(--red);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.cl-entry-remove:hover {
    background: rgba(239,68,68,0.15);
    border-color: var(--red);
}
.cl-btn-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px dashed var(--border-hover);
    color: var(--cyan);
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 4px;
}
.cl-btn-add:hover {
    background: rgba(0,255,255,0.05);
    border-color: var(--cyan);
    box-shadow: 0 0 15px rgba(0,255,255,0.08);
}
.cl-btn-group {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.cl-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
}
.cl-btn-save {
    background: var(--gradient-neo);
    color: var(--bg-primary);
}
.cl-btn-save:hover {
    box-shadow: 0 4px 20px rgba(0,255,255,0.3);
    transform: translateY(-1px);
}
.cl-btn-schedule {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: var(--bg-primary);
}
.cl-btn-schedule:hover {
    box-shadow: 0 4px 20px rgba(245,158,11,0.3);
    transform: translateY(-1px);
}
.cl-btn-preview {
    background: transparent;
    border: 1px solid var(--border-hover);
    color: var(--text-secondary);
}
.cl-btn-preview:hover {
    border-color: var(--cyan);
    color: var(--cyan);
    box-shadow: 0 0 15px rgba(0,255,255,0.1);
}
.cl-btn-send {
    background: var(--gradient-neo);
    color: var(--bg-primary);
    padding: 6px 14px;
    font-size: 0.78rem;
}
.cl-btn-send:hover {
    box-shadow: 0 4px 15px rgba(0,255,255,0.3);
}
.cl-btn-icon {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.cl-btn-icon:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
}
.cl-btn-icon.danger:hover {
    border-color: rgba(239,68,68,0.4);
    color: var(--red);
}
.cl-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.cl-status-draft {
    background: rgba(107,114,128,0.15);
    color: #9ca3af;
    border: 1px solid rgba(107,114,128,0.2);
}
.cl-status-scheduled {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
    border: 1px solid rgba(245,158,11,0.2);
    animation: clScheduledPulse 2s ease-in-out infinite;
}
@keyframes clScheduledPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
    50% { box-shadow: 0 0 8px rgba(245,158,11,0.2); }
}
.cl-status-sent {
    background: rgba(16,185,129,0.1);
    color: var(--green);
    border: 1px solid rgba(16,185,129,0.2);
}
.cl-status-sent i {
    font-size: 0.6rem;
}
.cl-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 10px;
    background: var(--bg-secondary);
    transition: all 0.2s ease;
    gap: 12px;
    flex-wrap: wrap;
}
.cl-item:hover {
    border-color: var(--border-hover);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    transform: translateY(-1px);
}
.cl-item-info h4 {
    font-size: 0.92rem;
    font-weight: 600;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cl-item-meta {
    font-size: 0.78rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.cl-item-meta i {
    font-size: 0.7rem;
    color: var(--dark-gray);
}
.cl-item-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.cl-discord-preview {
    background: #2f3136;
    border-radius: 8px;
    padding: 16px 20px;
    font-family: 'gg sans', 'Noto Sans', Helvetica, Arial, sans-serif;
    color: #dcddde;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 450px;
    overflow-y: auto;
    border-left: 3px solid var(--cyan);
}
.cl-discord-preview .dc-mention {
    color: #dee0fc;
    background: rgba(88,101,242,0.3);
    padding: 0 3px;
    border-radius: 3px;
    font-weight: 500;
}
.cl-discord-preview strong {
    color: #fff;
}
.cl-page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}
.cl-page-title-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--gradient-neo);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--bg-primary);
    box-shadow: 0 4px 15px rgba(0,255,255,0.2);
}
.cl-page-title h2 {
    font-size: 1.3rem;
    font-weight: 700;
}
.cl-page-title p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 2px;
}


/* Changelog Entry Card - Two-line layout */
.cl-entry-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}
.cl-entry-card:hover {
    border-color: var(--border-hover);
}
.cl-entry-top {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.cl-entry-top .cl-cat {
    width: 180px;
    flex-shrink: 0;
    padding: 7px 12px;
    font-size: 0.85rem;
    background: var(--bg-primary);
}
.cl-entry-top .cl-type {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 10px;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    flex-shrink: 0;
}
.cl-entry-top .cl-type:focus {
    border-color: var(--cyan);
}
.cl-entry-top .cl-entry-remove {
    margin-left: auto;
}
.cl-entry-card > .cl-desc {
    width: 100%;
    background: var(--bg-primary);
    padding: 9px 12px;
    font-size: 0.88rem;
}

/* Modal card base styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    max-width: 500px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(0,255,255,0.05);
}
.modal-card .modal-header {
    padding: 20px 24px 14px;
    border-bottom: 1px solid var(--border);
}
.modal-card .modal-header h3 {
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.modal-card .modal-body {
    padding: 20px 24px;
}

/* Hide empty modal footer */
.modal-footer:empty {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
}

/* ===== FILE MANAGER ===== */
.fm-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.fm-header h2 { font-size:1.3rem; display:flex; align-items:center; gap:10px; }
.fm-header h2 i { background:var(--gradient-neo); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.fm-actions { display:flex; gap:8px; flex-wrap:wrap; }
.fm-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:10px; border:none; font-size:0.82rem; font-weight:600; font-family:inherit; cursor:pointer; transition:all 0.3s ease; }
.fm-btn-primary { background:var(--gradient-neo); color:var(--bg-primary); }
.fm-btn-primary:hover { box-shadow:0 4px 20px rgba(0,255,255,0.3); transform:translateY(-1px); }
.fm-btn-secondary { background:transparent; border:1px solid var(--border-hover); color:var(--text-secondary); }
.fm-btn-secondary:hover { border-color:var(--cyan); color:var(--cyan); }

.fm-breadcrumbs { display:flex; align-items:center; gap:6px; margin-bottom:16px; font-size:0.85rem; flex-wrap:wrap; }
.fm-breadcrumb { color:var(--text-secondary); cursor:pointer; transition:color 0.2s; padding:4px 8px; border-radius:6px; }
.fm-breadcrumb:hover { color:var(--cyan); background:rgba(0,255,255,0.05); }
.fm-breadcrumb.active { color:var(--text-primary); cursor:default; }
.fm-breadcrumb-sep { color:var(--dark-gray); font-size:0.7rem; }

.fm-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px; }
.fm-list { display:flex; flex-direction:column; gap:4px; }

.fm-item { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:16px; cursor:pointer; transition:all 0.2s ease; position:relative; }
.fm-item:hover { border-color:var(--border-hover); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.2); }
.fm-item-icon { font-size:2.5rem; margin-bottom:10px; text-align:center; }
.fm-item-icon.folder { color:#f59e0b; }
.fm-item-icon.file { color:var(--cyan); }
.fm-item-icon.image { color:#8b5cf6; }
.fm-item-icon.video { color:#ef4444; }
.fm-item-icon.pdf { color:#ef4444; }
.fm-item-icon.doc { color:#3b82f6; }
.fm-item-name { font-size:0.82rem; font-weight:600; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fm-item-meta { font-size:0.7rem; color:var(--text-secondary); text-align:center; margin-top:4px; }

.fm-list-item { display:flex; align-items:center; gap:12px; padding:10px 16px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:10px; cursor:pointer; transition:all 0.2s; }
.fm-list-item:hover { border-color:var(--border-hover); background:var(--bg-card); }
.fm-list-icon { font-size:1.3rem; width:36px; text-align:center; flex-shrink:0; }
.fm-list-info { flex:1; min-width:0; }
.fm-list-name { font-size:0.88rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fm-list-meta { font-size:0.75rem; color:var(--text-secondary); display:flex; gap:12px; margin-top:2px; }
.fm-list-actions { display:flex; gap:4px; flex-shrink:0; opacity:0; transition:opacity 0.2s; }
.fm-list-item:hover .fm-list-actions { opacity:1; }
.fm-list-action { background:transparent; border:1px solid var(--border); color:var(--text-secondary); border-radius:6px; padding:4px 8px; cursor:pointer; font-size:0.75rem; transition:all 0.2s; }
.fm-list-action:hover { border-color:var(--cyan); color:var(--cyan); }
.fm-list-action.danger:hover { border-color:var(--red); color:var(--red); }

.fm-upload-zone { border:2px dashed var(--border-hover); border-radius:12px; padding:40px 20px; text-align:center; cursor:pointer; transition:all 0.3s; margin-bottom:20px; display:none; }
.fm-upload-zone.visible { display:block; }
.fm-upload-zone:hover, .fm-upload-zone.dragover { border-color:var(--cyan); background:rgba(0,255,255,0.03); }
.fm-upload-zone i { font-size:2rem; color:var(--cyan); margin-bottom:10px; display:block; }
.fm-upload-zone span { color:var(--text-secondary); font-size:0.85rem; }
.fm-upload-zone small { display:block; color:var(--dark-gray); font-size:0.75rem; margin-top:6px; }

.fm-empty { text-align:center; padding:60px 20px; color:var(--text-secondary); }
.fm-empty i { font-size:3rem; display:block; margin-bottom:12px; color:var(--dark-gray); }

.fm-preview-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:1001; display:flex; align-items:center; justify-content:center; padding:20px; }
.fm-preview-box { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; max-width:90vw; max-height:90vh; overflow:auto; position:relative; }
.fm-preview-close { position:absolute; top:12px; right:12px; background:rgba(0,0,0,0.5); border:none; color:#fff; border-radius:8px; padding:8px 12px; cursor:pointer; z-index:10; font-size:1rem; }
.fm-preview-content { padding:20px; }
.fm-preview-content img { max-width:100%; max-height:80vh; border-radius:8px; }
.fm-preview-content video { max-width:100%; max-height:80vh; border-radius:8px; }
.fm-preview-content pre { background:var(--bg-secondary); padding:16px; border-radius:8px; overflow-x:auto; font-size:0.85rem; color:var(--text-primary); max-height:70vh; }

.fm-view-toggle { display:flex; gap:2px; background:var(--bg-secondary); border-radius:8px; padding:2px; }
.fm-view-btn { background:transparent; border:none; color:var(--text-secondary); padding:6px 10px; border-radius:6px; cursor:pointer; font-size:0.85rem; }
.fm-view-btn.active { background:var(--bg-card); color:var(--cyan); }


/* ===== SHARING MODAL ===== */
.share-modal {
    min-width: min(600px, 90vw);
}
.share-header-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(0,255,255,0.04), rgba(0,102,255,0.04));
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 20px;
}
.share-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.share-header-info {
    flex: 1;
    min-width: 0;
}
.share-header-name {
    font-weight: 700;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.share-header-type {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 2px;
}
.share-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
}
.share-quick-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}
.share-quick-btn:hover {
    border-color: var(--cyan);
    color: var(--cyan);
    background: rgba(0,255,255,0.04);
    box-shadow: 0 0 20px rgba(0,255,255,0.06);
}
.share-quick-btn i {
    font-size: 0.9rem;
}
.share-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 16px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
}
.share-divider::before, .share-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.share-add-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.share-add-row .cl-field {
    flex: 1;
    min-width: 0;
}
.share-add-row .cl-field:last-of-type {
    flex: 0 0 140px;
}
.share-add-btn {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--gradient-neo);
    border: none;
    color: var(--bg-primary);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.share-add-btn:hover {
    box-shadow: 0 4px 15px rgba(0,255,255,0.3);
    transform: translateY(-1px);
}
.share-perm-list {
    margin-top: 16px;
}
.share-perm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 6px;
    transition: all 0.2s ease;
}
.share-perm-item:hover {
    border-color: var(--border-hover);
}
.share-perm-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.share-perm-avatar.role {
    background: rgba(0,255,255,0.08);
    color: var(--cyan);
}
.share-perm-avatar.user {
    background: rgba(255,0,255,0.08);
    color: var(--magenta);
}
.share-perm-avatar.everyone {
    background: rgba(16,185,129,0.1);
    color: #10b981;
}
.share-perm-info {
    flex: 1;
    min-width: 0;
}
.share-perm-name {
    font-size: 0.88rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.share-perm-type {
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.share-perm-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}
.share-perm-badge.view {
    background: rgba(0,255,255,0.08);
    color: var(--cyan);
    border: 1px solid rgba(0,255,255,0.15);
}
.share-perm-badge.edit {
    background: rgba(245,158,11,0.08);
    color: #f59e0b;
    border: 1px solid rgba(245,158,11,0.15);
}
.share-perm-badge.admin {
    background: rgba(239,68,68,0.08);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,0.15);
}
.share-perm-remove {
    background: transparent;
    border: none;
    color: var(--dark-gray);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.2s;
    font-size: 0.85rem;
}
.share-perm-remove:hover {
    color: var(--red);
    background: rgba(239,68,68,0.1);
}
.share-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    border: 1px dashed var(--border);
    border-radius: 10px;
}
.share-empty i {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 8px;
    color: var(--dark-gray);
}

/* File no-access state */
.fm-list-item.fm-no-access {
    opacity: 0.6;
    cursor: not-allowed;
}
.fm-list-item.fm-no-access:hover {
    border-color: rgba(239,68,68,0.15);
    transform: none;
    background: var(--bg-secondary);
}
.fm-item.fm-no-access {
    opacity: 0.5;
    cursor: not-allowed;
}
.fm-item.fm-no-access:hover {
    transform: none;
    border-color: rgba(239,68,68,0.15);
}


/* ===== DOCUMENT / SPREADSHEET EDITOR ===== */
.doc-editor-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 16px;
}
.doc-editor-back {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.doc-editor-back:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}
.doc-editor-title {
    flex: 1;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 700;
    font-family: inherit;
    padding: 6px 12px;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s;
}
.doc-editor-title:focus {
    border-color: var(--border-hover);
}
.doc-editor-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.doc-editor-save {
    background: var(--gradient-neo);
    border: none;
    color: var(--bg-primary);
    padding: 8px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.doc-editor-save:hover {
    box-shadow: 0 4px 15px rgba(0,255,255,0.3);
}
.doc-editor-save.saving {
    opacity: 0.6;
    pointer-events: none;
}
.doc-editor-autosave {
    font-size: 0.7rem;
    color: var(--dark-gray);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Quill overrides for dark theme */
.doc-quill-wrap {
    background: #1a1a2e;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    min-height: 500px;
}
.doc-quill-wrap .ql-toolbar {
    background: var(--bg-secondary);
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
}
.doc-quill-wrap .ql-toolbar .ql-stroke {
    stroke: var(--text-secondary);
}
.doc-quill-wrap .ql-toolbar .ql-fill {
    fill: var(--text-secondary);
}
.doc-quill-wrap .ql-toolbar .ql-picker-label {
    color: var(--text-secondary);
}
.doc-quill-wrap .ql-toolbar button:hover .ql-stroke,
.doc-quill-wrap .ql-toolbar button.ql-active .ql-stroke {
    stroke: var(--cyan);
}
.doc-quill-wrap .ql-toolbar button:hover .ql-fill,
.doc-quill-wrap .ql-toolbar button.ql-active .ql-fill {
    fill: var(--cyan);
}
.doc-quill-wrap .ql-container {
    border: none;
    font-size: 1rem;
}
.doc-quill-wrap .ql-editor {
    min-height: 500px;
    padding: 30px 40px;
    color: #e0e0e0;
    line-height: 1.8;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.05rem;
    background: #12122a;
}
.doc-quill-wrap .ql-editor h1 { color: var(--cyan); font-size: 2rem; }
.doc-quill-wrap .ql-editor h2 { color: var(--text-primary); font-size: 1.5rem; }
.doc-quill-wrap .ql-editor h3 { color: var(--text-primary); font-size: 1.2rem; }
.doc-quill-wrap .ql-editor a { color: var(--cyan); }
.doc-quill-wrap .ql-editor blockquote {
    border-left: 3px solid var(--cyan);
    padding-left: 16px;
    color: var(--text-secondary);
}
.doc-quill-wrap .ql-editor code, .doc-quill-wrap .ql-editor pre {
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    color: var(--cyan);
}
.doc-quill-wrap .ql-snow .ql-picker-options {
    background: var(--bg-card);
    border: 1px solid var(--border);
}







.doc-quill-wrap.doc-dark-mode .ql-editor {
    background: #0c0c1d;
    color: #e0e0e0;
}
.doc-quill-wrap.doc-dark-mode .ql-toolbar {
    background: #111128;
}

/* Dark mode toggle button styled */
.doc-dark-toggle {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.82rem;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    white-space: nowrap;
}
.doc-dark-toggle:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}
.doc-dark-toggle.active {
    background: rgba(0,255,255,0.08);
    border-color: var(--cyan);
    color: var(--cyan);
}









/* Editor as full-page overlay */
.doc-editor-fullpage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 500;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
}
.doc-editor-fullpage .doc-editor-header {
    flex-shrink: 0;
    z-index: 501;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    padding: 8px 16px;
    margin: 0;
}
.doc-editor-fullpage .doc-luckysheet-outer {
    flex: 1;
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fff;
}
.doc-editor-fullpage .doc-quill-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px;
}

/* Luckysheet dark mode - only UI elements, preserve cell colors */
.doc-luckysheet-outer.doc-dark-mode {
    background: #1a1a2e;
}
.doc-luckysheet-outer.doc-dark-mode .luckysheet-wa-editor {
    background: #1a1a2e !important;
}
/* Toolbar dark */
.doc-luckysheet-outer.doc-dark-mode #luckysheet-wa-editor .luckysheet-toolbar-button-outer-box {
    color: #ccc !important;
}
.doc-luckysheet-outer.doc-dark-mode .luckysheet-toolbar-menu {
    background: #111128 !important;
    border-color: rgba(255,255,255,0.1) !important;
}
/* Row/Column headers dark */
.doc-luckysheet-outer.doc-dark-mode .luckysheet-cell-header,
.doc-luckysheet-outer.doc-dark-mode .luckysheet-cols-h-cells .luckysheet-cols-h-cell,
.doc-luckysheet-outer.doc-dark-mode .luckysheet-rows-h-cells .luckysheet-rows-h-cell {
    background: #161638 !important;
    color: #9ca3af !important;
    border-color: rgba(255,255,255,0.08) !important;
}
/* Sheet tabs dark */
.doc-luckysheet-outer.doc-dark-mode .luckysheet-sheet-area {
    background: #111128 !important;
    border-color: rgba(255,255,255,0.08) !important;
}
.doc-luckysheet-outer.doc-dark-mode .luckysheet-sheets-item {
    background: #161638 !important;
    color: #ccc !important;
    border-color: rgba(255,255,255,0.1) !important;
}
/* Scrollbars dark */
.doc-luckysheet-outer.doc-dark-mode .luckysheet-scrollbar-x,
.doc-luckysheet-outer.doc-dark-mode .luckysheet-scrollbar-y {
    background: rgba(255,255,255,0.05) !important;
}
/* Formula bar dark */
.doc-luckysheet-outer.doc-dark-mode .luckysheet-formula-functionrange-cell {
    background: #161638 !important;
    color: #ccc !important;
}
/* Dropdown menus dark */
.doc-luckysheet-outer.doc-dark-mode .luckysheet-toolbar-select {
    background: #161638 !important;
    color: #ccc !important;
    border-color: rgba(255,255,255,0.1) !important;
}
/* Cell grid lines subtle */
.doc-luckysheet-outer.doc-dark-mode .luckysheet-cell-border {
    border-color: rgba(255,255,255,0.05) !important;
}
/* Status bar dark */
.doc-luckysheet-outer.doc-dark-mode .luckysheet-stat-area {
    background: #111128 !important;
    color: #9ca3af !important;
}
/* Empty cells - slightly dark background but cell COLORS stay original */
.doc-luckysheet-outer.doc-dark-mode .luckysheet-grid-window {
    background: #1e1e3a !important;
}