:root {
    --bg-dark: #05050a;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --neon-green: #00ff88;
    --neon-orange: #ff5500;
    --neon-blue: #00ddff;
    --neon-cyan: #00ffee;
    --neon-purple: #b700ff;
    --neon-yellow: #ffea00;
    --text-main: #f0f0f0;
    --text-muted: #888899;
}

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

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-main);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Background Particles */
#particles-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}

/* Glassmorphism Utilities */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* Status Bar */
.status-bar {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    margin: 16px;
    gap: 24px;
    border-radius: 16px;
    font-size: 0.9rem;
    z-index: 10;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.flex-grow {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--text-muted);
    transition: background-color 0.3s;
}
.indicator.active {
    background-color: var(--neon-green);
    box-shadow: 0 0 8px var(--neon-green);
}
.indicator.error {
    background-color: var(--neon-orange);
    box-shadow: 0 0 8px var(--neon-orange);
}
.indicator.loading {
    background-color: var(--neon-cyan);
    box-shadow: 0 0 8px var(--neon-cyan);
    animation: pulse 1s infinite alternate;
}

.controls {
    display: flex;
    gap: 12px;
}

.glass-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 6px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    transition: all 0.2s;
}
.glass-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}
.glass-btn.active {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Main Layout */
.main-container {
    display: flex;
    flex: 1;
    padding: 0 16px 16px 16px;
    gap: 24px;
    overflow: hidden;
}

/* Sidebars */
.sidebar {
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

.left-sidebar {
    padding: 20px;
    overflow-y: auto;
}

.sidebar-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 12px;
    margin-bottom: 8px;
}

.history-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.history-list li {
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 8px 12px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    animation: slideInLeft 0.3s ease-out;
}
.history-list li span.conf {
    color: var(--neon-cyan);
}

/* Camera Container */
.camera-container {
    flex: 1;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--glass-border);
    box-shadow: 0 0 40px rgba(0, 255, 238, 0.05);
}

#webcam, #detection-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1); /* Mirror camera */
}

#detection-canvas {
    z-index: 2;
    transform: scaleX(1); /* Need to flip coords instead, so don't scale canvas itself if drawing mirrored coords. Wait, if video is mirrored, it's easier to mirror canvas CSS too and draw normally, but text will be mirrored. So we shouldn't mirror canvas. We will handle mirroring in draw. */
}

/* Fix mirror */
#webcam {
    transform: scaleX(-1);
}
#detection-canvas {
    z-index: 2;
}

/* Loading Overlay */
.loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    transition: opacity 0.5s;
    background: rgba(5, 5, 10, 0.8);
}
.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--neon-cyan);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

#loading-text {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 1px;
}

/* Action Cards */
.action-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 1;
    transform: translateX(0);
    position: relative; /* ensure it stays in flow when visible */
}

.action-card.hidden {
    opacity: 0;
    transform: translateX(50px);
    pointer-events: none;
    position: absolute;
}

.card-icon {
    font-size: 2rem;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.card-content h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 4px;
}
.card-content p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Pulse Animations for Cards */
.pulse-green { box-shadow: 0 0 15px rgba(0, 255, 136, 0.5); border: 1px solid var(--neon-green); text-shadow: 0 0 5px var(--neon-green); }
.pulse-orange { box-shadow: 0 0 15px rgba(255, 85, 0, 0.5); border: 1px solid var(--neon-orange); text-shadow: 0 0 5px var(--neon-orange); }
.pulse-blue { box-shadow: 0 0 15px rgba(0, 221, 255, 0.5); border: 1px solid var(--neon-blue); text-shadow: 0 0 5px var(--neon-blue); }
.pulse-cyan { box-shadow: 0 0 15px rgba(0, 255, 238, 0.5); border: 1px solid var(--neon-cyan); text-shadow: 0 0 5px var(--neon-cyan); }
.pulse-purple { box-shadow: 0 0 15px rgba(183, 0, 255, 0.5); border: 1px solid var(--neon-purple); text-shadow: 0 0 5px var(--neon-purple); }
.pulse-yellow { box-shadow: 0 0 15px rgba(255, 234, 0, 0.5); border: 1px solid var(--neon-yellow); text-shadow: 0 0 5px var(--neon-yellow); }

/* Animations */
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes pulse {
    to { transform: scale(1.1); opacity: 0.7; }
}
@keyframes slideInLeft {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@media (max-width: 900px) {
    .main-container {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
        height: 200px;
    }
    .action-card {
        flex: 1;
    }
    #action-panels {
        flex-direction: row;
        overflow-x: auto;
    }
}