:root { --bg: #050505; --card: #0a0a0a; --border: #262626; }
        body { background-color: var(--bg); color: #e5e5e5; font-family: 'Inter', sans-serif; }
        
        .ambient-glow {
            position: fixed; width: 600px; height: 600px;
            background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0) 70%);
            top: -100px; left: 50%; transform: translateX(-50%); z-index: -1; pointer-events: none;
        }

        .status-card {
            background: var(--card); border: 1px solid var(--border);
            transition: all 0.2s;
        }
        .status-card:hover { border-color: #404040; transform: translateY(-2px); }

        /* Bars Styles */
        .bars { 
            display: flex; 
            gap: 2px; 
            height: 32px; 
            align-items: flex-end; 
            margin-top: 4px; /* Reduced margin since time is on top now */
        }
        
        .bar { 
            flex: 1; 
            border-radius: 2px;
            opacity: 0.5; /* Slightly increased default opacity */
            min-height: 6px;
            /* Removed hover transform/scale effects */
        }
        
        /* Optional: simple brightness change on hover if you still want subtle feedback */
        .bar:hover { opacity: 1; } 
        
        .bar.up { background: #10b981; }
        .bar.down { background: #ef4444; }
        .bar.empty { background: #1f2937; opacity: 0.15; }

        /* Spin Animation */
        .spin-active { animation: spin 1s linear infinite; transform-origin: center; }
        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }