:root {
        --bg-color: #f8fafc; 
        --text-color: #0f172a;
        --panel-bg: rgba(255, 255, 255, 0.65); --panel-border: rgba(255, 255, 255, 0.5);
        --primary: #4facfe; 
        --primary-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        --shadow: 0 10px 40px -10px rgba(0,0,0,0.1); 
        --radius: 16px; 
        --font: system-ui, -apple-system, sans-serif;
        --hex-bg: url("data:image/svg+xml,%3Csvg width='60' height='104' viewBox='0 0 60 104' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 104L0 86.68V52.04L30 34.72L60 52.04V86.68L30 104ZM15 78.02L0 69.36V52.04L15 43.38L30 52.04V69.36L15 78.02ZM45 78.02L30 69.36V52.04L45 43.38L60 52.04V69.36L45 78.02ZM30 52.04L15 43.38V26.06L30 17.4L45 26.06V43.38L30 52.04ZM15 26.02L0 17.36V0.04L15 -8.62L30 0.04V17.36L15 26.02ZM45 26.02L30 17.36V0.04L45 -8.62L60 0.04V17.36L45 26.02Z' fill='%23000000' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
}
[data-theme="dark"] {
    --bg-color: #121418; 
    --text-color: #f1f5f9;
    --panel-bg: rgba(30, 33, 40, 0.5); --panel-border: rgba(255, 255, 255, 0.08);
    --shadow: 0 10px 40px -10px rgba(0,0,0,0.6);
    --hex-bg: url("data:image/svg+xml,%3Csvg width='60' height='104' viewBox='0 0 60 104' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 104L0 86.68V52.04L30 34.72L60 52.04V86.68L30 104ZM15 78.02L0 69.36V52.04L15 43.38L30 52.04V69.36L15 78.02ZM45 78.02L30 69.36V52.04L45 43.38L60 52.04V69.36L45 78.02ZM30 52.04L15 43.38V26.06L30 17.4L45 26.06V43.38L30 52.04ZM15 26.02L0 17.36V0.04L15 -8.62L30 0.04V17.36L15 26.02ZM45 26.02L30 17.36V0.04L45 -8.62L60 0.04V17.36L45 26.02Z' fill='%23ffffff' fill-opacity='0.02' fill-rule='evenodd'/%3E%3C/svg%3E");
    }
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: var(--font); 
    transition: background 0.4s ease, color 0.4s ease; 
    }
body { 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    min-height: 100vh; 
    background-image: 
    var(--hex-bg); display: 
    flex; justify-content: center; 
    align-items: center; 
    }