@font-face{font-family:Chirp;src:url('/assets/fonts/chirp-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Chirp;src:url('/assets/fonts/chirp-medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Chirp;src:url('/assets/fonts/chirp-bold.woff2') format('woff2');font-weight:600 900;font-display:swap}
:root{font-family:Chirp,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#f7f9fa;background:#000;font-synthesis:none;color-scheme:dark;--muted:#71767b;--border:#2f3336;--blue:#1d9bf0;--paper:#f7f9fa}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:4px}button{border:0}svg{display:block;flex-shrink:0}button svg{width:22px;height:22px}h1,h2,p{margin:0}button,input{line-height:20px}button{transition:background-color .16s,opacity .16s,transform .16s}button:active:not(:disabled){transform:scale(.99)}[hidden]{display:none!important}
.landing{min-height:100svh;display:flex;flex-direction:column}.landing-main{display:flex;flex:1;width:100%;max-width:1280px;margin:0 auto}.landing-form-column{flex:1;padding:40px 16px 40px 36px;display:flex;align-items:center;justify-content:flex-start}.landing-form-content{width:100%;max-width:400px}.landing-title{font-size:64px;line-height:.9;font-weight:600;letter-spacing:-1px;margin:0 0 32px;padding-bottom:16px}.landing-title span{display:block}.auth-form{display:flex;flex-direction:column;gap:20px;width:100%;max-width:384px;padding-top:8px}.providers{display:flex;flex-direction:column;gap:20px}.provider-button,.primary-button,.secondary-button{width:100%;min-height:46px;padding:12px 20px;border-radius:999px;font-size:15px;font-weight:700;display:flex;justify-content:center;align-items:center;gap:8px}.provider-button,.primary-button{color:#0f1419;background:var(--paper)}.provider-button.google{background:#fff;font-family:Chirp,sans-serif;font-weight:500}.provider-button:hover,.primary-button:hover{background:#d7dbdc}.primary-button:disabled{background:#272727;color:#707070;opacity:1}.primary-button:disabled .spinner{border-top-color:#fff}.secondary-button{border:1px solid #536471;background:transparent;color:var(--paper)}.secondary-button:hover{background:#181818}.divider{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:15px;line-height:20px;margin:0}.divider:before,.divider:after{content:'';height:1px;background:#2f3336;flex:1}
.field{display:flex;position:relative;width:100%;height:62px;border:1px solid #333639;border-radius:4px;cursor:text;transition:border-color .15s;overflow:hidden}.field:focus-within{border:2px solid var(--blue)}.field .field-label{position:absolute;left:9px;top:19px;color:var(--muted);font-size:17px;line-height:22px;pointer-events:none;transform-origin:left top;transition:top .14s,font-size .14s,color .14s}.field:focus-within .field-label,.field:has(input:not(:placeholder-shown)) .field-label,.field.readonly .field-label{top:8px;font-size:13px;line-height:16px}.field:focus-within .field-label{color:var(--blue);left:8px;top:7px}.field input{width:100%;background:transparent;border:0;outline:0;color:#fff;padding:25px 9px 8px;font-size:17px;min-width:0}.field:focus-within input{padding:24px 8px 7px}.field.invalid{border-color:#f4212e}.field.invalid .field-label{color:#f4212e}.field.readonly{background:#16181c;border-color:#16181c}.field.readonly input{color:#71767b}.field.has-action input{padding-right:48px}.field-action{position:absolute;right:6px;top:12px;width:36px;height:36px;border-radius:50%;background:transparent;color:#e7e9ea;display:grid;place-items:center}.field-action:hover{background:#ffffff18}.field-action svg{width:20px;height:20px}.legal{font-size:12px;line-height:17px;text-align:center;color:var(--muted);font-weight:400}.legal a{color:var(--paper);font-weight:500}.landing-art{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}.hero-mark{display:block;width:100%;max-width:480px;height:auto}.tablet-mark{display:none}.landing-footer{display:flex;flex-wrap:wrap;justify-content:center;gap:0 5px;line-height:20px;padding:12px 32px 16px;font-size:11px;color:#71767b;min-height:48px}.footer-item{white-space:nowrap}.footer-item:not(:last-child):after{content:'·';padding-left:5px}.mobile-landing{display:none}.app-card{position:fixed;right:48px;bottom:48px;transform:none;width:166px;padding:16px;background:#141414;border:1px solid #ffffff26;border-radius:20px;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:14px;color:#a6a6a6;box-shadow:0 0 0 4px #ffffff03}.app-card:hover{background:#1c1c1c;text-decoration:none}.app-card img{width:124px;height:124px;filter:invert(1)}
.flow-page{min-height:100svh;position:relative;padding:32px 20px 64px;display:flex;justify-content:center;align-items:flex-start}.back-button{position:absolute;top:8px;left:8px;width:32px;height:32px;color:#eff3f4;background:none;border-radius:50%;display:grid;place-items:center}.back-button:hover{background:#181818}.back-button svg{width:22px;height:22px}.flow-content{width:100%;max-width:384px}.flow-heading{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 28px;font-size:22px;line-height:28px;font-weight:700}.flow-heading svg{width:29px;height:29px}.flow-page.entry .auth-form{gap:28px;padding-top:0}.flow-page.entry .providers{gap:20px}.flow-page.entry .primary-button{margin-top:8px}.flow-page.entry .legal{margin-top:-12px}.step-content{padding-top:52px}.step-title{font-size:31px;line-height:36px;letter-spacing:-.5px;font-weight:700;margin-bottom:28px}.step-intro{font-size:15px;line-height:21px;color:#71767b;margin:-14px 0 28px}.step-form{display:flex;flex-direction:column;gap:24px}.step-form .primary-button{min-height:50px}.text-button{align-self:flex-start;color:var(--blue);background:none;padding:0;font-size:14px}.text-button:hover{text-decoration:underline}.error-message{font-size:14px;line-height:20px;color:#f4212e;margin-top:-16px;min-height:0}.step-actions{display:flex;flex-direction:column;gap:20px;margin-top:36px}.phone-field{display:flex;align-items:center;border:1px solid #536471;border-radius:4px;height:62px;padding:8px 10px;gap:8px}.phone-field:focus-within{outline:2px solid var(--blue);outline-offset:-2px;border-color:var(--blue)}.phone-field select{background:#000;border:0;max-width:95px;font-size:16px;outline:none}.phone-field input{width:100%;min-width:0;border:0;background:transparent;color:#fff;outline:0;font-size:17px}.help-text{font-size:14px;line-height:20px;color:#71767b}.code-input{letter-spacing:8px;font-variant-numeric:tabular-nums}.spinner{width:19px;height:19px;border:2px solid #0f141930;border-top-color:#0f1419;border-radius:50%;animation:spin .65s linear infinite}.primary-button.loading{pointer-events:none}.success-page{min-height:100svh;display:grid;place-items:center;padding:40px 24px}.success-content{max-width:384px;width:100%;text-align:center;animation:arrive .35s ease-out}.success-emblem{width:80px;height:80px;background:#031a29;color:var(--blue);border-radius:50%;display:grid;place-items:center;margin:0 auto 28px}.success-emblem svg{width:38px;height:38px}.success-content h1{font-size:32px;line-height:38px;margin-bottom:12px}.success-content p{font-size:16px;line-height:24px;color:#71767b;margin-bottom:32px}.success-content .primary-button{margin-bottom:16px}.success-caption{font-size:12px!important;margin-top:18px!important}.provider-account{display:flex;align-items:center;gap:12px;padding:18px 0}.avatar{width:42px;height:42px;background:#1d9bf0;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:19px}.account-details{display:flex;flex-direction:column;gap:4px}.account-details small{color:#71767b}.provider-symbol{display:flex;justify-content:center;margin-bottom:28px}.provider-symbol svg{width:36px;height:36px}.provider-page .step-title{font-size:28px}
.demo-toggle{position:fixed;bottom:12px;left:12px;z-index:5;border:1px solid #303336;border-radius:999px;padding:6px 10px;background:#111e;color:#9a9fa3;display:flex;align-items:center;gap:6px;font-size:11px;line-height:16px;backdrop-filter:blur(8px)}.demo-toggle:hover{color:#fff;background:#202327}.status-dot{width:5px;height:5px;border-radius:50%;background:#1d9bf0}dialog{background:#090909;color:#f7f9fa;border:1px solid #333639;border-radius:20px;padding:28px;width:calc(100% - 32px);max-width:420px;box-shadow:0 24px 100px #000a}dialog::backdrop{background:#24333c99;backdrop-filter:blur(5px)}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.panel-heading h2{font-size:23px}.icon-button{background:transparent;color:#aaa;font-size:28px;line-height:32px;width:32px;height:32px;border-radius:50%}.icon-button:hover{background:#222}dialog p{color:#899096;font-size:14px;line-height:20px}.select-label{display:block;font-size:13px;margin:24px 0 8px}dialog select{width:100%;padding:13px;background:#16181c;border:1px solid #333639;border-radius:8px;color:#fff}.demo-hint{display:grid;grid-template-columns:1fr auto;gap:10px;font-size:12px;padding:20px 0 24px;color:#899096}.demo-hint strong{font-weight:500;color:#e7e9ea}dialog .secondary-button{margin-top:12px}.panel-note{font-size:11px!important;line-height:16px!important;margin-top:22px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:851px){.flow-page{padding-top:80px}.step-content{padding-top:52px}.flow-page.entry .flow-heading{margin-bottom:32px}.flow-page.entry{padding-top:80px}}
@media(max-width:1100px){.app-card{display:none}}
@media(min-width:501px) and (max-width:850px){.landing-art{display:none}.landing-form-column{justify-content:center;padding:64px 16px 40px}.landing-title{font-size:50px;line-height:.9;text-align:center;letter-spacing:0}.landing-title span{display:inline}.tablet-mark{display:block;width:140px;margin:0 auto 16px}.landing-form-content{max-width:400px}.auth-form{margin:auto}.landing-title{margin-bottom:32px}.landing-footer{padding-left:32px;padding-right:32px}}
@media(max-width:500px){.landing-main{display:none}.mobile-landing{display:flex;flex:1;align-items:center;justify-content:center;flex-direction:column;padding:48px 32px}.mobile-landing-inner{width:100%;text-align:center}.mobile-landing .hero-mark{width:250px;max-width:100%;margin:0 auto 48px}.mobile-landing h1{font-size:20px;line-height:20px;font-weight:600}.mobile-landing p{font-size:15px;font-weight:700;margin:30px 0 10px}.mobile-signin{display:flex;align-items:center;justify-content:center;height:44px;border:1px solid #2f3336;border-radius:999px;font-size:15px;font-weight:700}.mobile-signin:hover{background:#181818;text-decoration:none}.landing-footer{font-size:11px;line-height:28px;padding:8px 14px 14px;min-height:78px;column-gap:4px}.app-card{display:none}.flow-content{max-width:384px}.flow-heading{font-size:21px;gap:16px}.flow-page.entry .auth-form{gap:28px}.flow-page.entry .provider-button{font-size:16px}.flow-page.entry .primary-button{font-size:16px}.flow-page.entry .legal{font-size:13px;line-height:18px}.step-content{padding:68px 8px 0}.step-title{font-size:28px;line-height:34px}.demo-toggle{bottom:7px;left:7px;font-size:10px;padding:3px 7px;opacity:.85}.landing .mobile-landing{min-height:650px}.flow-page{padding-bottom:56px}}
@media(max-width:360px){.mobile-landing{padding-inline:24px}.flow-heading{font-size:19px;gap:10px}.flow-page{padding-inline:16px}.landing .mobile-landing{min-height:560px}.mobile-landing .hero-mark{width:210px}}
.landing-art{padding:0}.landing .auth-form{padding-bottom:12px}
.provider-button,.primary-button{font-weight:500}
.field:focus-within .field-label,.field:has(input:not(:placeholder-shown)) .field-label,.field.readonly .field-label{font-size:12px;line-height:18px}
@media(max-width:500px){.flow-page.entry{padding-top:34px}.flow-page.entry .flow-heading{font-size:20px;margin-bottom:30px}.flow-page.entry .flow-heading svg{width:26px;height:26px}.flow-page.entry .auth-form{gap:22px}.flow-page.entry .primary-button{margin-top:14px}.flow-page.entry .legal{font-size:12px;line-height:18px;margin-top:-5px}}
@media(max-width:500px){.on-landing .demo-toggle{top:12px;right:12px;bottom:auto;left:auto}.mobile-landing-inner{transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Shared theme tokens. The prototype follows the system until overridden. */
:root {
  --background: #000;
  --foreground: #f7f9fa;
  --modal: #141414;
  --field-background: #000;
  --field-border: #3e4144;
  --hover: #ffffff12;
}
:root[data-theme="light"] {
  color-scheme: light;
  --background: #fff;
  --foreground: #0f1419;
  --modal: #fff;
  --field-background: #fff;
  --field-border: #cfd9de;
  --border: #cfd9de;
  --muted: #536471;
  --hover: #0f14190d;
  --error-icon-fill: #fff;
}
html, body { background: var(--background); color: var(--foreground); }
.landing-title, .flow-heading, .step-title { color: var(--foreground); }
.field { border-color: var(--field-border); }
.field input, .phone-field input { color: var(--foreground); }
.field-action, .back-button, .secondary-button { color: var(--foreground); }
.field-action:hover, .back-button:hover, .secondary-button:hover, .mobile-signin:hover { background: var(--hover); }
button.mobile-signin{background:none;color:inherit;padding:0;width:100%;font-family:inherit}
.legal a { color: var(--foreground); }
.divider::before, .divider::after { background: var(--border); }
.phone-field select { background: var(--background); color: var(--foreground); }
.x-base { fill: #000; stroke: #222; stroke-width: 3; stroke-linejoin: round; }
[data-theme="light"] .x-base { fill: #222; stroke: #fff; }
[data-theme="light"] .x-light { display: none; }
[data-theme="light"] .provider-button { background: #fff; border: 1px solid #dadce0; color: #0f1419; }
[data-theme="light"] .provider-button:hover { background: #f7f9fa; }
[data-theme="light"] .primary-button { background: #0f1419; color: #fff; }
[data-theme="light"] .primary-button:hover { background: #272c30; }
[data-theme="light"] .primary-button:disabled { background: #e7e9ea; color: #9a9fa3; }
[data-theme="light"] .primary-button .spinner { border-color: #ffffff40; border-top-color: #fff; }
[data-theme="light"] #demo-panel { background: #fff; color: #0f1419; border-color: #cfd9de; }
[data-theme="light"] #demo-panel select { background: #f7f9fa; color: #0f1419; border-color: #cfd9de; }
[data-theme="light"] .demo-hint strong { color: #0f1419; }
[data-theme="light"] .demo-toggle { background: #fffffff0; color: #536471; border-color: #cfd9de; }
#demo-panel { max-height: calc(100dvh - 32px); overflow-y: auto; }

/* The app card stays upright and expands into an in-page QR view. */
.app-card {
  right: 3vw;
  bottom: 3vw;
  width: auto;
  gap: 8px;
  padding: 16px;
  background: var(--modal);
  color: #9b9b9b;
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.25;
  box-shadow: none;
  transform: none;
  transform-origin: bottom right;
  transition: transform .2s ease-out;
}
.app-card:hover, .app-card:focus-visible { transform: scale(1.08); background: var(--modal); }
.app-card img { width: 112px; height: 112px; }
[data-theme="light"] .app-card img { filter: none; }
@media(min-width:1440px) { .app-card { font-size: 14px; } .app-card img { width: 144px; height: 144px; } }
.qr-dialog {
  inset: 0;
  margin: 0;
  padding: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  border: 0;
  border-radius: 0;
  background: #000;
  color: #fff;
  box-shadow: none;
}
.qr-dialog[open] { display: grid; place-items: center; }
.qr-dialog::backdrop { background: #000; backdrop-filter: none; }
.qr-dismiss-area { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.qr-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.qr-tile { padding: 32px; background: #1a1a1a; border-radius: 16px; }
.qr-tile img { display: block; width: min(70vw, 420px, 65dvh); height: auto; filter: invert(1); }
.qr-content p { font-size: 15px; line-height: 20px; color: #fff; }
.qr-close { position: absolute; top: 10px; left: 12px; width: 40px; height: 40px; border-radius: 50%; background: transparent; color: #fff; font-size: 27px; font-weight: 400; }
.qr-close:hover { background: #ffffff18; }

/* Login reference: centered dialog, locked username, bottom-pinned action. */
body:has(dialog[open]) { overflow: hidden; }
.login-dialog {
  width: 700px;
  max-width: calc(100vw - 32px);
  height: 666px;
  max-height: calc(100dvh - 32px);
  padding: 36px 24px 26px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--modal);
  color: var(--foreground);
  box-shadow: none;
  overflow: auto;
  outline: none;
}
.login-dialog[open] { display: flex; flex-direction: column; align-items: center; }
.login-dialog::backdrop { background: #0004; backdrop-filter: blur(6px); }
.has-login-dialog .app-card { visibility: hidden; }
.login-dialog .back-button { left: 16px; top: 16px; width: 32px; height: 32px; background: var(--background); }
.login-dialog .back-button:hover { background: var(--hover); }
.login-logo svg { width: 40px; height: 40px; }
.login-dialog-body { display: flex; flex-direction: column; flex: 1; width: 100%; max-width: 410px; margin-top: 40px; min-height: 0; }
.login-dialog h1 { font-size: 32px; line-height: 38px; font-weight: 700; margin-bottom: 18px; }
.password-form { display: flex; flex-direction: column; flex: 1; gap: 28px; }
.password-fields { display: flex; flex-direction: column; gap: 20px; }
.login-dialog .field { height: 62px; background: var(--field-background); border-width: 2px; }
.login-dialog .field .field-label { left: 8px; }
.login-dialog .field:has(input:not(:placeholder-shown)) .field-label { top: 7px; }
.login-dialog .field input { padding: 24px 8px 7px; }
.login-dialog .field.readonly { background: var(--field-background); border-color: var(--field-border); }
.login-dialog .field.readonly input { color: var(--foreground); }
.login-dialog .field.readonly .field-label { color: var(--muted); }
.login-dialog .field.has-action input { padding-right: 48px; }
.login-dialog .field-action { color: #8babbc; }
.forgot-password { align-self: center; background: transparent; color: var(--foreground); font-size: 14px; font-weight: 700; padding: 2px 0; }
.forgot-password:hover { text-decoration: underline; }
.login-dialog-actions { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.login-dialog-actions .primary-button { min-height: 48px; font-size: 17px; }
.login-dialog .legal { font-size: 12px; line-height: 18px; color: var(--muted); }
.error-message { display: flex; align-items: flex-start; gap: 8px; }
.error-message svg { width: 16px; height: 16px; margin-top: 2px; flex: 0 0 16px; }
.auth-form .error-message { margin: 0; font-size: 12px; line-height: 20px; }
.password-form .error-message { margin: 0; font-size: 13px; }
.login-dialog .error-message { color: #f4212e; }
.field.invalid, .field.invalid:focus-within { border: 2px solid #f4212e; }
.field.invalid .field-label { color: #f4212e; }
@media(max-width:600px) {
  .login-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; padding: 32px 24px 32px; }
  .login-dialog-body { margin-top: 36px; }
  .login-dialog h1 { font-size: 30px; }
  .login-dialog-actions { padding-bottom: env(safe-area-inset-bottom, 0px); }
}
@media(max-height:620px) {
  .login-dialog { height: calc(100dvh - 16px); max-height: none; padding-top: 24px; padding-bottom: 20px; }
  .login-logo svg { width: 32px; height: 32px; }
  .login-dialog-body { margin-top: 20px; min-height: auto; }
  .password-form { gap: 24px; }
  .login-dialog-actions { margin-top: 12px; }
}
@media(prefers-reduced-motion:reduce) { .app-card:hover, .app-card:focus-visible { transform: none; } }

/* Phone reference: a single field and a searchable, scrollable country list. */
.phone-form { display: flex; flex-direction: column; flex: 1; gap: 24px; }
.phone-control { position: relative; }
.phone-dialog .phone-field { height: 56px; padding: 0 16px; gap: 8px; border: 2px solid var(--field-border); background: var(--field-background); }
.phone-dialog .phone-control:focus-within .phone-field { border-color: #00aaff; outline: none; }
.phone-dialog .phone-field input { padding: 0; height: 100%; font-size: 18px; }
.phone-dialog .phone-field input::placeholder { color: var(--muted); opacity: 1; }
.country-trigger { display: flex; flex: none; align-items: center; gap: 10px; padding: 0; height: 100%; background: transparent; color: var(--foreground); font-size: 14px; white-space: nowrap; }
.country-trigger svg { width: 12px; height: 12px; margin-left: -8px; }
.country-trigger:active { transform: none; }
.country-flag { flex: none; width: 18px; font-size: 13px; line-height: 20px; text-align: center; }
.country-dropdown { position: absolute; z-index: 2; top: 42px; left: 18px; display: flex; flex-direction: column; width: 320px; max-width: calc(100% - 18px); max-height: 310px; overflow: hidden; background: #1f2937; border: 1px solid #38444d; border-radius: 8px 8px 0 0; color: #f7f9fa; }
.country-search-row { display: flex; align-items: center; flex: 0 0 44px; gap: 10px; padding: 0 12px; border-bottom: 1px solid #38444d; }
.country-search-row svg { width: 18px; height: 18px; color: #829bad; }
.country-search-row input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: inherit; font-size: 14px; }
.country-search-row input::placeholder { color: inherit; opacity: 1; }
.country-search-row input::-webkit-search-cancel-button { cursor: pointer; }
.country-list { position: relative; overflow-y: auto; overscroll-behavior: contain; min-height: 0; scrollbar-width: thin; scrollbar-color: #536471 transparent; }
.country-option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; font-size: 14px; line-height: 20px; cursor: pointer; }
.country-option:hover, .country-option.is-active { background: #ffffff12; }
.country-name { flex: 1; min-width: 0; }
.country-code { flex: none; margin-left: auto; font-variant-numeric: tabular-nums; }
.country-empty { padding: 16px 12px; color: #b6c2cc; font-size: 14px; }
.phone-actions { gap: 28px; padding-top: 16px; }
.phone-actions .help-text { padding: 0 12px; font-size: 12px; line-height: 18px; color: var(--muted); }
.phone-form .error-message { margin: 0; }
[data-theme="light"] .country-dropdown { background: #fff; border-color: var(--border); color: var(--foreground); box-shadow: 0 4px 16px #0f14191a; }
[data-theme="light"] .country-search-row { border-color: var(--border); }
[data-theme="light"] .country-option:hover, [data-theme="light"] .country-option.is-active { background: var(--hover); }
[data-theme="light"] .country-empty { color: var(--muted); }
@media(max-height:620px) { .phone-actions { margin-top: auto; } }

/* Cookie notice measured on X's public landing page in a fresh browser session. */
.cookie-notice {
  --cookie-surface: #e6e9ea;
  --cookie-ink: #000;
  --cookie-button: #000;
  --cookie-button-text: #e6e9ea;
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 16px;
  padding: 20px 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--cookie-surface);
  color: var(--cookie-ink);
  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
}
[data-theme="light"] .cookie-notice {
  --cookie-surface: #0f141a;
  --cookie-ink: #fff;
  --cookie-button: #fff;
  --cookie-button-text: #0f141a;
}
.cookie-copy { display: flex; flex: 1; flex-direction: column; gap: 8px; max-width: 640px; min-width: 0; }
.cookie-copy h2 { font-size: 17px; line-height: 20px; font-weight: 500; }
.cookie-copy p { font-size: 13px; line-height: 16px; font-weight: 400; }
.cookie-copy a, .cookie-more { color: inherit; text-decoration: underline; }
.cookie-more { display: inline; padding: 0; background: transparent; font: inherit; }
.cookie-copy a:hover, .cookie-more:hover { text-decoration: none; }
.cookie-actions { display: flex; flex: 0 0 420px; flex-direction: column; gap: 8px; }
.cookie-actions button { width: 100%; min-height: 40px; padding: 9px 16px; border: 1px solid transparent; border-radius: 9999px; background: var(--cookie-button); color: var(--cookie-button-text); font-size: 15px; line-height: 20px; font-weight: 700; }
.cookie-actions button:hover { background: color-mix(in srgb, var(--cookie-button), var(--cookie-button-text) 10%); }
.cookie-notice button:focus-visible, .cookie-notice a:focus-visible { outline-color: currentColor; }
.has-cookie-notice > .demo-toggle { bottom: calc(var(--cookie-notice-height, 128px) + 12px); }
@media(max-width:850px) {
  .cookie-notice { flex-direction: column; align-items: stretch; justify-content: normal; padding-bottom: calc(max(env(safe-area-inset-bottom, 0px), 34px) + 20px); }
  .cookie-copy { flex: none; }
  .cookie-actions { flex: none; width: 100%; max-width: 550px; }
}
@media(max-width:500px) { .on-landing.has-cookie-notice > .demo-toggle { bottom: auto; } }

/* Account dialogs (two-factor + recovery screens) — current x.com 2FA look */
.account-dialog h1 { flex-shrink: 0; margin-bottom: 12px; letter-spacing: -.3px; }
.account-dialog .dialog-intro { color: var(--muted); font-size: 16px; line-height: 22px; }
.account-dialog-form { display: flex; flex: 1; flex-direction: column; gap: 20px; padding-top: 20px; }
.account-dialog-form .field { flex-shrink: 0; }
.account-dialog-form .error-message { margin: 0; font-size: 13px; }
.account-dialog-form .login-dialog-actions { padding-top: 20px; }
.modal-demo-label { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 10px; line-height: 12px; white-space: nowrap; }
.verification-method-link { position: absolute; right: 24px; top: 24px; padding: 0; background: transparent; color: var(--foreground); font-size: 14px; font-weight: 700; line-height: 20px; }
.verification-method-link:hover { text-decoration: underline; }
.otp-field { min-width: 0; padding: 0; margin: 0; border: 0; }
.otp-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.otp-digit { width: 100%; min-width: 0; height: 56px; padding: 0; border: 2px solid var(--field-border); border-radius: 5px; background: var(--field-background); color: var(--foreground); font-size: 26px; font-variant-numeric: tabular-nums; text-align: center; outline: none; }
.otp-digit:focus { border-color: var(--blue); }
.otp-digit[aria-invalid="true"] { border-color: #f4212e; }
.account-dialog .verification-demo-note { margin-top: -6px; color: var(--muted); font-size: 11px; line-height: 16px; }
.sms-code-field .field-label { max-width: calc(100% - 64px); top: 7px; font-size: 13px; line-height: 16px; }
.sms-code-count { position: absolute; right: 12px; top: 9px; color: var(--muted); font-size: 13px; line-height: 16px; pointer-events: none; font-variant-numeric: tabular-nums; }
.sms-code-field:focus-within .sms-code-count { color: var(--blue); }
.sms-code-field.invalid .sms-code-count { color: #f4212e; }
.login-dialog .sms-code-field input { padding-top: 28px; font-variant-numeric: tabular-nums; }
@media(max-width:600px) {
  .verification-method-link { top: 18px; right: 20px; font-size: 12px; }
  .otp-boxes { gap: 10px; }
}
@media(max-width:360px) { .otp-boxes { gap: 8px; } .otp-digit { height: 48px; font-size: 22px; } }