:root { --f1-red: #e10600; --dark-bg: #101010; --card-bg: #1f1f1f; --text-white: #fff; }

body { margin:0; font-family: sans-serif; background: var(--dark-bg); color: var(--text-white); }

/* Buttons & Hero */
.hero { background: #222; padding: 60px 20px; text-align: center; }
.hero h1 { font-style: italic; font-weight: 900; font-size: 3rem; margin: 0; }
button { background: var(--f1-red); color: white; border: none; padding: 15px 30px; font-weight: bold; cursor: pointer; border-radius: 4px; }
.pulse-button { animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(225,6,0,0.7); } 70% { box-shadow: 0 0 0 10px rgba(0,0,0,0); } }

/* Sections */
.details, .form-section { max-width: 800px; margin: 20px auto; background: var(--card-bg); padding: 30px; border-radius: 8px; }
.details img { width: 100%; border-radius: 8px; max-width: 300px; display: block; margin: 0 auto; }
.scarcity-timer { color: #ff4d4d; border: 1px solid red; padding: 10px; margin-top: 15px; text-align: center; font-weight: bold; }
.promo-box { margin-top: 20px; padding: 10px; border: 1px dashed #f1c40f; text-align: center; cursor: pointer; color: #f1c40f; }

/* Form */
.input-group { margin-bottom: 15px; }
input { width: 100%; padding: 12px; background: #333; border: 1px solid #444; color: white; border-radius: 4px; box-sizing: border-box; }
.form-section { border-top: 4px solid var(--f1-red); text-align: center; }

/* Dashboard Modal */
.modal { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.9); display:flex; justify-content:center; align-items:center; backdrop-filter: blur(5px); }
.modal-content { background: #fff; color: #333; padding: 25px; border-radius: 10px; max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; border-top: 10px solid var(--f1-red); }
.modal-content h2 { color: var(--f1-red); margin-top:0; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0.5; } }

.hacker-dashboard { background: #f1f1f1; padding: 15px; border-radius: 6px; font-family: monospace; text-align: left; }
.data-row { display: flex; justify-content: space-between; border-bottom: 1px dotted #ccc; padding: 5px 0; }
.label { font-weight: bold; } .value { color: #0056b3; font-weight: bold; }

/* Visualizers */
.audio-track-container { flex-grow: 1; height: 10px; background: #ccc; margin-left: 10px; border-radius: 5px; overflow: hidden; }
#audioBar { width: 0%; height: 100%; background: #00ff00; transition: width 0.1s; }
.map-container { margin-top: 15px; border: 2px solid #333; overflow: hidden; }
.map-overlay { position: absolute; top: 5px; left: 5px; color: #00ff00; font-size: 0.7rem; margin: 0; font-weight: bold; }
#mouseCanvas { width: 100%; height: 100%; }