:root {
    /* Core colors */
    --bg-body: #0a0a0a;
    --bg-header: #0a0a0a;
    --bg-card: #161616;
    --bg-dropdown: #1a1a1a;
    --bg-input: #111;
    --bg-hover: rgba(255,255,255,0.05);
    
    /* Borders */
    --border-color: #333;
    --border-light: #444;
    --border-dark: #222;
    
    /* Accent colors */
    --accent: #ff9800;
    --accent-hover: #ffb74d;
    --green: #4caf50;
    --blue: #4fc3f7;
    --purple: #bb86fc;
    --gold: #ffd700;
    --gold-dim: #aa9d56;
    
    /* Text colors */
    --text-main: #e0e0e0;
    --text-sub: #888;
    --text-muted: #666;
    --text-dim: #555;
    
    /* Status colors */
    --red-box-bg: #220a0a;
    --red-box-border: #6e1818;
    --urgent-red: #ff3333;
    
    /* UI elements */
    --bar-bg: #2a2a2a;
    --header-height: 72px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 50px;
    
    /* Shadows */
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
    --shadow-glow: 0 0 15px rgba(255,152,0,0.3);
    
    /* Transitions */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
}
* { box-sizing: border-box; }
html { height: 100%; }
body { 
    background: var(--bg-body); margin: 0; 
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
    color: var(--text-main); 
    min-height: 100vh; 
    overflow-x: hidden;
    overflow-y: auto; 
    display: flex; 
    flex-direction: column;
}

