/* ============================================================================
 * auth-page.css — 登录 / 注册 / 邀请 / 忘记密码 页面专用样式
 * ----------------------------------------------------------------------------
 * 由 scripts/extract-auth-css.js 从根 index.html 内嵌 <style> 抽离而来
 * 任务：2026-05-24 全面产品测评 V4
 * 注意：原文件包含 GBK 编码遗留的中文注释乱码（??????），整体保留以避免视觉回归
 *      （它们已经在生产稳定运行）。后续可在不影响样式的前提下逐步重写注释。
 * ========================================================================== */

/* ????????????? SPA ?????????��????????????��??? */
    html, body { margin: 0; padding: 0; min-height: 100vh; }
    /* v7.2??iOS Safari ??????????/??????????��????? html ???????????
       ?? html ?? body ??????????????"???????"??????? */
    html { background: #EEF2FF; }
    html[data-theme="dark"] { background: linear-gradient(180deg, #0B0F1A 0%, #0A0E18 100%); }
    body {
      font-family: var(--font-sans, "MiSans", "PingFang SC", "Microsoft YaHei", sans-serif);
      background: linear-gradient(180deg, #EEF2FF 0%, #EEF1F8 100%);
      overflow: hidden;
    }
    html[data-theme="dark"] body {
      background: linear-gradient(180deg, #0B0F1A 0%, #0A0E18 100%);
    }
    /* ????????? chrome??dashboard ??????????????? */
    #app { min-height: 100vh; }
    /* ???????????????????????????? */
    .veil {
      position: fixed; inset: 0; z-index: 99999;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(180deg, #EEF2FF 0%, #EEF1F8 100%);
      color: #4a5568; font-size: 14px;
      transition: opacity 240ms ease;
    }
    html[data-theme="dark"] .veil {
      background: linear-gradient(180deg, #0B0F1A 0%, #0A0E18 100%);
      color: #94a3b8;
    }
    .veil.hide { opacity: 0; pointer-events: none; }
    .veil-spinner {
      width: 18px; height: 18px;
      border: 2px solid rgba(99, 102, 241, 0.18);
      border-top-color: #5f82ff;
      border-radius: 50%;
      margin-right: 10px;
      animation: vspin 800ms linear infinite;
    }
    @keyframes vspin { to { transform: rotate(360deg); } }
    /* ???????? #app???????????????????? patch_21 ?????��? */
    html:not(.auth-ready) #app { visibility: hidden; }
    /* ?? .is-hidden ????????
       ?????? (0,5,2) ???? ?? register/invite/forgot ???? display:flex ????
       (html[data-theme] body .login-card.auth-login-card.auth-shot-card.auth-shot-card--register
        ?????? 0,5,2)?????? .is-hidden ????????? 4 ?????????? */
    html[data-theme] body .is-hidden,
    html[data-theme] body [data-card].is-hidden,
    html[data-theme] body .login-card.auth-login-card.auth-shot-card.is-hidden,
    html[data-theme] body .auth-shot-noteam-guide.is-hidden,
    html[data-theme] body .auth-shot-field.is-hidden { display: none !important; }
    /* tabs ?��???? active ??????4px ::after??????????????? focus ???????????????????
       ???? tabs ????????????????????????????? */
    html body .auth-shot-panel-head .auth-shot-tabs { margin-bottom: 8px !important; }

    /* ?????? ???/?????????��???? ??????
         ?? absolute ??��??????? .auth-shot-field ?? grid??3 ????????????? */
    html body .auth-shot-field { position: relative; }
    html body .auth-shot-eye-toggle {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      padding: 0;
      border: 0;
      background: transparent;
      color: rgba(120, 130, 160, 0.65);
      border-radius: 8px;
      cursor: pointer;
      transition: color 0.18s ease, background 0.18s ease;
      z-index: 2;
    }
    /* ?? field ??????"????????"?? inline-action ????????????��
       2026-05-16 ????????????????????????????????????
       ??????????? 80px + ???? 12px = ??? right:92px??????????????
       ??? right:100 (????=100?????132) ?? ?????????? (right:12-92) ????? 8px ????????
       ????????????????????? */
    html body .auth-shot-field:has(.auth-shot-inline-action) .auth-shot-eye-toggle {
      right: 100px;
    }
    /* ?? input ?????? padding ???????????????
       2026-05-15 ????? 40px ??????????? 32 + right 12 = ??? 44???????? input ????????????????��
       ??? 52px????? right edge ?? right:12??left edge ?? right:44???? 8px ???? = 52?? */
    html body .auth-shot-field:has(.auth-shot-eye-toggle) input { padding-right: 52px; }
    html body .auth-shot-field:has(.auth-shot-eye-toggle):has(.auth-shot-inline-action) input {
      /* ????? right:100(132) + 8px ???? ?? padding-right: 140 */
      padding-right: 140px;
    }
    html body .auth-shot-eye-toggle:hover {
      color: rgba(99, 102, 241, 0.95);
      background: rgba(99, 102, 241, 0.08);
    }
    html body .auth-shot-eye-toggle:focus-visible {
      outline: none;
      color: rgba(99, 102, 241, 0.95);
      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.30);
    }
    html body .auth-shot-eye-toggle svg {
      width: 18px;
      height: 18px;
      display: block;
    }
    /* ???????????? ?? ??? eye-on??"?????????"????? */
    html body .auth-shot-eye-toggle .eye-off { display: none; }
    /* ?��?????????? ?? ??? eye-off??"?????????"????? */
    html body .auth-shot-eye-toggle.is-shown .eye-on { display: none; }
    html body .auth-shot-eye-toggle.is-shown .eye-off { display: block; }
    html body .auth-shot-eye-toggle.is-shown {
      color: rgba(99, 102, 241, 0.95);
    }
    /* ??????? */
    html[data-theme="dark"] body .auth-shot-eye-toggle {
      color: rgba(180, 190, 215, 0.55);
    }
    html[data-theme="dark"] body .auth-shot-eye-toggle:hover,
    html[data-theme="dark"] body .auth-shot-eye-toggle.is-shown {
      color: rgba(165, 180, 252, 0.95);
    }

    /* 2026-05-19???????????????????????
       ????????????"????????"??��?????????????????????????
       2026-05-23 fix????? svg 18px ?? 13px ???????????????????????
         ?? ?? svg ???? 15px????"????????"x-height ??��?
         ?? ????? button line-height:1 + ??? 26x26 ???��?svg block ????
         ?? ?????? baseline ??????????????????????????????? */
    html[data-theme] body #field-login-password .auth-shot-eye-toggle {
      right: 90px !important;
      width: 26px !important;
      height: 26px !important;
      line-height: 1 !important;
    }
    html[data-theme] body #field-login-password .auth-shot-eye-toggle svg {
      width: 15px !important;
      height: 15px !important;
    }
    /* ??? eye-off ??????????????? hidden????????? display ??????? */
    html[data-theme] body #field-login-password .auth-shot-eye-toggle .eye-off { display: none !important; }
    html[data-theme] body #field-login-password .auth-shot-eye-toggle.is-shown .eye-on { display: none !important; }
    html[data-theme] body #field-login-password .auth-shot-eye-toggle.is-shown .eye-off { display: block !important; }
    html[data-theme] body #field-login-password .auth-shot-inline-action {
      padding-left: 4px !important;
      padding-right: 8px !important;
      min-width: auto !important;
      font-size: 13px !important;
      line-height: 1 !important;
      height: 26px !important;
      min-height: 26px !important;
    }
    html[data-theme] body #field-login-password input {
      padding-right: 118px !important;
    }

    /* ?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T
       Bug-2 / Bug-1 ???????????????? + ???????��??????????? @media ??
       ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */
    /* Bug-2??��??????? <button> ??? <a href> ??????? button ???????? */
    html[data-theme] body .auth-shot-agreement a.auth-shot-link {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 2px;
      text-decoration-color: rgba(99, 102, 241, 0.45);
      text-decoration-thickness: 1px;
      cursor: pointer;
      transition: color 0.15s ease, text-decoration-color 0.15s ease;
      min-height: 32px;
      display: inline;
    }
    html[data-theme] body .auth-shot-agreement a.auth-shot-link:hover,
    html[data-theme] body .auth-shot-agreement a.auth-shot-link:focus-visible {
      color: #5f82ff;
      text-decoration-color: #5f82ff;
    }
    html[data-theme="light"] body .auth-shot-agreement a.auth-shot-link:hover,
    html[data-theme="light"] body .auth-shot-agreement a.auth-shot-link:focus-visible {
      color: #4d73f0;
      text-decoration-color: #4d73f0;
    }
    html[data-theme] body .auth-shot-agreement a.auth-shot-link:focus-visible {
      outline: 2px solid rgba(99, 102, 241, 0.55);
      outline-offset: 2px;
      border-radius: 3px;
    }
    /* Bug-1??????????��??��??????"??????"??????????? + not-allowed ??? + ???????? */
    html[data-theme] body .auth-shot-submit.is-pending-agreement,
    html[data-theme] body .auth-shot-submit.is-pending-agreement:hover {
      opacity: 0.55 !important;
      cursor: not-allowed !important;
      filter: saturate(0.7);
    }

    /* ?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T
       ????????? (?? 720px) ?? ?????? SPA ??��?"??????????"????
       ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
       ??????
       ?? ???????????? #F5F7FB ?? #EEF1F8????????????
       ?? ???��????????? (24px) + ????????? (?????? v230 ??????)??
              ??????????????????????? 16px ???
       ?? ???? hero?????????��??? (auth-poster-card-light.png)??
                  cover ????? 180px ????????????? banner????????????
       ?? panel??????????? / tabs / ??? / SSO ?????????????????? SSO ????
       ?? ???��?????????????��??????? 1:1 ???????
       ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */
    /* ? ?????????? html[data-theme] body ?????????? (0,2,2)??
          ???? v5-theme.css ?? html[data-theme="light"] .xxx (0,2,1) ????? */
    @media (max-width: 720px) {
      /* ?????? html / body?????????????????????????????? */
      html {
        min-height: var(--xqj-auth-viewport-height, 100dvh) !important;
        height: var(--xqj-auth-viewport-height, 100dvh) !important;
        overflow: auto !important;
      }
      html[data-theme] body {
        background: linear-gradient(180deg, #EEF2FF 0%, #EEF1F8 100%) !important;
        min-height: 100vh !important;
        min-height: var(--xqj-auth-viewport-height, 100dvh) !important;
        height: var(--xqj-auth-viewport-height, 100dvh) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
      }
      html[data-theme] body #app {
        min-height: 100vh !important;
        min-height: var(--xqj-auth-viewport-height, 100dvh) !important;
        height: var(--xqj-auth-viewport-height, 100dvh) !important;
        background: inherit !important;
        overflow: visible !important;
      }
      html[data-theme="dark"] body {
        background: linear-gradient(180deg, #0B0F1A 0%, #0A0E18 100%) !important;
      }

      /* ?????? overlay???????????????????????????? viewport?????????
         v7.2??iOS Safari ?????????? 100vh > 100dvh??? min-height:100vh + card max-height:100dvh
               ?? flex item stretch ?? max-height ???? ?? card ????????????????? (100vh-100dvh)/2 ????
               ???? 100dvh ?? overlay ?? card ??? + align-items:flex-start ??? card ??????
         v7.3??2026-05-10???????????? 100dvh ???? 100svh??????"?????????"????
               ??????? focus ????? ?? ???????? ?? 100dvh ???? visual viewport ??�� ??
               .login-overlay/.login-card/.auth-shot-hero ??? reflow ?? hero ?????
               cover ??????????? ?? ??????? + ???????????? ?? ?????????????
               100svh (small viewport height) = ???????"?????????��??????"??
               ??????/??????????????????????????????????? viewport ??????
               ?? body ???????????????line 46/50?????????????��? */
      html[data-theme] body .login-overlay.auth-spotlight {
        position: static !important;
        inset: auto !important;
        background: transparent !important;
        padding: 0 !important;
        align-items: flex-start !important;
        justify-content: stretch !important;
        width: 100% !important;
        /* 2026-05-19?????? viewport???? dvh ?????????????????????? */
        min-height: 100vh !important;
        min-height: 100dvh !important;
        min-height: var(--xqj-auth-viewport-height, 100dvh) !important;
        height: var(--xqj-auth-viewport-height, 100dvh) !important;
        max-height: none !important;
        display: flex !important;
      }
      /* .is-hidden ????????????? display:flex ???? ?? .auth-spotlight.is-hidden ?????? 0,4,2 */
      html[data-theme] body .login-overlay.auth-spotlight.is-hidden { display: none !important; }

      /* ?????? ?????2026-05-19 ??? ???? ???? viewport???????????
             hero ?? flex:1 ????????panel ???????
             ?????��??hero+panel > viewport??????????? */
      html[data-theme] body .login-card.auth-login-card.auth-shot-card {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        min-height: var(--xqj-auth-viewport-height, 100dvh) !important;
        height: var(--xqj-auth-viewport-height, 100dvh) !important;
        max-height: none !important;
        background: #FFFFFF !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
      }
      html[data-theme="dark"] body .login-card.auth-login-card.auth-shot-card {
        background: #131826 !important;
      }

      /* ?????? shell?????? card??hero flex:1 ??????? */
      html[data-theme] body .auth-shot-shell {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: none !important;
        background: transparent !important;
        gap: 0 !important;
        flex: 1 1 auto !important;
        overflow: visible !important;
      }

      /* ?????? hero??2026-05-19 v8 ???? ????????????????? viewport ??????
             ????????panel `flex: 0 0 auto`????????????��????????????
                       hero `flex: 1 1 0`???????????????? viewport ??????? panel ??????
             - ??????iPhone 14 ProMax 926????panel ?? 380, hero ?? 546????????
             - ??????iPhone 13 844??????????????panel ?? 380, hero ?? 464????????
             - Chrome ?��???????700????panel ?? 380, hero ?? 320????????
             - ????????iPhone SE 568????panel + hero(min 140) = 520 < 568??????????
             - ????????< 520????body overflow-y:auto???????????
             ???? max-height ???? ?��????????????????????? */
      html[data-theme] body .auth-shot-hero,
      html[data-theme] body .login-card.auth-login-card .auth-shot-hero {
        flex: 1 1 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 140px !important;
        max-height: none !important;
        padding: 0 !important;
        border-right: none !important;
        border-bottom: none !important;
        background: url('/assets/auth-poster-mobile-dark.svg?v=20260519-svg') center top / cover no-repeat #0B0F1A !important;
        display: block !important;
        position: relative !important;
        overflow: hidden !important;
      }
      html[data-theme="light"] body .auth-shot-hero,
      html[data-theme="light"] body .login-card.auth-login-card .auth-shot-hero {
        background: url('/assets/auth-poster-mobile-light.svg?v=20260519-svg') center top / cover no-repeat #EEF1F8 !important;
      }
      html[data-theme="dark"] body .auth-shot-hero,
      html[data-theme="dark"] body .login-card.auth-login-card .auth-shot-hero {
        background: url('/assets/auth-poster-mobile-dark.svg?v=20260519-svg') center top / cover no-repeat #0B0F1A !important;
      }
      /* ???? DOM ?????????��???? */
      html[data-theme] body .auth-shot-hero-copy {
        display: none !important;
      }
      /* ???????? DOM img ?????? CSS background ???�� */
      html[data-theme] body .auth-shot-room,
      html[data-theme] body .auth-shot-room-poster { display: none !important; }

      /* ?????? 2026-05-19????? DOM ??????????????��????????????
             brand-lockup / logo / title / subtitle / slogan ???????? */
      html[data-theme] body .auth-shot-brand-lockup {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0 !important;
      }
      /* logo ??��???????? 56px?????????? */
      html[data-theme] body .auth-shot-logo-mark {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 56px !important;
        height: 56px !important;
        flex: 0 0 56px !important;
        margin: 0 !important;
        color: #4F46E5 !important;
        background: #FFFFFF !important;
        border: 1px solid rgba(99, 102, 241, 0.18) !important;
        border-radius: 16px !important;
        box-shadow:
          0 8px 20px rgba(99, 102, 241, 0.18),
          0 2px 6px rgba(15, 23, 42, 0.06) !important;
      }
      html[data-theme="dark"] body .auth-shot-logo-mark {
        background: #1E2336 !important;
        border-color: rgba(99, 102, 241, 0.30) !important;
        color: #A5B4FC !important;
      }
      html[data-theme] body .auth-shot-logo-svg {
        display: block !important;
        width: 34px !important;
        height: 34px !important;
      }
      html[data-theme] body .auth-shot-brand-title {
        display: block !important;
        font-size: 26px !important;
        font-weight: 700 !important;
        color: #1E1B4B !important;
        letter-spacing: 0.20em !important;
        line-height: 1 !important;
        margin: 4px 0 0 !important;
      }
      html[data-theme="dark"] body .auth-shot-brand-title {
        color: #E0E7FF !important;
      }
      html[data-theme] body .auth-shot-brand-subtitle {
        display: block !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: rgba(79, 70, 229, 0.80) !important;
        letter-spacing: 0.32em !important;
        line-height: 1 !important;
        margin: 2px 0 0 !important;
        padding: 0 6px !important;
      }
      html[data-theme="dark"] body .auth-shot-brand-subtitle {
        color: rgba(165, 180, 252, 0.85) !important;
      }
      /* ??????????��????????????��?????��? */
      html[data-theme] body .auth-shot-brand-subtitle {
        position: relative !important;
      }
      html[data-theme] body .auth-shot-brand-slogan {
        display: block !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: rgba(79, 70, 229, 0.70) !important;
        letter-spacing: 0.12em !important;
        line-height: 1 !important;
        margin: 6px 0 0 !important;
      }
      html[data-theme="dark"] body .auth-shot-brand-slogan {
        color: rgba(165, 180, 252, 0.70) !important;
      }

      /* ?????? panel??v6 ?????? ???? padding ?? 18/16 ??? 10/10??gap ?? 10??6??
             panel ?????? shell ?? flex grow??flex: 0 0 auto ??????????? panel ????? flex: 1
             ??? shell ??????? footer ?????
             ? overflow: hidden ???????????????????????????????????? panel?? */
      html[data-theme] body .auth-shot-panel {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        background: transparent !important;
        padding: 10px 20px 10px !important;
        gap: 0 !important;
        flex: 0 0 auto !important;
        overflow: hidden !important;
      }
      /* panel-body??v6 gap 6??? 10????? 24px?? */
      html[data-theme] body .auth-shot-panel-body {
        justify-content: flex-start !important;
        min-height: auto !important;
        gap: 6px !important;
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
      }

      /* v6??????? form-row ????????input ??? 48??44 (??? 16px font)
         ? v6.3 critical bug fix??????????��?? .auth-shot-input???? HTML ?????????
            .auth-shot-field?????? input fontSize ?? 14px (iOS Safari ??????????)??
            ?????????��?????? .auth-shot-field??input ????? fontSize ??? 16px?? */
      html[data-theme] body .auth-shot-form {
        gap: 8px !important;
      }
      html[data-theme] body .auth-shot-form .auth-shot-field {
        min-height: 44px !important;
        height: 44px !important;
        padding: 0 12px !important;
      }
      /* ? critical?????? iOS Safari ?????? ???? login ???????? input/textarea fontSize ???? ??16 */
      html[data-theme] body .auth-shot-form .auth-shot-field input,
      html[data-theme] body .auth-shot-form .auth-shot-field textarea,
      html[data-theme] body .auth-shot-panel input,
      html[data-theme] body .auth-shot-panel textarea {
        font-size: 16px !important;
      }
      /* v6???????? 48??44 */
      html[data-theme] body .auth-shot-submit {
        min-height: 44px !important;
        height: 44px !important;
        padding: 0 12px !important;
        font-size: 15px !important;
      }
      /* ????????????????????????HTML ???????? .auth-shot-inline-action?? */
      html[data-theme] body .auth-shot-field .auth-shot-inline-action,
      html[data-theme] body button[data-action="send-code"] {
        min-height: 32px !important;
        padding: 4px 10px !important;
        font-size: 13px !important;
      }
      /* tabs ?????????????? ??36 ?? */
      html[data-theme] body .auth-shot-tabs button {
        min-height: 36px !important;
        padding: 8px 12px !important;
      }
      /* "???��??/???????/???????/???????" ??�� inline ????????? */
      html[data-theme] body .auth-shot-agreement button,
      html[data-theme] body .auth-shot-agreement a.auth-shot-link,
      html[data-theme] body .auth-shot-secondary button,
      html[data-theme] body .auth-shot-footer button {
        min-height: 32px !important;
        padding: 6px 4px !important;
      }

      /* ?????? SSO ???????v6 ???? 52??40??gap 8??6??icon 20??18??font 11??10 */
      html[data-theme] body .auth-shot-sso {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
      }
      html[data-theme] body .auth-shot-sso-button {
        min-height: 40px !important;
        flex-direction: column !important;
        gap: 2px !important;
        padding: 4px 4px !important;
      }
      html[data-theme] body .auth-shot-sso-button svg {
        width: 18px !important;
        height: 18px !important;
      }
      html[data-theme] body .auth-shot-sso-button span {
        font-size: 10px !important;
        line-height: 1.1 !important;
      }

      /* ?????? ��?�t?????????????????????????????????��?��??????? */
      html[data-theme] body .auth-shot-agreement-stack {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
      }
      html[data-theme] body .auth-shot-agreement-note,
      html[data-theme] body .auth-shot-agreement-side-note {
        white-space: normal !important;
        max-width: 100% !important;
        text-align: left !important;
        justify-self: start !important;
      }

      /* ?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T
         register / invite / forgot ????v6 ????? ?? height 100svh + overflow hidden
         ?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T
         Register ?????��??????+????+??????+?????+????=5??��???
         iPhone SE (553 ??) ??????????????��?form ????? ??551???? header 139 = 690????
         v6 ??????card ???? height:100dvh + overflow:hidden ??????????
                 header sticky ???? + form ??? overflow-y:auto ???? + submit sticky ?????
                 ???????????????+??????+???????????��???��?????????
         v7.3??2026-05-10?????????? 100dvh ?? 100svh?????????????????/???????? */
      html[data-theme] body .login-card.auth-login-card.auth-shot-card.auth-shot-card--register {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
        height: 100vh !important;
        height: 100svh !important;
        max-height: 100vh !important;
        max-height: 100svh !important;
        background: #FFFFFF !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        flex: 1 1 auto !important;
      }
      html[data-theme="dark"] body .login-card.auth-login-card.auth-shot-card.auth-shot-card--register {
        background: #131826 !important;
      }

      /* v7.0??????? header ?????��???
         ????????????????????????????????????????????????????????????????????????????????????????????
         ?? 1 ?��?????????????????????
         ?? 2 ?��????? / ?????? / ???????????????
         lang ???? mobile ???????????????????
         ???? base.css ?? `grid-template-columns: auto 1fr auto` ?????��??? */
      html[data-theme] body .auth-reg-header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        padding: clamp(10px, 3vh, 24px) 16px !important;
        background: linear-gradient(135deg, #EEF1F8 0%, #E8EDFA 100%) !important;
        border-bottom: 1px solid rgba(99, 102, 241, 0.08) !important;
        gap: 8px !important;
        align-items: center !important;
        position: relative !important;
        flex: 0 0 auto !important;
      }
      html[data-theme="dark"] body .auth-reg-header {
        background: linear-gradient(135deg, #0F1422 0%, #131A2E 100%) !important;
        border-bottom-color: rgba(99, 102, 241, 0.12) !important;
      }
      /* ?????????? 1 ??????? */
      html[data-theme] body .auth-reg-header .auth-reg-back {
        grid-row: 1 !important;
        grid-column: 1 !important;
        justify-self: start !important;
      }
      /* ?????????? 2 ?????��?? + ??????? */
      html[data-theme] body .auth-reg-header .auth-reg-header-title {
        grid-row: 2 !important;
        grid-column: 1 !important;
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
      }
      /* lang ???? mobile ?????? */
      html[data-theme] body .auth-reg-header-lang {
        display: none !important;
      }
      /* ????/???????????? */
      html[data-theme] body .auth-reg-header-title h2 {
        font-size: 16px !important;
        margin: 0 !important;
        line-height: 1.2 !important;
      }
      html[data-theme] body .auth-reg-header-title p {
        font-size: 11px !important;
        margin: 1px 0 0 !important;
        line-height: 1.3 !important;
      }
      /* ????????? */
      html[data-theme] body .auth-reg-back {
        padding: 4px 10px !important;
        font-size: 12px !important;
        gap: 2px !important;
      }
      html[data-theme] body .auth-reg-back svg {
        width: 14px !important;
        height: 14px !important;
      }

      /* ?????? v6 ????gap 3??step-num 18????? 10 */
      html[data-theme] body .auth-reg-steps {
        gap: 3px !important;
        padding: 4px 0 0 !important;
        width: 100% !important;
      }
      html[data-theme] body .auth-reg-step { gap: 3px !important; }
      html[data-theme] body .auth-reg-step-num {
        width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
        border-width: 1.5px !important;
      }
      html[data-theme] body .auth-reg-step-label {
        font-size: 10px !important;
        white-space: nowrap !important;
      }
      html[data-theme] body .auth-reg-step-line {
        flex: 0 1 10px !important;
        min-width: 6px !important;
        max-width: 16px !important;
      }

      /* body??v6.2 ???????? ???? form ???? header ?��???
         ?? v6.1 ?? justify-content:center ?? form ???��?????????iPhone 14 ProMax 430x750??
         ??????? 100-200px ????????????????????????��???
         v6.2??form ?? header ?????????? padding???��?????????? */
      html[data-theme] body .auth-reg-body {
        grid-template-columns: 1fr !important;
        padding: 0 !important;
        gap: 0 !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
      }
      html[data-theme] body .auth-reg-sidebar { display: none !important; }

      /* form??v6.4 ?????? + ????? padding/gap ???? ??????��?????????��??????? */
      html[data-theme] body .auth-reg-form {
        width: 100% !important;
        max-width: 100% !important;
        padding: clamp(14px, 3vh, 28px) 16px clamp(12px, 2vh, 20px) !important;
        background: transparent !important;
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: clamp(8px, 1.5vh, 14px) !important;
      }
      /* field-group ????label ??? 13??margin 4??input 44 ?? (???? 16px font) */
      html[data-theme] body .auth-reg-field-group {
        gap: 4px !important;
      }
      html[data-theme] body .auth-reg-label {
        font-size: 13px !important;
        margin: 0 0 2px !important;
        line-height: 1.2 !important;
      }
      html[data-theme] body .auth-reg-form .auth-shot-field {
        min-height: 44px !important;
        height: 44px !important;
      }
      /* ? v6.2 ?????input fontSize ???? 16px?????? iOS Safari ?????? */
      html[data-theme] body .auth-reg-form .auth-shot-field input {
        height: 44px !important;
        padding: 0 12px !important;
        font-size: 16px !important;
      }
      /* 2026-05-15 ???????????/????/????????????????? input
         ???????? padding: 0 12px !important ????? selector ?? 52px??
         ????????? :has(.auth-shot-eye-toggle) ?? input ??? 52px ??????
         ?????????????????????????? bug???? */
      html[data-theme] body .auth-reg-form .auth-shot-field:has(.auth-shot-eye-toggle) input {
        padding-right: 52px !important;
      }
      html[data-theme] body .auth-reg-form .auth-shot-field:has(.auth-shot-eye-toggle):has(.auth-shot-inline-action) input {
        padding-right: 148px !important;
      }
      /* method-tabs ????????????????? */
      html[data-theme] body .auth-reg-method-tabs {
        gap: 6px !important;
      }
      html[data-theme] body .auth-reg-method-tab {
        padding: 6px 10px !important;
        font-size: 12px !important;
        gap: 4px !important;
        min-height: 32px !important;
      }
      html[data-theme] body .auth-reg-method-tab svg {
        width: 14px !important;
        height: 14px !important;
      }
      html[data-theme] body .auth-reg-contact-row {
        gap: 6px !important;
      }

      /* submit ???????v6.2 ?????? + 8px ???????? 44 ???? 16px font */
      html[data-theme] body .auth-reg-form .auth-shot-submit.auth-reg-submit {
        margin-top: 8px !important;
        min-height: 44px !important;
        height: 44px !important;
        font-size: 15px !important;
        flex: 0 0 auto !important;
      }

      /* ?????????????????? 36 ?? */
      html[data-theme] body .auth-reg-back {
        padding: 6px 12px !important;
        font-size: 13px !important;
        min-height: 36px !important;
      }
      html[data-theme] body .auth-reg-back svg {
        width: 16px !important;
        height: 16px !important;
      }
    }

    /* ?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T
       ??????????? (??720px ?? + ??620px ??) ?? v6 ???
       ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
       ???��?????iPhone SE/8 (375x553)??iPhone 12 mini Safari (375x620)
       v6 ?? max-width:720 ???????????????????????????hero min-height 100??
       logo 36?????? sub/slogan??SSO 36 ???submit 38 ?????? panel ?????? ??320??
       ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */
    @media (max-width: 720px) and (max-height: 620px) {
      /* hero ????????min-height 140??100 */
      html[data-theme] body .auth-shot-hero {
        min-height: 100px !important;
        padding: 0 !important;
      }
      /* DOM ?????????????? display:none ????????????????? */
      html[data-theme] body .auth-shot-logo-mark {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
        border-radius: 10px !important;
      }
      html[data-theme] body .auth-shot-logo-svg {
        width: 22px !important;
        height: 22px !important;
      }
      html[data-theme] body .auth-shot-brand-title {
        font-size: 16px !important;
        margin: 2px 0 0 !important;
      }
      html[data-theme] body .auth-shot-brand-subtitle,
      html[data-theme] body .auth-shot-brand-slogan {
        display: none !important;
      }
      /* panel ????????padding 10??6??gap 6??4 */
      html[data-theme] body .auth-shot-panel {
        padding: 6px 18px 6px !important;
      }
      html[data-theme] body .auth-shot-panel-body {
        gap: 4px !important;
      }
      /* form/input/submit/sso ????????????? 16px font ???? iOS ??????
         ? v6.3 ??????????.auth-shot-input ?? .auth-shot-field??HTML ????????? */
      html[data-theme] body .auth-shot-form {
        gap: 6px !important;
      }
      html[data-theme] body .auth-shot-form .auth-shot-field {
        min-height: 40px !important;
        height: 40px !important;
      }
      html[data-theme] body .auth-shot-submit {
        min-height: 40px !important;
        height: 40px !important;
      }
      html[data-theme] body .auth-shot-sso-button {
        min-height: 38px !important;
      }
      /* register/invite/forgot ??????iPhone SE 553????input 38 ?? + form padding ??? + label 11 ???
         ???? 5 ??��??? + submit ??? viewport */
      html[data-theme] body .auth-reg-form {
        padding: 6px 16px 6px !important;
        gap: 4px !important;
      }
      html[data-theme] body .auth-reg-header {
        padding: 6px 16px !important;
        gap: 4px !important;
      }
      html[data-theme] body .auth-reg-header-title p {
        display: none !important;
      }
      html[data-theme] body .auth-reg-header-title h2 {
        font-size: 15px !important;
      }
      html[data-theme] body .auth-reg-steps {
        padding-top: 2px !important;
      }
      html[data-theme] body .auth-reg-step-num {
        width: 16px !important;
        height: 16px !important;
        font-size: 9px !important;
      }
      html[data-theme] body .auth-reg-step-label {
        font-size: 9px !important;
      }
      html[data-theme] body .auth-reg-field-group {
        gap: 1px !important;
      }
      html[data-theme] body .auth-reg-label {
        font-size: 10px !important;
        margin-bottom: 0 !important;
      }
      html[data-theme] body .auth-reg-form .auth-shot-field {
        min-height: 34px !important;
        height: 34px !important;
      }
      html[data-theme] body .auth-reg-form .auth-shot-field input {
        height: 34px !important;
      }
      html[data-theme] body .auth-reg-form .auth-shot-submit.auth-reg-submit {
        min-height: 38px !important;
        height: 38px !important;
        margin-top: 2px !important;
      }
      html[data-theme] body .auth-reg-method-tab {
        min-height: 28px !important;
        padding: 4px 8px !important;
      }
      html[data-theme] body .auth-shot-sso-button svg {
        width: 16px !important;
        height: 16px !important;
      }
      /* tabs ??? */
      html[data-theme] body .auth-shot-tabs {
        margin-bottom: 2px !important;
      }
      /* divider "??" ???? - ??? 15+8=23px */
      html[data-theme] body .auth-shot-divider {
        display: none !important;
      }
    }

    /* ?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T
       ????????????auth toast??
       ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
       2026-05-10???? 4 ?????login / register / invite / forgot?????��??
       ?????? inline status-note?????????????????? toast ????????
       ???
       ?? ???????? / ????????
       ?? ???????????????????????/?????????
       ?? ????????? + safe-area?????/iOS ???????
       ?? ?????????? 3 ????????????????????????????
       ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */
    .auth-toast-container {
      position: fixed;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 100000;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
      pointer-events: none;
      width: min(92vw, 460px);
    }
    .auth-toast {
      pointer-events: auto;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      width: 100%;
      padding: 12px 14px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.96);
      color: #1f2940;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.45;
      box-shadow:
        0 16px 40px rgba(15, 23, 42, 0.16),
        0 4px 14px rgba(15, 23, 42, 0.08);
      border: 1px solid rgba(99, 102, 241, 0.12);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transform: translateY(-140%);
      opacity: 0;
      transition: transform 280ms cubic-bezier(0.2, 0.7, 0.3, 1.2),
                  opacity 220ms ease;
    }
    .auth-toast.is-shown {
      transform: translateY(0);
      opacity: 1;
    }
    .auth-toast.is-leaving {
      transform: translateY(-160%);
      opacity: 0;
      transition: transform 220ms cubic-bezier(0.4, 0, 0.6, 0.4),
                  opacity 200ms ease;
    }
    .auth-toast-icon {
      flex: 0 0 22px;
      width: 22px;
      height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px;
    }
    .auth-toast-icon svg {
      width: 22px;
      height: 22px;
      display: block;
    }
    .auth-toast-body {
      flex: 1 1 auto;
      min-width: 0;
      word-break: break-word;
    }
    .auth-toast-close {
      flex: 0 0 auto;
      appearance: none;
      background: transparent;
      border: 0;
      padding: 0 4px;
      margin: -2px -4px -2px 0;
      cursor: pointer;
      color: rgba(31, 41, 64, 0.45);
      border-radius: 6px;
      font-size: 20px;
      line-height: 1;
      height: 22px;
      transition: color 0.15s ease, background 0.15s ease;
    }
    .auth-toast-close:hover {
      color: rgba(31, 41, 64, 0.85);
      background: rgba(31, 41, 64, 0.06);
    }
    .auth-toast-close:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.40);
    }
    /* tone: warn ?????????/???��???? ??? .auth-shot-agreement-note ?????????? */
    .auth-toast[data-tone="warn"] {
      background: linear-gradient(180deg, rgba(255, 245, 232, 0.98), rgba(255, 240, 220, 0.96));
      color: #8a4a0e;
      border-color: rgba(245, 158, 11, 0.28);
    }
    .auth-toast[data-tone="warn"] .auth-toast-icon { color: #d97706; }
    /* tone: info ????????/????? */
    .auth-toast[data-tone="info"] {
      background: linear-gradient(180deg, rgba(238, 244, 255, 0.98), rgba(229, 235, 255, 0.96));
      color: #1d3a82;
      border-color: rgba(99, 102, 241, 0.28);
    }
    .auth-toast[data-tone="info"] .auth-toast-icon { color: #4f46e5; }
    /* ??????? */
    html[data-theme="dark"] .auth-toast {
      background: rgba(28, 33, 50, 0.96);
      color: #e4ebff;
      border-color: rgba(99, 102, 241, 0.30);
      box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.42),
        0 4px 14px rgba(0, 0, 0, 0.22);
    }
    html[data-theme="dark"] .auth-toast[data-tone="warn"] {
      background: linear-gradient(180deg, rgba(74, 44, 12, 0.96), rgba(64, 36, 6, 0.96));
      color: #fde0b8;
      border-color: rgba(245, 158, 11, 0.40);
    }
    html[data-theme="dark"] .auth-toast[data-tone="warn"] .auth-toast-icon { color: #fbbf24; }
    html[data-theme="dark"] .auth-toast[data-tone="info"] {
      background: linear-gradient(180deg, rgba(34, 42, 78, 0.96), rgba(28, 36, 70, 0.96));
      color: #d8e1ff;
      border-color: rgba(99, 102, 241, 0.40);
    }
    html[data-theme="dark"] .auth-toast[data-tone="info"] .auth-toast-icon { color: #a5b4fc; }
    html[data-theme="dark"] .auth-toast-close { color: rgba(228, 235, 255, 0.55); }
    html[data-theme="dark"] .auth-toast-close:hover {
      color: rgba(228, 235, 255, 0.95);
      background: rgba(228, 235, 255, 0.08);
    }
    /* ???????????? 12px????????????? 12px ??? */
    @media (max-width: 720px) {
      .auth-toast-container {
        top: 12px;
        width: calc(100vw - 24px);
      }
      .auth-toast {
        font-size: 14px;
        padding: 11px 12px;
      }
    }
    /* iOS ??????????????/???? */
    @supports (top: env(safe-area-inset-top)) {
      .auth-toast-container {
        top: calc(env(safe-area-inset-top, 0px) + 12px);
      }
    }
    /* ????????????????????? */
    @media (prefers-reduced-motion: reduce) {
      .auth-toast {
        transition: opacity 160ms ease;
        transform: translateY(0);
      }
      .auth-toast.is-leaving { transform: translateY(0); }
    }
    /* ?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T
       2026-05-19 ????????????? SaaS ?�^????? 1:1 ???
       ???????artifacts/login-page-illustration-premium-v3.png (390??844)
       ?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T?T */
    @media (max-width: 720px) {
      html {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        height: 100dvh !important;
        overflow: hidden !important;
        background: #dce5f3 !important;
      }
      html[data-theme] body {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        height: 100dvh !important;
        overflow: hidden !important;
        background: #dce5f3 !important;
        color: #0f172a !important;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
      }
      html[data-theme] body #app {
        min-height: 100dvh !important;
        height: 100dvh !important;
        overflow: hidden !important;
        background: #dce5f3 !important;
      }
      html[data-theme] body .login-overlay.auth-spotlight {
        position: static !important;
        inset: auto !important;
        display: flex !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        padding: 0 !important;
        background: #dce5f3 !important;
        overflow: hidden !important;
      }
      html[data-theme] body .login-overlay.auth-spotlight.is-hidden { display: none !important; }
      html[data-theme] body .login-card.auth-login-card.auth-shot-card {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: none !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background:
          radial-gradient(circle at 18% 21%, rgba(66, 133, 255, 0.16), transparent 38%),
          radial-gradient(circle at 84% 25%, rgba(45, 201, 181, 0.16), transparent 33%),
          linear-gradient(180deg, #f9fbff 0%, #eef5ff 56%, #fbfdff 100%) !important;
        overflow: hidden !important;
        display: block !important;
        position: relative !important;
      }
      html[data-theme] body .login-card.auth-login-card.auth-shot-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(#e8eefb 1px, transparent 1px),
          linear-gradient(90deg, #e8eefb 1px, transparent 1px);
        background-size: 28px 28px;
        opacity: .45;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.58) 44%, transparent 72%);
        mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.58) 44%, transparent 72%);
        pointer-events: none;
      }
      html[data-theme] body .login-card.auth-login-card.auth-shot-card::after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .04;
        pointer-events: none;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
      }
      html[data-theme] body .auth-shot-shell {
        position: relative !important;
        z-index: 1 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        overflow: hidden !important;
        background: transparent !important;
      }
      html[data-theme] body .auth-shot-hero,
      html[data-theme] body .login-card.auth-login-card .auth-shot-hero {
        position: absolute !important;
        inset: 0 0 auto 0 !important;
        display: block !important;
        width: 100% !important;
        height: calc(100dvh - 358px) !important;
        min-height: 410px !important;
        max-height: 510px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        overflow: visible !important;
        z-index: 1 !important;
      }
      html[data-theme] body .auth-shot-hero-copy,
      html[data-theme] body .auth-shot-room,
      html[data-theme] body .auth-shot-room-poster { display: none !important; }

      html[data-theme] body .xqj-premium-login-mobile { display: block !important; }
      html[data-theme] body .xqj-mobile-status {
        position: absolute;
        z-index: 7;
        top: 0;
        left: 0;
        right: 0;
        height: 44px;
        padding: 15px 22px 0;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        color: #0f172a;
        font-size: 15px;
        line-height: 1;
        font-weight: 850;
        letter-spacing: .01em;
      }
      .xqj-mobile-status .xqj-status-icons { display: flex; gap: 7px; align-items: center; }
      .xqj-status-bar { width: 18px; height: 12px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; position: relative; }
      .xqj-status-bar::after { content: ""; position: absolute; left: 5px; top: 0; width: 4px; height: 12px; background: currentColor; }
      .xqj-status-wifi { width: 16px; height: 10px; border: 4px solid currentColor; border-bottom: 0; border-left-color: transparent; border-right-color: transparent; border-radius: 15px 15px 0 0; }
      .xqj-status-battery { width: 25px; height: 13px; border: 3px solid currentColor; border-radius: 5px; position: relative; }
      .xqj-status-battery::after { content: ""; position: absolute; right: -6px; top: 3px; width: 3px; height: 5px; background: currentColor; border-radius: 2px; }

      html[data-theme] body .xqj-mobile-content {
        position: absolute;
        inset: 0;
        z-index: 3;
        padding: 58px 24px 0;
      }
      html[data-theme] body .xqj-mobile-brand-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      html[data-theme] body .xqj-mobile-brand {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      html[data-theme] body .xqj-mobile-brand img {
        width: 31px;
        height: 31px;
        object-fit: contain;
        filter: drop-shadow(0 7px 15px rgba(37, 99, 235, .18));
      }
      html[data-theme] body .xqj-mobile-brand b {
        display: block;
        font-size: 18px;
        line-height: 1;
        font-weight: 950;
        color: #0f172a;
        letter-spacing: .04em;
      }
      html[data-theme] body .xqj-mobile-brand span {
        display: block;
        margin-top: 4px;
        font-size: 10px;
        line-height: 1;
        color: #7a8599;
        letter-spacing: .1em;
      }
      html[data-theme] body .xqj-mobile-badge {
        font-size: 12px;
        line-height: 1;
        color: #2468ee;
        background: rgba(234, 241, 255, .78);
        border: 1px solid #d7e5ff;
        border-radius: 999px;
        padding: 9px 12px;
        font-weight: 900;
        box-shadow: 0 10px 24px rgba(37,99,235,.08);
        backdrop-filter: blur(10px);
      }
      html[data-theme] body .xqj-mobile-title {
        margin: 30px 0 0;
        font-size: 29px;
        line-height: 1.13;
        letter-spacing: -.055em;
        font-weight: 950;
        color: #0f172a;
      }
      html[data-theme] body .xqj-mobile-subtitle {
        margin: 9px 0 0;
        color: #667085;
        font-size: 14px;
        line-height: 1.55;
        font-weight: 400;
      }
      html[data-theme] body .xqj-mobile-illus {
        position: relative;
        height: 238px;
        margin-top: 4px;
        perspective: 760px;
      }
      .xqj-mobile-stage { position: absolute; left: 54px; top: 173px; width: 260px; height: 54px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(54,103,201,.25), rgba(54,103,201,.08) 54%, transparent 76%); filter: blur(2px); }
      .xqj-mobile-orbit { position: absolute; left: 30px; top: 22px; width: 300px; height: 178px; pointer-events: none; }
      .xqj-mobile-orbit svg { width: 100%; height: 100%; overflow: visible; }
      .xqj-illus-core { position: absolute; left: 67px; top: 34px; width: 236px; height: 142px; border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(239,246,255,.88)); border: 1px solid rgba(211,224,246,.98); box-shadow: 0 34px 68px rgba(30,70,145,.18), inset 0 1px 0 rgba(255,255,255,.95); transform: rotateX(9deg) rotateY(-13deg) rotateZ(-2deg); overflow: hidden; }
      .xqj-illus-core::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.85), transparent 34%, rgba(67,111,255,.1)); z-index: 2; pointer-events: none; }
      .xqj-illus-nav { position: absolute; left: 0; top: 0; bottom: 0; width: 48px; background: linear-gradient(180deg,#12213a,#182c4d); padding: 16px 12px; }
      .xqj-illus-nav i { display: block; width: 23px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.26); margin-bottom: 10px; }
      .xqj-illus-nav i:first-child { background: #4f7cff; }
      .xqj-illus-dash { position: absolute; left: 58px; top: 15px; right: 15px; bottom: 15px; }
      .xqj-illus-dash-top { display: flex; justify-content: space-between; align-items: center; }
      .xqj-illus-dash-top span { width: 70px; height: 9px; border-radius: 999px; background: #dce6f7; }
      .xqj-illus-dash-top b { width: 32px; height: 32px; border-radius: 13px; background: linear-gradient(135deg,#3774ff,#6fa0ff); box-shadow: 0 10px 22px rgba(55,116,255,.25); }
      .xqj-illus-metric { display: grid; grid-template-columns: 1fr 50px; gap: 10px; margin-top: 13px; }
      .xqj-illus-chart { height: 52px; border-radius: 16px; background: #f0f5fd; display: flex; align-items: end; gap: 6px; padding: 9px 12px; }
      .xqj-illus-chart i { width: 11px; border-radius: 9px 9px 3px 3px; background: linear-gradient(180deg,#4978ff,#82a8ff); }
      .xqj-illus-donut { height: 52px; border-radius: 16px; background: conic-gradient(#3774ff 0 58%,#22c7aa 58% 78%,#dde7f7 78%); position: relative; }
      .xqj-illus-donut::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: #f8fbff; }
      .xqj-illus-rows { margin-top: 10px; display: grid; gap: 6px; }
      .xqj-illus-rows i { height: 7px; border-radius: 999px; background: #e2e9f4; }
      .xqj-illus-rows i:nth-child(1) { width: 128px; }
      .xqj-illus-rows i:nth-child(2) { width: 92px; }
      .xqj-illus-float { position: absolute; border-radius: 22px; background: rgba(255,255,255,.82); border: 1px solid rgba(218,229,247,.95); box-shadow: 0 24px 48px rgba(35,74,145,.13); backdrop-filter: blur(16px); padding: 13px; }
      .xqj-illus-float.left { left: 22px; top: 115px; width: 122px; height: 78px; transform: rotateX(8deg) rotateY(17deg) rotateZ(3deg); }
      .xqj-illus-float.right { right: 18px; top: 93px; width: 124px; height: 86px; transform: rotateX(10deg) rotateY(-14deg) rotateZ(4deg); }
      .xqj-illus-line { height: 8px; border-radius: 999px; background: #e3eaf5; margin-top: 9px; }
      .xqj-illus-line.blue { background: linear-gradient(90deg,#3473ff,#7ba3ff); }
      .xqj-illus-line.green { background: linear-gradient(90deg,#20c3a7,#72e2d1); }
      .xqj-illus-logo-orb { position: absolute; left: 156px; top: 5px; width: 62px; height: 62px; border-radius: 23px; background: linear-gradient(145deg,#3473ff,#77a6ff); box-shadow: 0 22px 44px rgba(55,116,255,.28); display: flex; align-items: center; justify-content: center; }
      .xqj-illus-logo-orb img { width: 36px; height: 36px; object-fit: contain; filter: brightness(0) invert(1); }
      .xqj-illus-node { position: absolute; width: 38px; height: 38px; border-radius: 15px; background: #fff; color: #2f6df6; font-size: 22px; line-height: 1; font-weight: 950; display: flex; align-items: center; justify-content: center; border: 1px solid #dbe7fa; box-shadow: 0 16px 30px rgba(35,74,145,.13); }
      .xqj-illus-node.n1 { left: 48px; top: 56px; }
      .xqj-illus-node.n2 { right: 66px; top: 24px; }
      .xqj-illus-node.n3 { right: 84px; top: 178px; background: linear-gradient(145deg,#23c5aa,#77e4d5); color: #fff; border: 0; }

      html[data-theme] body .auth-shot-panel {
        position: absolute !important;
        z-index: 5 !important;
        left: 18px !important;
        right: 18px !important;
        bottom: max(18px, env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        max-width: none !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 20px 18px 18px !important;
        border-radius: 30px !important;
        border: 1px solid rgba(220,228,242,.95) !important;
        background: rgba(255,255,255,.95) !important;
        box-shadow: 0 -10px 46px rgba(31,41,55,.10) !important;
        backdrop-filter: blur(18px) !important;
        overflow: visible !important;
      }
      html[data-theme] body .auth-shot-panel-body {
        display: flex !important;
        flex-direction: column !important;
        gap: 11px !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        background: transparent !important;
      }
      html[data-theme] body .auth-shot-panel-primary,
      html[data-theme] body .auth-view-login,
      html[data-theme] body .auth-shot-form,
      html[data-theme] body .auth-shot-form-main {
        display: flex !important;
        flex-direction: column !important;
        gap: 11px !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
      }
      html[data-theme] body .auth-shot-panel-head {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
      }
      html[data-theme] body .auth-shot-heading { display: none !important; }
      html[data-theme] body .auth-shot-tabs {
        height: 49px !important;
        min-height: 49px !important;
        padding: 5px !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 20px !important;
        background: #eef3fa !important;
        box-shadow: none !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 5px !important;
      }
      html[data-theme] body .auth-shot-tab {
        min-height: 39px !important;
        height: 39px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 16px !important;
        background: transparent !important;
        color: #7b8798 !important;
        font-size: 15px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        box-shadow: none !important;
      }
      html[data-theme] body .auth-shot-tab.active {
        background: #ffffff !important;
        color: #101828 !important;
        box-shadow: 0 8px 20px rgba(20,30,50,.08) !important;
      }
      html[data-theme] body .auth-shot-field {
        height: 51px !important;
        min-height: 51px !important;
        padding: 0 15px !important;
        border: 1px solid #e1e6ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: none !important;
        gap: 12px !important;
        color: #2e6af2 !important;
      }
      html[data-theme] body .auth-shot-field svg {
        width: 18px !important;
        height: 18px !important;
        color: #2e6af2 !important;
        stroke-width: 2.5 !important;
      }
      html[data-theme] body .auth-shot-field input {
        height: 100% !important;
        padding: 0 !important;
        color: #0f172a !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
      }
      html[data-theme] body .auth-shot-field input::placeholder { color: #9299a5 !important; opacity: 1 !important; }
      html[data-theme] body .auth-shot-field-tail { display: none !important; }
      html[data-theme] body .auth-shot-field .auth-shot-inline-action,
      html[data-theme] body .auth-shot-eye-toggle {
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #2468ee !important;
        font-size: 14px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
      }
      html[data-theme] body .auth-shot-agreement-stack { margin: 0 !important; padding: 0 !important; }
      html[data-theme] body .auth-shot-agreement {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: #858b96 !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        font-weight: 400 !important;
      }
      html[data-theme] body .auth-shot-agreement input {
        appearance: none !important;
        -webkit-appearance: none !important;
        box-sizing: border-box !important;
        flex: 0 0 16px !important;
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
        border: 1.5px solid #b9b2aa !important;
        border-radius: 4px !important;
        background: #fff !important;
        margin: 0 !important;
        display: block !important;
        position: relative !important;
        transform: none !important;
      }
      html[data-theme] body .auth-shot-agreement input:checked { background: #3675ff !important; border-color: #3675ff !important; }
      html[data-theme] body .auth-shot-agreement input:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
      html[data-theme] body .auth-shot-agreement a.auth-shot-link { color: inherit !important; text-decoration: none !important; min-height: 0 !important; }
      html[data-theme] body .auth-shot-agreement span { word-spacing: -0.05em !important; }
      html[data-theme] body .auth-shot-submit {
        height: 54px !important;
        min-height: 54px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 19px !important;
        background: linear-gradient(135deg,#3675ff,#4564f2) !important;
        color: #ffffff !important;
        font-size: 17px !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        letter-spacing: 0 !important;
        box-shadow: 0 15px 30px rgba(54,117,255,.22) !important;
      }
      html[data-theme] body .auth-shot-panel-secondary {
        display: flex !important;
        flex-direction: column !important;
        gap: 11px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
      }
      html[data-theme] body .auth-shot-divider { display: none !important; }
      html[data-theme] body .auth-shot-sso {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
        margin: 0 !important;
      }
      html[data-theme] body .auth-shot-sso-button {
        height: 39px !important;
        min-height: 39px !important;
        padding: 0 !important;
        border-radius: 15px !important;
        border: 1px solid #e2d8c8 !important;
        background: #fffdf8 !important;
        box-shadow: none !important;
        color: #344054 !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        justify-content: center !important;
      }
      /* 2026-05-19??SSO ?????????????????????? svg ????????????????????? */
      html[data-theme] body .auth-shot-sso-button {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
      }
      html[data-theme] body .auth-shot-sso-button svg {
        display: block !important;
        width: 18px !important;
        height: 18px !important;
        flex: 0 0 18px !important;
        filter: none !important;
      }
      html[data-theme] body .auth-shot-sso-button[data-value="企业微信"] svg { color: #2F6BFF !important; }
      html[data-theme] body .auth-shot-sso-button[data-value="钉钉"] svg { color: #1677FF !important; }
      html[data-theme] body .auth-shot-sso-button[data-value="飞书"] svg { color: #3370FF !important; }
      html[data-theme] body .auth-shot-sso-button span { font-size: 13px !important; font-weight: 850 !important; color: #344054 !important; }
      html[data-theme] body .auth-shot-footer {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        margin: 0 !important;
        color: #8b8f99 !important;
        font-size: 13px !important;
        line-height: 1 !important;
      }
      html[data-theme] body .auth-shot-footer span { color: #8b8f99 !important; margin: 0 !important; }
      html[data-theme] body .auth-shot-footer span:nth-of-type(2) { display: none !important; }
      html[data-theme] body .auth-shot-footer button {
        min-height: 24px !important;
        padding: 0 !important;
        margin: 0 8px !important;
        border: 0 !important;
        background: transparent !important;
        color: #101828 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
      }
      html[data-theme] body .auth-shot-noteam-guide,
      html[data-theme] body .auth-shot-fallback-row,
      html[data-theme] body .auth-shot-agreement-note.is-hidden { display: none !important; }

      @keyframes xqj-float-core { 0%,100% { transform: rotateX(9deg) rotateY(-13deg) rotateZ(-2deg) translateY(0); } 50% { transform: rotateX(9deg) rotateY(-13deg) rotateZ(-2deg) translateY(-4px); } }
      @keyframes xqj-float-left { 0%,100% { transform: rotateX(8deg) rotateY(17deg) rotateZ(3deg) translateY(0); } 50% { transform: rotateX(8deg) rotateY(17deg) rotateZ(3deg) translateY(-5px); } }
      @keyframes xqj-float-right { 0%,100% { transform: rotateX(10deg) rotateY(-14deg) rotateZ(4deg) translateY(0); } 50% { transform: rotateX(10deg) rotateY(-14deg) rotateZ(4deg) translateY(-4px); } }
      @keyframes xqj-soft-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
      html[data-theme] body .xqj-illus-core { animation: xqj-float-core 5.8s ease-in-out infinite; }
      html[data-theme] body .xqj-illus-float.left { animation: xqj-float-left 5.2s ease-in-out infinite .15s; }
      html[data-theme] body .xqj-illus-float.right { animation: xqj-float-right 5.6s ease-in-out infinite .25s; }
      html[data-theme] body .auth-shot-panel { animation: xqj-soft-in 420ms ease-out both; }
      html[data-theme] body .xqj-mobile-content { animation: xqj-soft-in 500ms ease-out both; }

      @media (max-height: 760px) {
        html[data-theme] body .xqj-mobile-title { margin-top: 22px; font-size: 27px; }
        html[data-theme] body .xqj-mobile-subtitle { font-size: 13px; margin-top: 7px; }
        html[data-theme] body .xqj-mobile-illus { transform: scale(.88); transform-origin: center top; margin-top: 0; }
        html[data-theme] body .auth-shot-panel { padding: 16px 16px 14px !important; }
        html[data-theme] body .auth-shot-panel-body,
        html[data-theme] body .auth-shot-panel-primary,
        html[data-theme] body .auth-view-login,
        html[data-theme] body .auth-shot-form,
        html[data-theme] body .auth-shot-form-main,
        html[data-theme] body .auth-shot-panel-secondary { gap: 8px !important; }
        html[data-theme] body .auth-shot-tabs { height: 46px !important; min-height: 46px !important; }
        html[data-theme] body .auth-shot-tab { height: 36px !important; min-height: 36px !important; }
        html[data-theme] body .auth-shot-field { height: 48px !important; min-height: 48px !important; }
        html[data-theme] body .auth-shot-submit { height: 50px !important; min-height: 50px !important; }
        html[data-theme] body .auth-shot-sso-button { height: 36px !important; min-height: 36px !important; }
      }
      @media (max-height: 640px) {
        html[data-theme] body { overflow-y: auto !important; }
        html[data-theme] body #app,
        html[data-theme] body .login-overlay.auth-spotlight,
        html[data-theme] body .login-card.auth-login-card.auth-shot-card { min-height: 700px !important; height: 700px !important; }
      }
      @media (max-width: 360px) {
        html[data-theme] body .xqj-mobile-content { padding-left: 20px; padding-right: 20px; }
        html[data-theme] body .xqj-mobile-title { font-size: 27px; }
        html[data-theme] body .xqj-mobile-subtitle { font-size: 13px; }
        html[data-theme] body .xqj-mobile-illus { transform: scale(.9); transform-origin: center top; }
        html[data-theme] body .auth-shot-panel { left: 14px !important; right: 14px !important; }
        html[data-theme] body .auth-shot-sso { gap: 8px !important; }
      }
    }

    @media (min-width: 721px) {
      .xqj-premium-login-mobile { display: none !important; }
    }

    @media (prefers-reduced-motion: reduce) {
      .xqj-illus-core,
      .xqj-illus-float,
      .auth-shot-panel,
      .xqj-mobile-content {
        animation: none !important;
      }
    }
    @media (max-width: 720px) {
      html[data-theme] body .login-card.auth-login-card.auth-shot-card {
        position: relative !important;
        isolation: isolate !important;
        background-image: url("/assets/auth-mobile-reference-light.png?v=20260525-clean3") !important;
        background-position: center top !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
      }
      html[data-theme="dark"] body .login-card.auth-login-card.auth-shot-card {
        background-image: url("/assets/auth-mobile-reference-dark.png?v=20260525-clean3") !important;
      }
      html[data-theme] body .login-card.auth-login-card.auth-shot-card::before {
        display: none !important;
        content: none !important;
      }
      html[data-theme] body .login-card.auth-login-card.auth-shot-card::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: clamp(360px, calc(100dvh - 430px), 500px) !important;
        bottom: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, #f7fafc 16%, #ffffff 58%) !important;
      }
      html[data-theme="dark"] body .login-card.auth-login-card.auth-shot-card::after {
        background: linear-gradient(180deg, rgba(15, 24, 35, 0) 0%, #111925 16%, #050a12 58%) !important;
      }
      html[data-theme] body .auth-shot-hero,
      html[data-theme] body .login-card.auth-login-card .auth-shot-hero {
        height: calc(100dvh - 372px) !important;
        min-height: 410px !important;
        max-height: 500px !important;
        background: transparent !important;
      }
      html[data-theme] body .xqj-premium-login-mobile,
      html[data-theme] body .xqj-mobile-content,
      html[data-theme] body .auth-shot-hero-copy,
      html[data-theme] body .auth-shot-room,
      html[data-theme] body .auth-shot-room-poster {
        display: none !important;
      }
      html[data-theme] body .auth-shot-panel {
        z-index: 2 !important;
        left: 14px !important;
        right: 14px !important;
        bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        overflow: visible !important;
      }
      html[data-theme="dark"] body .auth-shot-panel {
        border-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
      }
      html[data-theme] body .auth-shot-panel-body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 23px 18px 18px !important;
        border-radius: 30px !important;
        border: 1px solid rgba(225, 231, 242, .94) !important;
        background: #ffffff !important;
        box-shadow: 0 -10px 44px rgba(18, 28, 45, .10) !important;
        backdrop-filter: none !important;
        overflow: hidden !important;
      }
      html[data-theme="dark"] body .auth-shot-panel-body {
        border-color: rgba(120, 133, 154, .34) !important;
        background: linear-gradient(180deg, #181f2b 0%, #0d131d 100%) !important;
        box-shadow:
          0 -12px 46px rgba(0, 0, 0, .36),
          inset 0 1px 0 rgba(255, 255, 255, .06) !important;
      }
      html[data-theme] body .auth-shot-panel-body,
      html[data-theme] body .auth-shot-panel-primary,
      html[data-theme] body .auth-view-login,
      html[data-theme] body .auth-shot-form,
      html[data-theme] body .auth-shot-form-main,
      html[data-theme] body .auth-shot-panel-secondary {
        gap: 13px !important;
      }
      html[data-theme] body .auth-shot-tabs {
        height: 58px !important;
        min-height: 58px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background:
          linear-gradient(#176fff, #176fff) left bottom / 50% 3px no-repeat,
          linear-gradient(rgba(213, 221, 235, .9), rgba(213, 221, 235, .9)) left bottom / 100% 1px no-repeat !important;
      }
      html[data-theme] body .auth-shot-tabs:has(.auth-shot-tab:nth-child(2).active) {
        background:
          linear-gradient(#176fff, #176fff) right bottom / 50% 3px no-repeat,
          linear-gradient(rgba(213, 221, 235, .9), rgba(213, 221, 235, .9)) left bottom / 100% 1px no-repeat !important;
      }
      html[data-theme="dark"] body .auth-shot-tabs {
        background:
          linear-gradient(#2878ff, #2878ff) left bottom / 50% 3px no-repeat,
          linear-gradient(rgba(124, 139, 162, .34), rgba(124, 139, 162, .34)) left bottom / 100% 1px no-repeat !important;
      }
      html[data-theme="dark"] body .auth-shot-tabs:has(.auth-shot-tab:nth-child(2).active) {
        background:
          linear-gradient(#2878ff, #2878ff) right bottom / 50% 3px no-repeat,
          linear-gradient(rgba(124, 139, 162, .34), rgba(124, 139, 162, .34)) left bottom / 100% 1px no-repeat !important;
      }
      html[data-theme] body .auth-shot-tab,
      html[data-theme] body .auth-shot-tab.active {
        height: 55px !important;
        min-height: 55px !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #667085 !important;
        font-size: 16px !important;
        font-weight: 900 !important;
      }
      html[data-theme] body .auth-shot-tab.active {
        color: #176fff !important;
      }
      html[data-theme="dark"] body .auth-shot-tab {
        color: rgba(177, 187, 205, .72) !important;
      }
      html[data-theme="dark"] body .auth-shot-tab.active {
        color: #2878ff !important;
      }
      html[data-theme] body .auth-shot-field {
        height: 53px !important;
        min-height: 53px !important;
        border-radius: 18px !important;
        border-color: #dfe6f1 !important;
        background: rgba(255,255,255,.88) !important;
        color: #72809a !important;
      }
      html[data-theme="dark"] body .auth-shot-field {
        border-color: rgba(126, 139, 160, .42) !important;
        background: rgba(12, 18, 29, .32) !important;
        color: #9aa8bc !important;
      }
      html[data-theme="dark"] body .auth-shot-field svg {
        color: #9aa8bc !important;
      }
      html[data-theme="dark"] body .auth-shot-field input {
        color: #e5edf8 !important;
        -webkit-text-fill-color: #e5edf8 !important;
      }
      html[data-theme="dark"] body .auth-shot-field input::placeholder {
        color: #8e99aa !important;
        -webkit-text-fill-color: #8e99aa !important;
      }
      html[data-theme="dark"] body .auth-shot-field .auth-shot-inline-action,
      html[data-theme="dark"] body .auth-shot-eye-toggle {
        color: #2878ff !important;
      }
      html[data-theme="dark"] body .auth-shot-agreement {
        gap: 9px !important;
        color: rgba(174, 184, 201, .78) !important;
        font-size: 12px !important;
        letter-spacing: 0 !important;
      }
      html[data-theme="dark"] body .auth-shot-agreement input {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
        align-self: center !important;
        border-color: rgba(133, 146, 166, .64) !important;
        border-radius: 4px !important;
        background: rgba(13, 19, 29, .18) !important;
        transform: none !important;
      }
      html[data-theme="dark"] body .auth-shot-agreement input:checked {
        background: #4c74f5 !important;
        border-color: #4c74f5 !important;
      }
      html[data-theme="dark"] body .auth-shot-agreement a.auth-shot-link {
        color: #6ea0ff !important;
        font-weight: 650 !important;
      }
      html[data-theme="dark"] body .auth-shot-agreement span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        white-space: nowrap !important;
        word-spacing: 0 !important;
      }
      html[data-theme] body .auth-shot-submit {
        border-radius: 18px !important;
        background: linear-gradient(135deg,#2f74ff 0%, #0f66ff 100%) !important;
        box-shadow: 0 15px 28px rgba(25, 101, 255, .22) !important;
      }
      html[data-theme="dark"] body .auth-shot-submit {
        box-shadow: 0 16px 32px rgba(31, 111, 255, .30) !important;
      }
      html[data-theme] body .auth-shot-sso-button {
        border-color: #e1e6ee !important;
        background: rgba(255,255,255,.82) !important;
        color: #101828 !important;
      }
      html[data-theme="dark"] body .auth-shot-sso-button {
        border-color: rgba(111, 125, 148, .38) !important;
        background: rgba(14, 21, 32, .42) !important;
        color: #f4f7fb !important;
      }
      html[data-theme="dark"] body .auth-shot-sso-button span {
        color: #f4f7fb !important;
      }
      html[data-theme="dark"] body .auth-shot-footer,
      html[data-theme="dark"] body .auth-shot-footer span {
        color: rgba(151, 162, 180, .74) !important;
      }
      html[data-theme="dark"] body .auth-shot-footer button {
        color: #2878ff !important;
      }
      html[data-theme] body #field-login-password {
        grid-template-columns: 18px minmax(0, 1fr) auto !important;
        gap: 10px !important;
      }
      html[data-theme] body #field-login-password input {
        min-width: 0 !important;
        width: 100% !important;
        padding-right: 34px !important;
        overflow: visible !important;
        text-overflow: clip !important;
      }
      html[data-theme] body #field-login-password .auth-shot-eye-toggle {
        right: 86px !important;
        flex: 0 0 auto !important;
      }
      html[data-theme] body #field-login-password .auth-shot-inline-action {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        white-space: nowrap !important;
      }
      html[data-theme] body .auth-shot-field:focus-within,
      html[data-theme="light"] body .auth-shot-field:focus-within {
        background: #ffffff !important;
        border-color: #e1e6ee !important;
        box-shadow: none !important;
        color: #2e6af2 !important;
      }
      html[data-theme="dark"] body .auth-shot-field:focus-within {
        background: rgba(12, 18, 29, .40) !important;
        border-color: rgba(126, 139, 160, .46) !important;
        box-shadow: none !important;
        color: #9aa8bc !important;
      }
      html[data-theme] body .auth-shot-field:focus-within input,
      html[data-theme="light"] body .auth-shot-field:focus-within input {
        color: #0f172a !important;
        -webkit-text-fill-color: #0f172a !important;
      }
      html[data-theme="dark"] body .auth-shot-field:focus-within input {
        color: #e5edf8 !important;
        -webkit-text-fill-color: #e5edf8 !important;
      }
      html[data-theme] body .auth-shot-tab::before,
      html[data-theme] body .auth-shot-tab::after { display: none !important; content: none !important; }
      html[data-theme] body .auth-shot-submit.is-pending-agreement,
      html[data-theme] body .auth-shot-submit.is-pending-agreement:hover {
        opacity: 1 !important;
        filter: none !important;
        cursor: pointer !important;
      }
    }
    @media (max-width: 720px) and (max-height: 640px) {
      html {
        height: auto !important;
        min-height: 700px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
      }
      html[data-theme] body {
        height: auto !important;
        min-height: 700px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
      }
      html[data-theme] body #app,
      html[data-theme] body .login-overlay.auth-spotlight,
      html[data-theme] body .login-card.auth-login-card.auth-shot-card {
        height: 700px !important;
        min-height: 700px !important;
      }
    }
    @media (max-width: 720px) {
      html[data-theme] body .auth-shot-field input:placeholder-shown,
      html[data-theme] body .auth-shot-field input:focus:placeholder-shown,
      html[data-theme] body .auth-shot-field input:placeholder-shown::placeholder,
      html[data-theme] body .auth-shot-field input:focus::placeholder {
        color: #9299a5 !important;
        -webkit-text-fill-color: #9299a5 !important;
        font-weight: 400 !important;
        opacity: 1 !important;
      }
    }