:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; background: #0b1220; color: #f7f9fc; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #1c3151 0, #0b1220 58%); }
.shell { width: min(100% - 32px, 520px); margin: 0 auto; padding: 28px 0 40px; }
.brand { align-items: center; color: #9bb8df; display: inline-flex; font-size: .82rem; gap: .6rem; letter-spacing: .12em; margin: 8px 4px 24px; text-transform: uppercase; }
.brand-mark { border-radius: .48rem; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); flex: 0 0 auto; height: 1.75rem; width: 1.75rem; }
.card { background: rgba(20, 33, 54, .94); border: 1px solid #304865; border-radius: 22px; box-shadow: 0 18px 50px rgba(0,0,0,.28); padding: 24px; }
.state { min-height: 180px; display: grid; align-content: center; gap: 12px; }
.hidden { display: none; }
h1 { margin: 0 0 24px; font-size: clamp(1.65rem, 6vw, 2.2rem); line-height: 1.1; }
.eyebrow { color: #87d8ae; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.details { margin: 0; display: grid; gap: 0; }
.details div { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid #304865; }
dt { color: #9bb8df; } dd { margin: 0; text-align: right; font-weight: 650; overflow-wrap: anywhere; }
.code { color: #f3ce72; letter-spacing: .16em; }
.notice { color: #c2d0e2; line-height: 1.5; margin: 22px 0; }
.buttons { display: grid; gap: 10px; }
button { border: 0; border-radius: 13px; font: inherit; font-weight: 700; padding: 15px 16px; cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
.link-button { display: inline-flex; justify-content: center; text-decoration: none; border-radius: 13px; font: inherit; font-weight: 700; padding: 15px 16px; }
.primary { background: #75d59d; color: #07150e; }
.secondary { background: #253a58; color: #f7f9fc; }
.compact { padding: 10px 12px; white-space: nowrap; }
.inbox-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.inbox-heading h1 { margin: 0; }
.request-list { display: grid; gap: 14px; }
.request-card h2 { margin: 0 0 16px; font-size: 1.2rem; }
.spinner { width: 30px; height: 30px; border: 3px solid #385371; border-top-color: #75d59d; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }