:root { color-scheme: light; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; color: #1d2433; background: #eef1f6; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 1024px; min-height: 100vh; background: #eef1f6; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
.login-shell { width: 100vw; height: 100vh; min-height: 680px; display: grid; grid-template-columns: 55% 45%; overflow: hidden; background: #fff; }
.brand-panel { position: relative; display: grid; place-items: center; overflow: hidden; background: #28314e url('/assets/mahjong-room.png') center/cover no-repeat; color: #fff; }
.brand-overlay { position: absolute; inset: 0; background: rgba(40,49,78,.34); }
.brand-content { position: relative; z-index: 1; width: min(72%, 760px); text-align: center; transform: translateY(-1.5vh); }
.brand-logo { width: clamp(118px, 8vw, 178px); aspect-ratio: 1/1; object-fit: cover; border-radius: 16px; box-shadow: 0 16px 40px rgba(9,15,35,.22); }
.brand-content h1 { margin: 42px 0 0; font-size: clamp(35px, 2.55vw, 58px); line-height: 1.25; letter-spacing: .02em; font-weight: 700; }
.brand-content p { margin: 26px 0 0; font-size: clamp(19px, 1.35vw, 30px); color: rgba(255,255,255,.75); letter-spacing: .06em; }
.login-panel { min-width: 0; display: grid; grid-template-rows: 1fr 92px; background: #fff; }
.form-wrap { width: min(66%, 650px); align-self: center; justify-self: center; transform: translateY(-2vh); }
.form-wrap header { margin-bottom: 46px; }
.eyebrow { display: block; margin-bottom: 16px; color: #667085; font-size: 15px; font-weight: 600; }
.form-wrap h2 { margin: 0; font-size: clamp(38px, 2.35vw, 54px); line-height: 1.2; color: #1d2433; }
.form-wrap header p { margin: 14px 0 0; color: #7b8292; font-size: 16px; }
.field { margin-top: 24px; }
.field.compact-field { margin-top: 0; margin-bottom: 34px; }
.field label { display: block; margin-bottom: 10px; color: #3c4353; font-size: 16px; font-weight: 650; }
.field input, .field select { width: 100%; height: 58px; padding: 0 18px; border: 1px solid #d9dee8; border-radius: 8px; outline: none; color: #28314e; background: #fff; transition: border-color .18s, box-shadow .18s; }
.select-frame { position: relative; width: 230px; height: 58px; overflow: hidden; border: 1px solid #d9dee8; border-radius: 8px; background: #f7f8fb; transition: border-color .18s, box-shadow .18s; }
.select-frame::after { content: ""; position: absolute; top: 50%; right: 28px; width: 8px; height: 8px; border-right: 2px solid #28314e; border-bottom: 2px solid #28314e; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.compact-field .select-frame select { width: 100%; height: 56px; padding: 0 58px 0 18px; border: 0; border-radius: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.select-frame:hover { border-color: #aeb6c6; }
.select-frame:focus-within { border-color: #28314e; box-shadow: 0 0 0 3px rgba(40,49,78,.12); }
.field input::placeholder { color: #9aa1af; }
.field input:hover, .field select:hover { border-color: #aeb6c6; }
.field input:focus, .field select:focus { border-color: #28314e; box-shadow: 0 0 0 3px rgba(40,49,78,.12); }
.field input.invalid { border-color: #d92d20; box-shadow: 0 0 0 3px rgba(217,45,32,.08); }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 72px; }
.visibility { position: absolute; right: 10px; top: 9px; height: 40px; padding: 0 10px; border: 0; background: transparent; color: #667085; cursor: pointer; border-radius: 6px; }
.visibility:hover, .visibility:focus-visible { background: #f2f4f7; color: #28314e; outline: none; }
.error { display: block; min-height: 19px; margin-top: 6px; color: #d92d20; font-size: 13px; }
.form-options { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 12px 0 32px; font-size: 14px; }
.remember { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.remember input { width: 18px; height: 18px; accent-color: #28314e; }
.help-text { color: #667085; }
.submit { width: 100%; height: 60px; border: 0; border-radius: 8px; color: #fff; background: #28314e; font-size: 18px; font-weight: 700; cursor: pointer; transition: background .18s, transform .1s; }
.submit:hover { background: #20283f; }
.submit:active { transform: translateY(1px); }
.submit:disabled { cursor: wait; opacity: .72; }
.form-message { min-height: 24px; margin-top: 14px; text-align: center; color: #22a06b; font-size: 14px; }
.temporary-login[hidden] { display: none; }
.temporary-login { margin-top: 18px; padding: 16px; border: 1px solid #e5c36a; border-radius: 8px; background: #fff9e8; }
.temporary-login-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #28314e; }
.temporary-login-head span { color: #9a6a00; font-size: 13px; }
.temporary-login p { margin: 8px 0 12px; color: #6f7787; font-size: 13px; line-height: 1.6; }
.temporary-login textarea { width: 100%; min-height: 72px; padding: 11px 12px; resize: vertical; border: 1px solid #d9dee8; border-radius: 6px; color: #28314e; background: #fff; font: inherit; outline: none; }
.temporary-login textarea:focus { border-color: #28314e; box-shadow: 0 0 0 3px rgba(40,49,78,.1); }
.temporary-login button { width: 100%; height: 42px; margin-top: 10px; border: 0; border-radius: 6px; background: #28314e; color: #fff; font-weight: 700; cursor: pointer; }
.temporary-login button:disabled { opacity: .55; cursor: wait; }
.temporary-login > span { display: block; min-height: 19px; margin-top: 8px; color: #16845a; font-size: 13px; text-align: center; }
.login-panel footer { display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 0 40px; border-top: 1px solid #e3e7ef; background: #f5f7fa; color: #8a91a0; font-size: 13px; }
.footer-runtime { display: flex; align-items: center; gap: 18px; width: 100%; }
.footer-legal { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; font-size: 12px; }
.footer-legal a { color: #667085; text-decoration: none; }
.footer-legal a:hover, .footer-legal a:focus-visible { color: #28314e; text-decoration: underline; outline: none; }
.server { margin-right: auto; color: #667085; }
.server i { display: inline-block; width: 9px; height: 9px; margin-right: 9px; border-radius: 50%; background: #c58a00; }
.server.is-online { color: #16845a; }
.server.is-online i { background: #22a06b; }
.server.is-offline { color: #d92d20; }
.server.is-offline i { background: #d92d20; }
.divider { width: 1px; height: 16px; background: #d7dce5; }
@media (max-width: 1500px) {
  .login-shell { grid-template-columns: 52% 48%; }
  .form-wrap { width: min(72%, 580px); }
  .brand-content h1 { margin-top: 30px; }
}
@media (max-height: 800px) {
  .form-wrap { transform: none; }
  .form-wrap header { margin-bottom: 26px; }
  .field.compact-field { margin-bottom: 20px; }
  .field { margin-top: 12px; }
  .brand-logo { width: 110px; }
  .brand-content h1 { margin-top: 24px; }
}