@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=JetBrains+Mono:wght@300;500;700&display=swap');

:root {
    --bg: #050508;
    --panel: #0d0d12;
    --accent: #00ff41;
    --yellow: #f4ea00;
    --red: #ff003c;
    --border: #1f1f26;
    --text: #e0e0e0;
}

* { box-sizing: border-box; }

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    margin: 0; padding: 0;
}

.futuristic-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    position: relative;
}

.futuristic-card::before {
    content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
    background: var(--accent);
}

h1, h2, .orbitron { font-family: 'Orbitron', sans-serif; letter-spacing: 2px; }

input {
    background: #000; border: 1px solid var(--border); color: var(--accent);
    padding: 15px; border-radius: 6px; width: 100%; margin-bottom: 15px;
    font-size: 1rem; font-family: 'JetBrains Mono';
}

button {
    background: #16161d; border: 1px solid var(--border); color: #fff;
    padding: 15px 25px; cursor: pointer; font-family: 'Orbitron';
    text-transform: uppercase; transition: 0.3s; border-radius: 6px;
}

button:hover { background: var(--accent); color: #000; box-shadow: 0 0 20px var(--accent); }
button.danger { border-color: var(--red); color: var(--red); }
button.danger:hover { background: var(--red); color: #fff; box-shadow: 0 0 20px var(--red); }

.flash { animation: blinker 0.8s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }