/* ===== Cirkus Charlie — Unified Styles ===== */
:root {
    --color-surface: #121414;
    --color-primary: #ffb3ac;
    --color-primary-container: #d32f2f;
    --color-secondary: #ffdf9e;
    --color-white: #ffffff;
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-light: rgba(255, 223, 158, 0.2);
    --color-success: #22c55e;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-hover: rgba(255, 255, 255, 0.08);

    --color-primary-container-rgb: 211, 47, 47;
    --color-glow-red: 0 0 15px rgba(var(--color-primary-container-rgb), 0.4);
    --color-glow-red-hover: 0 0 25px rgba(var(--color-primary-container-rgb), 0.6);
    --color-glow-spotlight: 0 0 40px -10px rgba(var(--color-primary-container-rgb), 0.5);
    --color-glow-btn: 0 0 12px rgba(var(--color-primary-container-rgb), 0.3);
    --color-glow-btn-hover: 0 0 20px rgba(var(--color-primary-container-rgb), 0.5);
    --color-glow-primary-btn: 0 0 15px rgba(var(--color-primary-container-rgb), 0.4);
    --color-glow-primary-btn-hover: 0 0 25px rgba(var(--color-primary-container-rgb), 0.6);
    --color-glow-active: drop-shadow(0 0 8px rgba(var(--color-primary-container-rgb), 0.8));
    --color-spotlight-bg: radial-gradient(circle at 50% 30%, rgba(var(--color-primary-container-rgb), 0.15) 0%, transparent 70%);
    --color-spotlight-radial: radial-gradient(circle at center, rgba(var(--color-primary-container-rgb), 0.15) 0%, transparent 70%);
    --color-input-border: rgba(255, 255, 255, 0.2);
    --color-overlay: rgba(0, 0, 0, 0.6);
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border-light);
    border-left: 1px solid var(--color-border-light);
    transition: all 0.3s ease;
}
.glass-card:hover {
    background: var(--glass-hover);
}

.glow-red { box-shadow: var(--color-glow-red); }
.glow-red-hover:hover { box-shadow: var(--color-glow-red-hover); }
.spotlight-glow { box-shadow: var(--color-glow-spotlight); }
.btn-glow { box-shadow: var(--color-glow-btn); transition: all 0.3s ease; }
.btn-glow:hover { box-shadow: var(--color-glow-btn-hover); transform: scale(1.02); }
.primary-btn-glow { box-shadow: var(--color-glow-primary-btn); }
.primary-btn-glow:hover { box-shadow: var(--color-glow-primary-btn-hover); }

.curtain-gradient {
    background: linear-gradient(to bottom, transparent, var(--color-surface));
}
.spotlight-gradient { background: var(--color-spotlight-bg); }
.spotlight-radial { background: var(--color-spotlight-radial); }

.curtain-divider {
    height: 100px;
    background: linear-gradient(to bottom, transparent, var(--color-surface)), url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 Q 25 100 50 0 Q 75 100 100 0' fill='none' stroke='%23d32f2f' stroke-width='2' opacity='0.3'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

.performance-hover:hover {
    border-left: 4px solid var(--color-primary-container);
    background: var(--glass-hover);
    transition: all 0.3s ease;
}
.active-glow { filter: var(--color-glow-active); }

.input-premium {
    background: var(--glass-bg);
    border: none;
    border-bottom: 2px solid var(--color-input-border);
    transition: border-color 0.3s ease;
}
.input-premium:focus {
    outline: none;
    border-bottom-color: var(--color-secondary);
    box-shadow: none;
}

.indicator-online {
    background-color: var(--color-success);
}
.bg-overlay {
    background-color: var(--color-overlay);
}

.scroll-reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.8s ease-out;
}
.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}