:root { 
    --primary-color: #ff6699; 
    --bg-color: #f4f6f9; 
    --text-color: #333;
    --text-muted: #666;
    --card-bg: rgba(255, 255, 255, 0.85); 
    --border-color: #eee;
    --th-bg: rgba(252, 252, 252, 0.6); 
    --highlight-bg: #fff3cd;
    --hover-bg: rgba(255, 240, 245, 0.8);
    --blur-core-bg: rgba(255, 255, 255, 0.3);
    --blur-core-shadow: rgba(0, 0, 0, 0.05);
}

body.dark-mode {
    --primary-color: #ff88b3;
    --bg-color: #121212;
    --text-color: #f5f5f5; 
    --text-muted: #bbbbbb; 
    --card-bg: rgba(30, 30, 30, 0.85); 
    --border-color: #444;
    --th-bg: rgba(45, 45, 45, 0.6); 
    --highlight-bg: #443c22;
    --hover-bg: rgba(50, 40, 45, 0.9); 
    --blur-core-bg: rgba(0, 0, 0, 0.4);
    --blur-core-shadow: rgba(0, 0, 0, 0);
}

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    margin: 0; padding: 20px; 
    transition: background-color 0.3s, color 0.3s;
    overflow-x: hidden;
}

.container { 
    max-width: 1200px; 
    margin: auto; 
    position: relative;
    z-index: 5;
}

.bg-image {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: -10; 
    background: url('./background_mumu.webp') no-repeat center center;
    background-size: cover;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,1) 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,1) 100%);
}

.top-bar { position: absolute; top: 20px; right: 20px; display: flex; gap: 10px; z-index: 10; }
.footer { text-align: center; margin-top: 40px; font-size: 0.9em; color: var(--text-muted); line-height: 1.8; }