body { font-family: system-ui, sans-serif; margin: 0; background: #0b0c10; color: #e6e6e6; }
.wrap { max-width: none; width: 100%; min-height: 100vh; margin: 0 auto; padding: 20px 28px 40px; box-sizing: border-box; }
h1 { font-size: 22px; margin: 0 0 12px 0; }
h2 { font-size: 18px; margin: 0 0 10px 0; }
.card { background: #151820; border: 1px solid #242938; border-radius: 12px; padding: 14px; margin: 12px 0; }
label { display: block; margin: 8px 0 6px; font-weight: 600; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.col { flex: 1; min-width: 220px; }
input, select, textarea { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid #2a3042; background: #0f1118; color: #e6e6e6; }
button { padding: 10px 14px; border-radius: 10px; border: 1px solid #2a3042; background: #1f2433; color: #e6e6e6; cursor: pointer; }
button:hover { background: #2a3042; }
pre { background: #0f1118; border: 1px solid #2a3042; padding: 10px; border-radius: 10px; white-space: pre-wrap; }
.pill { border: 1px solid #2a3042; padding: 8px 10px; border-radius: 999px; }
small { color: #a9b0c2; }
audio { width: 100%; margin-top: 10px; }
.error { color: #ff8a8a; margin: 10px 0; }
.is-hidden { display: none; }