/* style.css — minimal dark theme for the lab. */

* { box-sizing: border-box; font-family: system-ui, sans-serif; }
body { margin: 0; background: #111; color: #eee; }

/* Consent overlay */
#consent-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .88);
    display: flex; align-items: center; justify-content: center; z-index: 10;
}
.card {
    background: #1e1e1e; padding: 2rem; border-radius: 12px;
    max-width: 560px; line-height: 1.5; border: 1px solid #333;
}
.card h1 { margin-top: 0; }
.card ul { padding-left: 1.2rem; }
.card .warn { color: #ffb86b; }

/* Buttons */
button {
    padding: .7rem 1.2rem; margin: .3rem .5rem .3rem 0;
    border-radius: 8px; border: none; cursor: pointer;
    background: #4f8cff; color: #fff; font-weight: 600;
    font-size: .95rem;
}
button:disabled { opacity: .5; cursor: wait; }
button.danger { background: #d94b4b; }
button.danger:hover { background: #e85c5c; }
#btn-decline { background: #444; }

/* Main panel */
#demo { padding: 2rem; text-align: center; }
#status { margin: 1rem 0; font-family: monospace; color: #9fd; }

/* Result panel */
#result {
    margin-top: 2rem; padding: 2rem; border: 1px solid #333;
    border-radius: 12px; background: #181818; display: inline-block;
    text-align: left; min-width: 320px;
}
#result h2 { margin-top: 0; }
#preview {
    max-width: 320px; border-radius: 12px; margin: 1rem 0;
    display: block; background: #000;
}
.victim-id { font-size: .9rem; color: #aaa; }
.victim-id code { color: #9fd; }

/* Actions row */
.actions {
    display: flex; gap: .5rem; align-items: center;
    margin-top: 1rem; flex-wrap: wrap;
}
.link { color: #4f8cff; text-decoration: none; }
.link:hover { text-decoration: underline; }

#delete-status {
    margin-top: 1rem; padding: .75rem 1rem;
    border-radius: 8px; background: #222; color: #9fd;
    font-family: monospace;
}

.hidden { display: none !important; }