:root { color-scheme: dark; font-family: system-ui, sans-serif; }
body { margin: 0; background: #101820; color: #f5f7fa; }
main { max-width: 760px; margin: auto; padding: 16px; }
h1 { font-size: 1.8rem; }
section { margin: 18px 0; padding: 18px; border: 1px solid #52606d; border-radius: 12px; background: #1f2933; }
h2 { margin-top: 0; font-size: 1.25rem; }
.warning { padding: 12px; border-radius: 8px; background: #7c2d12; font-weight: 700; }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; }
button { min-height: 58px; padding: 12px 18px; border: 0; border-radius: 10px; background: #0b84f3; color: white; font-size: 1.05rem; font-weight: 700; }
button.secondary { background: #52606d; }
button:disabled { opacity: .5; }
dl { display: grid; grid-template-columns: minmax(9rem, 1fr) 2fr; gap: 9px 12px; }
dt { color: #bcccdc; }
dd { margin: 0; overflow-wrap: anywhere; }
.ok { color: #67e8a5; }
.error { color: #ff8a8a; }
.note { color: #bcccdc; }
#event-log { max-height: 260px; overflow-y: auto; padding-left: 28px; }
@media (max-width: 520px) { dl { grid-template-columns: 1fr; } dd { margin-bottom: 8px; } button { width: 100%; } }