/* 
   AGENT-FIRST BROWSER: CORE DESIGN SYSTEM v2.5
   [Refined Digital Theme: Cyan & Deep Blue]
*/

:root {
    --neon-cyan: #00f2ff;
    --neon-blue: #0066ff;
    --deep-void: #010204;
    --surface-1: #080a0f;
    --surface-2: #10141d;
    --surface-3: #181d2b;
    
    --grad-primary: linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-blue) 100%);
    --grad-glow: radial-gradient(circle at center, rgba(0, 242, 255, 0.1) 0%, transparent 70%);
}

body {
    background: var(--deep-void);
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.grid-sci-fi {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(0, 242, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 242, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: -1;
    mask-image: radial-gradient(circle at center, black, transparent 90%);
}

.ui-panel {
    background: var(--surface-1);
    border: 1px solid rgba(0, 242, 255, 0.05);
    border-radius: 4px;
    transition: border-color 0.3s ease;
}

.ui-panel:hover {
    border-color: rgba(0, 242, 255, 0.2);
}

.text-cyan { color: var(--neon-cyan); }
.text-blue { color: var(--neon-blue); }

@keyframes scanner-line {
    0% { transform: translateY(-100%); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(500%); opacity: 0; }
}

.animate-scan::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 2px;
    background: var(--neon-cyan);
    box-shadow: 0 0 20px var(--neon-cyan);
    animation: scanner-line 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}