/* Specific layout for the Community Hub to fix chat input visibility */
body.community-page {
    height: 100vh;
    overflow: hidden;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 5px; border: 2px solid #0a0a0a; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* COMPACT UI MODE */
body.compact-ui .card { min-height: 0; padding: 15px; }
body.compact-ui .dashboard { gap: 10px; }
body.compact-ui .card-main-text { font-size: 1.5rem; margin: 10px 0; }
body.compact-ui .skill-card-detailed { min-height: 80px; padding: 8px; flex: 0 1 140px; }
body.compact-ui .skill-lvl { font-size: 1.2rem; }
body.compact-ui .skill-icon-lg { width: 24px; height: 24px; }
body.compact-ui .task-item { padding: 6px 10px; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pulse-green { 0%, 100% { text-shadow: 0 0 5px rgba(76, 175, 80, 0.2); opacity: 1; } 50% { text-shadow: 0 0 20px rgba(76, 175, 80, 0.8); opacity: 0.8; } }
@keyframes popIn { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes shineScroll { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
@keyframes banner-wave { 
    0% { transform: rotate(0deg) translateY(0) skewY(0deg); } 
    15% { transform: rotate(1.5deg) translateY(-2px) skewY(0.5deg); } 
    30% { transform: rotate(0.5deg) translateY(-3px) skewY(-0.5deg); } 
    45% { transform: rotate(-1deg) translateY(-1px) skewY(-1deg); } 
    60% { transform: rotate(-0.5deg) translateY(1px) skewY(0deg); } 
    75% { transform: rotate(0.5deg) translateY(-1px) skewY(0.5deg); } 
    90% { transform: rotate(0.2deg) translateY(0) skewY(0.2deg); } 
    100% { transform: rotate(0deg) translateY(0) skewY(0deg); } 
}
@keyframes mythicPulse {
    0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 10px rgba(187,134,252,0.3)); transform: scale(1); }
    50% { background-position: 100% 50%; filter: drop-shadow(0 0 25px rgba(79,195,247,0.9)) drop-shadow(0 0 5px #fff); transform: scale(1.05); }
}
@keyframes avatar-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 5px currentColor; } 50% { transform: scale(1.08); box-shadow: 0 0 20px currentColor; } }
@keyframes pulse-red-glow { 0%, 100% { text-shadow: 0 0 5px rgba(255,51,51,0.6); opacity: 1; transform: scale(1); } 50% { text-shadow: 0 0 15px #f33, 0 0 5px rgba(255,255,255,0.8); opacity: 1; transform: scale(1.05); } }
@keyframes pulse-green-glow { 0%, 100% { text-shadow: 0 0 5px rgba(76,175,80,0.6); opacity: 1; transform: scale(1); } 50% { text-shadow: 0 0 15px #4caf50, 0 0 5px rgba(255,255,255,0.8); opacity: 1; transform: scale(1.05); } }
@keyframes badgePulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,51,51,0.7); } 70% { transform: scale(1.2); box-shadow: 0 0 0 6px transparent; } 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } }

/* LEGENDARY EFFECTS KEYFRAMES - THE CRAZY STUFF */
@keyframes effect-rainbow { 0% { color: #f33; } 20% { color: #f90; } 40% { color: #ff3; } 60% { color: #3f3; } 80% { color: #39f; } 100% { color: #f3f; } }
@keyframes effect-fire { 0%, 100% { text-shadow: 0 0 5px #f90, 0 -2px 5px #f00; transform: skewX(-1deg); } 50% { text-shadow: 0 -5px 15px #f00, 0 0 10px #f90; transform: skewX(1deg); } }
@keyframes effect-ice { 0%, 100% { text-shadow: 0 0 5px #fff, 0 0 10px #0ff; } 50% { text-shadow: 0 0 20px #0ff, 0 0 5px #fff; } }
@keyframes effect-glitch { 0% { clip-path: inset(50% 0 30% 0); transform: translate(-2px,2px); } 20% { clip-path: inset(15% 0 60% 0); transform: translate(2px,-2px); } 40% { clip-path: inset(80% 0 5% 0); transform: translate(-2px,1px); } 60% { clip-path: inset(40% 0 40% 0); transform: translate(2px,2px); } 80% { clip-path: inset(10% 0 70% 0); transform: translate(-1px,-2px); } 100% { clip-path: inset(50% 0 30% 0); transform: translate(1px,1px); } }
@keyframes effect-matrix { 0% { text-shadow: 0 0 3px #0f0; opacity:1; } 50% { text-shadow: 0 5px 10px #0f0, 2px 0 2px #000; opacity:0.8; } 100% { text-shadow: 0 0 3px #0f0; opacity:1; } }
@keyframes effect-cosmic { 0% { filter: hue-rotate(0deg); text-shadow: 0 0 10px #8000ff; } 100% { filter: hue-rotate(360deg); text-shadow: 0 0 20px #ff0080; } }
@keyframes effect-lightning { 0%, 90% { text-shadow: none; color: inherit; } 91% { text-shadow: 0 0 10px #fff, 0 0 20px #ffeb3b; color: #fff; } 92% { text-shadow: none; color: inherit; } 94% { text-shadow: 0 0 10px #fff, 0 0 20px #ffeb3b; color: #fff; } 100% { text-shadow: none; color: inherit; } }
@keyframes effect-blood { 0% { text-shadow: 0 0 5px #f00; color: #800000; } 50% { text-shadow: 0 3px 10px #f00; color: #f00; } 100% { text-shadow: 0 0 5px #f00; color: #800000; } }
@keyframes effect-neon { 0%, 100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px var(--accent), 0 0 30px var(--accent); } 50% { text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 10px var(--accent), 0 0 15px var(--accent); } }
@keyframes effect-terminal { 0%, 50% { border-right: 3px solid #0f0; } 51%, 100% { border-right: 3px solid transparent; } }
@keyframes effect-shadow { 0% { text-shadow: 0 0 10px #000; filter: blur(0px); } 50% { text-shadow: 0 0 20px #000; filter: blur(0.5px); } 100% { text-shadow: 0 0 10px #000; filter: blur(0px); } }

/* === MEGA NEW NAME EFFECTS - LEGENDARY TIER === */
@keyframes effect-cyber { 0%, 100% { text-shadow: 2px 0 #0ff, -2px 0 #f0f; } 25% { text-shadow: -2px 0 #0ff, 2px 0 #f0f; } 50% { text-shadow: 2px 2px #0ff, -2px -2px #f0f; } 75% { text-shadow: -2px 2px #0ff, 2px -2px #f0f; } }
@keyframes effect-wave { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-3px); } 50% { transform: translateY(0); } 75% { transform: translateY(3px); } }
@keyframes effect-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 50% { transform: translateX(2px); } 75% { transform: translateX(-1px); } }
@keyframes effect-pulse-grow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes effect-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes effect-rotate { 0% { transform: rotate(-2deg); } 100% { transform: rotate(2deg); } }
@keyframes effect-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes effect-heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.15); } 28% { transform: scale(1); } 42% { transform: scale(1.15); } 70% { transform: scale(1); } }
@keyframes effect-typewriter { 0%, 100% { border-right-color: transparent; } 50% { border-right-color: currentColor; } }
@keyframes effect-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(1deg); } }
@keyframes effect-jello { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(0.95, 1.05); } 50% { transform: scale(1.05, 0.95); } 75% { transform: scale(0.98, 1.02); } }
@keyframes effect-rubberband { 0%, 100% { transform: scaleX(1); } 30% { transform: scaleX(1.15); } 40% { transform: scaleX(0.9); } 50% { transform: scaleX(1.05); } 65% { transform: scaleX(0.95); } 75% { transform: scaleX(1.03); } }
@keyframes effect-static { 0% { text-shadow: 1px 1px 0 #fff, -1px -1px 0 #000; } 25% { text-shadow: -1px 1px 0 #fff, 1px -1px 0 #000; } 50% { text-shadow: 1px -1px 0 #fff, -1px 1px 0 #000; } 75% { text-shadow: -1px -1px 0 #fff, 1px 1px 0 #000; } }
@keyframes effect-vaporwave { 0%, 100% { text-shadow: 2px 2px 0 #ff71ce, 4px 4px 0 #01cdfe; } 50% { text-shadow: -2px -2px 0 #ff71ce, -4px -4px 0 #01cdfe; } }
@keyframes effect-synthwave { 0% { text-shadow: 0 0 10px #f0f, 0 0 20px #0ff, 0 0 30px #f0f; } 50% { text-shadow: 0 0 20px #0ff, 0 0 40px #f0f, 0 0 60px #0ff; } 100% { text-shadow: 0 0 10px #f0f, 0 0 20px #0ff, 0 0 30px #f0f; } }
@keyframes effect-electric { 0%, 100% { text-shadow: 0 0 5px #ffeb3b, 0 0 10px #ffeb3b; filter: brightness(1); } 10% { text-shadow: 0 0 10px #fff, 0 0 30px #ffeb3b; filter: brightness(1.5); } 11% { text-shadow: 0 0 5px #ffeb3b; filter: brightness(1); } 50% { text-shadow: 0 0 5px #ffeb3b; filter: brightness(1); } 51% { text-shadow: 0 0 15px #fff, 0 0 40px #ffeb3b; filter: brightness(1.8); } 52% { text-shadow: 0 0 5px #ffeb3b; filter: brightness(1); } }
@keyframes effect-retro { 0%, 100% { text-shadow: 3px 3px 0 #000; } 50% { text-shadow: 4px 4px 0 #333, 2px 2px 0 #000; } }
@keyframes effect-neon-flicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px var(--accent), 0 0 40px var(--accent); opacity: 1; } 20%, 24%, 55% { text-shadow: none; opacity: 0.5; } }
@keyframes effect-dissolve { 0%, 100% { filter: blur(0); opacity: 1; } 50% { filter: blur(1px); opacity: 0.7; } }
@keyframes effect-ghost { 0%, 100% { opacity: 0.3; filter: blur(1px); } 50% { opacity: 1; filter: blur(0); } }
@keyframes effect-acid { 0% { filter: hue-rotate(0deg) saturate(2); } 100% { filter: hue-rotate(360deg) saturate(2); } }
@keyframes effect-magma { 0%, 100% { text-shadow: 0 0 5px #f00, 0 0 10px #f90, 0 2px 2px #000; color: #ff4500; } 50% { text-shadow: 0 0 20px #f00, 0 0 40px #f90, 0 3px 3px #000; color: #ffd700; } }
@keyframes effect-aurora { 0% { text-shadow: 0 0 10px #00ff87, 0 0 20px #00ff87; color: #00ff87; } 33% { text-shadow: 0 0 10px #60efff, 0 0 20px #60efff; color: #60efff; } 66% { text-shadow: 0 0 10px #ff77e9, 0 0 20px #ff77e9; color: #ff77e9; } 100% { text-shadow: 0 0 10px #00ff87, 0 0 20px #00ff87; color: #00ff87; } }
@keyframes effect-void { 0%, 100% { text-shadow: 0 0 10px #4b0082, 0 0 20px #000; filter: brightness(0.8); } 50% { text-shadow: 0 0 30px #4b0082, 0 0 50px #000; filter: brightness(1.2); } }
@keyframes effect-divine { 0%, 100% { text-shadow: 0 0 10px #ffd700, 0 0 20px #fff8dc; filter: brightness(1.2); } 50% { text-shadow: 0 0 30px #ffd700, 0 0 60px #fff8dc; filter: brightness(1.5); } }
@keyframes effect-toxic-drip { 0%, 100% { text-shadow: 0 0 5px #0f0, 0 2px 0 #0a0; transform: skewY(0deg); } 50% { text-shadow: 0 3px 10px #0f0, 0 5px 0 #0a0; transform: skewY(-1deg); } }
@keyframes effect-frost-bite { 0%, 100% { text-shadow: 0 0 5px #b3e5fc, 0 0 10px #fff; filter: brightness(1); } 50% { text-shadow: 0 0 15px #b3e5fc, 0 0 30px #fff, -2px 0 2px #0ff, 2px 0 2px #0ff; filter: brightness(1.3); } }
@keyframes effect-ember-glow { 0%, 100% { text-shadow: 0 0 5px #ff5722, 0 0 10px #ff9800; color: #ffcc80; } 50% { text-shadow: 0 0 20px #ff5722, 0 0 40px #ff9800; color: #ffffff; } }
@keyframes effect-candy { 0% { color: #ff6b9d; text-shadow: 0 0 5px #ff6b9d; } 25% { color: #c44569; text-shadow: 0 0 5px #c44569; } 50% { color: #ff8e53; text-shadow: 0 0 5px #ff8e53; } 75% { color: #ffbe76; text-shadow: 0 0 5px #ffbe76; } 100% { color: #ff6b9d; text-shadow: 0 0 5px #ff6b9d; } }
@keyframes effect-ocean { 0%, 100% { text-shadow: 0 0 10px #006994, 0 0 20px #40a4c8; transform: translateY(0); } 50% { text-shadow: 0 0 20px #006994, 0 0 40px #40a4c8; transform: translateY(-2px); } }
@keyframes effect-sunset { 0% { color: #ff6b6b; text-shadow: 0 0 10px #ff6b6b; } 33% { color: #ffa500; text-shadow: 0 0 10px #ffa500; } 66% { color: #da70d6; text-shadow: 0 0 10px #da70d6; } 100% { color: #ff6b6b; text-shadow: 0 0 10px #ff6b6b; } }
@keyframes effect-prism { 0% { text-shadow: -2px 0 #f00, 2px 0 #00f, 0 -2px #0f0, 0 2px #ff0; } 25% { text-shadow: 2px 0 #f00, -2px 0 #00f, 0 2px #0f0, 0 -2px #ff0; } 50% { text-shadow: -2px 0 #00f, 2px 0 #f00, 0 -2px #ff0, 0 2px #0f0; } 75% { text-shadow: 2px 0 #00f, -2px 0 #f00, 0 2px #ff0, 0 -2px #0f0; } }

/* === DEVELOPER BADGE === */
.dev-badge {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 6px;
    margin-left: 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
    animation: dev-badge-glow 2s infinite ease-in-out;
}

@keyframes dev-badge-glow {
    0%, 100% { box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4); }
    50% { box-shadow: 0 2px 12px rgba(118, 75, 162, 0.6), 0 0 20px rgba(102, 126, 234, 0.3); }
}

/* === NEW NAME EFFECT CLASSES === */
.name-effect-cyber { animation: effect-cyber 0.3s infinite linear; }
.name-effect-wave { display: inline-block; animation: effect-wave 1s infinite ease-in-out; }
.name-effect-shake { display: inline-block; animation: effect-shake 0.15s infinite linear; }
.name-effect-pulse { display: inline-block; animation: effect-pulse-grow 1.5s infinite ease-in-out; }
.name-effect-bounce { display: inline-block; animation: effect-bounce 0.8s infinite ease-in-out; }
.name-effect-rotate { display: inline-block; animation: effect-rotate 0.3s infinite alternate ease-in-out; }
.name-effect-flicker { animation: effect-flicker 0.1s infinite; }
.name-effect-heartbeat { display: inline-block; animation: effect-heartbeat 1.5s infinite ease-in-out; }
.name-effect-typewriter { animation: effect-typewriter 1s infinite step-end; border-right: 2px solid currentColor; padding-right: 3px; }
.name-effect-float { display: inline-block; animation: effect-float 3s infinite ease-in-out; }
.name-effect-jello { display: inline-block; animation: effect-jello 1s infinite; }
.name-effect-rubberband { display: inline-block; animation: effect-rubberband 1s infinite; }
.name-effect-static { animation: effect-static 0.05s infinite linear; }
.name-effect-vaporwave { color: #fff!important; animation: effect-vaporwave 2s infinite ease-in-out; }
.name-effect-synthwave { color: #fff!important; animation: effect-synthwave 3s infinite ease-in-out; }
.name-effect-electric { color: #ffeb3b!important; animation: effect-electric 3s infinite; }
.name-effect-retro { animation: effect-retro 0.5s infinite ease-in-out; }
.name-effect-neon-flicker { color: #fff!important; animation: effect-neon-flicker 4s infinite; }
.name-effect-dissolve { animation: effect-dissolve 2s infinite ease-in-out; }
.name-effect-ghost { animation: effect-ghost 3s infinite ease-in-out; filter: blur(0.5px); }
.name-effect-acid { animation: effect-acid 3s infinite linear; }
.name-effect-magma { animation: effect-magma 2s infinite ease-in-out; }
.name-effect-aurora { animation: effect-aurora 4s infinite linear; }
.name-effect-void { color: #4b0082!important; animation: effect-void 3s infinite ease-in-out; }
.name-effect-divine { color: #ffd700!important; animation: effect-divine 2s infinite ease-in-out; }
.name-effect-toxic-drip { color: #0f0!important; display: inline-block; animation: effect-toxic-drip 1.5s infinite ease-in-out; }
.name-effect-frost-bite { color: #b3e5fc!important; animation: effect-frost-bite 2s infinite ease-in-out; }
.name-effect-ember-glow { animation: effect-ember-glow 1.5s infinite ease-in-out; }
.name-effect-candy { animation: effect-candy 3s infinite linear; }
.name-effect-ocean { color: #40a4c8!important; display: inline-block; animation: effect-ocean 2.5s infinite ease-in-out; }
.name-effect-sunset { animation: effect-sunset 4s infinite linear; }
.name-effect-prism { animation: effect-prism 0.5s infinite linear; }

/* === CHROMATIC / TEXT GRADIENT EFFECTS === */
.name-effect-chrome { background: linear-gradient(180deg, #fff 0%, #a0a0a0 50%, #fff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5)); }
.name-effect-obsidian { background: linear-gradient(180deg, #333 0%, #000 50%, #333 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 5px rgba(0,0,0,0.8)); }
.name-effect-rose-gold { background: linear-gradient(180deg, #b76e79 0%, #f0c8c8 50%, #b76e79 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 3px rgba(183,110,121,0.4)); }
.name-effect-emerald { background: linear-gradient(180deg, #50c878 0%, #90ee90 50%, #50c878 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 5px rgba(80,200,120,0.4)); }
.name-effect-sapphire { background: linear-gradient(180deg, #0f52ba 0%, #4169e1 50%, #0f52ba 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 5px rgba(15,82,186,0.4)); }
.name-effect-amethyst { background: linear-gradient(180deg, #9966cc 0%, #e0b0ff 50%, #9966cc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 5px rgba(153,102,204,0.4)); }
.name-effect-ruby { background: linear-gradient(180deg, #e0115f 0%, #ff6b6b 50%, #e0115f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 5px rgba(224,17,95,0.4)); }
.name-effect-copper { background: linear-gradient(180deg, #b87333 0%, #da8a67 50%, #b87333 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 3px rgba(184,115,51,0.4)); }
.name-effect-platinum { background: linear-gradient(180deg, #e5e4e2 0%, #fff 50%, #c0c0c0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.4)); }
.name-effect-opal { background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #ff6b6b); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradient-shift 3s infinite linear; filter: drop-shadow(0 0 3px rgba(255,255,255,0.3)); }
@keyframes gradient-shift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* === NEW AVATAR FRAME STYLES === */
.avatar-style-fire-ring { border: 3px solid #ff4500!important; box-shadow: 0 0 10px #ff0000, 0 0 20px #ff4500, inset 0 0 5px rgba(255,69,0,0.5); animation: pulse-red-glow 1.5s infinite; }
.avatar-style-ice-ring { border: 3px solid #87ceeb!important; box-shadow: 0 0 10px #00bfff, 0 0 20px #87ceeb, inset 0 0 5px rgba(135,206,235,0.5); }
.avatar-style-nature { border: 3px solid #228b22!important; box-shadow: 0 0 10px #32cd32, 0 0 20px #228b22; }
.avatar-style-royal { border: 3px solid #daa520!important; box-shadow: 0 0 5px #ffd700, 0 0 15px #daa520, inset 0 0 10px rgba(218,165,32,0.3); background: linear-gradient(#111, #111) padding-box, linear-gradient(45deg, #ffd700, #daa520, #b8860b, #ffd700) border-box; }
.avatar-style-shadow-realm { border: 3px solid #1a1a1a!important; box-shadow: 0 0 20px #000, 0 0 30px rgba(0,0,0,0.8), inset 0 0 10px rgba(0,0,0,0.5); filter: brightness(0.8); }
.avatar-style-divine-light { border: 3px solid #fff8dc!important; box-shadow: 0 0 15px #ffd700, 0 0 30px #fff8dc; animation: divine-pulse 2s infinite; }
@keyframes divine-pulse { 0%, 100% { box-shadow: 0 0 15px #ffd700, 0 0 30px #fff8dc; } 50% { box-shadow: 0 0 25px #ffd700, 0 0 50px #fff8dc, 0 0 70px rgba(255,248,220,0.5); } }
.avatar-style-void-edge { border: 3px solid #4b0082!important; box-shadow: 0 0 10px #4b0082, 0 0 20px #000; filter: contrast(1.1); }
.avatar-style-cyber-frame { border: 2px solid #0ff!important; box-shadow: 0 0 5px #0ff, 2px 2px 0 #f0f, -2px -2px 0 #f0f; }
.avatar-style-rainbow-ring { border: 4px solid transparent!important; background: linear-gradient(#111,#111) padding-box, linear-gradient(45deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00) border-box; animation: runic-rotation 3s linear infinite; }
.avatar-style-particle { border: 2px dashed var(--av-color)!important; box-shadow: 0 0 5px var(--av-color), 0 0 10px var(--av-color); animation: particle-dance 2s infinite; }
@keyframes particle-dance { 0%, 100% { border-color: var(--av-color); } 50% { border-color: transparent; } }
.avatar-style-electric-arc { border: 2px solid #ffeb3b!important; box-shadow: 0 0 5px #fff, 0 0 15px #ffeb3b; animation: electric-arc 0.5s infinite; }
@keyframes electric-arc { 0%, 100% { box-shadow: 0 0 5px #fff, 0 0 15px #ffeb3b; } 50% { box-shadow: 0 0 10px #fff, 0 0 25px #ffeb3b, 0 0 35px #ffeb3b; } }
.avatar-style-dragonscale { border: 3px solid #8b0000!important; box-shadow: 0 0 10px #ff4500, inset 0 0 5px rgba(139,0,0,0.5); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); border-radius: 0!important; }
.avatar-style-prism-edge { border: 3px solid transparent!important; background: linear-gradient(#111,#111) padding-box, conic-gradient(from 0deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00) border-box; }
.avatar-style-abyssal { border: 4px solid #000!important; box-shadow: inset 0 0 20px #000, 0 0 10px #4b0082; filter: grayscale(50%); }
.avatar-style-celestial { border: 3px solid #ffefd5!important; box-shadow: 0 0 10px #ffd700, 0 0 30px #ffefd5; background: linear-gradient(#111,#111) padding-box, radial-gradient(ellipse at center, #ffefd5 0%, #ffd700 100%) border-box; }
.avatar-style-toxic-glow { border: 3px solid #39ff14!important; box-shadow: 0 0 10px #39ff14, 0 0 20px #00ff00; animation: toxic-pulse 1.5s infinite; }
@keyframes toxic-pulse { 0%, 100% { box-shadow: 0 0 10px #39ff14, 0 0 20px #00ff00; } 50% { box-shadow: 0 0 15px #39ff14, 0 0 30px #00ff00, 0 0 40px rgba(57,255,20,0.5); } }
.avatar-style-blood-moon { border: 3px solid #8b0000!important; box-shadow: 0 0 15px #800000, 0 0 30px rgba(139,0,0,0.5); filter: sepia(20%) hue-rotate(-20deg); }

.timer-urgent-pulse { color: var(--urgent-red)!important; animation: pulse-red-glow 1s infinite ease-in-out; font-weight: 700!important; }
.timer-active-pulse { color: var(--green)!important; animation: pulse-green-glow 1.5s infinite ease-in-out; font-weight: 700!important; }

.name-effect-fade { animation: effect-fade 2s infinite ease-in-out; }
.name-effect-glow { animation: effect-glow 1.5s infinite ease-in-out; }
.name-effect-sparkle { animation: effect-sparkle 0.8s infinite ease-in-out; }
.name-effect-rainbow { animation: effect-rainbow 3s infinite linear; background: none; -webkit-text-fill-color: initial; }
.name-effect-fire { color: #ffeb3b!important; animation: effect-fire 0.4s infinite alternate; }
.name-effect-ice { color: #e1f5fe!important; animation: effect-ice 2s infinite ease-in-out; }
.name-effect-neon { color: #fff!important; animation: effect-neon 1.5s infinite alternate; }
.name-effect-glitch { animation: effect-glitch 0.4s infinite steps(2); position: relative; display: inline-block; }
.name-effect-matrix { color: #0f0!important; font-family: 'Courier New', monospace; animation: effect-matrix 0.1s infinite; }
.name-effect-cosmic { animation: effect-cosmic 5s infinite linear; }
.name-effect-lightning { animation: effect-lightning 3s infinite; }
.name-effect-blood { animation: effect-blood 3s infinite ease-in-out; }
.name-effect-golden { background: linear-gradient(to bottom, #cfc09f 22%,#634f2c 24%, #cfc09f 26%, #cfc09f 27%,#ffecb3 40%,#3a2c0f 78%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #ffd700; filter: drop-shadow(0 0 3px rgba(255,215,0,0.5)); }
.name-effect-radioactive { color: #ccff00!important; text-shadow: 0 0 10px #0f0; animation: pulse-green 0.5s infinite; }
.name-effect-shadow { color: #333!important; animation: effect-shadow 3s infinite; }
.name-effect-holographic { color: #00ffff!important; text-shadow: 2px 0 0 #ff0000, -2px 0 0 #0000ff; opacity: 0.8; }
.name-effect-terminal { color: #0f0!important; font-family: monospace; animation: effect-terminal 1s infinite; padding-right: 4px; }

/* BUBBLE STYLES */
.bubble-style-glossy { background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); }
.bubble-style-glass { background: rgba(255,255,255,0.05)!important; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.15)!important; }
.bubble-style-gradient { border: 2px solid transparent; background-clip: padding-box; }
.bubble-style-neon { border-width: 2px; }

/* AVATAR STYLES - CRAZY SHAPES & ANIMATIONS */
.avatar-style-solid { border-style: solid!important; }
.avatar-style-double { border-style: double!important; border-width: 4px!important; }
.avatar-style-dashed { border-style: dashed!important; }
.avatar-style-glow { border-style: solid!important; box-shadow: 0 0 10px var(--av-color), 0 0 20px var(--av-color); }
.avatar-style-pulse { border-style: solid!important; animation: avatar-pulse 2s infinite ease-in-out; }
.avatar-style-runic { border-style: double!important; border-width: 4px!important; box-shadow: 0 0 0 2px #000, 0 0 10px var(--av-color); }
.avatar-style-gold-leaf { border: 3px solid transparent!important; background: linear-gradient(#111, #111) padding-box, linear-gradient(45deg, #ffd700, #fff, #aa9d56) border-box; }
.avatar-style-diamond { border: 3px solid transparent!important; background: linear-gradient(#111, #111) padding-box, linear-gradient(135deg, #b3e5fc, #fff, #01579b) border-box; box-shadow: 0 0 15px rgba(179,229,252,0.5); }
.avatar-style-neon { border: 2px solid #fff!important; box-shadow: 0 0 5px #fff, 0 0 10px var(--av-color), 0 0 20px var(--av-color); }
.avatar-style-ember { border: 2px solid #ff5722!important; box-shadow: 0 0 10px #ff5722, inset 0 0 10px #ff5722; animation: pulse-red-glow 2s infinite; }
.avatar-style-plasma { border: 2px solid #b388ff!important; box-shadow: 0 0 10px #b388ff, 0 0 20px #651fff; }
.avatar-style-galaxy { border: 2px solid transparent!important; background: linear-gradient(#111,#111) padding-box, linear-gradient(45deg, #f0f, #0ff, #f0f) border-box; animation: runic-rotation 4s linear infinite; }
.avatar-style-circuit { border: 2px dashed #0ff!important; box-shadow: 0 0 5px #0ff; }
.avatar-style-hexagon { border-radius: 10px!important; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); border: 3px solid var(--av-color)!important; }
.avatar-style-spirit { opacity: 0.7; filter: grayscale(100%) drop-shadow(0 0 5px var(--av-color)); border: none!important; }
.avatar-style-spin { border-top: 3px solid var(--av-color)!important; border-bottom: 3px solid var(--av-color)!important; border-left: 3px solid transparent!important; border-right: 3px solid transparent!important; animation: runic-rotation 3s linear infinite; }
.avatar-style-portal { border: 4px solid transparent!important; background: linear-gradient(#000,#000) padding-box, conic-gradient(from 0deg, var(--av-color), transparent, var(--av-color)) border-box; animation: runic-rotation 2s linear infinite; border-radius: 50%; }

@keyframes runic-rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* STYLE STUDIO MODAL CSS */
.style-studio-grid { display: grid; grid-template-columns: 1fr 280px; gap: 0; min-height: 600px; height: 100%; }
@media (max-width: 1200px) { .style-studio-grid { grid-template-columns: 1fr; } }
.studio-controls { background: #0a0a0a; padding: 20px; border-right: 1px solid #222; overflow-y: auto; max-height: 80vh; }
.studio-preview-panel { background: radial-gradient(circle at center, #1a1a1a, #050505); padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: relative; }
.preview-sticky { position: sticky; top: 10px; width: 100%; max-width: 260px; display: flex; flex-direction: column; align-items: center; }

.section-title { font-size: 0.8rem; color: #666; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; margin-bottom: 15px; border-bottom: 1px solid #222; padding-bottom: 5px; width: 100%; }
.section-title.collapsible { cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: color 0.2s; }
.section-title.collapsible:hover { color: #888; }
.section-title.collapsible::after { content: '▼'; font-size: 0.6rem; transition: transform 0.3s; }
.section-title.collapsible.collapsed::after { transform: rotate(-90deg); }
.studio-section.collapsed .effects-grid, .studio-section.collapsed .avatar-style-grid, .studio-section.collapsed .studio-row, .studio-section.collapsed .gradient-options { display: none; }
.studio-row { display: flex; gap: 15px; margin-bottom: 20px; width: 100%; }
.studio-color-picker { width: 100%; height: 40px; border: none; background: transparent; cursor: pointer; padding: 0; }
.studio-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.studio-color-picker::-webkit-color-swatch { border: 1px solid #444; border-radius: 6px; }

.effects-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 25px; }
.effects-grid.large { grid-template-columns: repeat(5, 1fr); }
.effect-category-label { grid-column: 1 / -1; font-size: 0.65rem; color: #555; text-transform: uppercase; font-weight: 700; margin: 10px 0 5px 0; padding-left: 5px; border-left: 2px solid var(--accent); }
.effect-option { background: #111; border: 1px solid #333; padding: 8px 4px; text-align: center; font-size: 0.7rem; cursor: pointer; border-radius: 6px; transition: 0.2s; color: #888; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.effect-option:hover { background: #1a1a1a; color: #fff; border-color: #555; }
.effect-option.selected { background: #222; border-color: var(--accent); color: var(--accent); box-shadow: 0 0 10px rgba(255,152,0,0.1); }
.effect-option.legendary { border-color: #9966cc; background: linear-gradient(135deg, #111, #1a1a2a); }
.effect-option.legendary.selected { border-color: #da70d6; box-shadow: 0 0 15px rgba(218,112,214,0.3); }

.avatar-style-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 25px; }
.av-opt { background: #111; border: 1px solid #333; padding: 6px 2px; text-align: center; font-size: 0.65rem; cursor: pointer; border-radius: 6px; transition: 0.2s; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-opt:hover { color: #fff; border-color: #555; }
.av-opt.selected { border-color: var(--accent); color: var(--accent); background: #222; }
.av-opt.legendary { border-color: #9966cc; background: linear-gradient(135deg, #111, #1a1a2a); }
.av-opt.legendary.selected { border-color: #da70d6; box-shadow: 0 0 10px rgba(218,112,214,0.2); }

.avatar-style-grid .effect-category-label { grid-column: 1 / -1; font-size: 0.6rem; color: #555; text-transform: uppercase; font-weight: 700; margin: 8px 0 4px 0; padding-left: 5px; border-left: 2px solid var(--accent); }

.preview-box { width: 100%; background: #111; border: 1px solid #333; border-radius: 12px; padding: 15px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 10px 40px rgba(0,0,0,0.5); min-height: 180px; }
.preview-name-row { margin-bottom: 10px; text-align: center; }
.preview-chat-area { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; font-size: 0.85rem; }

/* === DASHBOARD IMAGES: RESTORED SIZING TO FIX REGRESSION === */
.icon-img { width: 32px; height: 32px; object-fit: contain; opacity: 0.9; animation: float 3s ease-in-out infinite; }
.pill-icon { width: 55px; height: 55px; object-fit: contain; filter: drop-shadow(0 0 4px rgba(0,0,0,0.6)); }
.special-img { width: 55px; height: 55px; object-fit: contain; animation: popIn 0.5s; }
#feat-special-img { width: 100%; max-width: 140px; height: auto; object-fit: contain; filter: drop-shadow(0 0 15px rgba(255,51,51,0.4)); animation: float 4s ease-in-out infinite; }
.achievement-grid .ach-item img { width: 100%; height: 100%; object-fit: contain; }
.skill-icon-lg { width: 30px; height: 30px; object-fit: contain; }
.clan-table img { width: 14px; vertical-align: middle; }
.stat-pill img { width: 16px; height: 16px; object-fit: contain; }
.log-icon { width: 50px; height: 50px; object-fit: contain; flex-shrink: 0; border-radius: 4px; background: #000; padding: 2px; border: 1px solid #333; }
.podium-header img { width: 24px; height: 24px; object-fit: contain; }
.merch-item-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vos-img { width: 20px; height: 20px; object-fit: contain; }
.task-icon { width: 36px; height: 36px; object-fit: contain; margin-right: 12px; flex-shrink: 0; }
.p-avatar { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--accent); object-fit: cover; flex-shrink: 0; }

/* === APPEARANCE MODAL SPECIFIC IMAGE SIZING === */
#style-preview-container .avatar-preview-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    background: #000;
}

header { background: var(--bg-header); border-bottom: 1px solid var(--border-color); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; gap: 15px; flex-wrap: wrap; box-shadow: 0 2px 10px rgba(0,0,0,0.5); position: sticky; top: 0; z-index: 100; flex-shrink: 0; min-height: var(--header-height); }
.header-left, .header-right, .brand-wrapper, .flash-bar-content { display: flex; align-items: center; }
.header-left { gap: 15px; flex: 1 1 auto; justify-content: flex-start; min-width: 200px; }
.header-right { justify-content: flex-end; gap: 20px; padding: 0 10px; flex: 1 1 auto; min-width: 200px; }
.header-nav { display: flex; gap: 5px; background: #121212; padding: 4px; border-radius: 8px; border: 1px solid #333; flex-wrap: wrap; justify-content: center; position: absolute; left: 50%; transform: translateX(-50%); }
.nav-item { color: #888; padding: 6px 16px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; text-decoration: none; transition: 0.2s; white-space: nowrap; }
.nav-item:hover { color: #ddd; background: rgba(255,255,255,0.05); }
.nav-item.active { background: var(--accent); color: #000; font-weight: 700; }
.nav-badge { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; background: var(--urgent-red); border-radius: 50%; border: 2px solid #121212; animation: badgePulse 2s infinite; }
.menu-btn { background: transparent; border: none; color: var(--text-main); padding: 5px; border-radius: 4px; display: flex; cursor: pointer; flex-shrink: 0; }
.menu-btn:hover { background: #222; color: var(--accent); }
.settings-dropdown { position: absolute; top: 130%; left: 0; width: 280px; background: var(--bg-dropdown); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); opacity: 0; transform: translateY(-10px); pointer-events: none; transition: 0.2s; z-index: 1000; }
.settings-dropdown.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dropdown-header { padding: 12px 15px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: #666; border-bottom: 1px solid #333; }
.dropdown-item { padding: 15px; display: flex; justify-content: space-between; align-items: center; }
.clickable { cursor: pointer; transition: 0.2s; }
.clickable:hover { background: rgba(255,255,255,0.05); color: #fff; }
.dropdown-label { display: flex; flex-direction: column; font-size: 0.95rem; font-weight: 500; }
.dropdown-label .sub-label { font-size: 0.75rem; color: #777; margin-top: 2px; }

.flash-header-bar { display: flex; align-items: center; background: rgba(22,22,22,0.95); border: 1px solid #333; border-radius: 50px; padding: 2px 16px; margin: 5px 10px; flex: 0 1 400px; width: 100%; max-width: 400px; min-width: 300px; justify-content: center; position: relative; overflow: hidden; height: 38px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); transition: 0.3s; }
.flash-special { border-color: #f33!important; box-shadow: 0 0 10px rgba(255,51,51,0.2)!important; }
.flash-combat { border-color: #ff9800!important; box-shadow: 0 0 10px rgba(255,152,0,0.2)!important; }
.flash-skilling { border-color: #4caf50!important; box-shadow: 0 0 10px rgba(76,175,80,0.2)!important; }
.flash-bar-content { gap: 10px; width: 100%; justify-content: center; z-index: 2; white-space: nowrap; overflow: hidden; }
.flash-bar-name { font-size: 0.85rem; font-weight: 700; color: #fff; text-overflow: ellipsis; overflow: hidden; }
.flash-bar-timer { font-size: 0.95rem; font-weight: 700; color: #eee; width: 60px; display: inline-block; text-align: center; flex-shrink: 0; font-variant-numeric: tabular-nums; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; }
.flash-header-bar #flash-progress-container { position: absolute; inset: 0; pointer-events: none; opacity: 0.15; z-index: 1; }
.flash-header-bar .progress-track, .flash-header-bar .progress-fill { height: 100%; margin: 0; border-radius: 0; }

.brand-wrapper { gap: 10px; flex-shrink: 0; max-width: 100%; }
.header-logo { height: 38px; width: auto; filter: drop-shadow(0 0 5px rgba(0,0,0,0.5)); }
.scrolling-title { margin: 0; font-size: 1.2rem; text-transform: uppercase; font-weight: 700; background: linear-gradient(90deg, var(--accent) 0%, #ffe0b2 25%, var(--accent) 50%, #ffe0b2 75%, var(--accent) 100%); background-size: 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shineScroll 4s linear infinite; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiki-search-container { display: flex; align-items: center; background: #222; border: 1px solid #444; border-radius: 20px; padding: 2px 10px; max-width: 220px; width: 100%; transition: 0.2s; }
.wiki-search-container:focus-within { border-color: var(--accent); box-shadow: 0 0 5px rgba(255,152,0,0.3); }
#wiki-search-input { background: transparent; border: none; color: #fff; padding: 6px; font-size: 0.9rem; flex: 1; outline: none; min-width: 0; }
.search-btn { background: transparent; border: none; color: #888; cursor: pointer; transition: 0.2s; display: flex; flex-shrink: 0; }
.search-btn:hover { color: var(--accent); }

.header-clock-group { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; width: 120px; flex-shrink: 0; }
.header-time-label { font-size: 0.65rem; text-transform: uppercase; color: #888; font-weight: 700; }
.header-time-val { font-size: 1.2rem; font-weight: 700; color: #eee; font-variant-numeric: tabular-nums; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; letter-spacing: -0.5px; text-align: right; width: 100%; }
.header-time-sub { font-size: 0.75rem; color: var(--accent); font-weight: 600; white-space: nowrap; }
.header-divider { width: 1px; height: 30px; background: #333; }
.header-select { background: transparent; border: none; color: var(--blue); font-size: 0.75rem; text-align: right; padding: 0; font-weight: 600; outline: none; cursor: pointer; }
.header-select option { background: #222; color: #fff; }

.user-count-badge { display: none; align-items: center; gap: 6px; background: rgba(0,0,0,0.3); border: 1px solid #333; padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; color: #aaa; font-weight: 600; height: 28px; transition: 0.2s; white-space: nowrap; }
.user-count-badge:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: #666; }
.online-dot { width: 8px; height: 8px; background-color: var(--green); border-radius: 50%; box-shadow: 0 0 5px var(--green); animation: pulse-green 2s infinite; }
.online-text { font-feature-settings: "tnum"; }

/* === ANIMATED CLAN BANNER === */
@keyframes banner-wave { 
    0%, 100% { transform: translateY(0) rotate(0deg); } 
    25% { transform: translateY(-3px) rotate(1deg); } 
    75% { transform: translateY(3px) rotate(-1deg); } 
}
@keyframes banner-shimmer { 
    0% { background-position: -200% center; } 
    100% { background-position: 200% center; } 
}
@keyframes banner-glow-pulse { 
    0%, 100% { box-shadow: 0 0 10px rgba(255,152,0,0.3), 0 0 20px rgba(255,152,0,0.1); } 
    50% { box-shadow: 0 0 20px rgba(255,152,0,0.6), 0 0 40px rgba(255,152,0,0.3); } 
}
@keyframes banner-ribbon-wave {
    0%, 100% { transform: translateX(0) scaleY(1); }
    50% { transform: translateX(-2px) scaleY(1.05); }
}

.clan-banner {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(255,152,0,0.3) 0%, rgba(187,134,252,0.2) 50%, rgba(79,195,247,0.3) 100%);
    border: 3px solid var(--accent);
    border-radius: 12px;
    padding: 8px 16px 8px 12px;
    min-width: 200px;
    max-width: 300px;
    width: auto;
    height: 70px;
    overflow: visible;
    animation: banner-wave 4s ease-in-out infinite, banner-glow-pulse 3s ease-in-out infinite;
    box-shadow: 0 4px 15px rgba(255,152,0,0.6), 0 0 30px rgba(255,152,0,0.3);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    z-index: 10;
}

.clan-banner:hover {
    transform: scale(1.05);
}

.clan-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.1) 25%,
        rgba(255,255,255,0.2) 50%,
        rgba(255,255,255,0.1) 75%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: banner-shimmer 3s linear infinite;
    pointer-events: none;
}

.clan-banner-image {
    width: 50px;
    height: 50px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    z-index: 1;
    flex-shrink: 0;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.clan-banner-icon {
    font-size: 2rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    animation: float 3s ease-in-out infinite;
    z-index: 1;
    line-height: 1;
    display: none;
}

/* Show icon only if no image is present */
.clan-banner:not(:has(.clan-banner-image)) .clan-banner-icon {
    display: block;
}

.clan-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    z-index: 1;
    min-width: 0;
}

.clan-banner-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8), 0 0 10px rgba(255,152,0,0.5);
    line-height: 1;
}

.clan-banner-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 15px rgba(255,152,0,0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.clan-banner-ribbon {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 80%;
    background: linear-gradient(135deg, var(--accent) 0%, var(--gold) 100%);
    clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%);
    opacity: 0.6;
    animation: banner-ribbon-wave 2s ease-in-out infinite;
    box-shadow: -2px 0 5px rgba(0,0,0,0.3);
}

/* === ONLINE USERS PANEL - OVERHAULED === */
.online-users-panel { 
    width: 95%; 
    max-width: 600px; 
    min-height: 300px;
    max-height: 85vh;
    background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%); 
    border: 1px solid #2a2a2a; 
    border-radius: 16px; 
    box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.05); 
    overflow: hidden;
    animation: modal-slide-in 0.3s ease-out;
    display: flex;
    flex-direction: column;
}
@keyframes modal-slide-in { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }

.online-users-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 20px 24px 12px; 
    border-bottom: 1px solid #222;
    background: linear-gradient(180deg, rgba(76,175,80,0.08) 0%, transparent 100%);
}
.online-header-left { display: flex; align-items: center; gap: 12px; }
.online-pulse-ring { 
    width: 12px; 
    height: 12px; 
    background: var(--green); 
    border-radius: 50%; 
    box-shadow: 0 0 10px var(--green), 0 0 20px rgba(76,175,80,0.4); 
    animation: pulse-ring 2s infinite; 
}
@keyframes pulse-ring { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.7; } }
.online-header-title { font-size: 1.3rem; font-weight: 800; color: #fff; letter-spacing: -0.5px; }
.online-count-badge { 
    background: linear-gradient(135deg, var(--green), #2e7d32); 
    color: #fff; 
    font-size: 0.75rem; 
    font-weight: 800; 
    padding: 4px 10px; 
    border-radius: 20px; 
    box-shadow: 0 2px 8px rgba(76,175,80,0.4);
}
.online-users-subtitle { 
    padding: 8px 24px 16px; 
    font-size: 0.75rem; 
    color: #666; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-weight: 600; 
}

.online-users-list { 
    padding: 0 16px 16px; 
    min-height: 150px;
    max-height: 60vh;
    flex: 1;
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
    gap: 10px;
}
.online-users-list::-webkit-scrollbar { width: 6px; }
.online-users-list::-webkit-scrollbar-track { background: #111; border-radius: 3px; }
.online-users-list::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
.online-users-list::-webkit-scrollbar-thumb:hover { background: #444; }

.online-user-card { 
    display: flex; 
    align-items: center; 
    gap: 16px; 
    background: linear-gradient(135deg, #1f1f1f 0%, #171717 100%); 
    border: 1px solid #2a2a2a; 
    border-radius: 12px; 
    padding: 16px 18px; 
    transition: all 0.2s ease;
}
.online-user-card:hover { background: linear-gradient(135deg, #252525 0%, #1a1a1a 100%); border-color: #3a3a3a; transform: translateX(4px); }
.online-user-card.is-me { border-color: rgba(255,152,0,0.3); background: linear-gradient(135deg, rgba(255,152,0,0.08) 0%, #171717 100%); }
.online-user-card.is-me:hover { border-color: rgba(255,152,0,0.5); }

.user-card-avatar-wrap { position: relative; flex-shrink: 0; }
.online-user-avatar { width: 52px; height: 52px; border-radius: 50%; border: 2px solid #333; object-fit: cover; background: #111; }
.user-status-dot { 
    position: absolute; 
    bottom: 2px; 
    right: 2px; 
    width: 14px; 
    height: 14px; 
    border-radius: 50%; 
    border: 2px solid #171717; 
}
.user-status-dot.status-active { background: #4caf50; box-shadow: 0 0 8px #4caf50; }
.user-status-dot.status-idle { background: #ffc107; box-shadow: 0 0 8px #ffc107; }

.user-card-info { flex: 1; min-width: 0; overflow: hidden; }
.user-card-name { font-size: 1.05rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.user-card-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.user-session-time { font-size: 0.75rem; color: #666; display: flex; align-items: center; gap: 4px; }
.user-status-badge { 
    font-size: 0.6rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    padding: 2px 8px; 
    border-radius: 4px;
}
.user-status-badge.status-active { background: rgba(76,175,80,0.15); color: #4caf50; }
.user-status-badge.status-idle { background: rgba(255,193,7,0.15); color: #ffc107; }

.user-card-badge { flex-shrink: 0; }
.you-badge { 
    background: linear-gradient(135deg, var(--accent), #f57c00); 
    color: #000; 
    font-size: 0.7rem; 
    font-weight: 900; 
    padding: 6px 14px; 
    border-radius: 6px; 
    letter-spacing: 1px;
    box-shadow: 0 2px 8px rgba(255,152,0,0.4);
}
.pulse-dot { 
    width: 10px; 
    height: 10px; 
    background: var(--green); 
    border-radius: 50%; 
    animation: pulse-green 2s infinite; 
}

.online-users-footer { 
    padding: 14px 24px; 
    background: #111; 
    border-top: 1px solid #222; 
    display: flex; 
    justify-content: center; 
}
.online-footer-stat { display: flex; align-items: center; gap: 8px; color: #666; font-size: 0.75rem; font-weight: 600; }
.footer-stat-icon { font-size: 1rem; }

.online-empty-state { 
    text-align: center; 
    padding: 40px 20px; 
}
.empty-icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.5; }
.empty-text { font-size: 1rem; font-weight: 700; color: #666; margin-bottom: 4px; }
.empty-subtext { font-size: 0.8rem; color: #444; }

/* Legacy support */
.user-list-scroll { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.online-user-row { display: flex; justify-content: space-between; align-items: center; background: #1a1a1a; padding: 8px 12px; border-radius: 6px; border: 1px solid #2a2a2a; transition: 0.2s; }
.online-user-row:hover { background: #222; border-color: #444; }
.online-user-name { font-size: 0.9rem; color: #ddd; font-weight: 600; }
.online-user-you { color: var(--accent); font-size: 0.7rem; font-weight: 800; background: rgba(255,152,0,0.1); padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(255,152,0,0.3); }
.online-dot-small { width: 6px; height: 6px; background-color: var(--green); border-radius: 50%; opacity: 0.7; }

/* PROFILE STUDIO TABS */
.studio-tabs { display: flex; background: #0a0a0a; border-bottom: 1px solid #333; margin-bottom: 10px; }
.studio-tab-btn { flex: 1; padding: 10px 8px; background: none; border: none; color: var(--text-sub); font-weight: 600; cursor: pointer; transition: 0.2s; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid transparent; }
.studio-tab-btn:hover { background: #1a1a1a; color: #fff; }
.studio-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); background: rgba(255,152,0,0.1); }
.studio-tab-content { display: none; }
.studio-tab-content.active { display: block; }

.dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; padding: 20px; max-width: 1400px; margin: 0 auto; flex: 0 0 auto; width: 100%; }
.card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; align-items: center; min-height: 560px; position: relative; box-shadow: 0 4px 20px rgba(0,0,0,0.3); opacity: 0; animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; transition: 0.3s; }
@media (max-width: 1440px) or (max-height: 900px) {
    .card { min-height: 480px; padding: 15px; }
    .card-main-text { font-size: 2rem; margin: 8px 0; }
    .card-sub-text { font-size: 1.2rem; }
    .dashboard { gap: 15px; padding: 15px; }
}
.card:nth-child(1) { animation-delay: 0.1s; } .card:nth-child(2) { animation-delay: 0.2s; } .card:nth-child(3) { animation-delay: 0.3s; }
.card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.6); border-color: var(--accent); }
.card-content { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; width: 100%; }
.card-title { font-weight: 700; margin-bottom: 12px; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 2px; display: flex; align-items: center; gap: 10px; background: linear-gradient(110deg,#888 15%,#fff 45%,#ffda44 50%,#fff 55%,#888 85%); background-size: 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shineScroll 5s linear infinite; filter: drop-shadow(0 0 8px rgba(255,215,0,0.1)); text-align: center; }
.card-main-text { font-size: 2.2rem; font-weight: 500; color: #fff; margin: 10px 0; text-align: center; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; word-break: break-word; }
.card-sub-text { color: var(--blue); font-size: 1.3rem; font-weight: 500; margin-top: 6px; text-align: center; }

.event-link { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,0.3); cursor: pointer; transition: 0.2s; }
.event-link:hover { color: var(--accent); border-bottom-color: var(--accent); text-shadow: 0 0 10px rgba(255,152,0,0.5); }
.status-active { color: var(--green); font-weight: bold; animation: pulse-green 2s infinite; }
.upcoming-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid #222; width: 100%; text-align: center; font-size: 0.8rem; color: var(--text-sub); }
.upcoming-row span { color: #ddd; font-weight: 600; display: block; margin-top: 3px; font-size: 0.9rem; }
.flash-upcoming-pill { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); padding: 10px 24px; border-radius: 50px; font-size: 0.95rem; color: #e0e0e0; margin-bottom: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.flash-upcoming-pill a { color: #fff; text-decoration: none; font-weight: 700; border-bottom: 1px dotted rgba(255,255,255,0.4); }
.flash-upcoming-pill a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.flash-header-bar .pill-icon { width: 28px; height: 28px; margin-right: 8px; }
.flash-header-bar .flash-upcoming-pill { background: none; border: none; box-shadow: none; padding: 0; margin: 0; }
.flash-header-bar .pill-label { display: none; }

.progress-track { width: 100%; height: 4px; background: var(--bar-bg); border-radius: 2px; margin-top: 6px; overflow: hidden; position: relative; }
.progress-fill { height: 100%; transition: width 1s linear, background 0.5s; border-radius: 2px; }
.p-bar-normal { background: var(--blue); box-shadow: 0 0 5px rgba(79,195,247,0.4); }
.p-bar-active { background: var(--green); box-shadow: 0 0 5px var(--green); }
.p-bar-warning { background: var(--urgent-red); box-shadow: 0 0 5px var(--urgent-red); }
.timer-urgent { color: var(--urgent-red)!important; text-shadow: 0 0 15px rgba(255,51,51,0.6); }

.special-box { background: var(--red-box-bg); border: 1px solid var(--red-box-border); border-radius: 8px; margin-top: 10px; padding: 10px; width: 100%; display: flex; flex-direction: column; align-items: center; transition: 0.3s; }
.special-box:hover { box-shadow: 0 5px 15px rgba(255,0,0,0.1); }
.special-label { color: #ff6b6b; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; font-weight: 700; }
.special-content { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.special-name { color: #ffe066; font-weight: 700; font-size: 1rem; line-height: 1.2; }
#flash-featured-content { animation: popIn 0.4s; padding-top: 10px; }
.feat-img-container { flex: 1; display: flex; justify-content: center; width: 100%; margin-bottom: 10px; min-height: 100px; }
.feat-info { text-align: center; margin-bottom: 15px; }
.feat-name { font-size: 1.3rem; font-weight: 700; color: #f33; text-transform: uppercase; margin-bottom: 5px; text-shadow: 0 0 10px rgba(255,51,51,0.3); }
.feat-timer { font-size: 2.2rem; font-weight: 500; color: #fff; font-feature-settings: "tnum"; }
.feat-footer { width: 100%; text-align: center; border-top: 1px solid #333; padding-top: 10px; font-size: 0.85rem; display: flex; justify-content: center; align-items: baseline; }

.rot-row { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 8px 0; border-bottom: 1px solid #222; }
@media (max-width: 1440px) or (max-height: 900px) { .rot-row { padding: 5px 0; } }
.rot-row:last-child { border-bottom: none; }
.rot-label { font-size: 0.85rem; color: #888; font-weight: 600; }
.rot-val { font-size: 0.95rem; color: #eee; font-weight: 600; text-align: right; }
.rot-val.highlight { color: var(--purple); }

/* --- TRAVELLING MERCHANT SYMMETRICAL COMPACT GRID --- */
.merchant-display-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.merchant-grid-layout { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 8px; 
    width: 100%; 
    max-width: 300px; 
}

.merchant-item-box { 
    background: rgba(255, 255, 255, 0.04); 
    border: 1px solid #333; 
    border-radius: 10px; 
    padding: 8px 6px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: flex-start;
    text-align: center; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    min-height: 105px; /* Compact height */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

.merchant-item-box:hover { 
    background: rgba(255, 255, 255, 0.08); 
    border-color: var(--accent); 
    transform: translateY(-2px); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.merch-img-wrap { 
    width: 38px; 
    height: 38px; 
    margin-bottom: 6px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: radial-gradient(circle, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 100%);
    border-radius: 50%;
    padding: 4px;
    border: 1px solid rgba(255,255,255,0.05);
}

.merchant-item-info { 
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.merch-item-link { 
    font-size: 0.68rem; 
    font-weight: 700; 
    color: #eee; 
    text-decoration: none; 
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.2;
}

.merch-item-link.high-value { 
    color: var(--gold); 
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3); 
}

.merch-price { 
    font-size: 0.62rem; 
    color: var(--blue); 
    font-weight: 700;
    opacity: 0.8;
}

.merchant-meta { 
    font-size: 0.65rem; 
    color: #666; 
    margin-top: 8px; 
    text-align: center; 
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Merchant in Rotation Card */
.merchant-rot-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.merchant-rot-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.merchant-rot-item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.merchant-rot-item.high-value .merchant-rot-icon {
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.7));
}
.merchant-rot-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    transition: transform 0.15s ease;
}
.merchant-rot-item:hover .merchant-rot-icon {
    transform: scale(1.15);
}
.merchant-rot-timer {
    font-size: 0.7rem;
    color: #666;
    text-align: center;
}
.rot-label-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}
.rot-label-link:hover {
    color: var(--accent);
}

.vos-wrapper, .vos-item { display: flex; align-items: center; gap: 6px; font-size: 0.95rem; color: #eee; }

.toggle-switch { position: relative; display: inline-block; width: 50px; height: 24px; }
.small-switch { width: 44px; height: 22px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background: #333; transition: .4s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background: white; transition: .4s; border-radius: 50%; }
.small-switch .slider:before { height: 16px; width: 16px; }
input:checked + .slider { background: var(--accent); }
input:checked + .slider:before { transform: translateX(26px); }
.small-switch input:checked + .slider:before { transform: translateX(22px); }

/* Rank Mode Toggle (Global/Ironman) */
.rank-toggle-container { display: none; align-items: center; gap: 8px; margin-left: auto; }
.rank-switch { position: relative; display: inline-block; width: 44px; height: 22px; }
.rank-switch input { opacity: 0; width: 0; height: 0; }
.rank-slider { position: absolute; cursor: pointer; inset: 0; background: #333; transition: .4s; border-radius: 22px; }
.rank-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background: white; transition: .4s; border-radius: 50%; }
.rank-switch input:checked + .rank-slider { background: var(--accent); }
.rank-switch input:checked + .rank-slider:before { transform: translateX(22px); }
.rank-label { font-size: 0.75rem; color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

.tasks-container { max-width: 1400px; margin: 0 auto; padding: 20px; opacity: 0; animation: fadeInUp 0.8s ease-out 0.4s forwards; width: 100%; flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
@media (max-width: 1440px) or (max-height: 900px) {
    .tasks-container { padding: 10px 15px; }
    .tab-content { padding: 15px!important; }
    .reset-bar { margin-bottom: 10px!important; padding: 8px!important; }
    .task-item { padding: 8px 12px!important; }
    .task-grid { gap: 8px!important; }
}
.task-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; flex: 1; display: flex; flex-direction: column; height: 100%; }
.tab-header { display: flex; background: #0f0f0f; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; flex-shrink: 0; }
.tab-btn { flex: 1; padding: 18px; background: none; border: none; color: var(--text-sub); font-weight: 600; cursor: pointer; transition: 0.2s; text-transform: uppercase; font-size: 0.85rem; min-width: 80px; }
@media (max-width: 1440px) or (max-height: 900px) { .tab-btn { padding: 12px 10px; } }
.tab-btn:hover { background: #1a1a1a; color: #fff; }
.tab-btn.active { background: var(--bg-card); color: var(--accent); border-bottom: 2px solid var(--accent); }
.tab-content { display: none; padding: 25px; animation: fadeInUp 0.3s ease-out; }
.tab-content.active { display: flex; flex-direction: column; height: 100%; overflow-y: auto; }
.reset-bar { background: #111; padding: 12px; border-radius: 6px; margin-bottom: 20px; text-align: center; font-size: 0.9rem; color: var(--text-sub); border: 1px solid #222; flex-shrink: 0; }
.reset-time { color: var(--blue); font-weight: 600; margin-left: 8px; font-feature-settings: "tnum"; }
.task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.task-item { display: flex; align-items: center; justify-content: space-between; background: #1a1a1a; padding: 12px 15px; border-radius: 6px; border: 1px solid #222; border-left: 3px solid transparent; transition: 0.2s; gap: 10px; }
.task-item:hover { border-color: #444; background: #222; border-left-color: var(--accent); }
.task-item input[type="checkbox"] { accent-color: var(--accent); width: 18px; height: 18px; margin-right: 12px; cursor: pointer; transition: 0.2s; }
.task-item label { cursor: pointer; flex: 1; font-size: 0.95rem; color: #ddd; }
.task-item input:checked + label { text-decoration: line-through; color: #555; }
.wiki-btn { background: #2a2a2a; color: #888; font-size: 0.7rem; font-weight: 600; padding: 4px 8px; border-radius: 4px; text-decoration: none; border: 1px solid #444; transition: 0.2s; text-transform: uppercase; white-space: nowrap; }
.wiki-btn:hover { background: var(--accent); color: #000; border-color: var(--accent); box-shadow: 0 2px 5px rgba(255,152,0,0.3); }
.timed-info-col { display: flex; flex-direction: column; justify-content: center; flex: 1; }
.timed-bar-wrapper { width: 100%; margin-top: 5px; padding-right: 15px; }
.timed-name { font-weight: 600; font-size: 0.95rem; color: #eee; }
.timed-timer-text { font-size: 0.85rem; color: #888; margin-top: 2px; font-variant-numeric: tabular-nums; }
.timed-active { color: var(--green); font-weight: 700; }
.timed-warning { color: var(--urgent-red); font-weight: 700; }

/* === UPDATED CUSTOM TIMER LAYOUT (SYMMETRICAL GRID) === */
.custom-timer-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .custom-timer-wrapper {
        grid-template-columns: 1fr;
    }
}

.custom-timer-panel {
    background: #111;
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    height: 100%;
    min-height: 350px;
}

.panel-header-inner {
    padding: 15px 20px;
    background: #161616;
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #bbb;
    letter-spacing: 0.5px;
}
.panel-icon { font-size: 1.1rem; }

.ct-form-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}

.ct-input-group { display: flex; flex-direction: column; gap: 6px; }
.ct-input-group label {
    font-size: 0.75rem;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.input-wrapper { position: relative; }
.ct-input {
    width: 100%;
    background: #080808;
    border: 1px solid #444;
    padding: 12px;
    border-radius: 8px;
    color: #fff;
    outline: none;
    font-size: 0.95rem;
    transition: 0.2s;
}
.ct-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,152,0,0.1); }

.ct-row-split {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 15px;
}

.time-inputs-styled {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #080808;
    border: 1px solid #444;
    padding: 5px 10px;
    border-radius: 8px;
}
.time-field { display: flex; align-items: baseline; gap: 2px; flex: 1; }
.ct-input-num {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    width: 100%;
    text-align: right;
    outline: none;
    padding: 5px 0;
}
.time-label { color: #666; font-size: 0.8rem; font-weight: 600; }
.time-sep { color: #444; font-weight: 700; }

.sound-select-wrapper {
    display: flex;
    gap: 8px;
}
.style-select { flex: 1; padding: 8px 12px; }
.sound-preview-btn {
    background: #222;
    border: 1px solid #444;
    color: #ddd;
    width: 38px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}
.sound-preview-btn:hover { background: #333; color: var(--accent); border-color: var(--accent); }

.ct-actions-row {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #222;
    display: flex;
    gap: 12px;
}

.action-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.action-btn.primary { background: var(--accent); color: #000; }
.action-btn.primary:hover { background: #ffb74d; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(255,152,0,0.3); }
.action-btn.secondary { background: #222; color: #ddd; border: 1px solid #333; }
.action-btn.secondary:hover { background: #2a2a2a; border-color: #555; color: #fff; }

/* PRESETS SCROLL AREA */
.presets-container-scroll {
    padding: 15px;
    overflow-y: auto;
    flex: 1;
    max-height: 350px;
}

.presets-grid { display: flex; flex-direction: column; gap: 8px; }

.preset-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    padding: 10px 14px;
    border-radius: 8px;
    transition: 0.2s;
}
.preset-card:hover {
    background: #222;
    border-color: #444;
    transform: translateX(2px);
}

.preset-info {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    flex: 1;
    gap: 2px;
}
.preset-name { font-weight: 600; color: #eee; font-size: 0.95rem; }
.preset-meta { display: flex; align-items: center; gap: 8px; }
.preset-time { color: var(--blue); font-size: 0.8rem; font-weight: 600; }
.preset-sound-icon { color: #666; font-size: 0.8rem; }

.preset-actions {
    display: flex;
    gap: 6px;
}
.preset-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: rgba(255,255,255,0.05);
    color: #aaa;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}
.preset-btn:hover { color: #fff; transform: scale(1.1); }
.preset-btn.start:hover { background: rgba(76,175,80,0.2); color: #4caf50; border-color: #4caf50; }
.preset-btn.edit:hover { background: rgba(79,195,247,0.2); color: #4fc3f7; border-color: #4fc3f7; }
.preset-btn.delete:hover { background: rgba(255,51,51,0.2); color: #ff3333; border-color: #ff3333; }


/* TIMER ALERT STYLES */
#timer-alert-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: transparent;
    transition: background 0.3s;
}
#timer-alert-container.active {
    background: rgba(0,0,0,0.6);
    pointer-events: auto;
    backdrop-filter: blur(2px);
}
.timer-alert-box {
    background: #1a1a1a;
    border: 2px solid var(--accent);
    box-shadow: 0 0 20px rgba(255, 152, 0, 0.4), 0 10px 40px rgba(0,0,0,0.6);
    padding: 20px 30px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 320px;
    animation: alertPopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}
.timer-alert-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent, rgba(255,152,0,0.1), transparent);
    animation: shineScroll 2s linear infinite;
    pointer-events: none;
}
.timer-alert-icon {
    font-size: 2.5rem;
    animation: float 2s infinite ease-in-out;
}
.timer-alert-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.timer-alert-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #888;
    font-weight: 700;
    letter-spacing: 1px;
}
.timer-alert-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 10px rgba(255,152,0,0.3);
}
.timer-alert-dismiss {
    background: var(--accent);
    color: #000;
    font-weight: 700;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
    z-index: 1;
}
.timer-alert-dismiss:hover {
    background: #ffb74d;
    transform: scale(1.05);
}
@keyframes alertPopIn {
    0% { transform: scale(0.5) translateY(50px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}


.tracker-container { flex: 1; width: 100%; margin: 0 auto; padding: 0 20px 20px; display: flex; flex-direction: column; overflow-y: auto; height: auto; }
.tracker-controls { padding: 10px 20px; display: flex; align-items: center; justify-content: center; gap: 15px; max-width: 1000px; width: 100%; margin: 10px auto; flex-wrap: wrap; flex-shrink: 0; }
.tracker-split-layout { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1000px) minmax(240px, 1fr); gap: 20px; margin-top: 0; align-items: stretch; flex: 1; min-height: 0; overflow: visible; padding-bottom: 0; justify-items: stretch; position: relative; }
.sidebar-panel, .results-section { height: auto; overflow: visible; max-height: none; position: static; display: flex; flex-direction: column; }
.right-sidebar { display: flex; flex-direction: column; gap: 20px; }
#clan-results { flex: 1; height: auto; overflow-y: visible; min-height: 0; }
.tracker-controls, .results-section, .sidebar-panel, #clan-results { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); transition: 0.3s; }
.tracker-controls:hover, .results-section:hover, .sidebar-panel:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.6); border-color: var(--accent); transform: none; }

/* Search Loading Overlay - positioned in tracker layout */
#search-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10,10,10,0.95);
    border-radius: 12px;
    z-index: 50;
    grid-column: 1 / -1;
}

/* Dual Search Layout */
.tracker-controls.dual-search, .tracker-controls.triple-search { display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-end; justify-content: center; padding: 12px 25px; }
.search-section { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 200px; max-width: 320px; }
.search-label { display: flex; align-items: center; gap: 5px; font-size: 0.7rem; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.5px; }
.search-label-with-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.7rem; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.5px; }
.gim-type-toggle { display: flex; gap: 8px; align-items: center; }
.gim-radio { display: flex; align-items: center; gap: 5px; font-size: 0.7rem; font-weight: 500; color: #aaa; cursor: pointer; transition: all 0.2s; padding: 4px 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.02); border: 1px solid #333; }
.gim-radio:hover { color: #ddd; background: rgba(255, 255, 255, 0.05); border-color: #444; }
.gim-radio input[type="radio"] { appearance: none; width: 14px; height: 14px; border: 2px solid #444; border-radius: 50%; background: #0a0a0a; cursor: pointer; transition: all 0.2s; position: relative; margin: 0; }
.gim-radio input[type="radio"]:hover { border-color: #666; }
.gim-radio input[type="radio"]:checked { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 2px rgba(255, 167, 38, 0.15), 0 0 8px rgba(255, 167, 38, 0.3); }
.gim-radio input[type="radio"]:checked::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; border-radius: 50%; background: #000; }
.gim-radio:has(input[type="radio"]:checked) { color: var(--accent); border-color: var(--accent); background: rgba(255, 167, 38, 0.08); }
.search-label svg { stroke: #555; width: 14px; height: 14px; }
.search-divider { width: 1px; height: 36px; background: linear-gradient(to bottom, transparent, #333, transparent); flex-shrink: 0; }
.search-box-styled { display: flex; gap: 0; border-radius: 6px; overflow: hidden; border: 1px solid #333; background: #0a0a0a; transition: 0.2s; }
.search-box-styled:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255, 167, 38, 0.15); }
.search-box-styled input { flex: 1; background: transparent; border: none; padding: 8px 12px; color: #fff; font-size: 0.85rem; outline: none; }
.search-box-styled input::placeholder { color: #555; }
.search-box-styled input::selection { background: #333; color: #fff; }
.search-box-styled input:-webkit-autofill,
.search-box-styled input:-webkit-autofill:hover,
.search-box-styled input:-webkit-autofill:focus,
.search-box-styled input:-webkit-autofill:active { 
    -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset !important; 
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
    transition: background-color 5000s ease-in-out 0s;
}
.search-box-styled button { background: var(--accent); border: none; color: #000; padding: 0 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; position: relative; min-width: 44px; }
.search-box-styled button:hover { background: #ffb74d; }
.search-box-styled button svg { stroke: #000; width: 16px; height: 16px; }
.search-box-styled button.loading svg { opacity: 0; }
.search-box-styled button.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0,0,0,0.2);
    border-top-color: #000;
    border-radius: 50%;
    animation: searchSpin 0.6s linear infinite;
}
@keyframes searchSpin {
    to { transform: rotate(360deg); }
}

/* Search Loading Overlay for results area */
.search-loading-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    text-align: center;
}
.search-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255,152,0,0.15);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: searchSpin 0.8s linear infinite;
}
.search-loading-text {
    color: #888;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Global dark selection highlight */
::selection { background: #333; color: #fff; }
::-moz-selection { background: #333; color: #fff; }
input::selection, textarea::selection { background: #333; color: #fff; }
input::-moz-selection, textarea::-moz-selection { background: #333; color: #fff; }

/* Global dark autofill styling - prevents white background on autocomplete */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
    transition: background-color 5000s ease-in-out 0s;
}
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #111 inset !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
    transition: background-color 5000s ease-in-out 0s;
}

.mode-toggle { display: flex; background: #111; padding: 4px; border-radius: 8px; border: 1px solid #333; flex-shrink: 0; }
.mode-btn { background: transparent; border: none; padding: 8px 16px; color: #888; font-weight: 600; cursor: pointer; border-radius: 6px; transition: 0.2s; font-size: 0.9rem; }
.mode-btn.active { background: #333; color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.search-box-large { width: auto; flex: 1; min-width: 280px; max-width: 500px; display: flex; gap: 10px; }
.search-box-large input { flex: 1; background: #050505; border: 1px solid #444; padding: 10px 14px; border-radius: 8px; color: #fff; font-size: 0.95rem; outline: none; transition: 0.2s; appearance: none; }
.search-box-large input:focus { border-color: var(--accent); }
.search-box-large button { background: var(--accent); border: none; color: #000; font-weight: 700; padding: 0 20px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; transition: 0.2s; }
.search-box-large button:hover { background: #ffb74d; }
.error-msg { color: #f33; text-align: center; font-weight: 500; width: 100%; order: 3; margin-top: 0; min-height: 0; }
.error-msg:not(:empty) { margin-top: 10px; }
#player-results { grid-column: 2; width: 100%; }

.profile-header { display: flex; flex-direction: column; padding: 15px 20px 12px; border-bottom: 1px solid #333; margin: 0; gap: 0; align-items: center; text-align: left; position: relative; }
.profile-identity { display: flex; flex-direction: row; gap: 15px; align-items: center; justify-content: center; width: 100%; }
.profile-details-col { display: flex; flex-direction: column; gap: 4px; flex: 0 1 auto; padding-top: 0; align-items: flex-start; width: auto; }
#p-name { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1; color: #fff; text-align: left; }
.profile-meta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; min-height: 24px; }
.p-subtitle { width: 100%; margin-top: 4px; }

#clan-banner-container {
    position: absolute;
    top: -30px;
    right: 30px;
    z-index: 10;
}

#clan-banner-img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.5));
    image-rendering: auto;
    transform-origin: top center;
    animation: bannerWind 6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes bannerWind {
    0% { 
        transform: perspective(500px) rotateY(-1.5deg) skewX(-0.5deg) translateX(0);
    }
    12% { 
        transform: perspective(500px) rotateY(0.5deg) skewX(0.3deg) translateX(1px);
    }
    28% { 
        transform: perspective(500px) rotateY(2deg) skewX(1deg) scaleX(0.99) translateX(2px);
    }
    42% { 
        transform: perspective(500px) rotateY(1deg) skewX(0.5deg) scaleX(0.995) translateX(1px);
    }
    58% { 
        transform: perspective(500px) rotateY(2.5deg) skewX(1.2deg) scaleX(0.985) translateX(2px);
    }
    72% { 
        transform: perspective(500px) rotateY(0.8deg) skewX(0.4deg) scaleX(0.99) translateX(1px);
    }
    85% { 
        transform: perspective(500px) rotateY(-0.5deg) skewX(-0.2deg) translateX(0);
    }
    100% { 
        transform: perspective(500px) rotateY(-1.5deg) skewX(-0.5deg) translateX(0);
    }
}

.rank-badge { background: #222; padding: 4px 10px; border-radius: 6px; font-weight: 600; color: #bbb; border: 1px solid #333; white-space: nowrap; box-shadow: 0 2px 5px rgba(0,0,0,0.2); font-size: 0.85rem; }
.stats-row { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; align-items: center; justify-content: flex-start; }
.stat-pill { display: flex; align-items: center; background: #111; border: 1px solid #333; padding: 4px 12px; border-radius: 30px; gap: 6px; transition: 0.2s; }
.stat-pill:hover { border-color: #555; background: #1a1a1a; }
.stat-pill span { font-size: 0.85rem; color: #eee; font-weight: 600; font-feature-settings: "tnum"; }

.sidebar-tabs { display: flex; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.sidebar-tab-btn { flex: 1; padding: 15px 10px; background: none; border: none; color: var(--text-sub); font-weight: 600; cursor: pointer; transition: 0.2s; text-transform: uppercase; font-size: 0.8rem; border-bottom: 2px solid transparent; }
.sidebar-tab-btn:hover { color: #fff; background: rgba(255,255,255,0.05); }
.sidebar-tab-btn.active { color: var(--accent); border-bottom: 2px solid var(--accent); }
.sidebar-content { display: none; flex: 1; overflow-y: visible; padding: 20px; }
.sidebar-content.active { display: flex; flex-direction: column; }
.quest-filters { padding-bottom: 12px; border-bottom: 1px solid #333; margin-bottom: 12px; width: 100%; }
#quest-filter-select { width: 100%; background: #1a1a1a; color: #eee; border: 1px solid #444; padding: 8px; border-radius: 6px; font-size: 0.85rem; cursor: pointer; outline: none; transition: 0.2s; }
#quest-filter-select:hover { border-color: #666; }
#quest-filter-select:focus { border-color: var(--accent); }
#quest-list-content .log-item { padding-bottom: 8px; margin-bottom: 8px; }
.log-list { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.log-item { padding-bottom: 10px; border-bottom: 1px solid #222; display: flex; align-items: flex-start; gap: 12px; }
.log-item:last-child { border-bottom: none; }
.log-content { display: flex; flex-direction: column; flex: 1; }
.log-text { font-size: 0.9rem; color: #ddd; line-height: 1.4; }
.log-text-highlight { color: var(--gold); font-weight: 700; text-shadow: 0 0 8px rgba(255,215,0,0.2); }
.log-date { font-size: 0.75rem; color: #666; margin-top: 4px; text-align: right; }
.log-placeholder { color: #555; font-style: italic; text-align: center; padding: 20px 0; font-size: 0.9rem; }

.highlights-container { display: flex; flex-direction: column; gap: 12px; }
.highlight-card { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px; padding: 15px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.highlight-label { font-size: 0.7rem; color: #888; text-transform: uppercase; font-weight: 700; margin-bottom: 5px; }
.highlight-content { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
.highlight-sub { font-size: 0.75rem; color: var(--accent); }
.cape-goals-wrapper { display: flex; flex-direction: column; gap: 12px; animation: fadeInUp 0.4s ease-out; }
.cape-progress-card { display: flex; flex-direction: column; background: #111; border: 1px solid #333; border-radius: 8px; padding: 12px; text-decoration: none; transition: 0.2s; cursor: pointer; }
.cape-progress-card:hover { background: #1a1a1a; border-color: #555; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.rtm-label { display: flex; justify-content: space-between; font-size: 0.75rem; color: #fff; font-weight: 700; text-transform: uppercase; margin-bottom: 6px; }
.rtm-pct { color: #888; font-feature-settings: "tnum"; }
.rtm-progress-track { width: 100%; height: 6px; background: #000; border-radius: 3px; overflow: hidden; border: 1px solid #222; margin-bottom: 6px; }
.rtm-progress-fill { height: 100%; background: #4fc3f7; width: 0%; transition: width 1s ease-out; box-shadow: 0 0 8px rgba(79,195,247,0.4); }
.rtm-sub-text { font-size: 0.65rem; color: #666; font-style: italic; }

.skills-grid { display: flex; flex-wrap: wrap; gap: 12px; padding: 20px 20px 24px; justify-content: center; align-content: flex-start; flex: 1; }
.skill-card-detailed { background: #1a1a1a; border: 1px solid #2a2a2a; padding: 12px; border-radius: 8px; display: flex; flex-direction: column; justify-content: space-between; transition: 0.2s; min-height: 105px; flex: 0 1 150px; min-width: 140px; position: relative; }
.skill-card-detailed:hover { background: #222; border-color: #444; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.skill-card-detailed.maxed { border-color: var(--gold-dim); background: linear-gradient(135deg,#1a1a1a 0%,#252210 100%); box-shadow: 0 0 15px rgba(255,215,0,0.1); }
.skill-card-detailed.maxed:hover { border-color: var(--gold); box-shadow: 0 0 20px rgba(255,215,0,0.25); background: #2a2a2a; }
.skill-card-detailed.maxed .skill-lvl { color: var(--gold); text-shadow: 0 0 10px rgba(255,215,0,0.4); }
.skill-card-detailed.maxed .skill-progress-fill { background: var(--gold); box-shadow: 0 0 10px rgba(255,215,0,0.5); }
.skill-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.skill-values { text-align: right; }
.skill-lvl { font-size: 1.35rem; font-weight: 700; color: #fff; line-height: 1; }
.skill-lvl.virtual { color: #bb86fc; text-shadow: 0 0 10px rgba(187,134,252,0.3); }
.skill-rank { font-size: 0.72rem; color: #666; margin-top: 2px; }
.skill-progress-track { width: 100%; height: 6px; background: #000; border-radius: 4px; margin-bottom: 8px; overflow: hidden; }
.skill-progress-fill { height: 100%; background: var(--accent); border-radius: 4px; }
.skill-card-detailed:hover .skill-tooltip { display: flex; }
.skill-tooltip {
    display: none;
    position: absolute;
    inset: 6px;
    background: rgba(0,0,0,0.9);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 8px 10px;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
    z-index: 5;
    pointer-events: none;
}
.skill-tooltip .st-name { font-weight: 700; color: var(--accent); font-size: 0.85rem; }
.skill-tooltip .st-row { display: flex; justify-content: space-between; font-size: 0.8rem; color: #ccc; }
.skill-tooltip .st-val { color: #fff; font-weight: 700; }
.skill-card-detailed .skill-card-bot { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.skill-card-detailed .skill-xp-text { font-size: 0.78rem; color: #aaa; }
.skill-card-detailed .skill-next-text { color: #888; }
.skill-card-detailed:hover .skill-tooltip { animation: popIn 0.2s ease; }

.clan-table-wrapper { overflow-x: auto; }
.clan-table { width: 100%; border-collapse: collapse; min-width: 800px; table-layout: fixed; }
.clan-table th { 
    text-align: left; 
    padding: 10px 8px; 
    color: #666; 
    font-size: 0.75rem; 
    border-bottom: 1px solid #333; 
    text-transform: uppercase;
    position: relative;
    user-select: none;
    border-right: 1px solid #2a2a2a;
}
.clan-table th:last-child { border-right: none; }
.clan-table th.xp-col { text-align: center; color: var(--green); }
.clan-table td { 
    padding: 10px 8px; 
    color: #ccc; 
    border-bottom: 1px solid #222; 
    font-size: 0.85rem;
    border-right: 1px solid #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.clan-table td:last-child { border-right: none; }
.clan-table tr { cursor: pointer; transition: 0.2s; }
.clan-table tr:hover { background: rgba(255,255,255,0.05); }
.clan-table tr:last-child td { border-bottom: none; }

/* Draggable column headers */
.clan-table th.draggable {
    cursor: grab;
}
.clan-table th.draggable:active {
    cursor: grabbing;
}
.clan-table th.dragging {
    opacity: 0.5;
    background: rgba(255, 200, 87, 0.1);
}
.clan-table th.drag-over {
    background: rgba(255, 200, 87, 0.2);
    border-left: 2px solid var(--accent);
}

/* Column resize handle */
.col-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.2s;
    z-index: 10;
}
.col-resize-handle:hover,
.col-resize-handle.resizing {
    background: var(--accent);
}

/* Table config bar */
.table-config-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    margin: 0 12px 8px 12px;
    background: rgba(255,255,255,0.02);
    border-radius: 4px;
    font-size: 0.68rem;
}
.config-hint {
    color: #555;
}
.reset-columns-btn {
    background: transparent;
    border: 1px solid #333;
    color: #666;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    cursor: pointer;
    transition: 0.2s;
}
.reset-columns-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.xp-gain-cell { text-align: center; font-size: 0.8rem; font-weight: 600; }
.loading-xp { color: #444; font-style: italic; }
.clan-info-line { font-size: 0.9rem; color: #aaa; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.03); padding: 2px 8px; border-radius: 4px; }
.clan-link { color: var(--blue); text-decoration: none; font-weight: 600; cursor: pointer; transition: 0.2s; }
.clan-link:hover { color: #fff; text-decoration: underline; }
.clan-rank { color: #666; font-size: 0.8rem; background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 4px; text-transform: capitalize; }
.clan-podiums-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 10px 0 30px; }
.podium-group { background: #111; border: 1px solid #2a2a2a; border-radius: 12px; padding: 15px; display: flex; flex-direction: column; }
.podium-header { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; font-size: 1rem; font-weight: 700; color: #888; text-transform: uppercase; padding-bottom: 10px; border-bottom: 1px solid #222; }
.podium-grid { display: flex; gap: 10px; justify-content: center; align-items: flex-end; flex: 1; }
.podium-card { flex: 1; display: flex; flex-direction: column; align-items: center; background: #1a1a1a; padding: 10px; border-radius: 8px; text-align: center; position: relative; border: 1px solid #333; transition: 0.2s; cursor: pointer; }
.podium-card.rank-1 { order: 2; border-color: #ffd700; background: linear-gradient(to bottom,#252210,#1a1a1a); height: 100%; min-height: 140px; }
.podium-card.rank-2 { order: 1; border-color: #c0c0c0; background: linear-gradient(to bottom,#1f1f1f,#1a1a1a); height: 90%; margin-top: 10px; }
.podium-card.rank-3 { order: 3; border-color: #cd7f32; background: linear-gradient(to bottom,#241c15,#1a1a1a); height: 85%; margin-top: 15px; }
.medal-icon { font-size: 1.5rem; margin-bottom: 5px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.podium-avatar { width: 40px; height: 40px; border-radius: 50%; margin-bottom: 8px; border: 2px solid transparent; }
.rank-1 .podium-avatar { border-color: #ffd700; width: 50px; height: 50px; }
.rank-2 .podium-avatar { border-color: #c0c0c0; }
.rank-3 .podium-avatar { border-color: #cd7f32; }
.podium-name { font-size: 0.85rem; font-weight: 700; color: #fff; margin-bottom: 4px; word-break: break-word; line-height: 1.1; }
.podium-val { font-size: 0.75rem; color: #bbb; font-variant-numeric: tabular-nums; }
.rank-1 .podium-val { color: #ffd700; font-weight: 600; }
.clan-controls { display: flex; gap: 15px; margin-bottom: 15px; }
#clan-filter-input { background: #111; border: 1px solid #333; padding: 8px 12px; color: #fff; border-radius: 6px; font-size: 0.9rem; width: 250px; transition: 0.2s; }
#clan-filter-input:focus { border-color: var(--accent); outline: none; }
.sortable-header { cursor: pointer; user-select: none; transition: 0.2s; }
.sortable-header:hover { color: #fff; }
.sort-icon { font-size: 0.7rem; margin-left: 4px; color: var(--accent); }

.clan-header-banner { background: linear-gradient(135deg,#1a1a1a 0%,#0f0f0f 100%); border-bottom: 1px solid #333; padding: 30px 20px; display: flex; flex-direction: column; align-items: center; gap: 25px; position: relative; overflow: hidden; width: 100%; }
.clan-name-title { font-size: 3.2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 4px; margin: 0; text-align: center; background: linear-gradient(90deg,#bb86fc 0%,#4fc3f7 25%,#fff 50%,#4fc3f7 75%,#bb86fc 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: mythicPulse 4s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(79,195,247,0.6)) drop-shadow(0 0 20px rgba(187,134,252,0.4)); }
.clan-stats-pills { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; width: 100%; }
.stat-pill-box { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 50px; padding: 10px 24px; display: flex; align-items: center; gap: 12px; transition: 0.2s; backdrop-filter: blur(5px); box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.stat-pill-box:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
.stat-pill-box.xp { border-left: 3px solid var(--purple); }
.stat-pill-box.members { border-left: 3px solid var(--blue); }
.stat-pill-box.avg { border-left: 3px solid var(--green); }
.stat-pill-box.kills { border-left: 3px solid var(--urgent-red); }
.pill-label { font-size: 0.7rem; color: #888; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; }
.pill-val { font-size: 1.1rem; color: #fff; font-weight: 700; font-feature-settings: "tnum"; }

.panel-header { padding: 18px 20px; background: linear-gradient(180deg,#161616 0%,#111 100%); border-bottom: 1px solid #333; font-size: 0.85rem; font-weight: 800; color: #888; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 5; }
.panel-header::before { content: ''; width: 4px; height: 14px; background: var(--accent); border-radius: 2px; display: block; }

.achievement-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 15px; }
.ach-item { background: #111; border: 1px solid #333; border-radius: 8px; padding: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; transition: 0.3s; position: relative; overflow: hidden; }
.ach-item img { filter: grayscale(100%) contrast(0.8); opacity: 0.4; transition: 0.4s cubic-bezier(0.175,0.885,0.32,1.275); transform: scale(1); padding-bottom: 10px; }
.ach-item.unlocked { border-color: var(--accent); background: radial-gradient(circle at center,#222 0%,#111 100%); box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
.ach-item.unlocked img { filter: none; opacity: 1; transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(255,152,0,0.5)); }
.ach-label { position: absolute; bottom: 0; font-size: 0.55rem; font-weight: 700; color: #ccc; text-transform: uppercase; width: 100%; text-align: center; background: rgba(0,0,0,0.8); padding: 2px 0; border-radius: 0 0 6px 6px; letter-spacing: 0.5px; }
.ach-item.unlocked .ach-label { color: var(--accent); background: rgba(0,0,0,0.6); }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(5px); z-index: 2000; display: flex; justify-content: center; align-items: center; animation: popIn 0.3s; }
.modal-content { background: var(--bg-card); border: 1px solid var(--border-color); width: 100%; max-width: 380px; padding: 25px; border-radius: 12px; position: relative; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.modal-close { position: absolute; top: 10px; right: 15px; background: none; border: none; color: #666; font-size: 1.5rem; cursor: pointer; }
.modal-close:hover { color: #fff; }
.auth-tabs { display: flex; border-bottom: 1px solid #333; margin-bottom: 20px; }
.auth-tab { flex: 1; background: none; border: none; padding: 10px; color: #888; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; transition: 0.2s; }
.auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.input-group { margin-bottom: 15px; display: flex; flex-direction: column; gap: 5px; }
.input-group label { font-size: 0.8rem; color: #888; font-weight: 600; text-transform: uppercase; }
.input-group input { background: #111; border: 1px solid #333; padding: 10px; border-radius: 6px; color: #fff; outline: none; transition: 0.2s; }
.input-group input:focus { border-color: var(--accent); }
.submit-btn { width: 100%; background: var(--accent); color: #000; font-weight: 700; padding: 12px; border: none; border-radius: 6px; cursor: pointer; margin-top: 10px; transition: 0.2s; }
.submit-btn:hover { background: #ffb74d; transform: translateY(-1px); }
.error-text { color: var(--urgent-red); font-size: 0.85rem; margin-bottom: 10px; min-height: 1rem; text-align: center; }

.login-btn { background: #222; border: 1px solid #333; color: #ddd; padding: 6px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; transition: 0.2s; }
.login-btn:hover { border-color: var(--accent); color: #fff; }
.user-btn { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.05); padding: 6px 12px; border: 1px solid transparent; border-radius: 6px; cursor: pointer; color: #ddd; font-weight: 600; transition: 0.2s; }
.user-btn:hover { background: rgba(255,255,255,0.1); border-color: #444; }
.user-menu-container { position: relative; }

/* Santa Card Snow Effect */
#santa-card { overflow: hidden; position: relative; }
#santa-card .card-content { justify-content: flex-start; flex: 1; display: flex; flex-direction: column; }

/* Snowflake Animation */
.snowflakes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0; }
.snowflake {
    position: absolute;
    top: -20px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    animation: snowfallDrop linear infinite;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.snowflake:nth-child(1) { left: 5%; animation-duration: 8s; animation-delay: 0s; font-size: 0.8rem; opacity: 0.6; }
.snowflake:nth-child(2) { left: 15%; animation-duration: 10s; animation-delay: 1s; font-size: 1rem; opacity: 0.8; }
.snowflake:nth-child(3) { left: 30%; animation-duration: 7s; animation-delay: 2s; font-size: 0.7rem; opacity: 0.5; }
.snowflake:nth-child(4) { left: 45%; animation-duration: 9s; animation-delay: 0.5s; font-size: 0.9rem; opacity: 0.7; }
.snowflake:nth-child(5) { left: 60%; animation-duration: 11s; animation-delay: 3s; font-size: 0.6rem; opacity: 0.6; }
.snowflake:nth-child(6) { left: 75%; animation-duration: 8s; animation-delay: 1.5s; font-size: 1rem; opacity: 0.8; }
.snowflake:nth-child(7) { left: 85%; animation-duration: 10s; animation-delay: 2.5s; font-size: 0.8rem; opacity: 0.5; }
.snowflake:nth-child(8) { left: 95%; animation-duration: 9s; animation-delay: 0s; font-size: 0.7rem; opacity: 0.7; }
@keyframes snowfallDrop {
    0% { top: -20px; transform: translateX(0) rotate(0deg); opacity: 1; }
    100% { top: 100%; transform: translateX(20px) rotate(360deg); opacity: 0.3; }
}

#santa-card > .card-title, #santa-card > .card-content { position: relative; z-index: 1; }

.chase-items-section { width: 100%; margin-top: auto !important; border-top: 1px solid #333; padding-top: 8px; }
.chase-header { font-size: 0.7rem; color: #888; text-transform: uppercase; font-weight: 700; margin-bottom: 6px; text-align: center; letter-spacing: 1px; }
.chase-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.chase-item { width: 38px; height: 38px; background: rgba(255,255,255,0.05); border: 1px solid #333; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: 0.2s; position: relative; text-decoration: none; }
.chase-item:hover { background: rgba(255,255,255,0.1); border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(255,215,0,0.2); }
.chase-item img { max-width: 80%; max-height: 80%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }

img[src*="Araxxor"] { animation: poisonFloat 3s ease-in-out infinite!important; opacity: 1!important; }
@keyframes poisonFloat { 0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 5px rgba(76,175,80,0.6)); } 50% { transform: translateY(-6px); filter: drop-shadow(0 0 25px #0f0) hue-rotate(20deg) brightness(1.2); } }

.suggestion-input-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; margin: 10px auto 20px; max-width: 800px; width: 100%; }
.input-header { margin-bottom: 15px; border-bottom: 1px solid #222; padding-bottom: 10px; }
.input-header h3 { margin: 0; color: #fff; font-size: 1.2rem; }
.input-header .sub-text { font-size: 0.85rem; color: #888; }
.suggestion-textarea { width: 100%; background: rgba(0,0,0,0.3); border: 1px solid #333; color: #fff; border-radius: 12px; padding: 12px 16px; min-height: 80px; font-family: inherit; font-size: 0.95rem; margin-bottom: 10px; transition: 0.3s; resize: none; }
.suggestion-textarea:focus { border-color: var(--accent); background: rgba(0,0,0,0.5); outline: none; box-shadow: 0 0 0 3px rgba(255,152,0,0.1); }
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 15px; }
.auth-warning { color: #ff6b6b; font-size: 0.85rem; font-weight: 600; }
.action-btn { background: var(--accent); color: #000; border: none; padding: 8px 20px; border-radius: 6px; font-weight: 700; cursor: pointer; transition: 0.2s; }
.action-btn:hover:not(:disabled) { background: #ffb74d; transform: translateY(-1px); }
.action-btn:disabled { opacity: 0.5; cursor: not-allowed; background: #555; color: #aaa; }
.suggestions-feed { display: flex; flex-direction: column; gap: 12px; width: 100%; flex: 1; overflow-y: auto; padding: 12px 8px; scroll-behavior: smooth; min-height: 0; }
.suggestion-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; animation: fadeInUp 0.4s ease-out; }
.card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.avatar-main { width: 45px; height: 45px; border-radius: 50%; border: 2px solid var(--border-color); background: #000; object-fit: cover; }
.avatar-preview-img { width: 60px; height: 60px; border-radius: 50%; background: #000; object-fit: cover; }
.header-info { display: flex; flex-direction: column; }
.user-name-large { font-weight: 700; color: #fff; font-size: 1rem; }
.time-stamp { font-size: 0.75rem; color: #666; }
.card-body { color: #ddd; line-height: 1.5; margin-bottom: 15px; font-size: 0.95rem; white-space: pre-wrap; }
.card-actions { border-top: 1px solid #222; padding-top: 10px; margin-bottom: 15px; }
.text-btn { background: none; border: none; color: #888; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 0.85rem; padding: 5px 10px; border-radius: 4px; transition: 0.2s; }
.text-btn:hover { background: rgba(255,255,255,0.05); color: var(--accent); }
.replies-container { margin-left: 20px; padding-left: 15px; border-left: 2px solid #222; display: flex; flex-direction: column; gap: 12px; overflow: visible; }
.reply-item { display: flex; gap: 10px; background: #111; padding: 10px; border-radius: 8px; border: 1px solid #222; }
.avatar-small { width: 32px; height: 32px; border-radius: 50%; background: #000; object-fit: cover; }
.reply-content { flex: 1; }
.reply-meta { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 0.8rem; }
.user-name { font-weight: 700; color: var(--blue); }
.reply-text { color: #ccc; font-size: 0.9rem; line-height: 1.4; }
.reply-input-box { margin-top: 15px; display: flex; gap: 10px; animation: fadeInUp 0.2s; }
.reply-input-box input { flex: 1; background: #111; border: 1px solid #333; padding: 8px 12px; border-radius: 6px; color: #fff; outline: none; }
.reply-input-box input:focus { border-color: var(--accent); }
.reply-input-box button { background: var(--blue); color: #000; border: none; padding: 0 15px; border-radius: 6px; font-weight: 700; cursor: pointer; }
.reply-input-box button:hover { background: #81d4fa; }

@media (max-width: 1024px) {
    html, body { height: auto; overflow-y: auto; }
    body { display: block; }
    body.community-page { height: auto; overflow: auto; }
    header { position: sticky; top: 0; padding: 10px 15px; gap: 15px; }
    .header-left { width: 100%; justify-content: space-between; flex: 1 1 100%; order: 1; }
    .brand-wrapper { flex: 1; justify-content: center; max-width: none; }
    .scrolling-title { font-size: 1rem; white-space: normal; text-align: center; }
    .header-right { width: 100%; justify-content: center; padding: 0; gap: 15px; flex: 1 1 100%; order: 2; flex-wrap: wrap; }
    .header-nav { margin: 5px 0; justify-content: center; width: 100%; order: 3; }
    .wiki-search-container { order: 4; max-width: 100%; margin: 5px 0; }
    .header-clock-group { flex-direction: row; gap: 10px; align-items: center; width: auto; justify-content: center; }
    .header-time-val { font-size: 1rem; text-align: left; width: auto; }
    .dashboard { display: flex; flex-direction: column; height: auto; padding: 10px; flex: initial; }
    .card { min-height: auto; margin-bottom: 15px; }
    .tasks-container { height: auto; overflow: visible; padding: 10px; margin-bottom: 40px; flex: initial; }
    .task-card { height: 600px; }
    .tracker-container { height: auto; overflow: visible; display: block; padding: 10px; }
    .tracker-controls { flex-direction: column; align-items: stretch; }
    .tracker-controls.dual-search { padding: 15px; gap: 15px; }
    .search-section { max-width: none; }
    .search-divider { display: none; }
    .mode-toggle { justify-content: center; width: 100%; }
    .search-box-large { width: 100%; max-width: none; }
    .tracker-split-layout:not([style*="display: none"]) { display: flex; flex-direction: column; gap: 20px; }
    #player-results { order: -1; border: 1px solid var(--accent); }
    .sidebar-panel, .results-section { height: auto; max-height: 500px; overflow-y: auto; }
    .results-section { max-height: none; }
    .profile-header { padding: 15px; }
    #p-name { font-size: 1.4rem; word-break: break-all; }
    .stats-row { justify-content: flex-start; }
    .sidebar-tab-btn { padding: 12px; font-size: 0.9rem; }
    .skills-grid { gap: 10px; padding: 12px; justify-content: space-between; }
    .skill-card-detailed { flex: 1 1 45%; min-width: 120px; min-height: 90px; padding: 10px; }
    .skill-card-top { margin-bottom: 5px; }
    .skill-progress-track { height: 6px; margin-bottom: 6px; }
    .skill-lvl { font-size: 1.2rem; }
    .skill-icon-lg { width: 26px; height: 26px; }
    .clan-name-title { font-size: 2rem; letter-spacing: 2px; }
    .clan-stats-pills { gap: 10px; }
    .stat-pill-box { padding: 8px 16px; flex: 1 1 40%; justify-content: center; }
    .clan-table-wrapper { margin-top: 10px; }
    .flash-header-bar { display: none; }
    .modal-content { width: 90%; margin: 20px; }
}

/* XP PAGE: full-height layout with internal scrolling */
body.xp-page { height: 100vh; }
body.xp-page .tracker-container { flex: 1; display: flex; flex-direction: column; min-height: 0; height: calc(100vh - var(--header-height)); overflow: hidden; }
body.xp-page .tracker-controls { flex-shrink: 0; }
body.xp-page #tracker-split-layout,
body.xp-page #clan-results { flex: 1; min-height: 0; overflow: hidden; height: 100%; }
body.xp-page .results-section,
body.xp-page .sidebar-panel,
body.xp-page #clan-results { height: 100%; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
body.xp-page .skills-grid { flex: 1; }
body.xp-page .sidebar-content { overflow: auto; }
@media (max-width: 1024px) {
    body.xp-page { height: auto; }
    body.xp-page .tracker-container { height: auto; overflow: visible; display: block; }
    body.xp-page #tracker-split-layout,
    body.xp-page #clan-results,
    body.xp-page .results-section,
    body.xp-page .sidebar-panel { height: auto; overflow: visible; }
}

/* ============================================
   COMMUNITY HUB - COMPLETE OVERHAUL
   ============================================ */

/* Main Layout */
.community-hub {
    display: flex;
    flex: 1;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    gap: 0;
    padding: 20px;
    min-height: 0;
    overflow: hidden;
}

/* Sidebar */
.community-sidebar {
    width: 380px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-right: 20px;
    overflow-y: auto;
    height: 100%;
}

.sidebar-section {
    background: linear-gradient(145deg, rgba(30,30,30,0.95), rgba(18,18,18,0.98));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.sidebar-section:first-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
}

.sidebar-header svg {
    color: var(--accent);
}

.online-count {
    margin-left: auto;
    background: rgba(76,175,80,0.15);
    color: #4caf50;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 2px;
}

.online-count .count-active {
    color: #4caf50;
}

.online-count .count-separator {
    color: #666;
    margin: 0 1px;
}

.online-count .count-idle {
    color: #ff9800;
}

.online-users-list {
    padding: 12px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.online-user-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    transition: 0.2s;
    cursor: default;
}

.online-user-item:hover {
    background: rgba(255,255,255,0.03);
}

.online-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #000;
    border: 2px solid #333;
}

.online-user-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ddd;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.online-user-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.online-user-status.active {
    background: #4caf50;
    box-shadow: 0 0 8px #4caf50;
}

.online-user-status.idle {
    background: #ff9800;
    box-shadow: 0 0 6px rgba(255, 152, 0, 0.5);
}

.online-user-item.is-idle {
    opacity: 0.7;
}

.online-user-item.is-idle .online-user-name {
    color: #999;
}

.sidebar-placeholder {
    color: #555;
    font-size: 0.85rem;
    text-align: center;
    padding: 20px;
}

.quick-stats {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.03);
}

.stat-item .stat-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--accent);
}

.stat-item .stat-label {
    font-size: 0.7rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Main Content Area */
.community-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: linear-gradient(145deg, rgba(22,22,22,0.98), rgba(12,12,12,0.99));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0,0,0,0.5);
}

/* Tab Navigation */
.community-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: rgba(0,0,0,0.4);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.community-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #888;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.community-tab svg {
    transition: 0.2s;
}

.community-tab:hover {
    background: rgba(255,255,255,0.03);
    color: #bbb;
}

.community-tab.active {
    background: linear-gradient(135deg, rgba(255,152,0,0.12), rgba(255,152,0,0.06));
    border-color: rgba(255,152,0,0.25);
    color: var(--accent);
    box-shadow: 0 4px 20px rgba(255,152,0,0.1);
}

.community-tab.active svg {
    color: var(--accent);
}

.tab-badge {
    background: var(--urgent-red);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.tab-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 8px 14px;
    transition: 0.2s;
}

.search-box:focus-within {
    border-color: var(--accent);
    background: rgba(0,0,0,0.6);
}

.search-box svg {
    color: #555;
    flex-shrink: 0;
}

.search-box input {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.85rem;
    outline: none;
    width: 150px;
}

.search-box input::placeholder {
    color: #555;
}

/* Panels */
.community-panel {
    display: none;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.community-panel.active {
    display: flex;
}

/* Chat Container */
.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chat-messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scroll-behavior: smooth;
    background: radial-gradient(ellipse at 30% 0%, rgba(40,40,40,0.4) 0%, transparent 70%),
                radial-gradient(ellipse at 70% 100%, rgba(255,152,0,0.03) 0%, transparent 50%),
                linear-gradient(180deg, #0f0f0f, #0a0a0a);
}

.chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: #444;
}

.chat-welcome .welcome-icon {
    margin-bottom: 20px;
    opacity: 0.3;
}

.chat-welcome h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #555;
    margin-bottom: 8px;
}

.chat-welcome p {
    font-size: 0.9rem;
    color: #444;
}

/* Chat Messages */
.chat-msg {
    display: flex;
    gap: 12px;
    max-width: 80%;
    animation: messageSlideIn 0.3s ease;
}

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

.chat-msg-me {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-avatar {
    flex-shrink: 0;
}

.chat-bubble {
    background: linear-gradient(145deg, rgba(40,40,40,0.9), rgba(25,25,25,0.95));
    border: 1px solid rgba(255,255,255,0.06);
    padding: 14px 18px;
    border-radius: 18px;
    border-top-left-radius: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
    min-width: 180px;
}

.chat-bubble:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 25px rgba(0,0,0,0.4);
}

.chat-msg-me .chat-bubble {
    background: linear-gradient(145deg, rgba(42,74,106,0.9), rgba(30,55,80,0.95));
    border-color: rgba(79,195,247,0.15);
    border-top-left-radius: 18px;
    border-top-right-radius: 4px;
}

.clickable-quote {
    cursor: pointer;
}

.clickable-quote:hover {
    background: linear-gradient(145deg, rgba(50,50,50,0.9), rgba(35,35,35,0.95));
}

.chat-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 12px;
}

.chat-user {
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.chat-timestamp {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.35);
    font-weight: 600;
}

.chat-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #eee;
    word-wrap: break-word;
}

.chat-quote-container {
    margin: 8px 0;
}

.chat-quote {
    background: rgba(0,0,0,0.4);
    border-left: 3px solid var(--accent);
    padding: 10px 14px;
    font-size: 0.85rem;
    color: #999;
    font-style: italic;
    border-radius: 0 8px 8px 0;
    margin-bottom: 8px;
}

.chat-reply-text {
    font-size: 0.95rem;
    color: #eee;
}

.chat-mention {
    color: var(--accent);
    font-weight: 700;
    background: rgba(255,152,0,0.1);
    padding: 1px 4px;
    border-radius: 4px;
}

/* Chat Reply Preview Bar */
.chat-reply-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(245,194,17,0.1), rgba(255,152,0,0.08));
    border-left: 3px solid var(--accent);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reply-preview-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.reply-preview-content svg {
    color: var(--accent);
    flex-shrink: 0;
}

.reply-to-label {
    color: #888;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.reply-to-username {
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

.reply-to-text {
    color: #aaa;
    font-size: 0.75rem;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.reply-cancel-btn {
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.reply-cancel-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #f44336;
}

/* Chat Input Area */
.chat-input-area {
    padding: 20px 24px;
    border-top: 1px solid rgba(255,255,255,0.05);
    background: linear-gradient(180deg, rgba(18,18,18,0.98), rgba(10,10,10,0.99));
    display: flex;
    gap: 12px;
    align-items: center;
    position: relative;
}

.chat-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10,10,10,0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.chat-overlay span {
    background: rgba(30,30,30,0.9);
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent);
    border: 1px solid rgba(255,152,0,0.2);
}

.emoji-picker-trigger {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
}

.emoji-picker-trigger:hover {
    background: rgba(255,152,0,0.1);
    border-color: rgba(255,152,0,0.2);
    color: var(--accent);
}

.emoji-picker {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 24px;
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    z-index: 100;
    animation: pickerFadeIn 0.2s ease;
}

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

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.emoji-grid span {
    font-size: 1.4rem;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: 0.15s;
    text-align: center;
}

.emoji-grid span:hover {
    background: rgba(255,255,255,0.1);
    transform: scale(1.2);
}

#chat-input {
    flex: 1;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    padding: 14px 20px;
    border-radius: 25px;
    font-size: 0.95rem;
    outline: none;
    transition: 0.2s;
    font-family: inherit;
}

#chat-input:focus {
    border-color: var(--accent);
    background: rgba(0,0,0,0.7);
    box-shadow: 0 0 0 3px rgba(255,152,0,0.1);
}

#chat-input::placeholder {
    color: #555;
}

.chat-send-btn {
    background: linear-gradient(135deg, var(--accent), #ff8c00);
    color: #000;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(255,152,0,0.3);
}

.chat-send-btn:hover {
    transform: scale(1.08) rotate(-5deg);
    box-shadow: 0 6px 30px rgba(255,152,0,0.5);
}

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

/* Typing Indicator */
.typing-indicator-wrap {
    padding: 8px 24px 0;
    color: #666;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 28px;
}

.typing-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.typing-dot {
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    animation: typingPulse 1.2s infinite ease-in-out;
}

.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1.1); }
}

/* Suggestions Container */
.suggestions-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Suggestion Composer */
.suggestion-composer {
    padding: 20px 24px;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.composer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: #888;
    font-size: 0.85rem;
    font-weight: 600;
}

.composer-header svg {
    color: var(--accent);
}

/* Formatting Toolbar */
.formatting-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    margin-bottom: 10px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    flex-wrap: wrap;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 2px;
}

.format-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #888;
    cursor: pointer;
    transition: all 0.15s ease;
}

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

.format-btn:active {
    background: rgba(245,194,17,0.2);
    border-color: rgba(245,194,17,0.3);
    color: var(--accent);
    transform: scale(0.95);
}

.format-btn svg {
    width: 16px;
    height: 16px;
}

.toolbar-divider {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.1);
    margin: 0 6px;
}

.toolbar-help {
    margin-left: auto;
}

.toolbar-help .help-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    color: #666;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: help;
    transition: all 0.15s ease;
}

.toolbar-help .help-text:hover {
    background: rgba(255,255,255,0.1);
    color: #999;
}

/* Color Picker Dropdown */
.color-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px;
    background: rgba(30,30,30,0.98);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    display: none;
    z-index: 100;
}

.color-picker-dropdown.show {
    display: block;
}

.color-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.15s ease;
}

.color-swatch:hover {
    transform: scale(1.15);
    border-color: #fff;
}

/* Font Picker Dropdown */
.font-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px;
    background: rgba(30,30,30,0.98);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    display: none;
    z-index: 100;
    min-width: 140px;
    max-height: 250px;
    overflow-y: auto;
}

.font-picker-dropdown.show {
    display: block;
}

.font-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.font-option {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    color: #ccc;
    font-size: 0.85rem;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.font-option:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.font-option:active {
    background: rgba(245,194,17,0.2);
    color: var(--accent);
}

/* Link Input Modal */
.link-input-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.link-input-modal.show {
    opacity: 1;
    visibility: visible;
}

.link-input-content {
    background: rgba(30,30,30,0.98);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 24px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}

.link-input-content h3 {
    margin: 0 0 16px;
    color: #fff;
    font-size: 1.1rem;
}

.link-input-content input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 12px;
    outline: none;
}

.link-input-content input:focus {
    border-color: var(--accent);
}

.link-input-content input::placeholder {
    color: #666;
}

.link-input-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 8px;
}

.link-input-actions button {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.link-cancel-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #888;
}

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

.link-confirm-btn {
    background: var(--accent);
    border: none;
    color: #111;
}

.link-confirm-btn:hover {
    background: #e6b30f;
}

/* Formatted Content Rendering */
.formatted-content .format-bold {
    font-weight: 700;
}

.formatted-content .format-italic {
    font-style: italic;
}

.formatted-content .format-underline {
    text-decoration: underline;
}

.formatted-content .format-strike {
    text-decoration: line-through;
    opacity: 0.7;
}

.formatted-content .format-heading {
    display: block;
    font-size: 1.2em;
    font-weight: 700;
    margin: 8px 0;
    color: var(--accent);
}

.formatted-content .format-quote {
    display: block;
    padding: 10px 14px;
    margin: 8px 0;
    background: rgba(255,255,255,0.05);
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    color: #aaa;
    font-style: italic;
}

.formatted-content .format-code {
    font-family: 'Consolas', 'Monaco', monospace;
    background: rgba(0,0,0,0.4);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: #ff9800;
}

.formatted-content .format-code-block {
    display: block;
    font-family: 'Consolas', 'Monaco', monospace;
    background: rgba(0,0,0,0.5);
    padding: 12px 16px;
    margin: 8px 0;
    border-radius: 8px;
    font-size: 0.9em;
    color: #aaa;
    white-space: pre-wrap;
    overflow-x: auto;
}

.formatted-content .format-link {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dashed var(--accent);
    transition: all 0.15s ease;
}

.formatted-content .format-link:hover {
    border-bottom-style: solid;
}

.formatted-content .format-spoiler {
    background: #333;
    color: #333;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.formatted-content .format-spoiler:hover,
.formatted-content .format-spoiler.revealed {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.formatted-content .format-list {
    display: block;
    margin: 8px 0;
    padding-left: 20px;
}

.formatted-content .format-list-item {
    display: list-item;
    margin: 4px 0;
}

.formatted-content ul.format-list {
    list-style-type: disc;
}

.formatted-content ol.format-list {
    list-style-type: decimal;
}

.textarea-wrapper {
    position: relative;
}

.suggestion-textarea {
    width: 100%;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    color: #fff;
    padding: 14px 18px;
    font-size: 0.95rem;
    font-family: inherit;
    resize: none;
    min-height: 80px;
    outline: none;
    transition: 0.2s;
}

.suggestion-textarea:focus {
    border-color: var(--accent);
    background: rgba(0,0,0,0.6);
}

.suggestion-textarea::placeholder {
    color: #555;
}

.textarea-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.textarea-footer .char-counter {
    color: #555;
    font-size: 0.7rem;
    font-weight: 600;
}

.composer-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 8px;
}

.auth-warning {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #f44336;
    font-size: 0.8rem;
    font-weight: 600;
}

.composer-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.char-counter {
    color: #555;
    font-size: 0.75rem;
    font-weight: 600;
}

.post-idea-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, var(--accent), #ff8c00);
    color: #000;
    border: none;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 10px rgba(255,152,0,0.2);
}

.post-idea-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(255,152,0,0.35);
}

.post-idea-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Suggestions Toolbar */
.suggestions-toolbar {
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.2);
}

.sort-options {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sort-label {
    color: #666;
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 6px;
}

.sort-btn {
    background: transparent;
    border: 1px solid transparent;
    color: #888;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.sort-btn:hover {
    background: rgba(255,255,255,0.03);
    color: #bbb;
}

.sort-btn.active {
    background: rgba(255,152,0,0.1);
    border-color: rgba(255,152,0,0.2);
    color: var(--accent);
}

/* Suggestions Feed */
.suggestions-feed {
    flex: 1;
    overflow-y: auto;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.suggestions-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: #444;
}

.suggestions-empty svg {
    opacity: 0.2;
    margin-bottom: 20px;
}

.suggestions-empty h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #555;
    margin-bottom: 8px;
}

.suggestions-empty p {
    font-size: 0.9rem;
    color: #444;
}

/* Suggestion Card */
.suggestion-card {
    background: linear-gradient(145deg, rgba(30,30,30,0.95), rgba(18,18,18,0.98));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
}

.suggestion-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,152,0,0.15), rgba(79,195,247,0.1));
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 0;
}

.suggestion-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    border-color: rgba(255,152,0,0.15);
}

.suggestion-card:hover::before {
    opacity: 1;
}

.suggestion-card .card-header,
.suggestion-card .card-body,
.suggestion-card .card-actions,
.suggestion-card .replies-container {
    position: relative;
    z-index: 1;
}

.suggestion-avatar {
    flex-shrink: 0;
}

.suggestion-author {
    font-weight: 700;
    font-size: 0.95rem;
}

.time-stamp {
    font-size: 0.75rem;
    color: #666;
}

.card-body {
    color: #ddd;
    line-height: 1.6;
    font-size: 0.95rem;
    margin: 16px 0;
}

.card-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.text-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    transition: 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.text-btn:hover {
    color: #ffb74d;
}

/* Replies */
.replies-container {
    margin-top: 16px;
    padding-left: 20px;
    border-left: 2px solid rgba(255,255,255,0.05);
}

.reply-item {
    background: linear-gradient(145deg, rgba(20,20,20,0.9), rgba(15,15,15,0.95));
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 12px;
    padding: 14px;
    margin-top: 12px;
    transition: 0.2s;
}

.reply-item:hover {
    border-color: rgba(255,255,255,0.08);
}

.reply-avatar {
    width: 28px;
    height: 28px;
}

.reply-author {
    font-size: 0.8rem;
    font-weight: 700;
}

.nested-reply-item {
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 10px;
    margin-top: 10px;
    border-left: 2px solid rgba(255,152,0,0.2);
}

/* Reactions */
.reaction-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.reaction-pill {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 4px 10px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: 0.2s;
    user-select: none;
}

.reaction-pill:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.15);
}

.reaction-pill.active {
    background: rgba(255,152,0,0.15);
    border-color: rgba(255,152,0,0.3);
    color: var(--accent);
}

.reaction-count {
    font-size: 0.75rem;
    font-weight: 800;
}

.reaction-anchor {
    position: relative;
}

.reaction-picker {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 25px;
    padding: 10px 14px;
    gap: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.7);
    z-index: 2001;
    align-items: center;
    animation: pickerPop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pickerPop {
    from { opacity: 0; transform: scale(0.8) translateY(5px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.reaction-picker.show {
    display: flex;
}

.picker-emoji {
    cursor: pointer;
    font-size: 1.2rem;
    transition: 0.15s;
    padding: 4px;
}

.picker-emoji:hover {
    transform: scale(1.3);
}

.add-reaction-trigger {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    color: #888;
    cursor: pointer;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 0.9rem;
    transition: 0.2s;
}

.add-reaction-trigger:hover {
    background: rgba(255,152,0,0.1);
    border-color: rgba(255,152,0,0.2);
    color: var(--accent);
}

/* Reply Input Box */
.reply-input-box {
    margin-top: 12px;
    display: flex;
    gap: 10px;
}

.reply-input-box input {
    flex: 1;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 10px 14px;
    border-radius: 10px;
    color: #fff;
    outline: none;
    font-size: 0.85rem;
    transition: 0.2s;
}

.reply-input-box input:focus {
    border-color: var(--accent);
}

.reply-input-box button {
    background: var(--blue);
    color: #000;
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.8rem;
    transition: 0.2s;
}

.reply-input-box button:hover {
    background: #4fc3f7;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .community-sidebar {
        width: 220px;
    }
}

@media (max-width: 1024px) {
    .community-hub {
        flex-direction: column;
        padding: 10px;
        overflow-y: auto;
        height: auto;
    }
    
    .community-sidebar {
        width: 100%;
        flex-direction: row;
        padding-right: 0;
        padding-bottom: 16px;
        overflow-x: auto;
        overflow-y: visible;
        gap: 12px;
    }
    
    .sidebar-section {
        min-width: 200px;
        flex-shrink: 0;
    }
    
    .online-users-list {
        max-height: 150px;
    }
    
    .community-main {
        flex: none;
        min-height: 600px;
    }
    
    .chat-msg {
        max-width: 90%;
    }
}

@media (max-width: 768px) {
    .community-tabs {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 16px;
    }
    
    .tab-actions {
        width: 100%;
        margin-top: 8px;
        margin-left: 0;
    }
    
    .search-box {
        flex: 1;
    }
    
    .search-box input {
        width: 100%;
    }
    
    /* Sidebar becomes horizontal scroll on tablet */
    .community-sidebar {
        display: flex;
    }
    
    .suggestion-composer {
        padding: 16px;
    }
    
    .chat-input-area {
        padding: 14px 16px;
    }
    
    .suggestions-feed,
    .chat-messages-container {
        padding: 16px;
    }
}

/* === PROFILE PAGE STYLES === */
.profile-grid { display: grid; grid-template-columns: 350px 1fr; gap: 20px; max-width: 1200px; margin: 20px auto; padding: 0 20px; width: 100%; align-items: start; }
@media (max-width: 900px) { .profile-grid { grid-template-columns: 1fr; } }

.profile-sidebar { display: flex; flex-direction: column; gap: 20px; }

.profile-hero { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 30px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.profile-hero:hover { border-color: var(--accent); }

.profile-avatar-large { width: 120px; height: 120px; object-fit: cover; background: #000; border-radius: 50%; border: 3px solid var(--accent); box-shadow: 0 0 20px rgba(0,0,0,0.5); margin-bottom: 15px; }
.profile-name-display { font-size: 1.8rem; font-weight: 800; color: #fff; margin-bottom: 8px; line-height: 1.2; }

.profile-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 15px; }
.p-badge { background: rgba(255,255,255,0.05); border: 1px solid #333; color: #aaa; font-size: 0.7rem; padding: 4px 10px; border-radius: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }

.reputation-btn { background: #220a0a; border: 1px solid #6e1818; color: #ff6b6b; padding: 8px 16px; border-radius: 30px; font-weight: 700; cursor: pointer; transition: 0.2s; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.reputation-btn:hover { background: #3a1010; transform: scale(1.05); box-shadow: 0 0 15px rgba(255, 51, 51, 0.2); }

.stat-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; border-top: 1px solid #222; padding-top: 15px; }
.stat-box { background: #111; padding: 8px; border-radius: 6px; border: 1px solid #222; display: flex; flex-direction: column; }
.stat-label { font-size: 0.7rem; color: #666; text-transform: uppercase; font-weight: 700; }
.stat-val { font-size: 1rem; color: #eee; font-weight: 700; }

.profile-bio-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; min-height: 150px; }
.bio-text { color: #ccc; line-height: 1.5; font-size: 0.95rem; white-space: pre-wrap; }
.bio-placeholder { color: #555; font-style: italic; }

.wall-container { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; display: flex; flex-direction: column; min-height: 600px; max-height: 800px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); overflow: hidden; }
.wall-header { padding: 20px; border-bottom: 1px solid #222; background: rgba(255,255,255,0.02); }
.wall-title { font-size: 1.1rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 1px; }

.wall-input-area { padding: 20px; border-bottom: 1px solid #222; background: #111; }
.wall-feed { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 15px; }

.wall-post { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px; padding: 15px; transition: 0.2s; position: relative; }
.wall-post:hover { border-color: #444; background: #1e1e1e; }
.wall-post-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 0.9rem; }
.wall-post-content { color: #ddd; line-height: 1.5; font-size: 0.95rem; white-space: pre-wrap; }
.wall-delete { background: none; border: none; color: #666; font-size: 0.75rem; cursor: pointer; padding: 4px; text-transform: uppercase; font-weight: 700; }
.wall-delete:hover { color: var(--urgent-red); }

.status-indicator { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #161616; position: absolute; bottom: 15px; right: 15px; z-index: 5; }
.status-online { background: #4caf50; box-shadow: 0 0 10px #4caf50; }
.status-offline { background: #555; }

/* === NOTIFICATION SYSTEM STYLES === */

/* Notification Bell Button */
.notification-btn {
    position: relative;
    background: transparent;
    border: none;
    color: var(--text-main);
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.notification-btn:hover {
    background: rgba(255,255,255,0.1);
    color: var(--accent);
}
.notification-btn svg {
    transition: transform 0.2s;
}
.notification-btn:hover svg {
    transform: scale(1.1);
}

/* Notification Badge */
.notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    background: var(--urgent-red);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid var(--bg-header);
    animation: badgePulse 2s infinite;
    box-shadow: 0 2px 8px rgba(255, 51, 51, 0.4);
}

/* Notification Panel */
.notification-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 380px;
    max-width: 95vw;
    background: var(--bg-dropdown);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    overflow: hidden;
    max-height: 500px;
    display: flex;
    flex-direction: column;
}
.notification-panel.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Panel Header */
.notification-header {
    padding: 15px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
    background: rgba(255,255,255,0.02);
    flex-shrink: 0;
}
.notification-header-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--accent);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.notification-header-actions {
    display: flex;
    gap: 8px;
}
.notification-header-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid #333;
    color: #888;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    text-transform: uppercase;
}
.notification-header-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-color: #555;
}

/* Notification List */
.notification-list {
    flex: 1;
    overflow-y: auto;
    max-height: 400px;
}

/* Notification Item */
.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.notification-item:hover {
    background: rgba(255,255,255,0.05);
}
.notification-item:last-child {
    border-bottom: none;
}
.notification-item.unread {
    background: rgba(255, 152, 0, 0.05);
    border-left: 3px solid var(--accent);
}
.notification-item.unread:hover {
    background: rgba(255, 152, 0, 0.1);
}
.notification-item.read {
    opacity: 0.7;
}

/* Notification Avatar */
.notification-avatar {
    flex-shrink: 0;
}
.notif-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: #000;
}

/* Notification Content */
.notification-content {
    flex: 1;
    min-width: 0;
}
.notification-message {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: #ddd;
    line-height: 1.4;
}
.notification-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    margin-right: 4px;
    flex-shrink: 0;
}
.notification-icon svg {
    width: 12px;
    height: 12px;
}
.notif-emoji {
    font-size: 1rem;
}
.notification-user {
    font-weight: 700;
}
.notification-text {
    color: #999;
}
.notification-preview {
    font-size: 0.8rem;
    color: #666;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
}
.notification-time {
    font-size: 0.7rem;
    color: #555;
    margin-top: 4px;
    font-weight: 600;
}

/* Notification Dismiss Button */
.notification-dismiss {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    color: #555;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    opacity: 0;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.notification-item:hover .notification-dismiss {
    opacity: 1;
}
.notification-dismiss:hover {
    background: rgba(255,51,51,0.2);
    color: var(--urgent-red);
}

/* Empty State */
.notification-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #555;
    text-align: center;
}
.notification-empty svg {
    opacity: 0.3;
    margin-bottom: 15px;
}
.notification-empty p {
    font-size: 0.9rem;
    margin: 0;
}

/* Notification Highlight Animation */
@keyframes notificationHighlight {
    0% { 
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7);
        background: rgba(255, 152, 0, 0.15);
    }
    50% { 
        box-shadow: 0 0 20px 10px rgba(255, 152, 0, 0.3);
        background: rgba(255, 152, 0, 0.2);
    }
    100% { 
        box-shadow: 0 0 0 0 transparent;
        background: transparent;
    }
}

.notification-highlight {
    animation: notificationHighlight 2s ease-out;
    border-color: var(--accent) !important;
    position: relative;
    z-index: 10;
}

/* Notification Container Wrapper */
.notification-container {
    position: relative;
    display: flex;
    align-items: center;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .notification-panel {
        position: fixed !important;
        top: 60px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: 95vw !important;
        max-width: 95vw !important;
        border-radius: 12px !important;
        max-height: 70vh;
    }
    .notification-panel.show {
        transform: translateX(-50%) translateY(0) scale(1) !important;
    }
    .notification-item {
        padding: 12px;
    }
    .notif-avatar {
        width: 36px;
        height: 36px;
    }
}

/* === TOAST NOTIFICATION STYLES === */
#notification-toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    max-width: 380px;
    pointer-events: none;
}

.notification-toast {
    background: linear-gradient(135deg, #1a1a1a 0%, #111 100%);
    border: 1px solid #333;
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 20px rgba(255,152,0,0.1);
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    cursor: pointer;
    position: relative;
}
.notification-toast.show {
    transform: translateX(0);
    opacity: 1;
}
.notification-toast.hiding {
    transform: translateX(120%);
    opacity: 0;
}
.notification-toast:hover {
    border-color: #555;
    transform: translateX(-5px);
    box-shadow: 0 15px 50px rgba(0,0,0,0.6), 0 0 30px rgba(255,152,0,0.2);
}

.toast-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}
.toast-avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.toast-content {
    flex: 1;
    min-width: 0;
}
.toast-message {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.85rem;
    line-height: 1.4;
}
.toast-icon {
    font-size: 0.9rem;
    flex-shrink: 0;
}
.toast-user {
    font-weight: 700;
    color: #fff;
}
.toast-text {
    color: #aaa;
}
.toast-preview {
    font-size: 0.8rem;
    color: #666;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
}
.toast-time {
    font-size: 0.7rem;
    color: #555;
    margin-top: 4px;
}

.toast-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: none;
    color: #555;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: 0.2s;
    opacity: 0;
}
.notification-toast:hover .toast-close {
    opacity: 1;
}
.toast-close:hover {
    color: var(--urgent-red);
}

/* Toast animation keyframes */
@keyframes toastSlideIn {
    from { transform: translateX(120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes toastSlideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(120%); opacity: 0; }
}

/* Mobile toast */
@media (max-width: 480px) {
    #notification-toast-container {
        left: 10px;
        right: 10px;
        bottom: 10px;
        max-width: none;
    }
    .notification-toast {
        width: 100%;
    }
}

/* =====================================================
   CLAN PAGE - COMPACT GRID LAYOUT
   ===================================================== */

/* Clan Header with Side Banners */
.clan-header-banner-wrap {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 100px;
    background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
    margin-top: -15px;
}

.clan-header-banner-wrap::before {
    display: none;
}

.clan-header-banner-wrap::after {
    display: none;
}

.clan-header-banner-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 45%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.08) 55%,
        transparent 100%
    );
    transform: skewX(-20deg);
    pointer-events: none;
    animation: glassShine 8s ease-in-out infinite;
}

.clan-header-banner-wrap::after {
    display: none;
}

@keyframes glassShine {
    0%, 100% {
        left: -50%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        left: 100%;
        opacity: 1;
    }
    60%, 100% {
        opacity: 0;
    }
}

/* Side Banners */
.clan-side-banner {
    width: 200px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.clan-side-banner.left {
    mask-image: radial-gradient(ellipse 120% 120% at 0% 50%, black 60%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 120% 120% at 0% 50%, black 60%, transparent 100%);
    clip-path: polygon(
        0% 0%, 100% 0%, 
        85% 8%, 90% 12%, 85% 16%,
        85% 24%, 90% 28%, 85% 32%,
        85% 40%, 90% 44%, 85% 48%,
        85% 56%, 90% 60%, 85% 64%,
        85% 72%, 90% 76%, 85% 80%,
        85% 88%, 90% 92%, 85% 96%, 90% 100%,
        0% 100%
    );
}
.clan-side-banner.right {
    mask-image: radial-gradient(ellipse 120% 120% at 100% 50%, black 60%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 120% 120% at 100% 50%, black 60%, transparent 100%);
    clip-path: polygon(
        100% 0%, 0% 0%, 
        15% 8%, 10% 12%, 15% 16%,
        15% 24%, 10% 28%, 15% 32%,
        15% 40%, 10% 44%, 15% 48%,
        15% 56%, 10% 60%, 15% 64%,
        15% 72%, 10% 76%, 15% 80%,
        15% 88%, 10% 92%, 15% 96%, 10% 100%,
        100% 100%
    );
}
.clan-side-banner .banner-img {
    position: absolute;
    inset: -5px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
    transition: filter 0.4s ease;
    animation: bannerWave 5s ease-in-out infinite;
    transform-origin: top center;
}
.clan-side-banner.left .banner-img {
    animation: bannerWaveLeft 5s ease-in-out infinite;
}
.clan-side-banner.right .banner-img {
    animation: bannerWaveRight 5s ease-in-out infinite;
}
.clan-side-banner:hover .banner-img {
    animation-play-state: paused;
    transform: scale(1.05) skewX(0deg);
}

@keyframes bannerWaveLeft {
    0%, 100% {
        transform: scale(1.05) skewX(0deg) translateX(0px) rotate(0deg);
    }
    20% {
        transform: scale(1.08) skewX(3deg) translateX(4px) rotate(0.5deg);
    }
    40% {
        transform: scale(1.04) skewX(1deg) translateX(2px) rotate(0deg);
    }
    60% {
        transform: scale(1.06) skewX(-2deg) translateX(-2px) rotate(-0.3deg);
    }
    80% {
        transform: scale(1.03) skewX(-1deg) translateX(-1px) rotate(0deg);
    }
}

@keyframes bannerWaveRight {
    0%, 100% {
        transform: scale(1.05) skewX(0deg) translateX(0px) rotate(0deg);
    }
    20% {
        transform: scale(1.03) skewX(-2deg) translateX(-2px) rotate(-0.3deg);
    }
    40% {
        transform: scale(1.06) skewX(-1deg) translateX(-1px) rotate(0deg);
    }
    60% {
        transform: scale(1.08) skewX(3deg) translateX(4px) rotate(0.5deg);
    }
    80% {
        transform: scale(1.04) skewX(1deg) translateX(2px) rotate(0deg);
    }
}

.clan-side-banner .banner-fade {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.clan-side-banner.left .banner-fade {
    background: linear-gradient(90deg, transparent 0%, #0d0d15 100%);
}
.clan-side-banner.right .banner-fade {
    background: linear-gradient(270deg, transparent 0%, #0d0d15 100%);
}

/* Center Name Section */
.clan-name-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* Decorative Elements */
.clan-name-decoration {
    display: flex;
    align-items: center;
    gap: 8px;
}
.clan-name-decoration .deco-line {
    display: block;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--purple), var(--blue), transparent);
    border-radius: 2px;
}
.clan-name-decoration.left .deco-line {
    background: linear-gradient(90deg, transparent, var(--purple), var(--blue));
}
.clan-name-decoration.right .deco-line {
    background: linear-gradient(90deg, var(--blue), var(--purple), transparent);
}
.clan-name-decoration .deco-diamond {
    color: var(--purple);
    font-size: 0.7rem;
    text-shadow: 0 0 10px var(--purple);
    animation: diamondPulse 2s ease-in-out infinite;
}
@keyframes diamondPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Clan Name Title */
.clan-name-title {
    font-size: 2rem;
    font-weight: 900;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 6px;
    color: #fff;
    position: relative;
    white-space: nowrap;
    
    /* Multi-layer text effect */
    background: linear-gradient(
        180deg, 
        #fff 0%, 
        #e0e0ff 20%,
        #bb86fc 50%, 
        #7c4dff 80%,
        #4fc3f7 100%
    );
    background-size: 100% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    /* Glow effect */
    filter: drop-shadow(0 0 8px rgba(187, 134, 252, 0.6))
            drop-shadow(0 0 20px rgba(79, 195, 247, 0.4))
            drop-shadow(0 2px 4px rgba(0,0,0,0.8));
    
    animation: clanTitleShimmer 4s ease-in-out infinite;
}

.clan-name-title::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: clanTitleGleam 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes clanTitleShimmer {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 0% 100%; }
}

@keyframes clanTitleGleam {
    0%, 100% { background-position: -200% center; }
    50% { background-position: 200% center; }
}

/* Legacy banner styles for fallback */
.clan-banner-wrap {
    position: relative;
    width: 100%;
    height: 140px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
}
.clan-banner-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}
.clan-banner-wrap:hover .clan-banner-img {
    transform: scale(1.02);
}
.clan-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.clan-name-banner {
    font-size: 2.8rem;
    font-weight: 900;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #fff;
    text-shadow: 
        0 0 20px rgba(79, 195, 247, 0.8),
        0 0 40px rgba(187, 134, 252, 0.6),
        0 4px 8px rgba(0,0,0,0.8);
    background: linear-gradient(90deg, #bb86fc 0%, #4fc3f7 25%, #fff 50%, #4fc3f7 75%, #bb86fc 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: clanNameShine 3s ease-in-out infinite;
    position: relative;
}
@keyframes clanNameShine {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 200% center; }
}

/* Compact Header (stats bar) */
.clan-compact-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 20px;
    background: linear-gradient(180deg, #1a1a1a 0%, #111 100%);
    border-bottom: 1px solid #2a2a2a;
}
.clan-header-left {
    flex: 1;
    min-width: 0;
}
.clan-blurb-inline {
    margin: 0;
    font-size: 0.75rem;
    color: #666;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
}
.clan-header-stats {
    display: flex;
    gap: 8px;
}
.mini-stat {
    background: #161616;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 6px 12px;
    text-align: center;
    min-width: 70px;
}
.mini-stat.xp { border-top: 2px solid var(--purple); }
.mini-stat.members { border-top: 2px solid var(--blue); }
.mini-stat.avg { border-top: 2px solid var(--green); }
.mini-stat.kills { border-top: 2px solid var(--urgent-red); }
.mini-stat-divider {
    width: 1px;
    background: #333;
    margin: 0 4px;
    align-self: stretch;
}
.mini-stat.day-gain { border-top: 2px solid var(--accent); }
.mini-stat.week-gain { border-top: 2px solid #4ecdc4; }
.mini-stat.month-gain { border-top: 2px solid #a855f7; }
.mini-val.gain {
    color: var(--green);
}
.mini-val {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}
.mini-lbl {
    font-size: 0.6rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.clan-header-actions {
    display: flex;
    gap: 6px;
}
.clan-icon-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #222;
    border: 1px solid #333;
    border-radius: 6px;
    color: #888;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
}
.clan-icon-btn:hover { background: #2a2a2a; border-color: #444; color: #fff; }
.clan-icon-btn.discord { background: #5865F2; border-color: #5865F2; color: #fff; }
.clan-icon-btn.discord:hover { background: #4752c4; }

/* Slim Ticker */
.clan-ticker-slim {
    display: flex;
    align-items: center;
    background: #0d0d0d;
    border-bottom: 1px solid #222;
    height: 28px;
    overflow: hidden;
}
.ticker-icon {
    padding: 0 10px;
    color: var(--accent);
    font-size: 0.75rem;
}
.ticker-scroll-wrap {
    flex: 1;
    overflow: hidden;
}
.ticker-scroll {
    display: flex;
    animation: ticker-scroll 30s linear infinite;
}
.ticker-scroll:hover { animation-play-state: paused; }
@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.ticker-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 15px;
    font-size: 0.7rem;
    color: #777;
    white-space: nowrap;
}
.ticker-item img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}
.ticker-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--purple);
    flex-shrink: 0;
}
.ticker-item strong { color: #bbb; font-weight: 600; }
.ticker-item .ticker-skill { color: var(--blue); }
.ticker-item .ticker-time { color: #444; font-size: 0.65rem; }

/* Main Grid Layout */
.clan-main-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 12px;
    padding: 12px;
    min-height: calc(100vh - 150px);
}
.clan-left-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.clan-right-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Panels */
.clan-panel {
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    overflow: hidden;
}
.panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #161616;
    border-bottom: 1px solid #222;
    font-size: 0.75rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
}
.panel-head img { opacity: 0.8; }
.panel-head span { flex: 1; }
.panel-btn {
    background: #222;
    border: 1px solid #333;
    color: #888;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.65rem;
    cursor: pointer;
    transition: 0.2s;
}
.panel-btn:hover { background: #2a2a2a; color: #fff; border-color: var(--accent); }
.period-select {
    background: #1a1a1a;
    border: 1px solid #333;
    padding: 3px 6px;
    border-radius: 4px;
    color: #888;
    font-size: 0.65rem;
    cursor: pointer;
}
.period-select:focus { outline: none; border-color: var(--accent); }
.empty-msg {
    padding: 20px;
    text-align: center;
    color: #444;
    font-size: 0.75rem;
    font-style: italic;
}

/* Horizontal Podium Row */
.podium-row {
    display: flex;
    gap: 8px;
    padding: 12px;
    justify-content: center;
}
.podium-card {
    flex: 1;
    max-width: 100px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 10px 6px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
}
.podium-card:hover { border-color: #555; background: #222; }
.podium-card.rank-1 { border-color: #ffd700; background: linear-gradient(180deg, #252210 0%, #1a1a1a 100%); }
.podium-card.rank-2 { border-color: #c0c0c0; }
.podium-card.rank-3 { border-color: #cd7f32; }
.medal-icon { font-size: 1.1rem; display: block; margin-bottom: 4px; }
.podium-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin: 0 auto 6px;
    display: block;
    border: 2px solid #333;
}
.rank-1 .podium-avatar { border-color: #ffd700; }
.rank-2 .podium-avatar { border-color: #c0c0c0; }
.rank-3 .podium-avatar { border-color: #cd7f32; }
.podium-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.podium-val {
    font-size: 0.65rem;
    color: #888;
}
.rank-1 .podium-val { color: #ffd700; }

/* Competitions Compact */
.competitions-compact {
    padding: 8px;
    max-height: 180px;
    overflow-y: auto;
}
.competitions-compact::-webkit-scrollbar { width: 4px; }
.competitions-compact::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
.comp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #1a1a1a;
    border-radius: 6px;
    margin-bottom: 6px;
    border-left: 3px solid #333;
}
.comp-row.active { border-left-color: #4caf50; }
.comp-row.upcoming { border-left-color: #4fc3f7; }
.comp-row.ended { border-left-color: #ef5350; }
.comp-row-info {
    flex: 1;
    min-width: 0;
}
.comp-row-info h4 {
    margin: 0;
    font-size: 0.8rem;
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.comp-row-info .comp-meta {
    font-size: 0.65rem;
    color: #555;
}
.comp-status {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.05);
    color: #666;
}
.comp-row.active .comp-status { color: #4caf50; }
.comp-row.upcoming .comp-status { color: #4fc3f7; }
.comp-delete-btn {
    background: transparent;
    border: none;
    color: #444;
    cursor: pointer;
    padding: 4px;
    font-size: 0.8rem;
    transition: 0.2s;
}
.comp-delete-btn:hover { color: #ef5350; }

/* Activity Compact */
.activity-compact {
    padding: 8px;
    max-height: 120px;
    overflow-y: auto;
}
.activity-compact::-webkit-scrollbar { width: 4px; }
.activity-compact::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
.activity-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #1a1a1a;
    border-radius: 4px;
    margin-bottom: 4px;
    font-size: 0.75rem;
    border-left: 2px solid #333;
}
.activity-row.join { border-left-color: #4caf50; }
.activity-row.leave { border-left-color: #ef5350; }
.activity-row .activity-icon { font-size: 0.7rem; }
.activity-row .activity-name { color: #ddd; font-weight: 600; flex: 1; }
.activity-row .activity-action { 
    font-size: 0.65rem; 
    text-transform: uppercase; 
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.05);
}
.activity-row.join .activity-action { color: #4caf50; }
.activity-row.leave .activity-action { color: #ef5350; }
.activity-row .activity-time { color: #444; font-size: 0.65rem; }

/* Table Panel */
.table-panel { flex: 1; display: flex; flex-direction: column; }
.table-panel .panel-head { flex-shrink: 0; }
.filter-input {
    background: #1a1a1a;
    border: 1px solid #333;
    padding: 4px 10px;
    border-radius: 4px;
    color: #ddd;
    font-size: 0.7rem;
    width: 140px;
}
.filter-input:focus { outline: none; border-color: var(--accent); }

/* XP Tracking Info Bar */
.xp-tracking-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 200, 87, 0.08);
    border: 1px solid rgba(255, 200, 87, 0.2);
    border-radius: 6px;
    margin: 0 12px 10px 12px;
    font-size: 0.72rem;
    color: #aaa;
}
.xp-tracking-info .info-icon {
    font-size: 0.85rem;
    flex-shrink: 0;
}
.xp-tracking-info .info-text {
    line-height: 1.4;
}
.xp-tracking-info.centered {
    justify-content: center;
    text-align: center;
}
.xp-tracking-info strong {
    color: var(--accent);
    font-weight: 600;
}

.clan-table-wrap {
    flex: 1;
    overflow-y: auto;
}
.clan-table-wrap::-webkit-scrollbar { width: 6px; }
.clan-table-wrap::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
.member-changes-panel { max-height: 160px; }

/* Style select for modals */
.style-select {
    background: #111;
    border: 1px solid #333;
    padding: 10px;
    border-radius: 6px;
    color: #fff;
    width: 100%;
    cursor: pointer;
}
.style-select:focus { outline: none; border-color: var(--accent); }

/* Responsive */
@media (max-width: 900px) {
    .clan-main-grid {
        grid-template-columns: 1fr;
    }
    .clan-compact-header {
        flex-wrap: wrap;
    }
    .clan-header-stats {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }
    .clan-blurb-inline { max-width: 200px; }
    .clan-name-banner { font-size: 1.8rem; letter-spacing: 2px; }
}

/* ============================================
   COMPREHENSIVE MOBILE OPTIMIZATION
   ============================================ */

/* === TABLET BREAKPOINT (768px) === */
@media (max-width: 768px) {
    /* Header adjustments */
    header {
        padding: 10px 12px 15px 12px;
        gap: 10px;
    }
    
    .header-left, .header-right {
        min-width: 0;
        gap: 10px;
    }
    
    .brand-wrapper {
        gap: 8px;
    }
    
    .header-logo {
        height: 30px;
    }
    
    .scrolling-title {
        font-size: 0.95rem;
        max-width: 100px;
    }
    
    .header-nav {
        gap: 2px;
        padding: 3px;
    }
    
    .nav-item {
        padding: 5px 10px;
        font-size: 0.75rem;
    }
    
    .flash-header-bar {
        min-width: 200px;
        max-width: 280px;
        flex: 1 1 200px;
        padding: 2px 10px;
        height: 34px;
    }
    
    .flash-bar-name {
        font-size: 0.75rem;
    }
    
    .flash-bar-timer {
        font-size: 0.85rem;
        width: 50px;
    }
    
    .wiki-search-container {
        max-width: 200px;
        min-width: 0;
    }
    
    .header-clock-group {
        width: 90px;
    }
    
    .header-time-val {
        font-size: 1rem;
    }
    
    .header-time-sub {
        font-size: 0.65rem;
    }
    
    .clan-banner {
        min-width: 160px;
        max-width: 220px;
        height: 60px;
        padding: 6px 12px 6px 10px;
    }
    
    .clan-banner-info h3 {
        font-size: 0.85rem;
    }
    
    .clan-banner-logo {
        width: 40px;
        height: 40px;
    }
    
    /* Dashboard adjustments */
    .dashboard {
        padding: 12px;
        gap: 12px;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
    
    .card {
        min-height: 350px;
        padding: 14px;
    }
    
    .card-main-text {
        font-size: 1.8rem;
    }
    
    .card-sub-text {
        font-size: 1.1rem;
    }
    
    /* Community Hub */
    .community-hub {
        flex-direction: column;
        padding: 12px;
        overflow: visible;
        height: auto;
    }
    
    .community-sidebar {
        width: 100%;
        padding-right: 0;
        padding-bottom: 15px;
        max-height: 250px;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 12px;
    }
    
    .sidebar-section {
        flex-shrink: 0;
        min-width: 280px;
    }
    
    .sidebar-section:first-child {
        min-height: 200px;
    }
    
    .community-main {
        width: 100%;
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(255,255,255,0.06);
        padding-top: 15px;
    }
    
    /* Chat area */
    .chat-messages-area {
        max-height: 400px;
    }
    
    .chat-bubble {
        max-width: 90%;
    }
    
    .chat-input-wrapper {
        padding: 12px;
    }
    
    .chat-input {
        font-size: 0.9rem;
        min-height: 44px;
    }
    
    /* Formatting toolbar */
    .formatting-toolbar {
        padding: 6px 8px;
        gap: 3px;
        flex-wrap: wrap;
    }
    
    .format-btn {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }
    
    .format-divider {
        height: 20px;
        margin: 0 4px;
    }
    
    /* Idea board */
    .idea-board-content {
        padding: 12px;
    }
    
    .suggestion-card {
        padding: 14px;
    }
    
    /* Modals */
    .modal-content,
    .settings-modal-content,
    .profile-modal-content {
        width: 95vw;
        max-width: 95vw;
        max-height: 90vh;
        margin: 5vh auto;
    }
    
    /* XP Tracker specific */
    .xp-main-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 12px;
    }
    
    .xp-card,
    .tracker-panel {
        padding: 15px;
    }
    
    .stat-row {
        padding: 8px 10px;
    }
    
    .skills-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 8px;
    }
    
    .skill-item {
        padding: 10px 8px;
    }
    
    .skill-icon {
        width: 28px;
        height: 28px;
    }
    
    .skill-level {
        font-size: 1.1rem;
    }
}

/* === MOBILE BREAKPOINT (580px) === */
@media (max-width: 580px) {
    /* Header - Stack layout */
    header {
        padding: 8px 10px 12px 10px;
        flex-direction: column;
        align-items: stretch;
    }
    
    .header-left {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .header-right {
        justify-content: center;
        flex-wrap: wrap;
        padding: 0;
        gap: 8px;
    }
    
    .brand-wrapper {
        order: -1;
        justify-content: center;
        width: 100%;
    }
    
    .scrolling-title {
        font-size: 1rem;
        max-width: 150px;
    }
    
    .header-nav {
        order: 1;
        width: 100%;
        justify-content: center;
        margin: 8px 0;
    }
    
    .nav-item {
        padding: 6px 10px;
        font-size: 0.7rem;
    }
    
    .flash-header-bar {
        order: 2;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: 1 1 100%;
        margin: 5px 0;
    }
    
    .wiki-search-container {
        width: 100%;
        max-width: 100%;
        order: 3;
    }
    
    .header-clock-group {
        align-items: center;
        width: auto;
    }
    
    .clan-banner {
        min-width: 140px;
        max-width: 180px;
        height: 50px;
        padding: 5px 10px 5px 8px;
    }
    
    .clan-banner-logo {
        width: 35px;
        height: 35px;
    }
    
    .clan-banner-info h3 {
        font-size: 0.75rem;
    }
    
    .user-count-badge {
        padding: 3px 8px;
        font-size: 0.7rem;
    }
    
    /* Dashboard */
    .dashboard {
        padding: 10px;
        gap: 10px;
        grid-template-columns: 1fr;
    }
    
    .card {
        min-height: auto;
        padding: 15px;
    }
    
    .card-title {
        font-size: 0.8rem;
    }
    
    .card-main-text {
        font-size: 1.6rem;
        margin: 12px 0;
    }
    
    .card-sub-text {
        font-size: 1rem;
    }
    
    .special-box {
        padding: 12px;
        margin-top: 15px;
    }
    
    .feat-timer {
        font-size: 1.8rem;
    }
    
    .feat-name {
        font-size: 1.1rem;
    }
    
    /* Merchant display */
    .merchant-display-wrapper {
        flex-direction: column;
    }
    
    .merchant-column {
        width: 100%;
    }
    
    .merch-slot {
        padding: 10px;
    }
    
    .merch-name {
        font-size: 0.8rem;
    }
    
    /* Rotation rows */
    .rot-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .rot-val {
        text-align: left;
    }
    
    /* Community Hub */
    .community-hub {
        padding: 10px;
    }
    
    .community-sidebar {
        flex-direction: column;
        max-height: none;
        overflow: visible;
    }
    
    .sidebar-section {
        min-width: 100%;
        width: 100%;
    }
    
    .sidebar-section:first-child {
        max-height: 200px;
    }
    
    .online-users-list {
        max-height: 150px;
    }
    
    /* Chat */
    .community-tabs {
        padding: 0 10px;
    }
    
    .community-tab {
        padding: 10px 12px;
        font-size: 0.75rem;
    }
    
    .chat-messages-area {
        max-height: 350px;
        padding: 12px;
    }
    
    .chat-bubble {
        max-width: 95%;
        padding: 10px 12px;
    }
    
    .chat-avatar {
        width: 32px;
        height: 32px;
    }
    
    .chat-author {
        font-size: 0.75rem;
    }
    
    .chat-text {
        font-size: 0.85rem;
    }
    
    .chat-input-wrapper {
        padding: 10px;
    }
    
    .formatting-toolbar {
        padding: 5px 6px;
        gap: 2px;
    }
    
    .format-btn {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
    
    .format-divider {
        display: none;
    }
    
    .chat-input {
        min-height: 50px;
        font-size: 16px; /* Prevents iOS zoom */
        padding: 10px 12px;
    }
    
    .reply-preview-bar {
        padding: 8px 10px;
    }
    
    .reply-preview-content {
        font-size: 0.75rem;
    }
    
    /* Idea board */
    .idea-board-header {
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }
    
    .idea-board-controls {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .idea-search-input,
    .idea-sort-select {
        flex: 1;
        min-width: 120px;
    }
    
    .suggestion-card {
        padding: 12px;
    }
    
    .suggestion-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .suggestion-meta {
        width: 100%;
    }
    
    .suggestion-footer {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .vote-btn {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
    
    /* Compose modal */
    .compose-modal {
        padding: 15px;
    }
    
    .compose-textarea {
        min-height: 120px;
        font-size: 16px;
    }
    
    /* Modals */
    .modal-content,
    .settings-modal-content,
    .profile-modal-content {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }
    
    .modal-header {
        padding: 15px;
    }
    
    .modal-body {
        padding: 15px;
    }
    
    /* Settings dropdown */
    .settings-dropdown {
        width: 100vw;
        max-width: 280px;
        left: auto;
        right: -10px;
    }
    
    /* Notification panel */
    .notification-panel {
        position: fixed !important;
        top: 60px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: 95vw !important;
        max-width: 95vw !important;
    }
    .notification-panel.show {
        transform: translateX(-50%) translateY(0) scale(1) !important;
    }
    
    /* XP Tracker */
    .xp-main-grid {
        padding: 10px;
        gap: 12px;
    }
    
    .tracker-tabs {
        flex-wrap: wrap;
    }
    
    .tracker-tab {
        flex: 1;
        min-width: 80px;
        font-size: 0.7rem;
        padding: 8px 5px;
    }
    
    .xp-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .stat-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 10px;
    }
    
    .stat-value {
        font-size: 1rem;
    }
    
    .skills-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    
    .skill-item {
        padding: 8px 5px;
    }
    
    .skill-icon {
        width: 24px;
        height: 24px;
    }
    
    .skill-name {
        font-size: 0.6rem;
    }
    
    .skill-level {
        font-size: 0.95rem;
    }
    
    /* Clan panel */
    .clan-member-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
    
    .member-card {
        padding: 10px;
    }
    
    .member-name {
        font-size: 0.8rem;
    }
    
    /* Activities grid */
    .activities-grid {
        grid-template-columns: 1fr;
    }
    
    .activity-card {
        padding: 12px;
    }
    
    /* Toast notifications */
    #notification-toast-container {
        left: 10px;
        right: 10px;
        bottom: 10px;
        max-width: none;
    }
    
    .notification-toast {
        width: 100%;
    }
}

/* === SMALL PHONE BREAKPOINT (400px) === */
@media (max-width: 400px) {
    header {
        padding: 6px 8px 10px 8px;
    }
    
    .header-logo {
        height: 26px;
    }
    
    .scrolling-title {
        font-size: 0.9rem;
        max-width: 120px;
    }
    
    .nav-item {
        padding: 5px 8px;
        font-size: 0.65rem;
    }
    
    .header-time-val {
        font-size: 0.9rem;
    }
    
    .clan-banner {
        display: none !important; /* Hide on very small screens */
    }
    
    .dashboard {
        padding: 8px;
        gap: 8px;
    }
    
    .card {
        padding: 12px;
    }
    
    .card-main-text {
        font-size: 1.4rem;
    }
    
    .card-sub-text {
        font-size: 0.9rem;
    }
    
    .feat-timer {
        font-size: 1.5rem;
    }
    
    .chat-bubble {
        padding: 8px 10px;
    }
    
    .format-btn {
        width: 26px;
        height: 26px;
        font-size: 0.7rem;
    }
    
    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .suggestion-card {
        padding: 10px;
    }
    
    .vote-btn {
        padding: 5px 10px;
    }
}

/* === TOUCH DEVICE OPTIMIZATIONS === */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .nav-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .menu-btn,
    .search-btn,
    .notification-btn,
    .format-btn {
        min-width: 44px;
        min-height: 44px;
    }
    
    .vote-btn,
    .btn,
    button {
        min-height: 44px;
    }
    
    .dropdown-item {
        min-height: 48px;
    }
    
    /* Remove hover effects that don't work on touch */
    .card:hover,
    .chat-bubble:hover,
    .suggestion-card:hover,
    .online-user-item:hover {
        transform: none;
    }
    
    /* Better scrolling */
    .chat-messages-area,
    .online-users-list,
    .suggestions-list,
    .modal-body {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    /* Prevent text selection issues */
    .chat-input,
    .compose-textarea,
    input,
    textarea {
        -webkit-user-select: text;
        user-select: text;
    }
}

/* === LANDSCAPE PHONE === */
@media (max-height: 500px) and (orientation: landscape) {
    header {
        padding: 5px 10px 8px 10px;
        min-height: auto;
    }
    
    .header-nav {
        margin: 3px 0;
    }
    
    .nav-item {
        padding: 4px 8px;
    }
    
    .dashboard {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .card {
        min-height: 200px;
    }
    
    .chat-messages-area {
        max-height: 200px;
    }
    
    .modal-content,
    .settings-modal-content {
        max-height: 95vh;
    }
}

/* === SAFE AREA INSETS (for notched phones) === */
@supports (padding: max(0px)) {
    header {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
    
    .dashboard,
    .community-hub,
    .xp-main-grid {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
    
    #notification-toast-container {
        bottom: max(10px, env(safe-area-inset-bottom));
    }
}

/* === MOBILE PICKER & POPUP FIXES === */
@media (max-width: 580px) {
    /* Color picker */
    .color-picker-dropdown {
        left: auto;
        right: 0;
        transform: none;
        padding: 10px;
    }
    
    .color-swatch {
        width: 32px;
        height: 32px;
    }
    
    /* Font picker */
    .font-picker-dropdown {
        left: auto;
        right: 0;
        transform: none;
        max-height: 200px;
        min-width: 160px;
    }
    
    .font-option {
        padding: 10px 14px;
        font-size: 0.9rem;
    }
    
    /* Link input modal */
    .link-input-modal {
        width: 90vw;
        max-width: 350px;
    }
    
    .link-input-modal input {
        font-size: 16px;
        padding: 12px;
    }
    
    /* Online users modal */
    .online-modal-content {
        width: 95vw;
        max-width: 95vw;
        max-height: 80vh;
    }
    
    .modal-users-list {
        max-height: 60vh;
    }
    
    /* Quick stats in sidebar */
    .quick-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .stat-box {
        padding: 10px 8px;
    }
    
    .stat-box .stat-value {
        font-size: 1.1rem;
    }
    
    /* Auth buttons */
    .auth-buttons {
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .auth-btn {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
    
    /* Profile display */
    .profile-btn-display {
        max-width: 100px;
    }
    
    .profile-display-name {
        font-size: 0.75rem;
        max-width: 60px;
    }
}

/* === PREVENT ZOOM ON INPUT FOCUS (iOS) === */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* === SCROLL SNAP FOR HORIZONTAL SECTIONS === */
@media (max-width: 768px) {
    .community-sidebar {
        scroll-snap-type: x mandatory;
        scroll-padding: 12px;
    }
    
    .sidebar-section {
        scroll-snap-align: start;
    }
}

/* === BOTTOM PADDING FOR MOBILE (virtual keyboard space) === */
@media (max-width: 768px) {
    body {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    
    .chat-input-wrapper {
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
}

/* =====================================================
   COMPREHENSIVE MOBILE OPTIMIZATION (480px and below)
   ===================================================== */
@media (max-width: 480px) {
    /* Base adjustments */
    html, body {
        font-size: 14px;
        overflow-x: hidden;
    }
    
    /* Header - Compact mobile layout */
    header {
        padding: 8px 10px;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .header-left {
        width: 100%;
        order: 1;
    }
    
    .brand-wrapper {
        max-width: none;
    }
    
    .scrolling-title {
        font-size: 0.85rem;
    }
    
    .header-nav {
        width: 100%;
        order: 3;
        justify-content: center;
        gap: 5px;
        margin: 5px 0;
    }
    
    .nav-btn {
        padding: 8px 10px;
        font-size: 0.7rem;
        min-height: 36px;
    }
    
    .header-right {
        width: 100%;
        order: 2;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .header-clock-group {
        flex-direction: column;
        gap: 2px;
        align-items: center;
    }
    
    .header-time-val {
        font-size: 0.9rem;
    }
    
    .wiki-search-container {
        width: 100%;
        max-width: none;
        order: 4;
    }
    
    .wiki-search-container input {
        padding: 10px 12px;
        font-size: 14px;
    }
    
    /* Dashboard - Stack cards vertically */
    .dashboard {
        padding: 10px;
        gap: 12px;
        display: flex;
        flex-direction: column;
    }
    
    .card {
        min-height: auto;
        padding: 15px;
        margin-bottom: 0;
    }
    
    .card-title {
        font-size: 0.75rem;
        letter-spacing: 1px;
        gap: 6px;
    }
    
    .card-main-text {
        font-size: 1.8rem;
        margin: 8px 0;
    }
    
    .card-sub-text {
        font-size: 1rem;
    }
    
    .icon-img {
        width: 24px;
        height: 24px;
    }
    
    /* Flash event card mobile */
    .special-box {
        padding: 10px;
        margin-top: 10px;
    }
    
    .special-label {
        font-size: 0.6rem;
        margin-bottom: 6px;
    }
    
    .special-name {
        font-size: 0.9rem;
    }
    
    .upcoming-row {
        margin-top: 8px;
        padding-top: 8px;
        font-size: 0.75rem;
    }
    
    .upcoming-row span {
        font-size: 0.85rem;
    }
    
    /* Rotations card mobile */
    .rot-row {
        padding: 6px 0;
    }
    
    .rot-label {
        font-size: 0.75rem;
    }
    
    .rot-val {
        font-size: 0.8rem;
    }
    
    /* Santa card mobile */
    .chase-items-section {
        padding-top: 6px;
        margin-top: auto !important;
    }
    
    .chase-header {
        font-size: 0.65rem;
        margin-bottom: 5px;
    }
    
    .chase-grid {
        gap: 6px;
    }
    
    .chase-item {
        width: 32px;
        height: 32px;
    }
    
    /* Tasks container mobile */
    .tasks-container {
        padding: 10px;
    }
    
    .task-card {
        height: auto;
        min-height: 400px;
    }
    
    .tab-header {
        flex-wrap: wrap;
    }
    
    .tab-btn {
        padding: 10px 8px;
        font-size: 0.7rem;
        min-width: 60px;
        flex: 1 1 auto;
    }
    
    .tab-content {
        padding: 12px;
    }
    
    .reset-bar {
        padding: 8px;
        font-size: 0.75rem;
        margin-bottom: 10px;
    }
    
    .reset-time {
        display: block;
        margin-top: 3px;
        margin-left: 0;
    }
    
    .task-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .task-item {
        padding: 10px 12px;
    }
    
    .task-item label {
        font-size: 0.85rem;
    }
    
    /* XP Tracker mobile */
    .tracker-controls {
        padding: 10px !important;
        gap: 10px !important;
    }
    
    .tracker-controls.dual-search {
        padding: 10px !important;
    }
    
    .search-section {
        padding: 10px;
    }
    
    .search-box-large {
        padding: 10px 12px;
        font-size: 14px;
    }
    
    .search-box-styled button {
        padding: 10px 15px;
        font-size: 0.8rem;
    }
    
    .mode-toggle {
        gap: 5px;
    }
    
    .mode-toggle button {
        padding: 8px 12px;
        font-size: 0.75rem;
    }
    
    /* Profile results mobile */
    .profile-header {
        padding: 12px;
    }
    
    #p-name {
        font-size: 1.2rem;
    }
    
    .stats-row {
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .stat-badge {
        padding: 4px 8px;
        font-size: 0.7rem;
    }
    
    /* Skills grid mobile - 2 columns */
    .skills-grid {
        gap: 6px;
        padding: 10px;
    }
    
    .skill-card-detailed {
        flex: 1 1 calc(50% - 3px);
        min-width: calc(50% - 3px);
        max-width: calc(50% - 3px);
        padding: 8px;
        min-height: 80px;
    }
    
    .skill-lvl {
        font-size: 1.1rem;
    }
    
    .skill-icon-lg {
        width: 22px;
        height: 22px;
    }
    
    /* Clan results mobile */
    .clan-name-title {
        font-size: 1.4rem;
        letter-spacing: 1px;
    }
    
    .clan-stats-pills {
        flex-direction: column;
        gap: 8px;
    }
    
    .stat-pill-box {
        width: 100%;
        justify-content: center;
    }
    
    /* Modals mobile */
    .modal-content {
        width: 95%;
        margin: 10px;
        padding: 15px;
        max-height: 90vh;
    }
    
    .modal-content h2 {
        font-size: 1.2rem;
    }
    
    /* Buttons - touch friendly */
    button, .btn, .nav-btn, .tab-btn, .action-btn, .submit-btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Inputs - prevent zoom on iOS */
    input, select, textarea {
        font-size: 16px !important;
    }
    
    /* Community page mobile */
    .community-tabs {
        padding: 8px;
        gap: 5px;
    }
    
    .community-tab-btn {
        padding: 8px 12px;
        font-size: 0.75rem;
    }
    
    .suggestions-feed {
        padding: 10px;
    }
    
    .suggestion-card {
        padding: 12px;
    }
    
    .card-header {
        gap: 8px;
        margin-bottom: 10px;
    }
    
    .avatar-main {
        width: 36px;
        height: 36px;
    }
    
    .user-name-large {
        font-size: 0.9rem;
    }
    
    .card-body {
        font-size: 0.85rem;
    }
    
    /* Chat mobile */
    .chat-messages-container {
        padding: 10px;
    }
    
    .chat-msg {
        max-width: 85%;
        padding: 8px 10px;
        font-size: 0.85rem;
    }
    
    .chat-input-area {
        padding: 10px;
    }
    
    .chat-input-wrapper input {
        padding: 10px 12px;
        font-size: 14px;
    }
    
    /* Profile page mobile */
    .profile-grid {
        padding: 10px;
        gap: 15px;
    }
    
    .profile-hero {
        padding: 20px 15px;
    }
    
    .profile-avatar-large {
        width: 80px;
        height: 80px;
    }
    
    .profile-name-display {
        font-size: 1.4rem;
    }
    
    .wall-container {
        min-height: 400px;
    }
    
    .wall-header, .wall-input-area, .wall-feed {
        padding: 12px;
    }
    
    /* Custom timers mobile */
    .custom-timer-wrapper {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .ct-form-body {
        padding: 15px;
        gap: 12px;
    }
    
    .ct-row-split {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    /* Merchant display mobile */
    .merchant-grid-layout {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    
    .merchant-item-box {
        min-height: 80px;
    }
    
    /* =====================================================
       XP TRACKER - PLAYER PROFILE MOBILE (480px)
       ===================================================== */
    
    /* Tracker layout */
    .tracker-container {
        padding: 10px !important;
    }
    
    .tracker-split-layout:not([style*="display: none"]) {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    #player-results {
        grid-column: auto !important;
        order: -1;
    }
    
    .results-section,
    .sidebar-panel {
        width: 100% !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Profile header mobile */
    .profile-header {
        padding: 12px !important;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .profile-identity {
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center;
    }
    
    .profile-details-col {
        align-items: center !important;
        text-align: center;
    }
    
    #p-avatar {
        width: 70px !important;
        height: 70px !important;
    }
    
    #p-name {
        font-size: 1.3rem !important;
        text-align: center !important;
    }
    
    .profile-meta-row {
        flex-direction: column;
        gap: 8px;
        align-items: center;
        justify-content: center;
    }
    
    .rank-badge {
        font-size: 0.75rem;
        padding: 3px 8px;
    }
    
    .rank-toggle-container {
        margin-left: 0 !important;
        justify-content: center;
    }
    
    /* Clan banner on profile - hide or reduce on mobile */
    #clan-banner-container {
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        margin-top: 10px;
    }
    
    #clan-banner-img {
        width: 80px !important;
        height: 80px !important;
    }
    
    /* Stats row mobile */
    .stats-row {
        justify-content: center !important;
        gap: 6px;
    }
    
    .stat-pill {
        padding: 3px 8px;
        font-size: 0.75rem;
    }
    
    .stat-pill span {
        font-size: 0.75rem;
    }
    
    .stat-pill img {
        width: 16px;
        height: 16px;
    }
    
    /* Skills grid mobile - 2 columns */
    .skills-grid {
        gap: 8px !important;
        padding: 10px !important;
        justify-content: stretch !important;
    }
    
    .skill-card-detailed {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
        min-height: 85px !important;
        padding: 8px !important;
    }
    
    .skill-icon-lg {
        width: 20px !important;
        height: 20px !important;
    }
    
    .skill-lvl {
        font-size: 1rem !important;
    }
    
    .skill-rank {
        font-size: 0.65rem;
    }
    
    .skill-card-detailed .skill-xp-text {
        font-size: 0.65rem !important;
    }
    
    .skill-progress-track {
        height: 4px;
    }
    
    /* Sidebar tabs mobile */
    .sidebar-tabs {
        flex-wrap: wrap;
    }
    
    .sidebar-tab-btn {
        flex: 1 1 auto;
        padding: 10px 8px;
        font-size: 0.7rem;
        min-width: 70px;
    }
    
    .sidebar-content {
        padding: 12px !important;
    }
    
    /* Highlights mobile */
    .highlights-container {
        gap: 8px;
    }
    
    .highlight-card {
        padding: 10px;
    }
    
    .highlight-content {
        font-size: 0.95rem;
    }
    
    /* Cape goals mobile */
    .cape-progress-card {
        padding: 10px;
    }
    
    .rtm-label {
        font-size: 0.7rem;
    }
    
    /* =====================================================
       XP TRACKER - CLAN PAGE MOBILE (480px)
       ===================================================== */
    
    #clan-results {
        width: 100% !important;
        overflow: visible !important;
    }
    
    .clan-header-banner {
        padding: 15px 10px !important;
        gap: 15px !important;
    }
    
    .clan-name-title {
        font-size: 1.5rem !important;
        letter-spacing: 1px !important;
    }
    
    .clan-stats-pills {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100%;
    }
    
    .stat-pill-box {
        width: 100% !important;
        padding: 8px 15px !important;
        justify-content: space-between !important;
    }
    
    .pill-label {
        font-size: 0.65rem;
    }
    
    .pill-val {
        font-size: 0.95rem;
    }
    
    /* Clan podiums mobile */
    .clan-podiums-container {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        margin: 10px 0 20px !important;
    }
    
    .podium-group {
        padding: 12px;
    }
    
    .podium-header {
        font-size: 0.85rem;
        margin-bottom: 10px;
        padding-bottom: 8px;
    }
    
    .podium-grid {
        gap: 6px;
    }
    
    .podium-card {
        padding: 8px;
    }
    
    .podium-card.rank-1 {
        min-height: 110px;
    }
    
    .medal-icon {
        font-size: 1.2rem;
    }
    
    .podium-avatar {
        width: 32px;
        height: 32px;
    }
    
    .rank-1 .podium-avatar {
        width: 40px;
        height: 40px;
    }
    
    .podium-name {
        font-size: 0.75rem;
    }
    
    .podium-val {
        font-size: 0.65rem;
    }
    
    /* Clan table mobile */
    .clan-controls {
        flex-direction: column;
        gap: 10px;
    }
    
    #clan-filter-input {
        width: 100% !important;
    }
    
    .table-config-bar {
        flex-direction: column;
        gap: 6px;
        text-align: center;
        margin: 0 8px 8px 8px;
    }
    
    .clan-table-wrapper {
        margin: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .clan-table {
        min-width: 600px;
        font-size: 0.8rem;
    }
    
    .clan-table th,
    .clan-table td {
        padding: 8px 6px;
        font-size: 0.75rem;
    }
    
    /* Search controls mobile */
    .tracker-controls.dual-search {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 12px !important;
    }
    
    .search-section {
        width: 100%;
        padding: 0;
    }
    
    .search-box-large {
        flex-direction: column;
        min-width: 100% !important;
        max-width: 100% !important;
        gap: 8px;
    }
    
    .search-box-large input {
        width: 100%;
    }
    
    .search-box-large button {
        width: 100%;
        justify-content: center;
        padding: 12px;
    }
    
    .mode-toggle {
        width: 100%;
        justify-content: center;
    }
    
    .mode-btn {
        flex: 1;
        padding: 10px 8px;
        font-size: 0.8rem;
    }
    
    .search-divider {
        display: none !important;
    }
}

/* =====================================================
   VERY SMALL PHONES (360px and below)
   ===================================================== */
@media (max-width: 360px) {
    html, body {
        font-size: 13px;
    }
    
    header {
        padding: 6px 8px;
    }
    
    .scrolling-title {
        font-size: 0.75rem;
    }
    
    .nav-btn {
        padding: 6px 8px;
        font-size: 0.65rem;
    }
    
    .dashboard {
        padding: 8px;
        gap: 10px;
    }
    
    .card {
        padding: 12px;
    }
    
    .card-title {
        font-size: 0.7rem;
    }
    
    .card-main-text {
        font-size: 1.5rem;
    }
    
    .tab-btn {
        padding: 8px 5px;
        font-size: 0.65rem;
        min-width: 50px;
    }
    
    .task-item {
        padding: 8px 10px;
    }
    
    .task-item label {
        font-size: 0.8rem;
    }
    
    .chase-item {
        width: 28px;
        height: 28px;
    }
    
    .modal-content {
        width: 98%;
        margin: 5px;
        padding: 12px;
    }
    
    /* Ensure touch targets remain accessible */
    button, .btn, .nav-btn, .tab-btn {
        min-height: 40px;
    }
    
    /* XP Tracker - Very small phones */
    .skill-card-detailed {
        flex: 1 1 calc(50% - 3px) !important;
        min-width: calc(50% - 3px) !important;
        padding: 6px !important;
        min-height: 75px !important;
    }
    
    .skill-lvl {
        font-size: 0.9rem !important;
    }
    
    .skill-icon-lg {
        width: 18px !important;
        height: 18px !important;
    }
    
    #p-name {
        font-size: 1.1rem !important;
    }
    
    #p-avatar {
        width: 60px !important;
        height: 60px !important;
    }
    
    .clan-name-title {
        font-size: 1.2rem !important;
    }
    
    .podium-card.rank-1 {
        min-height: 95px;
    }
    
    .podium-name {
        font-size: 0.65rem;
    }
}

/* ===== PWA Styles ===== */
.pwa-update-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
    z-index: 10000;
    animation: slideUp 0.3s ease;
}

.pwa-update-toast button {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s;
}

.pwa-update-toast button:hover {
    background: rgba(255,255,255,0.3);
}

.pwa-update-toast button:last-child {
    padding: 6px 8px;
    background: transparent;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* PWA Install Prompt */
.pwa-install-prompt {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    max-width: 300px;
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    animation: slideIn 0.3s ease;
}

.pwa-install-prompt h4 {
    margin: 0 0 8px 0;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pwa-install-prompt p {
    margin: 0 0 12px 0;
    color: var(--text-sub);
    font-size: 0.85rem;
}

.pwa-install-buttons {
    display: flex;
    gap: 8px;
}

.pwa-install-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.pwa-install-btn.primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.pwa-install-btn.secondary {
    background: var(--bg-input);
    color: var(--text-sub);
    border: 1px solid var(--border-color);
}

.pwa-install-btn:hover {
    transform: translateY(-1px);
}

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

/* Standalone mode adjustments (when installed as PWA) */
@media (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    header {
        padding-top: env(safe-area-inset-top);
    }
}

/* iOS safe area support */
@supports (padding: max(0px)) {
    .pwa-update-toast {
        bottom: max(20px, env(safe-area-inset-bottom));
    }
    
    .pwa-install-prompt {
        bottom: max(20px, env(safe-area-inset-bottom));
        right: max(20px, env(safe-area-inset-right));
    }
}

/* =====================================================
   MOBILE SKILLS GRID FIX - FORCE 2 COLUMNS
   ===================================================== */
@media (max-width: 768px) {
    .skills-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 10px !important;
    }
    
    .skill-card-detailed {
        flex: none !important;
        min-width: 0 !important;
        max-width: none !important;
        width: 100% !important;
        min-height: 75px !important;
        padding: 8px !important;
    }
    
    .skill-card-detailed .skill-card-top {
        margin-bottom: 4px;
    }
    
    .skill-card-detailed .skill-lvl {
        font-size: 1rem;
    }
    
    .skill-card-detailed .skill-icon-lg {
        width: 20px;
        height: 20px;
    }
    
    .skill-card-detailed .skill-xp-text {
        font-size: 0.65rem !important;
    }
    
    .skill-progress-track {
        height: 4px;
        margin-bottom: 4px;
    }
}

@media (max-width: 400px) {
    .skills-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        padding: 8px !important;
    }
    
    .skill-card-detailed {
        min-height: 70px !important;
        padding: 6px !important;
    }
    
    .skill-card-detailed .skill-lvl {
        font-size: 0.9rem !important;
    }
    
    .skill-card-detailed .skill-icon-lg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* =====================================================
   SAMSUNG Z FOLD 4 / TABLET SUPPORT (717px - 920px)
   ===================================================== */
@media (min-width: 717px) and (max-width: 920px) {
    /* Header adjustments */
    header {
        flex-wrap: wrap;
        padding: 10px 15px;
    }
    
    .header-nav {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }
    
    /* Dashboard grid - 2 columns */
    .dashboard {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }
    
    /* XP Tracker layout - stack on fold (only when visible) */
    .tracker-split-layout:not([style*="display: none"]) {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .sidebar-panel {
        width: 100% !important;
        max-height: 300px !important;
        order: 2;
    }
    
    .results-section {
        width: 100% !important;
        order: 1;
    }
    
    .right-sidebar {
        width: 100% !important;
        order: 3;
    }
    
    /* Skills grid - 3 columns on fold */
    .skills-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    
    .skill-card-detailed {
        flex: none !important;
        min-width: 0 !important;
        width: 100% !important;
        min-height: 80px !important;
    }
    
    /* Clan table */
    .clan-table-wrapper {
        overflow-x: auto;
    }
    
    /* Notification panel */
    .notification-panel {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: 90vw !important;
        max-width: 400px !important;
    }
    .notification-panel.show {
        transform: translateX(-50%) translateY(0) scale(1) !important;
    }
}

/* =====================================================
   CLAN PAGE - HIDE PLAYER-ONLY ELEMENTS
   ===================================================== */
/* When clan-results is visible, ensure sidebars are hidden */
#clan-results:not([style*="display: none"]) ~ .sidebar-panel,
#clan-results:not([style*="display: none"]) ~ .right-sidebar {
    display: none !important;
}

/* Make sure tracker-split-layout is fully hidden when viewing clans */
.tracker-split-layout[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Clan results should take full width */
#clan-results {
    width: 100%;
}

/* Ensure proper mobile clan display */
@media (max-width: 768px) {
    #clan-results {
        padding: 10px;
    }
    
    .clan-header-banner-wrap {
        flex-direction: column;
        padding: 15px;
    }
    
    .clan-name-title {
        font-size: 1.3rem !important;
    }
    
    .clan-compact-header {
        flex-direction: column;
        gap: 10px;
    }
    
    .clan-header-stats {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    
    .mini-stat {
        flex: 0 0 auto;
    }
}