:root {
    
    --bg-base: #060608;      
    --bg-section: #101014;   
    --bg-panel: #16161c;     
    --bg-hover: #22222a;     
    --bg-active: #32323d;    

    --case-color: var(--bg-section); 

    --border: #1f1f24;
    --border-hover: #32323d;
    --glass-border: transparent;

    --text-main: #fafafa;
    
    --text-dim: #a1a1aa;
    
    --text-muted: #71717a;
    

    
    --accent-purple: #ba1200;
    --accent-blue: #007aff;
    --accent-gradient: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-blue) 100%);
    --accent: #7fa3bb;
    --accent-hover: #bccbd6;
    --accent-glow: rgba(127, 163, 187, 0.25);
    --accent-bright: #bccbd6;
    --success: #10b981;
    --success-glow: rgba(16, 185, 129, 0.4);
    --danger: #f43f5e;
    --danger-glow: rgba(244, 63, 94, 0.4);
    --bg-card: rgba(32, 32, 38, 0.5);

    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-deep: 0 20px 40px rgba(0, 0, 0, 0.6);
    --shadow-premium: 0 15px 35px rgba(0, 0, 0, 0.65), 0 5px 15px rgba(0, 0, 0, 0.45);
    --rim-light: inset 0 0 0 transparent;
    --hardware-shadow: 0 40px 100px -20px rgba(0, 0, 0, 1), inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.03);
}


::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background-color: var(--bg-base);
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, sans-serif;
    background-color: var(--bg-base);
    color: var(--text-main);
    user-select: none;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    -webkit-font-smoothing: antialiased;
    position: relative;
}


body::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -30%;
    width: 160%;
    height: 160%;
    background: radial-gradient(circle at 80% 20%, rgba(127, 163, 187, 0.06) 0%, transparent 50%),
                radial-gradient(circle at 20% 80%, rgba(127, 163, 187, 0.03) 0%, transparent 50%);
    z-index: -1;
    pointer-events: none;
}

.background-blobs {
    display: none;
}