:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; background: #0b1020; color: #eef2ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top, #18213f, #0b1020 55%); }
.card { width: min(100%, 620px); padding: clamp(24px, 6vw, 48px); background: rgba(18, 25, 48, .96); border: 1px solid #2d385d; border-radius: 20px; box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.brand { color: #8fa7ff; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .82rem; }
.topline { display: flex; align-items: center; justify-content: space-between; }
h1 { margin: 10px 0 8px; font-size: clamp(1.7rem, 5vw, 2.4rem); }
.muted { color: #aeb8d4; line-height: 1.6; margin: 0 0 28px; }
form { display: grid; gap: 18px; }
form.inline { display: inline; }
label { display: grid; gap: 8px; color: #cbd3ea; font-weight: 650; }
input, textarea, select, button { font: inherit; }
input, textarea, select { width: 100%; border: 1px solid #3a466d; border-radius: 10px; color: #fff; background: #0d142a; padding: 12px 14px; outline: none; }
textarea { resize: vertical; min-height: 120px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
input:focus, textarea:focus, select:focus { border-color: #829cff; box-shadow: 0 0 0 3px rgba(130,156,255,.15); }
button { border: 0; border-radius: 10px; background: #6987ff; color: #071027; font-weight: 800; padding: 13px 18px; cursor: pointer; }
button:hover { filter: brightness(1.1); }
.danger { background: #ffb454; }
.link-button { padding: 5px; color: #aeb8d4; background: transparent; font-weight: 600; }
.alert { padding: 15px; border-radius: 10px; margin: 18px 0; line-height: 1.45; }
.alert.error { background: #3b1d2a; border: 1px solid #7c3048; color: #ffc5d5; }
.alert.success { background: #152f2c; border: 1px solid #28685e; color: #c0fff3; }
.copy-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 10px 0 5px; }
.copy-row button { padding-inline: 14px; }
small { color: #9cb9b3; }
.seal { width: 82px; height: 82px; display: grid; place-items: center; margin: 0 auto 24px; border-radius: 50%; background: #513719; color: #ffbd67; border: 2px solid #a56d27; font-size: 2rem; box-shadow: 0 0 0 8px rgba(165,109,39,.12); }
.seal.open { background: #173d36; color: #79efd8; border-color: #327c6e; }
.seal.unavailable { background: #3a2029; color: #ff9fb9; border-color: #774052; }
@media (max-width: 520px) { .copy-row { grid-template-columns: 1fr; } .card { padding: 24px; } }