:root { color: #273247; background: #f3f7fc; font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; }
.auth-page { min-height: 100vh; background: #f3f7fc; }
.public-auth { position: relative; display: grid; grid-template-columns: minmax(420px, 520px) minmax(340px, 520px); align-items: center; justify-content: center; gap: 70px; min-height: 100vh; padding: 70px 30px; }
.public-auth__logo { position: absolute; top: 28px; left: 40px; display: inline-flex; text-decoration: none; }
.public-auth__logo img { display: block; width: 146px; height: auto; }
.public-auth__stage { width: min(520px, 100%); }
.public-auth__card { width: 100%; max-height: calc(100vh - 132px); padding: 42px; overflow-y: auto; border: 1px solid #e8edf5; border-radius: 18px; background: #fff; box-shadow: 0 18px 48px rgb(37 67 108 / 11%); }
.public-auth__heading span, .public-auth__benefits > p { color: #367feb; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.public-auth__heading h1 { margin: 13px 0 9px; color: #1f2d45; font-size: 30px; line-height: 1.2; }
.public-auth__heading p { margin: 0 0 28px; color: #7a879a; font-size: 14px; line-height: 1.65; }
.public-auth__methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin: 0 0 22px; padding: 4px; border-radius: 10px; background: #f3f5f9; }
.public-auth__methods a, .public-auth__methods span { display: grid; min-height: 42px; place-items: center; padding: 7px 5px; border-radius: 7px; color: #718095; font-size: 13px; line-height: 1.35; text-align: center; text-decoration: none; }
.public-auth__methods a:hover, .public-auth__methods a:focus-visible { color: #2575e8; background: #fff; }
.public-auth__method--active { color: #2676e9 !important; background: #fff; box-shadow: 0 2px 8px rgb(42 71 112 / 8%); font-weight: 700; }
.public-auth__method--disabled { color: #a0aaba !important; cursor: not-allowed; }
.public-auth__form { display: grid; gap: 16px; margin: 0; }
.public-auth__field { display: grid; gap: 8px; color: #58677c; font-size: 13px; line-height: 1.45; }
.public-auth__field input:not([type="checkbox"]):not([type="hidden"]), .public-auth__field select { width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px; border: 1px solid #dce3ed; border-radius: 8px; background: #fff; color: #273247; font: inherit; }
.public-auth__field input:focus, .public-auth__field select:focus { border-color: #367feb; outline: 3px solid rgb(54 127 235 / 13%); }
.public-auth__password { position: relative; }
.public-auth__password input { padding-right: 68px !important; }
.public-auth__password button { position: absolute; top: 50%; right: 8px; min-height: auto !important; padding: 5px 8px !important; transform: translateY(-50%); border: 0; border-radius: 5px; background: transparent !important; box-shadow: none !important; color: #3977c4 !important; font: inherit; font-size: 13px; font-weight: 400; }
.public-auth__password-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #718095; font-size: 13px; }
.public-auth__password-options a, .public-auth__register a, .public-auth__links a { color: #2676e9; text-decoration: none; }
.public-auth__check { display: flex; align-items: center; gap: 7px; color: #718095; font-size: 13px; line-height: 1.5; }
.public-auth__check input { width: 16px; height: 16px; margin: 0; accent-color: #367feb; }
.public-auth__submit, .public-auth__form > button { width: 100%; min-height: 48px; padding: 12px 18px; border: 0; border-radius: 9px; background: #367feb; box-shadow: 0 9px 20px rgb(54 127 235 / 20%); color: #fff; cursor: pointer; font: inherit; font-weight: 700; }
.public-auth__submit:hover, .public-auth__submit:focus-visible, .public-auth__form > button:hover, .public-auth__form > button:focus-visible { background: #246bd6; }
.public-auth__hint, .public-auth__status, .public-auth__error { margin: 15px 0 0; font-size: 13px; line-height: 1.65; }
.public-auth__hint { color: #98a3b3; }
.public-auth__status { padding: 12px; border: 1px solid #b9dfcf; border-radius: 8px; background: #f0fdf7; color: #067647; }
.public-auth__error { color: #b42318; }
.public-auth__register { margin: 18px 0 0; color: #8a95a5; font-size: 13px; text-align: center; }
.public-auth__links { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 20px; font-size: 13px; }
.public-auth__divider { height: 1px; margin: 24px 0; background: #e4e8f0; }
.public-auth__qr { display: grid; width: 156px; height: 156px; place-items: center; margin: 20px auto; border: 10px solid #273247; outline: 1px solid #cfd6e4; font-weight: 800; line-height: 1.7; text-align: center; }
.public-auth__qr::before { width: 70px; height: 70px; background: repeating-linear-gradient(90deg, #273247 0 7px, #fff 7px 12px), repeating-linear-gradient(#273247 0 7px, #fff 7px 12px); content: ""; opacity: .18; }
.public-auth__benefits { min-height: 494px; padding: 54px 46px; border-radius: 20px; background: linear-gradient(145deg, #0c5dc5, #168af5); box-shadow: 0 20px 48px rgb(38 91 181 / 18%); color: #fff; }
.public-auth__benefits > p { margin: 0 0 24px; color: rgb(255 255 255 / 66%); font-weight: 500; }
.public-auth__benefits h2 { margin: 0; font-size: clamp(28px, 2.6vw, 34px); font-weight: 500; line-height: 1.42; }
.public-auth__benefits ul { display: grid; gap: 13px; margin: 32px 0; padding: 0; list-style: none; color: rgb(255 255 255 / 88%); font-size: 15px; }
.public-auth__benefits li::before { content: "✓ "; }
.public-auth__stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 34px 0 0; border-radius: 10px; background: rgb(255 255 255 / 13%); overflow: hidden; }
.public-auth__stats div { padding: 15px 8px; text-align: center; }
.public-auth__stats div + div { border-left: 1px solid rgb(255 255 255 / 12%); }
.public-auth__stats dt { font-size: 22px; font-weight: 700; }
.public-auth__stats dd { margin: 5px 0 0; color: rgb(255 255 255 / 70%); font-size: 11px; }
@media (max-width: 1120px) { .public-auth { padding-right: 24px; padding-left: 24px; } .public-auth__benefits { padding: 46px 38px; } }
@media (max-width: 900px) { .public-auth { grid-template-columns: minmax(340px, 520px); padding-top: 104px; } .public-auth__benefits { display: none; } }
@media (max-width: 640px) { .public-auth { display: block; padding: 90px 12px 28px; } .public-auth__logo { top: 20px; left: 20px; } .public-auth__logo img { width: 130px; } .public-auth__card { max-height: none; padding: 28px 20px; } .public-auth__methods { grid-template-columns: 1fr; } }