:root { color-scheme: dark; font-family: system-ui, -apple-system, sans-serif; background: #111827; color: #e5e7eb; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #111827; }
.card { width: min(680px, calc(100% - 32px)); box-sizing: border-box; padding: 32px; border: 1px solid #374151; border-radius: 14px; background: #1f2937; box-shadow: 0 20px 60px #0005; }
h1 { margin-top: 0; font-size: 1.6rem; }
a { color: #93c5fd; }
.button, button { display: inline-block; border: 0; border-radius: 8px; padding: 10px 14px; background: #2563eb; color: white; font: inherit; cursor: pointer; text-decoration: none; }
button:hover, .button:hover { background: #1d4ed8; }
.danger { background: #b91c1c; }
.danger:hover { background: #991b1b; }
.muted { color: #9ca3af; font-size: .92rem; }
.warning { color: #fbbf24; }
label { display: block; margin: 24px 0 8px; color: #d1d5db; }
.keyrow { display: flex; gap: 8px; }
input { flex: 1; min-width: 0; padding: 10px; border: 1px solid #4b5563; border-radius: 8px; background: #111827; color: #f9fafb; font: .9rem ui-monospace, monospace; }
.rotate-form { margin-top: 28px; }
code { color: #bfdbfe; }
@media (max-width: 560px) { .card { padding: 22px; } .keyrow { display: block; } .keyrow button { margin-top: 8px; width: 100%; } }