.dingtalk-login-page{
  --auth-ink:#172033;
  --auth-muted:#596579;
  --auth-line:#d8e0eb;
  --auth-blue:#1677ff;
}
.dingtalk-login-page .login-brand{left:clamp(34px,5vw,72px);top:38px}
.dingtalk-login-page .login-brand img{width:126px;height:auto;display:block;filter:brightness(0) invert(1)}
.dingtalk-login-page .login-brand b{font-size:16px}
.dingtalk-login-page .visual-features span{position:relative;padding-left:17px}
.dingtalk-login-page .visual-features span::before{content:"";position:absolute;left:0;top:.43em;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.13)}
.dingtalk-login-card{width:min(440px,100%);padding:36px 38px;border-color:rgba(23,32,51,.1);box-shadow:0 24px 70px rgba(24,39,75,.1)}
.dingtalk-login-card .login-heading{margin:28px 0 22px}
.dingtalk-login-button{min-height:76px;display:grid;grid-template-columns:44px minmax(0,1fr) 22px;align-items:center;gap:13px;padding:13px 16px;border:1px solid rgba(22,119,255,.25);border-radius:12px;background:linear-gradient(180deg,#f2f8ff 0%,#eaf4ff 100%);color:var(--auth-ink);text-decoration:none;transition:border-color .18s,box-shadow .18s,transform .18s}
.dingtalk-login-button:hover{border-color:rgba(22,119,255,.52);box-shadow:0 10px 24px rgba(22,119,255,.13);transform:translateY(-1px)}
.dingtalk-login-button:focus-visible{outline:3px solid rgba(22,119,255,.22);outline-offset:2px}
.dingtalk-login-button[aria-busy="true"]{pointer-events:none;opacity:.72;transform:none}
.dingtalk-login-button>span:nth-child(2){min-width:0}
.dingtalk-login-button b,.dingtalk-login-button small{display:block}
.dingtalk-login-button b{font-size:15px;line-height:1.35;color:#125ec5}
.dingtalk-login-button small{margin-top:3px;font-size:11px;line-height:1.45;color:var(--auth-muted);white-space:normal}
.dingtalk-mark{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:var(--auth-blue);color:#fff;box-shadow:0 7px 18px rgba(22,119,255,.22)}
.dingtalk-mark svg{width:26px;height:26px;fill:currentColor}
.auth-arrow{width:19px;height:19px;fill:none;stroke:#667085;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.auth-status{margin:0 0 12px;padding:10px 12px;border-radius:9px;background:#eef6ff;color:#245c9e;font-size:12px;line-height:1.5}
.auth-status.is-error{background:#fff1f2;color:#b42318}
.auth-divider{display:flex;align-items:center;gap:11px;margin:22px 0 12px;color:#7a8595;font-size:11px}
.auth-divider::before,.auth-divider::after{content:"";height:1px;background:var(--auth-line);flex:1}
.emergency-login{border:1px solid var(--auth-line);border-radius:11px;background:#fbfcfe;overflow:hidden}
.emergency-login summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;color:#475467;font-size:12px;font-weight:600;cursor:pointer;list-style:none}
.emergency-login summary::-webkit-details-marker{display:none}
.emergency-login summary svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .18s}
.emergency-login[open] summary svg{transform:rotate(180deg)}
.emergency-login form{padding:2px 14px 14px;border-top:1px solid var(--auth-line)}
.emergency-login .emergency-submit{margin-top:16px;background:#fff}
.dingtalk-unavailable{padding:13px 15px;border:1px solid #efd7ac;border-radius:11px;background:#fff9ed;color:#7a4b00}
.dingtalk-unavailable b,.dingtalk-unavailable span{display:block}
.dingtalk-unavailable b{font-size:13px}.dingtalk-unavailable span{margin-top:3px;font-size:11px;color:#7a5b28}

@media(max-width:900px){
  .dingtalk-login-card{padding:32px 30px}
  .dingtalk-login-button,.emergency-login summary,.emergency-login .emergency-submit{min-height:48px}
}
@media(max-width:420px){
  .dingtalk-login-page .login-panel{padding:14px}
  .dingtalk-login-card{padding:26px 20px;border-radius:16px}
  .dingtalk-login-card .login-heading{margin:24px 0 18px}
  .dingtalk-login-button{grid-template-columns:42px minmax(0,1fr) 18px;padding:12px}
  .dingtalk-mark{width:42px;height:42px}
}