.viewer-login-page { margin: 0; color: #e5edf7; background: #0f172a; font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
.viewer-login-shell { min-height: 100vh; display: grid; place-items: center; box-sizing: border-box; padding: clamp(24px, 5vw, 72px); background: linear-gradient(145deg, rgb(15 23 42 / 98%), rgb(17 24 39 / 98%) 58%, rgb(6 20 18 / 98%)); }
.viewer-login-stage { width: min(1040px, 100%); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); gap: clamp(36px, 7vw, 84px); align-items: center; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.viewer-login-copy { animation: viewer-rise 360ms ease both; }
.viewer-login-brand { display: inline-flex; gap: 10px; align-items: center; color: #f8fafc; text-decoration: none; font-weight: 800; letter-spacing: .02em; }
.viewer-login-brand img { border-radius: 10px; }
.viewer-login-eyebrow, .viewer-card-kicker { margin: 48px 0 12px; color: #94a3b8; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.viewer-login-copy h1 { margin: 0; max-width: 620px; color: #f8fafc; font-size: clamp(38px, 5vw, 60px); font-weight: 800; line-height: 1.16; letter-spacing: -.035em; text-wrap: pretty; }
.viewer-login-copy h1 span { color: #e2e8f0; }
.viewer-login-lead { max-width: 590px; margin: 22px 0 0; color: #a9b8ca; font-size: 16px; line-height: 1.75; text-wrap: pretty; }
.viewer-login-benefits { display: grid; gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; color: #cbd5e1; }
.viewer-login-benefits li { display: flex; align-items: center; gap: 12px; }
.viewer-login-benefits span { color: #94a3b8; font: 750 11px/1 ui-monospace, monospace; letter-spacing: .1em; }
.viewer-login-card { padding: clamp(26px, 4vw, 38px); border: 1px solid rgb(148 163 184 / 22%); border-radius: 16px; background: rgb(15 23 42 / 88%); box-shadow: 0 24px 68px rgb(0 0 0 / 36%); animation: viewer-rise 360ms 60ms ease both; }
.viewer-login-card h2 { margin: 8px 0 0; color: #f8fafc; font-size: 26px; letter-spacing: -.025em; }
.viewer-login-card p { margin: 0; color: #94a3b8; line-height: 1.65; }
.viewer-login-card .viewer-card-kicker { margin: 0; }
.viewer-twitch-button { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; gap: 12px; min-height: 52px; margin-top: 28px; padding: 0 18px; border: 1px solid #a970ff; border-radius: 10px; color: #fff; background: #9146ff; box-shadow: 0 12px 26px rgb(73 27 140 / 28%); text-decoration: none; font-weight: 800; transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.viewer-twitch-button:hover, .viewer-twitch-button:focus-visible { color: #fff; background: #772ce8; box-shadow: 0 15px 32px rgb(73 27 140 / 36%); transform: translateY(-1px); }
.viewer-twitch-button:focus-visible { outline: 3px solid rgb(169 112 255 / 28%); outline-offset: 3px; }
.viewer-twitch-icon { display: block; filter: brightness(0) invert(1); }
.viewer-twitch-button--account { position: relative; display: flex; justify-content: center; box-sizing: border-box; padding-inline: 44px; text-align: center; }
.viewer-twitch-button--account span:last-child { position: absolute; right: 18px; }
.viewer-login-trust { display: flex; justify-content: center; gap: 8px; margin-top: 18px !important; font-size: 12px; }
.viewer-login-trust span { color: #62d2a2; font-size: 9px; }
.viewer-profile-row { display: flex; align-items: center; gap: 16px; margin: 24px 0 8px; }
.viewer-profile-row img { border: 2px solid rgb(132 216 210 / 44%); border-radius: 18px; }
.viewer-profile-row strong, .viewer-profile-row span { display: block; }
.viewer-profile-row strong { color: #f4fafb; font-size: 20px; }
.viewer-profile-row span { margin-top: 4px; color: #82a2ad; }
.viewer-login-card .viewer-install { margin-top: 18px; padding: 15px 16px; border: 1px solid rgb(148 163 184 / 18%); border-radius: 10px; color: #94a3b8; background: rgb(148 163 184 / 7%); box-shadow: none; text-align: center; }
.viewer-login-card .viewer-install p { color: #94a3b8; font-size: 13px; line-height: 1.6; text-wrap: pretty; }
.viewer-login-card #viewer-install-button { display: inline-block; min-height: 44px; margin: 0 0 12px; padding: 10px 14px; border: 0; border-radius: 6px; border-color: rgb(148 163 184 / 28%); color: #e5edf7; background: rgb(15 23 42 / 72%); font-family: Arial; font-size: 13.3333px; font-weight: 700; cursor: pointer; }
.viewer-login-card #viewer-install-button:hover, .viewer-login-card #viewer-install-button:focus-visible { border-color: rgb(169 112 255 / 62%); color: #fff; background: rgb(145 70 255 / 18%); }
.viewer-login-legal { display: flex; justify-content: center; gap: 9px; margin-top: 34px !important; font-size: 12px; }
.viewer-login-legal a { color: #7895a0; text-underline-offset: 3px; }
@keyframes viewer-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 820px) { .viewer-login-stage { grid-template-columns: 1fr; gap: 36px; } .viewer-login-eyebrow { margin-top: 36px; } .viewer-login-copy h1 { font-size: clamp(36px, 10vw, 52px); } }
@media (max-width: 480px) { .viewer-login-shell { align-items: start; padding: 24px 16px 36px; } .viewer-login-card { padding: 24px 20px; } .viewer-login-benefits { margin-top: 26px; } }
@media (prefers-reduced-motion: reduce) { .viewer-login-copy, .viewer-login-card { animation: none; } .viewer-twitch-button { transition: none; } }