/* ========================================================== FYMZ / Bureau Node Style Sheet Designation: CLASS-P / Bureaucore Spec Author: Onion Madder / Mad Sundar LLC ========================================================== */

:root { --bg-dark: #000007; --bg-deep: #01010c;

--text-main: #00f0ff; --text-subtle: #b8b8b8;

--neon-pink: #ff00a0; --neon-teal: #00ffe0; --neon-purple: #bc59ff; --neon-yellow: #f4ff80; --alert: #ff44dd; --glow-cyan: #00ffff; --glow-magenta: #ff00ff;

--glass: rgba(255, 255, 255, 0.04); --glass-2: rgba(200, 50, 255, 0.08); --edge: rgba(255, 255, 255, 0.08); --radius: 6px;

--shadow-deep: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset; }

/* ========== BASE ======================= */ html, body { height: 100%; margin: 0; font-family: "Courier New", monospace; font-size: 15px; background: radial-gradient(1200px 600px at 12% -8%, rgba(255, 0, 200, 0.1), transparent), radial-gradient(1200px 600px at 110% 115%, rgba(0, 255, 255, 0.08), transparent), var(--bg-deep); color: var(--text-main); line-height: 1.6; }

body::after { content: "\26a1 Bureau Property: FYMZ Node \26a1"; position: fixed; bottom: 10px; left: 12px; font-size: 12px; opacity: 0.2; pointer-events: none; color: var(--alert); }

/* ========== HEADER ========== */ .glitch { position: relative; display: inline-block; font-weight: bold; letter-spacing: 0.5px; text-shadow: 0 0 12px var(--neon-teal), 0 0 20px var(--neon-purple); }

.glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; color: var(--neon-pink); z-index: -1; }

.glitch::before { animation: glitchTop 2s infinite linear alternate-reverse; transform: translateX(-1px); }

.glitch::after { animation: glitchBottom 1.6s infinite linear alternate-reverse; transform: translateX(1px); color: var(--glow-cyan); }

@keyframes glitchTop { 0% { clip-path: inset(0 0 85% 0); } 50% { clip-path: inset(20% 0 40% 0); } 100% { clip-path: inset(0 0 70% 0); } }

@keyframes glitchBottom { 0% { clip-path: inset(70% 0 0 0); } 50% { clip-path: inset(30% 0 10% 0); } 100% { clip-path: inset(80% 0 0 0); } }

/* ========== UTILITY & LAYOUT ========== */ .container { max-width: 1080px; margin: auto; padding: 2rem 1rem; }

.grid { display: grid; gap: 1.2rem; } .grid.cols-2 { grid-template-columns: 1fr 1fr; } @media (max-width: 900px) { .grid.cols-2 { grid-template-columns: 1fr; } }

/* ========== ELEMENT STYLES ========== */ .card, .panel { background: var(--glass); border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: var(--shadow-deep); padding: 1.25rem; }

.btn { display: inline-block; font-weight: bold; text-transform: uppercase; padding: 10px 18px; border: 1px solid var(--neon-teal); background: transparent; color: var(--neon-teal); border-radius: 4px; transition: all 0.15s ease-in-out; } .btn:hover { background: var(--neon-teal); color: #000; box-shadow: 0 0 8px var(--neon-teal); }

.btn.pink { border-color: var(--neon-pink); color: var(--neon-pink); } .btn.pink:hover { background: var(--neon-pink); color: #000; box-shadow: 0 0 10px var(--neon-pink); }

.btn.ghost { border-color: var(--text-subtle); color: var(--text-subtle); } .btn.ghost:hover { background: var(--text-subtle); color: #000; }

.badge { display: inline-block; font-size: 0.8rem; border: 1px solid var(--neon-purple); padding: 6px 12px; border-radius: 1000px; background: var(--glass); color: var(--neon-purple); }

.seal { font-size: 1.25rem; color: var(--neon-yellow); font-family: monospace; text-shadow: 0 0 4px var(--neon-yellow), 0 0 10px var(--neon-pink); }

/* ========== SCANLINES / CRT ========== */ .crt::before { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: 0.08; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.1) 0 1px, transparent 2px 3px); }

.noise::after { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 2px); opacity: 0.04; mix-blend-mode: soft-light; pointer-events: none; animation: noiseFlicker 6s linear infinite; }

@keyframes noiseFlicker { 0% { transform: translate(0, 0); } 50% { transform: translate(-1px, 1px); } 100% { transform: translate(0, 0); } }

/* ========== DIRECTIVES ========== */ .directive { border-left: 4px solid var(--neon-pink); background: var(--glass); padding: 1rem; font-family: "Courier New", monospace; font-size: 0.95rem; line-height: 1.6; }

/* ========== FORMS ========== */ input, select, textarea { background: var(--glass); color: var(--text-main); border: 1px solid var(--edge); border-radius: 4px; padding: 10px 14px; font-family: inherit; width: 100%; box-sizing: border-box; }

input:focus, select:focus, textarea:focus { border-color: var(--neon-purple); box-shadow: 0 0 0 2px rgba(169, 94, 255, 0.3); outline: none; }

/* ========== HEADINGS ========== */ h1, h2, h3 { font-weight: bold; color: var(--text-main); margin-bottom: 0.5rem; }

h1 { font-size: 2.2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.2rem; }

/* ========== ANIMATION OPT-OUT ========= */ @media (prefers-reduced-motion: reduce) {

{ animation: none !important; transition: none !important; } }