@import url("fonts.css?v=20261004a");
:root { color-scheme: light; font-family: "Manrope", system-ui, sans-serif; color: #151b25; background: #f5f7fa; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.brand { display: inline-block; width: 12rem; }
.brand img { display: block; width: 100%; height: auto; }
.eyebrow { color: #517095; font-size: .71rem; font-weight: var(--weight-heavy, 800); letter-spacing: .15em; }
.staging-note { margin: 1rem 0; padding: 1rem; border: 1px solid #e6d394; border-radius: 8px; background: #fff9e7; font-size: .8rem; }
.staging-note[hidden], .staging-badge[hidden] { display: none; }
.staging-note p { margin: .4rem 0; }
.staging-note code { display: block; margin: .3rem 0; overflow-wrap: anywhere; direction: ltr; text-align: left; }
.staging-badge { display: inline-block; margin-top: .5rem; padding: .25rem .5rem; border-radius: 4px; background: #fff0c2; color: #7e5c00; font-size: .7rem; font-weight: 800; }

[hidden] { display: none !important; }
button, input, select { font: inherit; }
button:disabled { cursor: wait; opacity: .6; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #438cca; outline-offset: 3px; }
.portal-shell { max-width: 1400px; margin: 0 auto; padding: clamp(1rem,3vw,2.5rem); }
.portal-header { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; }
.account-menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem; color: #637183; font-size: .85rem; overflow-wrap: anywhere; }
.portal-panel { margin: 1rem 0; padding: clamp(1.25rem,3vw,2rem); border: 1px solid #dbe3ec; border-radius: 14px; background: white; }
.portal-panel h1, .portal-panel h2 { margin: .5rem 0 1rem; }
.portal-panel p, dialog p { line-height: 1.7; color: #637183; }
.portal-panel button, .account-menu button, dialog button { padding: .75rem 1rem; border: 1px solid #244962; border-radius: 7px; background: #153855; color: #fff; font-weight: 700; }
.portal-panel button:hover, dialog button:hover { background: #244962; }
label { display: grid; gap: .5rem; margin: 1rem 0; font-size: .9rem; font-weight: 600; }
input, select { width: 100%; max-width: 32rem; padding: .8rem; border: 1px solid #b9c9d9; border-radius: 7px; background: #fff; color: #151b25; }
input[name=code] { max-width: 14rem; letter-spacing: .25em; }
#totp-secret { font-family: monospace; overflow-wrap: anywhere; }
#totp-qr { display: block; max-width: 100%; height: auto; image-rendering: pixelated; }
.help-text { font-size: .8rem; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(12rem,1fr)); gap: 1rem; }
.profile-grid dt { color: #637183; font-size: .8rem; }
.profile-grid dd { margin: .5rem 0 0; overflow-wrap: anywhere; }
summary { cursor: pointer; font-weight: 700; }
.host-resource-list { list-style: none; padding: 0; }
.host-resource-list li { padding: 1rem 0; border-bottom: 1px solid #dbe3ec; overflow-wrap: anywhere; }
#host-management details { margin: .75rem 0; }
#host-management { min-width: 0; overflow-wrap: anywhere; }
#host-management form { max-width: 36rem; }
#host-management select, #host-management input { max-width: 100%; min-width: 0; }
dialog { max-width: min(30rem,calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 2rem; border: 1px solid #dbe3ec; border-radius: 14px; }
dialog::backdrop { background: rgb(7 24 39 / 65%); }
.form-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 760px) {
  .portal-header { align-items: flex-start; }
  .portal-header .brand { width: 9rem; flex-shrink: 0; }
  .account-menu { max-width: 55%; }
  .profile-grid { grid-template-columns: 1fr; }
  dialog { padding: 1.25rem; }
}

.legal-consent {
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

.portal-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  padding: 1.5rem 1rem 2rem;
  font-size: 0.9rem;
}

.portal-legal a,
.legal-consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Sign-in: the same design as the mobile app's login screen
   (app/auth/login.tsx, LoginProviderButtons, LoginBackdrop). */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* The sign-in screen is exactly the visible screen: the page never scrolls,
   and the logo, buttons and spacing shrink with the screen height so the card
   fits on every phone, upright or sideways. */
html:has(body.app-login) { height: 100%; overscroll-behavior: none; }
.app-login { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; overscroll-behavior: none; background: #ffffff url("../assets/img/login-backdrop.svg") center / cover no-repeat; }
.app-login__screen { height: 100%; display: flex; align-items: center; justify-content: center; padding: clamp(10px, 2.5dvh, 20px); box-sizing: border-box; overflow: hidden; }
.app-login__card { width: 100%; max-width: 420px; max-height: 100%; box-sizing: border-box; padding: clamp(14px, 2.8dvh, 22px); border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 28px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12); }
.app-login__logo { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 280px; height: clamp(64px, 24dvh, 190px); margin: 0 auto clamp(12px, 3.5dvh, 28px); }
.app-login__logo img { width: 100%; height: 100%; object-fit: contain; }
.app-login__actions { display: grid; gap: clamp(8px, 1.5dvh, 12px); }
.app-login__provider { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: clamp(46px, 7.5dvh, 58px); padding: 0 16px; border-radius: 16px; font: 700 1rem/1 "Manrope", system-ui, sans-serif; cursor: pointer; transition: filter 150ms ease, opacity 150ms ease; }
.app-login__provider svg { width: 20px; height: 20px; flex: none; }
.app-login__provider--google { border: 1px solid #d7e0e8; background: #ffffff; color: #0f172a; }
.app-login__provider--apple { border: 1px solid #000000; background: #000000; color: #ffffff; }
.app-login__provider:hover:not(:disabled) { filter: brightness(0.96); }
.app-login__provider--apple:hover:not(:disabled) { filter: brightness(1.25); }
.app-login__provider:disabled { opacity: 0.55; cursor: progress; }
.app-login__provider:focus-visible, .app-login__legal a:focus-visible { outline: 3px solid #0b63ff; outline-offset: 2px; }
/* Sign-in progress: an indeterminate bar from the provider tap until the
   dashboard opens. */
.app-login__progress { position: relative; height: 4px; margin: 16px 0 0; border-radius: 999px; background: #e6edf7; overflow: hidden; }
.app-login__progress[hidden] { display: none; }
.app-login__progress span { position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: inherit; background: linear-gradient(90deg, #0b63ff, #5b9bff); animation: wg-login-progress 1.15s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes wg-login-progress { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) {
  .app-login__progress span { width: 100%; animation: wg-login-pulse 1.6s ease-in-out infinite; }
  @keyframes wg-login-pulse { 50% { opacity: 0.35; } }
}
.app-login__status { min-height: 1.25rem; margin: 14px 0 0; color: #64748b; font-size: 0.875rem; line-height: 1.5; text-align: center; }
.app-login__status:empty { display: none; }
.app-login__status a { color: #0b63ff; font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 0.15em; }
.app-login__legal { margin: clamp(10px, 2.2dvh, 18px) 0 0; color: #64748b; font-size: 0.78rem; line-height: 1.6; text-align: center; }
.app-login__legal a { color: #475569; text-decoration: underline; text-underline-offset: 0.15em; }
/* Language button and picker: the app's AppLanguageSelector and
   LanguagePickerModal. Each row links to that language's sign-in page. */
.app-login__language { display: flex; align-items: center; gap: 10px; min-height: 42px; margin: 0 auto clamp(10px, 2.2dvh, 18px); padding: 0 14px; border: 1px solid #d8e4ea; border-radius: 999px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08); color: #0f172a; font: 700 0.875rem/1 "Manrope", system-ui, sans-serif; cursor: pointer; }
.app-login__language img { width: 30px; height: 20px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08); }
.app-login__language svg { width: 16px; height: 16px; color: #475569; }
.app-login__language:hover { background: #ffffff; }
.app-login__language:focus-visible, .language-picker__close:focus-visible, .language-picker__option:focus-visible { outline: 3px solid #0b63ff; outline-offset: 2px; }
.language-picker { width: min(420px, calc(100vw - 32px)); max-width: none; max-height: min(640px, calc(100dvh - 32px)); padding: 0; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 28px; background: #ffffff; color: #0f172a; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28); font-family: "Manrope", system-ui, sans-serif; overflow: hidden; }
.language-picker[open] { display: flex; }
.language-picker::backdrop { background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(4px); }
.language-picker__box { display: flex; flex-direction: column; width: 100%; max-height: min(640px, calc(100dvh - 34px)); padding: 18px 18px 0; box-sizing: border-box; }
.language-picker__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.language-picker__head h2 { margin: 0; font-size: 1.375rem; font-weight: 700; letter-spacing: 0; color: #0f172a; }
.language-picker__close { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0 0 3px; border: 0; border-radius: 50%; background: #f1f5f9; color: #334155; font: 400 1.5rem/1 system-ui, sans-serif; cursor: pointer; }
.language-picker__close:hover { background: #e2e8f0; }
.language-picker__list { display: grid; gap: 10px; min-height: 0; margin: 0; padding: 0 0 18px; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.language-picker__option { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid #e2e8f0; border-radius: 20px; background: #ffffff; color: inherit; text-decoration: none; }
.language-picker__option:hover { border-color: #bfdbfe; }
.language-picker__option[aria-current="page"] { border-color: #93c5fd; background: #eff6ff; }
.language-picker__option img { flex: none; width: 42px; height: 28px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08); }
.language-picker__names { display: grid; flex: 1; min-width: 0; gap: 2px; }
.language-picker__native, .language-picker__local { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.language-picker__native { font-size: 1.0625rem; font-weight: 700; }
.language-picker__native[dir="rtl"] { text-align: right; }
.language-picker__local { color: #64748b; font-size: 0.75rem; font-weight: 500; }
.language-picker__check { display: grid; place-items: center; flex: none; width: 21px; height: 21px; border-radius: 50%; background: #2563eb; color: #ffffff; font-size: 0.75rem; font-weight: 800; visibility: hidden; }
.language-picker__option[aria-current="page"] .language-picker__check { visibility: visible; }

/* Phones: one line per message. The type scales with the screen width, and
   the screen and card margins are tighter, so the footnote and the status fit
   on a single line down to a 320 px screen. The no-account message with the
   support address wraps. */
@media (max-width: 480px) {
  .app-login__card { padding-inline: 16px; }
  .app-login__status { white-space: nowrap; font-size: min(0.875rem, 3.3vw); }
  .app-login__status:has(a) { white-space: normal; }
  .app-login__legal { white-space: nowrap; font-size: min(0.78rem, 2.95vw); }
}

/* Sign-in authenticator dialog: the login card's language (radius, black
   primary, outlined secondary, blurred backdrop like the language picker).
   One authenticator hides the picker; the code field is one large LTR input,
   so paste and one-time-code autofill keep working. */
dialog.mfa-dialog { width: min(420px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 28px; background: #ffffff; color: #0f172a; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28); font-family: "Manrope", system-ui, sans-serif; overflow: auto; }
dialog.mfa-dialog::backdrop { background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(4px); }
dialog.mfa-dialog[open] { animation: wg-mfa-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes wg-mfa-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.mfa-dialog__form { display: grid; justify-items: center; padding: 28px 24px 22px; text-align: center; }
.mfa-dialog__logo { display: block; width: 132px; height: auto; margin: 0 0 20px; }
.mfa-dialog__icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 0 14px; border-radius: 18px; background: #eef4ff; color: #0b63ff; }
.mfa-dialog__icon svg { width: 28px; height: 28px; }
.mfa-dialog__title { margin: 0; color: #0f172a; font-size: 1.25rem; font-weight: var(--weight-heavy, 800); line-height: 1.3; }
dialog.mfa-dialog .mfa-dialog__text { margin: 8px 0 0; color: #64748b; font-size: 0.9rem; line-height: 1.6; }
.mfa-dialog__field { width: 100%; margin: 18px 0 0; gap: 8px; color: #334155; font-size: 0.82rem; font-weight: 700; text-align: start; }
.mfa-dialog__factor:has(option:only-child) { display: none; }
dialog.mfa-dialog select { max-width: none; height: 48px; padding: 0 14px; border: 1px solid #d7e0e8; border-radius: 14px; background: #f8fafc; color: #0f172a; }
dialog.mfa-dialog input.mfa-dialog__code { max-width: none; height: 64px; padding: 0 12px; border: 1px solid #d7e0e8; border-radius: 16px; background: #f8fafc; color: #0f172a; font: 800 1.75rem/1 "Manrope", system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0.45em; text-align: center; text-indent: 0.45em; caret-color: #0b63ff; transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; }
dialog.mfa-dialog input.mfa-dialog__code::placeholder { color: #cbd5e1; }
dialog.mfa-dialog input.mfa-dialog__code:focus { border-color: #0b63ff; background: #ffffff; box-shadow: 0 0 0 4px rgba(11, 99, 255, 0.14); outline: none; }
dialog.mfa-dialog select:focus-visible { outline: 3px solid #0b63ff; outline-offset: 2px; }
dialog.mfa-dialog .mfa-dialog__status { min-height: 1.4rem; margin: 12px 0 0; color: #64748b; font-size: 0.85rem; line-height: 1.5; }
dialog.mfa-dialog .mfa-dialog__status[data-tone="error"] { color: #b42318; font-weight: 600; }
.mfa-dialog__actions { display: grid; gap: 10px; width: 100%; margin: 6px 0 0; }
dialog.mfa-dialog .mfa-dialog__button { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; padding: 0 16px; border-radius: 16px; font: 700 1rem/1 "Manrope", system-ui, sans-serif; transition: filter 150ms ease, opacity 150ms ease; }
dialog.mfa-dialog .mfa-dialog__button--primary { border: 1px solid #000000; background: #000000; color: #ffffff; }
dialog.mfa-dialog .mfa-dialog__button--primary:hover:not(:disabled) { background: #000000; filter: brightness(1.25); }
dialog.mfa-dialog .mfa-dialog__button--secondary { border: 1px solid #d7e0e8; background: #ffffff; color: #0f172a; }
dialog.mfa-dialog .mfa-dialog__button--secondary:hover { background: #ffffff; filter: brightness(0.96); }
dialog.mfa-dialog .mfa-dialog__button:focus-visible { outline: 3px solid #0b63ff; outline-offset: 2px; }
dialog.mfa-dialog .mfa-dialog__button:disabled { opacity: 0.55; cursor: progress; }
dialog.mfa-dialog .mfa-dialog__help { width: 100%; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #eef2f6; color: #94a3b8; font-size: 0.78rem; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
  dialog.mfa-dialog[open] { animation: none; }
}
@media (max-width: 420px) {
  .mfa-dialog__form { padding: 22px 16px 18px; }
  dialog.mfa-dialog input.mfa-dialog__code { height: 58px; font-size: 1.5rem; }
}