:root {
    --bg: #0e0f13;
    --panel: #171922;
    --border: #2a2d3a;
    --text: #e8e9ee;
    --muted: #8b8fa3;
    --accent: #6ee7b7;
    --accent-dim: #1f4d3d;
    --fail: #f87171;
}

* { box-sizing: border-box; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 40px 16px;
}

.wrap { max-width: 680px; margin: 0 auto; }

header { text-align: center; margin-bottom: 32px; }
header h1 { letter-spacing: 4px; font-size: 22px; margin-bottom: 4px; }
.tagline { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.badge {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--accent);
    background: var(--accent-dim);
    padding: 4px 10px;
    border-radius: 12px;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
}
.panel.hidden { display: none; }

label { display: block; margin-bottom: 8px; font-size: 14px; color: var(--muted); }

textarea, input[type=text] {
    width: 100%;
    background: #0b0c10;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    padding: 12px;
    font-size: 15px;
    resize: vertical;
}

button {
    margin-top: 14px;
    background: var(--accent);
    color: #08130f;
    border: none;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
}
button:hover { opacity: 0.9; }
button.secondary {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    margin-right: 8px;
}

.question-block { margin-bottom: 16px; }
.question-block p { margin: 0 0 6px; }

.loading { text-align: center; color: var(--muted); }

#result-meta { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
#result-output {
    white-space: pre-wrap;
    word-break: break-word;
    background: #0b0c10;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    font-size: 14px;
    line-height: 1.5;
}

#audit-trail { padding-left: 20px; font-size: 13px; }
#audit-trail li { margin-bottom: 10px; color: var(--muted); }
#audit-trail li.passed { color: var(--accent); }
#audit-trail li.failed { color: var(--fail); }