.login-entry { min-height: 100vh; background: #f5f5f7;
 --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
 --font-display: var(--font-ui);
}
.login-entry .shell { width: calc(100% - 48px); min-height: 100vh; margin: 0 auto; padding: 32px 0; display: flex; align-items: center; box-sizing: border-box; }
.login-entry .app-version-badge { display: none; }
.login-entry-layout { display: grid; grid-template-columns: minmax(364px, 1fr) minmax(0, 3fr); width: 100%; align-items: center; }
.login-entry-code { text-align: center; min-width: 0; padding: 16px 24px 16px 0; box-sizing: border-box; }
.login-entry-brand { color: #6e6e73; font-size: 14px; margin: 0 0 12px; }
.login-entry h1 { font-size: clamp(24px, 2.5vw, 32px); letter-spacing: -.04em; margin: 0 0 12px; }
.login-entry h2 { font-size: 26px; margin: 0 0 20px; letter-spacing: -.03em; }
.login-entry-caption { color: #6e6e73; font-size: 14px; line-height: 1.7; }
.login-method-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 5px; margin: 20px 0 16px; border: 1px solid #e1e1e6; border-radius: 14px; background: #eaeaee; }
.login-entry .login-method-choice { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 4px; border-radius: 10px; color: #515154; font-size: 13px; line-height: 1.5; text-decoration: none; }
.login-entry .login-method-choice[aria-current="page"] { background: #fff; color: #0066cc; font-weight: 600; box-shadow: 0 2px 8px #1d1d1f10; }
.login-entry .login-method-choice:hover { color: #0066cc; }
.login-entry-password-form { display: grid; gap: 18px; margin: 24px 0 0; text-align: left; }
.login-entry-password-form label { display: grid; gap: 8px; min-width: 0; color: #515154; font-size: 14px; }
.login-entry-password-form input { width: 100%; min-width: 0; min-height: 46px; padding: 12px; box-sizing: border-box; border: 1px solid #d2d2d7; border-radius: 10px; background: #fff; color: #1d1d1f; font: inherit; }
.login-entry-password-form input:focus-visible { outline: 3px solid #0071e3; outline-offset: 2px; }
.login-entry-password-form .button { width: 100%; min-height: 46px; box-sizing: border-box; }
.login-entry-account-links { margin-top: 20px; font-size: 13px; }
.login-entry-account-links a { color: #6e6e73; text-decoration: none; }
.login-entry .login-scan-code { width: 340px; max-width: 100%; min-width: 0; min-height: 0; aspect-ratio: 1; box-sizing: border-box; padding: 10px; margin: 24px auto 12px; border: 1px solid #e5e5ea; border-radius: 20px; background: white; display: grid; place-items: center; }
.login-entry .login-scan-code img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: pixelated; }
.login-entry .login-scan-code [hidden] { display: none; }
.login-entry .login-scan-status { font-size: 13px; line-height: 1.6; min-height: 22px; margin: 0; }
.login-entry-refresh { border: 0; background: transparent; color: #0066cc; font: inherit; font-size: 13px; padding: 10px; cursor: pointer; }
.login-entry-tutorial { min-width: 0; text-align: center; padding-left: 32px; border-left: 1px solid #e5e5ea; box-sizing: border-box; }
.login-entry-player { max-width: 1200px; margin: 0 auto; }
.login-entry-slide-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; gap: 12px; }
.login-entry-slide-heading h3 { font-size: 17px; margin: 0; }
.login-entry-slide-heading span { color: #6e6e73; font-size: 13px; font-variant-numeric: tabular-nums; }
.login-entry-slide-image { display: block; width: 100%; height: min(52vw, 58vh); min-height: 240px; object-fit: contain; border-radius: 16px; background: #fff; box-shadow: 0 8px 32px #1d1d1f08; }
body.login-entry main .login-entry-player p.login-entry-subtitle { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.7; min-height: 3.4em; margin: 18px auto 14px; max-width: 50em; color: #1d1d1f; }
.login-entry-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.login-entry-controls button { border: 1px solid #dcdce1; border-radius: 999px; background: white; color: #1d1d1f; padding: 9px 18px; font: inherit; font-size: 14px; cursor: pointer; min-height: 40px; }
.login-entry-controls .login-entry-play { border-color: #0071e3; background: #0071e3; color: white; min-width: 108px; }
.login-entry-controls button:disabled { opacity: .4; cursor: default; }
.login-entry-slide-status { color: #6e6e73; font-size: 12px; min-height: 1.5em; line-height: 1.5; margin: 8px 0 0; }
.login-entry-guide { display: inline-block; font-size: 12px; color: #6e6e73; text-decoration: underline; text-underline-offset: 3px; margin-top: 4px; }
.login-entry a:focus-visible, .login-entry button:focus-visible { outline: 3px solid #0071e3; outline-offset: 4px; }
@media (max-width: 760px) {
 .login-entry .shell { width: calc(100% - 32px); padding: 24px 0; }
 .login-entry-layout { grid-template-columns: 1fr; gap: 32px; }
 .login-entry-code { padding: 0; }
 .login-entry .login-scan-code { width: 340px; }
 .login-entry-tutorial { border-left: 0; padding-left: 0; }
 .login-entry-slide-image { height: auto; min-height: 0; aspect-ratio: 16/10; }
 .login-entry-controls { gap: 6px; }
 .login-entry-controls button { padding: 9px 13px; }
}

.login-showcase{min-width:0;padding-left:32px;border-left:1px solid #e5e5ea}.showcase-stage{height:min(76vh,850px);position:relative}.showcase-stage figure{position:absolute;inset:0;margin:0;display:grid;grid-template-rows:minmax(0,1fr) 24px;justify-items:center;gap:16px;min-height:0}.showcase-stage [hidden]{display:none}.showcase-stage img{display:block;width:100%;height:100%;min-height:0;object-fit:contain;border-radius:12px}.showcase-stage figcaption{font-size:16px;color:#6e6e73}.showcase-tabs{display:flex;justify-content:center;gap:8px;margin-top:16px}.showcase-tabs button{font:inherit;border:0;border-radius:20px;padding:10px 16px;background:#e9e9ed;color:#515154;cursor:pointer}.showcase-tabs button[aria-pressed=true]{color:#fff;background:#0071e3}@media(max-width:760px){.login-showcase{padding:0;border:0}.showcase-stage{height:60vh;min-height:340px}.showcase-tabs button{padding:9px 12px;font-size:14px}}

.showcase-tabs{flex-wrap:wrap}.showcase-tabs [data-showcase-toggle]{background:transparent;color:#6e6e73;border:1px solid #d2d2d7}

.login-official-entry{position:absolute;top:22px;right:28px;z-index:20;display:inline-flex;align-items:center;gap:8px;padding:9px 17px;border:1px solid #1d1d1f20;border-radius:999px;background:#ffffffdc;color:#414144;text-decoration:none;font-size:14px}.login-official-entry:hover{background:#fff;border-color:#1d1d1f60}.login-official-entry:focus-visible{outline:3px solid #555;outline-offset:4px}@media(max-width:760px){.login-official-entry{top:14px;right:16px;padding:7px 12px;font-size:12px}.login-entry .login-official-entry + .login-entry-layout .login-entry-code{padding-top:48px}}
/* 固定画框与交叉淡化；原图等比例容纳，余白由相近背景补齐。 */
.showcase-stage{height:min(72vh,780px);border-radius:24px;background:#f2f3f6;overflow:hidden;box-shadow:0 18px 50px #18243a0b}
.showcase-stage figure{inset:18px;opacity:0;visibility:hidden;transition:opacity .55s cubic-bezier(.22,.61,.36,1),visibility .55s;pointer-events:none}
.showcase-stage figure.is-current{opacity:1;visibility:visible;z-index:1}.showcase-stage img{width:100%;height:100%;object-fit:contain;background:#f2f3f6;border-radius:10px}.showcase-stage figcaption{width:100%;text-align:center}
@media(prefers-reduced-motion:reduce){.showcase-stage figure{transition:none}}
@media(max-width:760px){.showcase-stage{height:56vh;min-height:320px}.showcase-stage figure{inset:12px}}

/* 分段进度替代文字按钮；24px 点击区域内显示 4px 细条。 */
.showcase-progress{display:flex;justify-content:center;gap:8px;max-width:300px;margin:16px auto 0}
.login-entry .showcase-progress button{display:block;flex:1;min-width:0;height:28px;margin:0;padding:12px 0;border:0;border-radius:0;background:transparent;box-shadow:none;cursor:pointer}
.showcase-progress-track{display:block;height:4px;overflow:hidden;border-radius:8px;background:#d9dbe2}
.showcase-progress [data-showcase-fill]{display:block;width:100%;height:100%;background:#6e7787;transform:scaleX(0);transform-origin:left center;border-radius:inherit}
.showcase-progress button[aria-pressed=true] [data-showcase-fill]{background:#0071e3}
.showcase-progress button:hover .showcase-progress-track{background:#c3c7d0}

/* 登录与首次设置共用顶部基线，展开表单时不再把右侧成果推到页面下方。 */
.login-entry .shell { align-items: flex-start; padding: 24px 0; min-height: 100svh; }
.login-entry .shell:has(.login-official-entry) { padding-top: 76px; }
.login-entry-layout { grid-template-columns: minmax(296px, 1fr) minmax(0, 3fr); align-items: start; }
.login-entry-code { padding-top: 8px; }
.login-entry-brand { margin-bottom: 8px; }
.login-method-switch { margin: 16px 0 12px; }
.login-entry-caption { margin: 12px 0; }
.login-entry [hidden] { display: none !important; }
.login-entry .login-scan-code { width: min(260px, 34vh); margin: 16px auto 10px; border-radius: 16px; }
.login-entry .login-scan-code.is-unavailable { background: #ffffff80; }
.login-scan-placeholder { font-size: 14px; color: #6e6e73; }
.desktop-admin-setup, .desktop-admin-login { margin: 12px 0; padding: 0 12px; border: 1px solid #dfe2e8; border-radius: 12px; background: #fff; text-align: left; }
.desktop-admin-setup summary, .desktop-admin-login summary { padding: 12px 0; color: #0066cc; font-size: 14px; font-weight: 600; cursor: pointer; }
.desktop-admin-setup .login-entry-password-form, .desktop-admin-login .login-entry-password-form { margin: 14px 0; gap: 12px; }
.desktop-admin-setup .login-entry-caption, .desktop-admin-login .login-entry-caption { font-size: 13px; }
.desktop-admin-setup [data-admin-setup-status] { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.desktop-admin-login summary:focus-visible, .desktop-admin-setup summary:focus-visible { outline: 3px solid #0071e3; outline-offset: 3px; }
.login-entry-code:has(.desktop-admin-setup[open], .desktop-admin-login[open]) > :is(.login-entry-caption, .login-scan-code, .login-scan-status, .login-entry-refresh) { display: none; }
.login-showcase { position: sticky; top: 24px; align-self: start; }
.showcase-stage { height: min(calc(100svh - 96px), 780px); }
@media (max-height: 700px) and (min-width: 761px) {
 .login-entry .shell { padding-top: 16px; }
 .login-entry h1 { font-size: 24px; }
 .login-entry .login-method-choice { min-height: 36px; padding: 6px 4px; }
 .login-entry .login-scan-code { margin-top: 12px; }
 .login-showcase { top: 16px; }
}
@media (max-width: 760px) {
 .login-entry-layout { grid-template-columns: 1fr; gap: 24px; }
 .login-entry-code { padding: 0; max-width: 460px; width: 100%; margin: 0 auto; }
 .login-showcase { position: static; padding: 0; border: 0; }
 .showcase-stage { height: min(56vh, 540px); min-height: 260px; }
}

.login-return{margin:14px 0;font-size:13px;line-height:1.6}.login-return summary{cursor:pointer;color:#3866a5;padding:8px 0}.login-return textarea{display:block;width:100%;max-height:100px;resize:vertical;box-sizing:border-box}.login-return video{display:block;width:100%;max-height:220px;object-fit:contain;background:#111}.login-return video[hidden],.login-return [hidden]{display:none!important}.login-return-actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.login-return button,.login-return .button{font-size:12px;padding:8px 10px}.login-return p{margin:8px 0;color:#59687b}

/* 两个面板共用同一网格位置，按较高者预留空间；切换不移动页头和成果。 */
.login-entry-panels { display: grid; min-width: 0; }
.login-entry-panel { grid-area: 1 / 1; min-width: 0; display: flow-root; align-self: start; }
.login-entry-panel[inert] { visibility: hidden; pointer-events: none; }
.login-entry .login-scan-status { min-height: 4.8em; overflow-wrap: anywhere; }
.login-entry-code:has(.desktop-admin-setup[open], .desktop-admin-login[open]) > .login-entry-panels { display: none; }