/* Host 0.8.22: the client room, in the Admerance identity. */
:root { color-scheme: dark; --bg: #070b19; --surface: #10172a; --raised: #151e34; --line: #26314b; --ink: #f5f7ff; --text: #d6deef; --muted: #a2aec7; --cyan: #77e3ff; --violet: #7350da; --violet-line: #9b81ed; --error: #ffb4a3; font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 16px; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: radial-gradient(ellipse at 88% 0%, #24204755, transparent 45%), var(--bg); color: var(--text); display: flex; flex-direction: column; min-height: 100vh; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #6ae0ff; outline-offset: 3px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(16px, 4vw, 48px); border-bottom: 1px solid #1d2640; }
/* The logo artwork sits on black; lighten lets the header colour show through. */
.logo { display: block; width: 200px; height: 72px; mix-blend-mode: lighten; }
.who { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); min-width: 0; }
.who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.link { background: none; border: 0; color: var(--cyan); padding: 4px 0; font-size: 13px; white-space: nowrap; flex: none; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
main { flex: 1; width: 100%; max-width: 920px; margin: 0 auto; padding: clamp(28px, 6vw, 64px) 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: clamp(24px, 5vw, 40px); max-width: 520px; margin: 0 auto; }
.eyebrow { font-size: 11px; letter-spacing: 1.8px; font-weight: 700; color: var(--cyan); margin: 0 0 12px; }
h1 { font-size: clamp(26px, 4vw, 34px); line-height: 1.15; letter-spacing: -1px; font-weight: 600; color: var(--ink); margin: 0 0 12px; }
.lead { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 24px; }
.providers { display: grid; gap: 10px; }
.provider { width: 100%; padding: 12px 16px; border-radius: 9px; border: 1px solid #3c4a68; background: #172137; color: var(--ink); font-weight: 600; font-size: 14px; }
.provider:hover { background: #202d47; border-color: #6a7aa0; }
.or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-size: 12px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
input { width: 100%; padding: 12px 14px; border-radius: 9px; border: 1px solid #3c4a68; background: #0b1224; color: var(--ink); font-size: 15px; margin-bottom: 14px; }
.primary, .secondary { border-radius: 9px; padding: 11px 18px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.primary { border: 1px solid var(--violet-line); background: linear-gradient(115deg, #7350da, #7250c9); color: #fff; box-shadow: 0 4px 16px #6943d323; }
.primary:hover { background: linear-gradient(115deg, #825ee8, #8461df); border-color: #bea4ff; }
form .primary { width: 100%; }
.secondary { border: 1px solid #3c4a68; background: #172137; color: #e6edff; }
.secondary:hover { background: #202d47; border-color: #6a7aa0; }
.status { font-size: 14px; line-height: 1.6; color: #9be8d6; margin: 16px 0 0; }
.status:empty { display: none; }
.error { max-width: 520px; margin: 18px auto 0; padding: 12px 16px; border-radius: 9px; border: 1px solid #6b3a37; background: #2a1517; color: var(--error); font-size: 14px; line-height: 1.5; }
.reports { display: grid; gap: 14px; }
.report { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.report-text { min-width: 0; }
.report h2 { font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.report p { font-size: 13px; color: var(--muted); margin: 0; }
.badge { font-size: 11px; font-weight: 700; letter-spacing: .5px; color: #0b1224; background: var(--cyan); border-radius: 999px; padding: 3px 9px; }
.report-actions { display: flex; gap: 10px; flex-shrink: 0; }
.empty { background: var(--surface); border: 1px dashed var(--line); border-radius: 14px; padding: 36px 24px; text-align: center; }
.empty h2 { font-size: 18px; color: var(--ink); margin: 0 0 8px; }
.empty p { color: var(--muted); margin: 0; font-size: 14px; }
footer { text-align: center; font-size: 12px; color: #7f8ba6; padding: 22px 16px; border-top: 1px solid #1d2640; }
@media (max-width: 640px) {
  .report { flex-direction: column; align-items: stretch; }
  .report-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .logo { width: 150px; height: 54px; }
}
/* Host 0.8.23: "Keep me signed in". */
.keep { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--muted); cursor: pointer; }
.keep[hidden] { display: none; }
.keep input { width: 16px; height: 16px; margin: 0; accent-color: var(--violet, #8b5cf6); }
footer a { color: inherit; }
#legal[hidden] { display: none; }