:root {
    --sky-blue: #00BFFF;
    --brand-red: #D22B2B;
    --dark-orange: #FF8C00;
    --dark-bg: #1a1a2e;
    --glass: rgba(255, 255, 255, 0.95);
}

body {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
}

/* Glassmorphism Card */
.glass-card {
    background: var(--glass);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    overflow: hidden;
}

/* Brand Text */
.brand-text {
    background: -webkit-linear-gradient(45deg, var(--sky-blue), var(--dark-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

/* Custom Buttons */
.btn-pneuma {
    background: var(--dark-orange);
    color: white;
    border-radius: 50px;
    padding: 12px 30px;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
}

.btn-pneuma:hover {
    background: var(--brand-red);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(210, 43, 43, 0.3);
}

/* Scanner Area */
.scanner-container {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 5px solid white;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 600px; /* Mobile Responsive limit */
    margin: 0 auto;
    background: #000;
}

video {
    width: 100%;
    height: auto;
    display: block;
    transform: scaleX(-1); /* Mirror effect */
}

/* Scanner Animation */
.scan-line {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 4px;
    background: var(--brand-red);
    box-shadow: 0 0 15px var(--brand-red);
    z-index: 10;
    animation: scan 2s infinite ease-in-out;
}

@keyframes scan {
    0% { top: 0; opacity: 0; }
    50% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* Navbar */
.navbar-brand { font-weight: bold; font-size: 1.5rem; }