:root { --web-accent-primary:#3971d3; --web-accent-strong:#315fb8; --web-accent-border:#dce4ee; --login-tint:#f1f6ff; --login-art-line:#bfd0ec; --login-art-pale:#e2ecfb; }
body { min-width:760px; background:radial-gradient(ellipse at 22% 45%,#eef4fc88,transparent 48%),#f7f9fd; }
/* The shared login window uses one blue theme for every destination. */
body.personal-web .web-login-quota-dialog[data-product="group"] { --quota-accent:#3971d3; --web-accent-primary:#3971d3; }
[hidden] { display:none !important; }
button,input { font:inherit; }
button { cursor:pointer; }
button:disabled { opacity:.55; cursor:default; }
input:focus-visible { outline:none; }
button:focus-visible { outline:none; filter:brightness(.96); }
.portal-shell { width:min(1160px,calc(100% - 112px)); }
.login-main { width:100%; padding:28px 0 42px; }
.login-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center; gap:80px; width:100%; margin:0 auto; }
html:not([data-maintenance-pending]) .login-layout { animation:login-layout-enter .56s cubic-bezier(.22,1,.36,1) both; }
.login-visual { display:grid; place-items:center; min-height:440px; }
.login-devices { display:block; width:100%; max-width:500px; overflow:visible; }
/* C2 at 3x: preserve the preview's phase relationships in a 2.67s loop. */
.login-devices .login-motion-animated { animation-duration:calc(8s / 3); animation-timing-function:cubic-bezier(.4,0,.35,1); animation-iteration-count:infinite; animation-fill-mode:both; transform-box:fill-box; transform-origin:center; }
.login-motion-haze { animation-name:login-motion-haze; }
.login-motion-monitor { animation-name:login-motion-monitor; }
.login-motion-phone { animation-name:login-motion-phone; }
.login-motion-bridge-light { animation-name:login-motion-bridge; }
.login-devices .login-motion-outgoing,.login-devices .login-motion-incoming { transform-box:view-box; transform-origin:0 0; }
.login-motion-outgoing { animation-name:login-motion-outgoing; }
.login-motion-incoming { animation-name:login-motion-incoming; }
.login-motion-left-port { animation-name:login-motion-left-port; }
.login-motion-right-port { animation-name:login-motion-right-port; }
.login-motion-screen-light { animation-name:login-motion-desktop-answer; }
.login-motion-phone-light { animation-name:login-motion-phone-answer; animation-delay:-.1s; }
.login-content { position:relative; min-width:0; width:100%; max-width:420px; justify-self:center; padding:12px 0; }
.login-content::before { content:""; position:absolute; top:0; bottom:0; left:-40px; width:1px; background:#d9e3f1; }
.login-intro { text-align:center; }
.login-intro h1 { font-size:38px; line-height:1.3; letter-spacing:-.035em; }
.login-intro .hero-desc { margin-top:12px; font-size:13px; }
.login-card { margin-top:24px; text-align:center; font-size:14px; line-height:1.7; }
.login-qr-filter { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
.login-qr { position:relative; width:218px; height:218px; display:grid; place-items:center; margin:0 auto; border:1px solid #dce4ee; border-radius:18px; overflow:hidden; background:#f8fafc; box-shadow:0 10px 28px #2853a60a; }
/* Keep the same blurred backdrop through consent, loading and the QR reveal. */
.login-qr::before { content:""; position:absolute; inset:22px; border-radius:16px; pointer-events:none; background:linear-gradient(90deg,#3971d3eb 18%,transparent 18% 32%,#3971d3eb 32% 44%,transparent 44% 58%,#3971d3eb 58% 72%,transparent 72%),linear-gradient(0deg,transparent 16%,#3971d3eb 16% 26%,transparent 26% 42%,#3971d3eb 42% 54%,transparent 54% 68%,#3971d3eb 68% 78%,transparent 78%); background-size:34px 34px; filter:blur(8px); opacity:.34; transform:scale(.96); }
.login-qr:has(img:not([hidden]))::before { opacity:0; transition:opacity .7s ease; }
.login-qr-image { position:relative; display:grid; place-items:center; }
.login-qr-image:has(> img:not([hidden])) { animation:login-qr-reveal .7s cubic-bezier(.22,.61,.36,1) both; }
.login-qr img { width:200px; height:200px; object-fit:contain; filter:url(#officialAccountLoginQrTint); }
.login-qr-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:transparent; }
.login-spinner { width:34px; height:34px; box-sizing:border-box; border:3px solid #fff; border-top-color:var(--web-accent-primary); border-radius:50%; animation:login-qr-spin .8s linear infinite; }
.login-loading-text { color:#6b7280; font-size:13px; line-height:1.5; }
.login-qr p { position:absolute; inset:0; display:grid; place-items:center; margin:0; padding:16px; background:transparent; color:#4c6289; font-size:13px; }
.login-qr-controls { display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s cubic-bezier(.22,1,.36,1); }
.login-qr-controls-inner { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:0; overflow:hidden; padding:0; transition:padding .42s cubic-bezier(.22,1,.36,1); }
.login-qr-controls:has(.login-status:not(:empty)),.login-qr-controls:has(.login-refresh:not([hidden])) { grid-template-rows:1fr; }
.login-qr-controls:has(.login-status:not(:empty)) > .login-qr-controls-inner,.login-qr-controls:has(.login-refresh:not([hidden])) > .login-qr-controls-inner { padding:14px 0 20px; }
#refreshPage:not([hidden]) { animation:login-refresh-enter .32s cubic-bezier(.22,.61,.36,1) .1s both; }
.login-options { display:grid; grid-template-columns:min-content; justify-content:center; justify-items:center; width:100%; margin:0 auto; padding-top:18px; }
.login-social-entry { display:grid; justify-items:center; gap:12px; width:100%; margin:0 0 14px; }
.login-social-title { display:flex; align-items:center; gap:12px; width:100%; margin:0; color:#69758a; font-size:14px; font-weight:600; white-space:nowrap; }
.login-social-title::before,.login-social-title::after { content:""; flex:1; height:1px; background:#d8e0ea; }
.login-social-icons { display:flex; align-items:center; justify-content:center; gap:18px; }
.login-social-icon-button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #dce2e9; border-radius:50%; background:#fff; box-shadow:0 3px 10px #1d31400a; }
.login-social-icon-button:hover { border-color:#b7c4d2; background:#fff; }
.login-social-icon-button:active { border-color:#9aabbc; background:#f8fafc; }
.login-wechat-icon { display:block; width:24px; height:21px; background:url("./wechat-pc-official.jpg") -37px -23px / 99px 66px no-repeat; }
.login-phone-authorize svg,.login-email-authorize svg,.login-key-authorize svg { width:20px; height:20px; stroke-width:2.25; }
.login-phone-authorize svg { color:#2384cb; }
.login-email-authorize svg { color:#df8727; }
.login-key-authorize svg { color:#7658c9; }
.login-consent-modal,.login-key-modal,.login-contact-modal { z-index:60; }
.login-consent-card { width:min(100%,440px); }
.login-consent-card .portal-modal-title { margin:0; font-size:22px; }
.login-consent-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 16px; margin:20px 0; font-size:14px; }
.login-consent-links a { color:var(--web-accent-primary); text-underline-offset:3px; }
.login-consent-links a:hover { text-decoration:underline; }
.login-key-card,.login-contact-card { width:min(100%,440px); }
.login-key-card .portal-modal-title,.login-contact-card .portal-modal-title { margin:0 0 20px; font-size:22px; }
.login-consent-card .portal-modal-title,.login-key-card .portal-modal-title,.login-contact-card .portal-modal-title { text-align:center; }
.login-key-input { display:block; width:100%; min-height:44px; padding:9px 12px; border:1px solid var(--ui-border-default); border-radius:10px; background:#fff; color:#172033; font-size:14px; }
.login-key-input:hover,.login-key-input:focus,.login-key-input:focus-visible { border-color:var(--ui-border-default); outline:none; box-shadow:none; }
.login-key-error { margin:12px 0 0; color:#b42318; font-size:13px; line-height:1.6; text-align:left; }
.login-key-error:empty { display:none; }
.login-contact-fields { display:grid; grid-template-columns:minmax(0,1fr) 116px; gap:12px 8px; }
.login-contact-field { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,148px) minmax(0,1fr); gap:8px; }
.login-contact-fields > #loginContactCodeInput { grid-column:1; }
.login-contact-fields > #loginContactSend { grid-column:2; }
.login-contact-fields.is-email > #loginEmailInput { grid-column:1; grid-row:1; }
.login-contact-fields.is-email > #loginContactSend { grid-row:1; }
.login-contact-fields.is-email > #loginContactCodeInput { grid-column:1/-1; grid-row:2; }
.login-contact-send { min-height:44px; padding:9px 10px; border:1px solid var(--web-accent-primary); border-radius:10px; background:#fff; color:var(--web-accent-primary); font-size:13px; font-weight:650; white-space:nowrap; }
.login-contact-send:hover { border-color:var(--web-accent-strong); background:#f1f6ff; color:var(--web-accent-strong); }
.login-contact-card.is-country-open { overflow:visible; }
.login-country-picker { position:relative; min-width:0; }
.login-country-trigger { display:flex; align-items:center; justify-content:space-between; gap:4px; width:100%; min-height:44px; padding:9px 10px; border:1px solid var(--ui-border-default); border-radius:10px; background:#fff; color:#172033; font-size:13px; white-space:nowrap; }
.login-country-trigger:hover,.login-country-trigger:focus,.login-country-trigger:focus-visible { border-color:var(--ui-border-default); outline:none; box-shadow:none; }
.login-country-trigger svg { flex:none; width:15px; height:15px; color:#66738a; }
.login-country-options { position:absolute; z-index:1; top:calc(100% + 6px); left:0; width:max(100%,200px); max-height:min(260px,45svh); overflow:auto; padding:5px; border:1px solid var(--ui-border-default); border-radius:10px; background:#fff; box-shadow:0 16px 36px #17203326; }
.login-country-options button { display:block; width:100%; min-height:38px; padding:8px 10px; border:0; border-radius:7px; background:#fff; color:#172033; font-size:13px; text-align:left; white-space:nowrap; }
.login-country-options button:hover { background:#f3f6fb; }
.login-consent-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:20px; }
.login-consent-actions button { min-height:44px; padding:9px 12px; border:1px solid var(--ui-border-default); border-radius:10px; background:#fff; color:#52627d; font-size:14px; }
.login-consent-actions button:hover { background:#f7f9fd; }
.login-consent-actions .login-consent-confirm { border-color:var(--web-accent-primary); background:var(--web-accent-primary); color:#fff; font-weight:650; }
.login-consent-actions .login-consent-confirm:hover { border-color:var(--web-accent-strong); background:var(--web-accent-strong); }
.login-agreement { display:flex; align-items:flex-start; gap:8px; width:100%; text-align:left; font-size:13px; font-weight:500; color:#66738a; --ui-checkbox-margin:2px 0 0; }
.login-agreement a,.login-legal-links a { color:var(--web-accent-primary); }
.login-agreement a,.login-legal-links a,.policy-links a { white-space:nowrap; text-underline-offset:3px; text-decoration-thickness:1px; }
.login-agreement a:hover,.login-agreement a:focus-visible,.login-legal-links a:hover,.login-legal-links a:focus-visible,.policy-links a:hover,.policy-links a:focus-visible { text-decoration-line:underline; }
input[type="checkbox"] { flex:none; width:14px; height:14px; margin:3px 0 0; accent-color:var(--web-accent-primary); }
.login-trust { display:flex; align-items:center; justify-content:center; gap:8px; margin:0 0 14px; color:#66738a; font-size:13px; font-weight:500; text-align:center; white-space:nowrap; }
.login-trust input { margin:0; }
.login-link { margin-top:14px; padding:2px 6px; background:transparent; border:0; color:var(--web-accent-primary); font-size:14px; }
.login-refresh { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:7px 16px; border:1px solid var(--web-accent-primary); border-radius:10px; background:var(--web-accent-primary); color:#fff; box-shadow:0 6px 16px #3971d31c; font-size:13px; font-weight:650; }
.login-refresh:hover { background:var(--web-accent-strong); border-color:var(--web-accent-strong); }
.login-refresh svg { width:16px; height:16px; stroke-width:2.4; }
.login-status { margin:0; text-align:center; color:var(--web-accent-primary); font-size:12px; }
.login-status:empty { display:none; }
.login-entry-actions { display:flex; align-items:center; justify-content:center; gap:16px; }
.login-entry-actions > .login-link { margin:0; }
.login-legal { text-align:left; }
.login-legal-links { font-size:13px; line-height:2; }
@keyframes login-qr-spin { to { transform:rotate(360deg); } }
@keyframes login-layout-enter { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes login-qr-reveal { from { opacity:0; filter:blur(9px); transform:scale(1.025); } to { opacity:1; filter:blur(0); transform:scale(1); } }
@keyframes login-refresh-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes login-motion-haze { 0%,12%,100% { opacity:.35; transform:scale(.92); } 45%,57% { opacity:1; transform:scale(1.06); } }
@keyframes login-motion-monitor { 0%,8%,100% { transform:translateX(-3px); } 34% { transform:translateX(7px); } 48%,61% { transform:translateX(5px); } 84% { transform:translateX(-4px); } }
@keyframes login-motion-phone { 0%,12%,100% { transform:translateX(3px); } 38% { transform:translateX(-7px); } 52%,65% { transform:translateX(-5px); } 88% { transform:translateX(4px); } }
@keyframes login-motion-bridge { 0%,12%,100% { opacity:.18; transform:scaleY(.7); } 35%,65% { opacity:.65; transform:scaleY(1); } }
@keyframes login-motion-outgoing { 0%,10% { opacity:0; transform:translate(0,0); } 17% { opacity:1; } 34% { opacity:1; transform:translate(124px,0); } 43%,100% { opacity:0; transform:translate(124px,0); } }
@keyframes login-motion-incoming { 0%,54% { opacity:0; transform:translate(0,0); } 61% { opacity:.8; } 78% { opacity:.8; transform:translate(-124px,0); } 87%,100% { opacity:0; transform:translate(-124px,0); } }
@keyframes login-motion-left-port { 0%,60%,100% { opacity:.3; transform:scale(.8); } 78%,86% { opacity:.8; transform:scale(1.15); } }
@keyframes login-motion-right-port { 0%,17%,57%,100% { opacity:.3; transform:scale(.8); } 34%,42% { opacity:.8; transform:scale(1.15); } }
@keyframes login-motion-desktop-answer { 0%,62%,100% { opacity:.6; } 78%,90% { opacity:1; } }
@keyframes login-motion-phone-answer { 0%,15%,65%,100% { opacity:.6; } 34%,46% { opacity:1; } }
@media (max-width:1100px) { .portal-shell { width:calc(100% - 72px); } .login-layout { gap:46px; } .login-content::before { left:-23px; } .login-intro h1 { font-size:36px; } }
/* The shared sign-in page also works on phones; workspace layouts are separate. */
@media (max-width:760px) {
  body { min-width:0; }
  .portal-modal { align-items:center; }
  .portal-shell {
    width:calc(100% - 40px);
    gap:32px;
    padding:104px 0 calc(20px + env(safe-area-inset-bottom));
  }
  .login-main { align-content:center; padding:0; }
  .login-layout { grid-template-columns:minmax(0,1fr); gap:0; }
  .login-visual,.login-content::before { display:none; }
  .login-content { max-width:400px; padding:0; }
  .login-intro h1 { font-size:30px; line-height:1.35; letter-spacing:-.025em; }
  .login-intro .hero-desc { margin-top:10px; font-size:14px; }
  .login-card { margin-top:24px; }
  .login-qr { width:226px; height:226px; max-width:100%; }
  .login-qr img { width:208px; height:208px; max-width:100%; }
  .login-options { grid-template-columns:minmax(0,1fr); justify-items:stretch; padding-top:16px; }
  .login-trust,.login-agreement { min-height:44px; font-size:13px; line-height:1.8; cursor:pointer; }
  .login-trust { justify-content:flex-start; margin:0 0 8px; text-align:left; white-space:normal; }
  .login-agreement { padding:6px 0; }
  .login-options input[type="checkbox"] { width:18px; height:18px; }
  .login-agreement input { margin-top:3px; }
  .login-agreement span { min-width:0; }
  .login-consent-card,.login-key-card,.login-contact-card { width:min(100%,440px); }
  .login-status { max-width:100%; font-size:13px; overflow-wrap:anywhere; }
  .login-refresh,.login-link { min-height:44px; font-size:14px; }
  .policy-links a,.filing-link { display:inline-flex; align-items:center; min-height:36px; }
  body.personal-web .standard-action-card {
    max-width:calc(100vw - 32px);
    max-height:calc(100svh - 32px);
    max-height:calc(100dvh - 32px);
    padding:58px 22px 24px !important;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  body.personal-web .standard-action-card .standard-dual-actions.standard-dual-actions > button:not([hidden]):not(.is-hidden) { min-height:48px !important; }
}
@media (max-width:380px) {
  .portal-shell { width:calc(100% - 32px); padding-top:94px; gap:24px; }
  .login-intro h1 { font-size:28px; }
  .login-card { margin-top:20px; }
  .login-qr { width:218px; height:218px; }
  .login-qr img { width:200px; height:200px; }
  .login-social-icons { gap:14px; }
  .login-contact-field { grid-template-columns:minmax(0,136px) minmax(0,1fr); }
  .login-country-options { width:min(200px,calc(100vw - 64px)); }
  body.personal-web .standard-action-card { padding-right:18px !important; padding-left:18px !important; }
  body.personal-web .standard-action-card .standard-dual-actions { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { .login-layout,.login-devices *,.login-qr-image,#refreshPage { animation:none!important; } .login-qr::before,.login-qr-controls,.login-qr-controls-inner { transition:none!important; } .login-motion-haze { opacity:.6; } .login-motion-bridge-light,.login-motion-left-port,.login-motion-right-port { opacity:.4; } .login-motion-outgoing,.login-motion-incoming { opacity:0; } }