html.wf-auth-route, body.wf-auth-route { background: #0b0e14 !important; }
html.wf-auth-route #app, body.wf-auth-route #app { display: none !important; }
.wf-auth-shell {
  --auth-bg: #0b0e14;
  --auth-panel: #141822;
  --auth-field: #1e232f;
  --auth-line: #262c36;
  --auth-muted: #949eae;
  --auth-text: #f5f6f9;
  --auth-blue: #1065ff;
  position: fixed; inset: 0; z-index: 2147483647; overflow: auto;
  background: var(--auth-bg); color: var(--auth-text); color-scheme: dark;
  font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
.wf-auth-shell, .wf-auth-shell * { box-sizing: border-box; letter-spacing: 0; }
.wf-auth-shell button, .wf-auth-shell input, .wf-auth-shell select { font: inherit; }
.wf-auth-shell button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wf-auth-shell button:disabled { opacity: .5; cursor: not-allowed; }
.wf-auth-shell button:focus-visible, .wf-auth-shell a:focus-visible { outline: 2px solid #80aaff; outline-offset: 3px; }
.wf-auth-main { width: 100%; max-width: 448px; min-height: 100%; margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom)); }
.wf-auth-topbar { display: flex; align-items: center; height: 36px; margin: -8px -6px 16px; }
.wf-auth-close { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 6px; color: var(--auth-text); background: transparent; font-size: 20px; line-height: 1; text-decoration: none; }
.wf-auth-close:hover { color: #fff; background: var(--auth-field); }
.wf-auth-header { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; margin-bottom: 24px; }
.wf-auth-art { display: block; width: 108px; height: 108px; object-fit: contain; }
.wf-auth-title { margin: 0; max-width: 100%; font-size: 24px; line-height: 34px; font-weight: 650; text-align: center; overflow-wrap: anywhere; text-wrap: balance; }
.wf-demo-account { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; padding: 10px 14px; margin: 0 0 24px; border: 1px solid #343840; border-radius: 8px; background: #24272d; color: #f0f1f3; font-weight: 600; }
.wf-demo-account i { font-size: 18px; }
.wf-demo-account:hover { background: #30343b; border-color: #4c515b; }
.wf-register-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 24px; border-bottom: 1px solid var(--auth-line); }
.wf-register-tab { position: relative; min-width: 0; min-height: 44px; padding: 10px 0 12px; border: 0; background: transparent; color: var(--auth-muted); overflow-wrap: anywhere; }
.wf-register-tab.active { color: var(--auth-text); font-weight: 600; }
.wf-register-tab.active::after { content: ""; position: absolute; bottom: -1px; left: calc(50% - 12px); width: 24px; height: 3px; border-radius: 2px; background: var(--auth-blue); }
.wf-auth-form, .wf-fields { display: grid; gap: 20px; min-width: 0; }
.wf-field { display: grid; gap: 8px; min-width: 0; margin: 0; color: #a4adba; font-size: 12px; line-height: 20px; font-weight: 400; }
.wf-field > span:empty { display: none; }
.wf-control { display: flex; align-items: center; width: 100%; min-width: 0; height: 48px; border: 1px solid var(--auth-line); border-radius: 8px; background: var(--auth-panel); overflow: hidden; transition: border-color .15s; }
.wf-control:focus-within { border-color: var(--auth-blue); box-shadow: 0 0 0 2px #1065ff24; }
.wf-control input, .wf-control select { width: 100%; min-width: 0; height: 100%; padding: 0 13px; border: 0; border-radius: 0; outline: 0; background: transparent; color: var(--auth-text); font-size: 14px; }
.wf-control input::placeholder { color: #7f8998; opacity: 1; }
.wf-control input:-webkit-autofill { -webkit-text-fill-color: #f5f6f9; box-shadow: 0 0 0 1000px #141822 inset; }
.wf-control select option { background: var(--auth-panel); color: var(--auth-text); }
.wf-password input { padding-right: 0; }
.wf-eye { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--auth-muted); font-size: 18px !important; }
.wf-eye:hover { color: var(--auth-text); }
.wf-split { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 10px; min-width: 0; }
.wf-phone-split { grid-template-columns: 118px minmax(0, 1fr); }
.wf-country select { padding-left: 10px; font-size: 12px; }
.wf-send-code { min-height: 48px; padding: 8px; border: 1px solid #354359; border-radius: 8px; background: var(--auth-field); color: #91b5ff; font-size: 12px !important; line-height: 18px; font-weight: 600 !important; overflow-wrap: anywhere; }
.wf-send-code:hover { background: #273345; }
.wf-captcha-row { grid-template-columns: minmax(0, 1fr) 132px; }
.wf-captcha { display: block; width: 100%; height: 48px; border: 1px solid var(--auth-line); border-radius: 8px; object-fit: fill; cursor: pointer; background: #f4f4f4; color: #111; }
.wf-consent { margin: 0; color: var(--auth-muted); font-size: 12px; line-height: 21px; overflow-wrap: anywhere; }
.wf-consent a { color: #91b5ff; text-decoration: none; }
.wf-consent a:hover { text-decoration: underline; }
.wf-submit { width: 100%; min-height: 48px; padding: 11px 16px; border: 0; border-radius: 8px; background: var(--auth-blue); color: #fff; font-size: 15px !important; line-height: 24px; font-weight: 600 !important; }
.wf-submit:hover { background: #2d77ff; }
.wf-message { min-height: 0; margin: -4px 0; color: #ff9096; font-size: 12px; line-height: 20px; overflow-wrap: anywhere; }
.wf-message:empty { display: none; }
.wf-message.success { color: #73dba5; }
.wf-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin: 0; color: var(--auth-muted); font-size: 13px; }
.wf-switch button { padding: 4px; border: 0; background: transparent; color: #91b5ff; font-weight: 600; }
.wf-switch button:hover { text-decoration: underline; }
.wf-or { display: flex; align-items: center; gap: 14px; margin: 0; color: var(--auth-muted); font-size: 12px; }
.wf-or::before, .wf-or::after { content: ""; height: 1px; flex: 1; background: var(--auth-line); }
.wf-wallet-login { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--auth-line); border-radius: 8px; background: var(--auth-field); color: var(--auth-text); font-weight: 600 !important; }
.wf-wallet-login i { color: #e9bf66; font-size: 18px; }
.wf-wallet-login:hover { background: #29303d; }
.wf-wallet-panel { position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: flex-start; justify-content: center; padding: max(40px, env(safe-area-inset-top)) 16px 24px; background: #000a; overflow: auto; }
.wf-wallet-dialog { width: 100%; max-width: 400px; padding: 20px; border: 1px solid #303642; border-radius: 8px; background: var(--auth-panel); box-shadow: 0 24px 70px #0006; }
.wf-wallet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.wf-wallet-head h2 { margin: 0; font-size: 18px; line-height: 27px; font-weight: 600; }
.wf-wallet-close { flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--auth-muted); font-size: 26px !important; }
.wf-wallet-list { display: grid; gap: 8px; }
.wf-wallet-option { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 12px; border: 1px solid transparent; border-radius: 8px; background: var(--auth-field); color: var(--auth-text); text-align: left; }
.wf-wallet-option:hover { border-color: #42516a; background: #29303d; }
.wf-wallet-option > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.wf-wallet-icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 8px; overflow: hidden; background: #171a20; color: #fff; font-size: 18px; font-weight: 700; }
.wf-wallet-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.wf-wallet-icon.coinbase { border-radius: 50%; background: transparent; }
@media (max-width: 576px) { .wf-control input { font-size: 16px; } }
@media (max-width: 359px) {
  .wf-auth-main { padding-left: 16px; padding-right: 16px; }
  .wf-auth-header { margin-bottom: 24px; }
  .wf-split { grid-template-columns: minmax(0, 1fr) 100px; gap: 8px; }
  .wf-phone-split { grid-template-columns: 100px minmax(0, 1fr); }
  .wf-captcha-row { grid-template-columns: minmax(0, 1fr) 110px; }
  .wf-register-tab { font-size: 12px !important; }
}
@media (prefers-reduced-motion: reduce) { .wf-control { transition: none; } }