:root { color-scheme: light; --ink: #1e293b; --muted: #475569; --accent: #2563eb; --surface: #fff; --field: #f1f5f9; --line: #e2e8f0; --control-border: #7a8ba2; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; display: flex; padding: 16px; background: linear-gradient(to bottom right, #1e293b, #0f172a); color: var(--ink); font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.application { width: min(100%, 520px); margin: auto; padding: 32px; background: rgba(255, 255, 255, .95); backdrop-filter: blur(10px); border-radius: 40px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25); }
header { margin-bottom: 32px; text-align: center; }
.brand { display: block; width: 48px; height: 48px; object-fit: contain; margin: 0 auto 24px; }
h1 { font-size: 24px; line-height: 32px; letter-spacing: -.025em; margin: 0; font-weight: 700; }
h2 { font-size: 20px; line-height: 28px; margin: 0 0 20px; }
.method-switch { border: 0; padding: 4px; margin: 0 0 24px; display: flex; gap: 4px; background: var(--line); border-radius: 16px; }
.method-switch label { flex: 1; position: relative; text-align: center; cursor: pointer; }
.method-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.method-switch span { display: block; min-height: 44px; padding: 10px 8px; border: 2px solid transparent; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--muted); }
.method-switch input:checked + span { color: var(--accent); background: var(--surface); border-color: var(--accent); }
.method-switch input:disabled + span { opacity: .6; cursor: wait; }
.method-switch input:focus-visible + span, :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.field { margin-bottom: 16px; }
.field > label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
input, textarea { width: 100%; min-width: 0; padding: 16px 20px; border: 1px solid var(--control-border); border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; caret-color: var(--accent); }
input:focus, textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
textarea[readonly] { background: var(--field); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; overflow-wrap: anywhere; resize: none; }
button { min-height: 56px; border: 0; border-radius: 16px; padding: 16px 20px; font: inherit; font-weight: 700; cursor: pointer; }
.primary { width: 100%; background: var(--accent); color: #fff; box-shadow: 0 10px 15px -3px rgb(37 99 235 / .18); }
.primary:hover { background: #1d4ed8; }
.secondary { background: var(--surface); border: 1px solid var(--control-border); color: var(--muted); white-space: nowrap; font-size: 14px; padding: 12px 16px; }
.secondary:hover { background: var(--line); }
.copy { flex: 0 0 88px; }
.copy[data-copied] { color: #15803d; background: #dcfce7; }
button:disabled { opacity: .6; cursor: wait; }
.code-input, .credential-row { display: flex; gap: 8px; }
.credential-row { align-items: flex-start; }
.credential-row textarea { padding: 16px 12px; height: 56px; min-height: 56px; line-height: 22px; }
#status, .copy-feedback { margin: 16px 0 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
#status.error, .copy-feedback { color: #b91c1c; }
.copy-feedback { margin-top: 8px; }
#result { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
#result .field:last-child { margin-bottom: 0; }
::selection { background: #bfdbfe; color: var(--ink); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 380px) { .application { padding: 28px 24px; } .code-input input { padding-inline: 12px; } }
@media (max-width: 560px) { .credential-row { flex-wrap: wrap; } .credential-row textarea { flex-basis: 100%; height: auto; } .copy { margin-left: auto; min-height: 44px; padding-block: 10px; } }
@media (prefers-reduced-motion: no-preference) { button { transition: background-color .15s ease-out, transform .15s ease-out; } .primary:active:not(:disabled) { transform: scale(.98); } }