:root {
  color-scheme: light;
  --bg: #f2f6f5;
  --text: #203830;
  --muted: #61786d;
  --border: #e3ece8;
  --accent: #1b7d63;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  padding: 40px 24px;
  display: grid;
  place-items: center;
  background: #0b2520;
  background: radial-gradient(ellipse at 12% 12%, #254e42 0%, transparent 55%),
              radial-gradient(ellipse at 94% 94%, #224442 0%, transparent 50%),
              linear-gradient(135deg, #0a1e1a, #102f28 55%, #0c2428);
  color: var(--text);
  font: 14px/1.6 "Segoe UI", "Microsoft YaHei", sans-serif;
}
.login-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.login-backdrop::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, #04141166 100%); }
.ambient-light { position: absolute; display: block; width: min(900px, 80vw); height: min(900px, 100vh); border-radius: 50%; filter: blur(32px); }
.ambient-jade { top: -38%; left: -16%; background: radial-gradient(ellipse, #63c59d70 0%, #25916b38 36%, transparent 68%); animation: ambient-jade 24s ease-in-out infinite alternate; }
.ambient-teal { bottom: -42%; right: -16%; background: radial-gradient(ellipse, #5fb3b667 0%, #286c7233 36%, transparent 68%); animation: ambient-teal 28s ease-in-out infinite alternate; }
.ambient-gold { bottom: -50%; left: 6%; width: min(760px, 70vw); background: radial-gradient(ellipse, #b6a77a30 0%, #8a936c18 40%, transparent 68%); animation: ambient-gold 32s ease-in-out infinite alternate; }
@keyframes ambient-jade { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(18%, 16%, 0) scale(1.12); } }
@keyframes ambient-teal { from { transform: translate3d(0, 0, 0) scale(1.06); } to { transform: translate3d(-18%, -15%, 0) scale(.94); } }
@keyframes ambient-gold { from { transform: translate3d(0, 0, 0); opacity: .6; } to { transform: translate3d(30%, -18%, 0); opacity: 1; } }
.login-shell {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  width: min(1080px, 100%);
  min-height: 620px;
  overflow: hidden;
  border: 1px solid #d6f0e24d;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 32px 100px #020e0b66, 0 4px 18px #020e0b33;
}
.intro {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  flex-direction: column;
  padding: 44px 46px;
  background: radial-gradient(ellipse at 0% 0%, #295b48 0%, transparent 60%), linear-gradient(155deg, #163f33 15%, #10392f 55%, #0d2b29);
  color: #f3faf6;
}
.intro::before { content: ""; position: absolute; z-index: -1; width: 150%; height: 110%; left: -55%; top: -55%; background: radial-gradient(ellipse, #7dbd8652 0%, #53af7730 30%, transparent 65%); filter: blur(18px); pointer-events: none; animation: intro-light 22s ease-in-out infinite alternate; }
.intro::after { content: ""; position: absolute; z-index: -1; inset: -60% -20%; background: linear-gradient(110deg, transparent 38%, #a7d6b609 45%, #e4d8ab10 50%, #9ed6b009 55%, transparent 62%); pointer-events: none; animation: intro-sheen 26s ease-in-out infinite alternate; }
@keyframes intro-light { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(26%, 22%, 0); } }
@keyframes intro-sheen { from { transform: translate3d(-16%, -3%, 0) rotate(-12deg); } to { transform: translate3d(16%, 4%, 0) rotate(0deg); } }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 42px; height: 42px; border-radius: 12px; }
.brand strong { display: block; font-size: 17px; font-weight: 650; }
.brand small { display: block; margin-top: 2px; color: #abc6ba; font-size: 12px; }
.intro-copy { margin: auto 0; padding: 52px 0 36px; }
.eyebrow { color: #b5d6c7; font-size: 12px; letter-spacing: 1px; margin-bottom: 18px; }
.intro h2 { font-size: 38px; line-height: 1.4; font-weight: 650; letter-spacing: -.7px; }
.intro h2 span { color: #b5e3cd; }
.intro-description { max-width: 340px; margin-top: 18px; color: #b8cfc4; font-size: 13px; line-height: 1.9; }
.features { list-style: none; display: grid; gap: 14px; margin-top: 34px; }
.features li { display: flex; align-items: center; gap: 12px; color: #d7e7df; font-size: 13px; }
.feature-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #3e6655; border-radius: 9px; background: #254e3e; }
.feature-icon img { width: 17px; height: 17px; filter: brightness(0) invert(1); opacity: .85; }
.intro-foot { color: #a2beb0; font-size: 10px; letter-spacing: 1.6px; }
.intro-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.motion-toggle { flex-shrink: 0; min-height: 32px; padding: 5px 10px; border: 1px solid #b1d5bf3d; border-radius: 7px; background: #ecfff208; color: #c5dcce; font: inherit; font-size: 11px; cursor: pointer; }
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { color: #fff; background: #c2ebd51a; border-color: #b1d5bf80; }
.motion-toggle:focus-visible { outline: 2px solid #b5e3cd; outline-offset: 3px; }
.motion-toggle:disabled { cursor: default; color: #afc9bb; }
.motion-paused .ambient-light, .motion-paused .intro::before, .motion-paused .intro::after { animation-play-state: paused; }
.login-panel { display: flex; flex-direction: column; justify-content: center; padding: 58px 60px; background: linear-gradient(145deg, #fff 40%, #f2f8f4); }
.login-label { display: inline-block; align-self: flex-start; padding: 4px 10px; margin-bottom: 18px; background: #e5f3ed; color: #246c52; border-radius: 6px; font-size: 11px; font-weight: 600; }
.login-panel h1 { font-size: 30px; line-height: 1.4; font-weight: 650; letter-spacing: -.5px; }
.login-description { color: var(--muted); font-size: 13px; margin: 9px 0 32px; }
.field { margin-bottom: 20px; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #dce7e1; border-radius: 9px; color: var(--text); background: #f8faf9; font: inherit; transition: border-color .15s, box-shadow .15s; }
input::placeholder { color: #607568; font-size: 13px; }
input:hover { border-color: #b5cbbf; }
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px #1b7d631a; background: #fff; }
input:-webkit-autofill { -webkit-text-fill-color: var(--text); box-shadow: 0 0 0 1000px #f2f8f4 inset; }
.btn { width: 100%; min-height: 48px; padding: 12px 18px; margin-top: 6px; border: 1px solid transparent; border-radius: 9px; color: #fff; background: var(--accent); font: 600 14px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif; cursor: pointer; transition: background .15s, box-shadow .15s; }
.btn:hover { background: #16694f; box-shadow: 0 4px 12px #1b7d631f; }
.btn:focus-visible { outline: 3px solid #9bcab5; outline-offset: 3px; }
.btn:active { background: #145a45; }
.btn:disabled { background: #709b88; cursor: wait; box-shadow: none; }
.error { display: none; margin-bottom: 20px; padding: 11px 13px; border: 1px solid #f0d4cf; border-radius: 9px; color: #a2382e; background: #fff3f0; font-size: 13px; overflow-wrap: anywhere; }
.error.show { display: block; }
.login-help { margin-top: 22px; text-align: center; color: var(--muted); font-size: 12px; }
.login-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; }
.maintenance-hint{font-size:11px;color:var(--muted);margin:0 0 18px}
@media (max-width: 960px) {
  .intro { padding: 36px 30px; }
  .login-panel { padding: 44px 36px; }
  .intro h2 { font-size: 32px; }
}
@media (max-width: 720px) {
  body { padding: 20px 16px; }
  .login-shell { grid-template-columns: 1fr; min-height: 0; max-width: 440px; border-radius: 18px; }
  .intro { padding: 26px; }
  .ambient-light { width: 110vw; height: 80vh; filter: blur(20px); }
  .ambient-gold { display: none; }
  .brand strong { font-size: 16px; }
  .brand small { font-size: 11px; }
  .intro-copy { padding: 28px 0 0; }
  .intro h2 { font-size: 25px; }
  .intro h2 br { display: none; }
  .intro h2 span { margin-left: 6px; }
  .eyebrow, .features, .intro-foot { display: none; }
  .intro-footer { margin-top: 16px; justify-content: flex-end; }
  .intro-description { font-size: 12px; margin-top: 9px; }
  .login-panel { padding: 30px 26px; }
  .login-label { margin-bottom: 12px; }
  .login-panel h1 { font-size: 26px; }
  .login-description { margin-bottom: 25px; }
  input { font-size: 16px; }
  .login-footer { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.wecom-login-entry .btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px}.wecom-login-entry img{border-radius:5px;background:white;padding:2px}.wecom-login-hint{margin:10px 0 0;text-align:center;font-size:12px;color:var(--muted)}

.wecom-qr-box{display:flex;justify-content:center;min-height:40px;max-width:100%}
.wecom-qr-box iframe{border:0;display:block;max-width:100%;background:white}
.wecom-qr-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:8px}
.wecom-qr-link{border:0;background:transparent;color:#187d65;font:inherit;font-size:12px;padding:7px;cursor:pointer}
.wecom-qr-link:hover{text-decoration:underline}.wecom-qr-link:disabled{opacity:.55;cursor:wait}
.wecom-qr-link:focus-visible{outline:2px solid #158269;outline-offset:2px}

/* Compact login surface; keep the provider frame complete and proportional. */
body{padding:24px}
.login-shell{min-height:600px}
.login-panel{padding:30px 48px}
.login-label{margin-bottom:10px}
.login-description{margin-bottom:12px}
.wecom-login-entry{margin:8px 0 12px}
.wecom-qr-box{position:relative;width:246px;height:328px;min-height:0;margin:0 auto}
.wecom-qr-box iframe{position:absolute;left:0;top:0;width:300px;max-width:none;height:400px;transform:scale(.82);transform-origin:top left}
.wecom-qr-actions{margin-top:4px}
.wecom-login-hint:empty{display:none}
.login-panel .login-footer{margin-top:16px;padding-top:14px;align-items:center}
.maintenance-entry{border:0;background:transparent;color:var(--muted);font:inherit;cursor:pointer;padding:4px 0;white-space:nowrap}
.maintenance-entry:hover{color:var(--accent);text-decoration:underline}
.maintenance-entry:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.maintenance-dialog{position:fixed;inset:0;margin:auto;width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--border);border-radius:16px;padding:28px;background:#fff;color:var(--text);box-shadow:0 24px 80px #041a1755}
.maintenance-dialog::backdrop{background:#041b18a6;backdrop-filter:blur(3px)}
.maintenance-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.maintenance-header h2{font-size:22px}
.maintenance-close{border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:26px;line-height:1;width:36px;height:36px;cursor:pointer}
.maintenance-close:hover{background:#eef5f1}.maintenance-close:focus-visible{outline:2px solid var(--accent)}
@media(max-width:960px){.login-panel{padding:28px}.intro-copy{padding:32px 0 28px}}
@media(max-width:720px){body{padding:16px}.login-panel{padding:24px}.login-shell{min-height:0}.maintenance-dialog{padding:24px}}

/* Decorative light stays outside the QR frame and all input hit areas. */
@property --ring-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
.brand-mark{display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid #d5e9ba66;border-radius:12px;background:linear-gradient(145deg,#71977a,#245b48 65%,#194537);box-shadow:inset 0 1px 0 #f6f1c64d,0 4px 18px #001c2440}
.brand-mark svg{width:30px;height:30px;fill:#f2e5af;filter:drop-shadow(0 1px 4px #e4dc9a55)}
.login-shell{isolation:isolate}
.login-shell::after{content:"";position:absolute;z-index:4;inset:0;border-radius:inherit;padding:3px;background:conic-gradient(from var(--ring-angle),transparent 0deg,#65efb988 35deg,#a7ffcd 65deg,#fff0ae 90deg,transparent 135deg,transparent 200deg,#6debd6cc 235deg,#d9ffe7 255deg,transparent 295deg);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;animation:login-orbit 6s linear infinite}
@keyframes login-orbit{to{--ring-angle:360deg}}
.pointer-glow{position:absolute;inset:0;background:radial-gradient(440px circle at var(--pointer-x,50%) var(--pointer-y,40%),#9df3c84d,transparent 75%);opacity:0;transition:opacity .5s;pointer-events:none}
.pointer-active .pointer-glow{opacity:1}
.ambient-dots{position:absolute;inset:-55px;opacity:.7;background-image:radial-gradient(circle,#e3efb8 1.5px,transparent 3px),radial-gradient(circle,#8ae5bd 1.5px,transparent 3px);background-size:127px 131px,193px 179px;background-position:18px 25px,120px 88px;mask-image:radial-gradient(ellipse,transparent 25%,#000 90%);animation:login-drift 14s ease-in-out infinite alternate;pointer-events:none}
@keyframes login-drift{to{transform:translate3d(38px,-48px,0);opacity:1}}
.intro{--intro-x:50%;--intro-y:40%}
.intro .brand-mark{transition:box-shadow .35s,border-color .35s}
.intro:hover .brand-mark{border-color:#e6e3b39c;box-shadow:inset 0 1px 0 #f6f1c64d,0 0 24px #add3a333}
.intro-copy{position:relative}
.intro-copy::before{content:"";position:absolute;inset:-28px;z-index:-1;border-radius:50%;background:radial-gradient(300px circle at var(--intro-x) var(--intro-y),#b8ef9e38,transparent 80%);pointer-events:none}
.motion-paused .login-shell::after,.motion-paused .ambient-dots{animation-play-state:paused}
.motion-paused .pointer-glow{opacity:0}.motion-paused .intro-copy::before{background:none}
@media(pointer:coarse){.pointer-glow{display:none}.ambient-dots{opacity:.25}}
@media(prefers-reduced-motion:reduce){.pointer-glow,.ambient-dots,.intro-copy::before{display:none}.login-shell::after{opacity:.35}}

/* Stronger depth and ambient movement; the QR remains on its opaque panel. */
.login-shell{box-shadow:0 0 34px #75d8b345,0 0 100px #28a78124,0 32px 100px #020e0b66}
.ambient-jade{background:radial-gradient(ellipse,#6be8aeaa 0%,#27aa7770 36%,transparent 68%);animation-duration:14s}
.ambient-teal{background:radial-gradient(ellipse,#78d8d19c 0%,#258d865c 36%,transparent 68%);animation-duration:17s}
.ambient-gold{background:radial-gradient(ellipse,#ddcc8c55 0%,#9ba65d38 40%,transparent 68%);animation-duration:20s}
.brand-mark{box-shadow:inset 0 1px 0 #fff4cb80,0 0 20px #c2e6a65c}
@media(pointer:coarse){.ambient-dots{opacity:.45}}