/* Login Common CSS*/
html, body {height: 100%;}
body {margin: 0;background: #0F2027;background: linear-gradient(to bottom, #0F2027, #203A43, #2C5364);overflow-x: hidden;overflow-y: auto;}
canvas {display: block;}
#login-container {background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(15px);-webkit-backdrop-filter: blur(15px);border-radius: 20px;padding: 20px;box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);border: 1px solid rgba(255, 255, 255, 0.18);width: 420px;position: absolute;top: 15%;left: 50%;margin-left: -210px;z-index: 1000;margin-bottom: 50px;}
#login-container h1, #login-container h2 {margin-bottom: 20px;font-size: 22px;border-bottom: 1px solid #ececec;padding-bottom: 20px;}
.block {background: #ffffff !important;border-radius: 12px !important;padding: 25px !important;margin: 0 !important;box-shadow: none !important;position: relative;}
.push-top-bottom {margin-top: 0;margin-bottom: 15px;}
.btn-login, .btn-blue {background: linear-gradient(106deg, rgb(117, 117, 200) 0, #6a99b6 50%, #588BEB 100%) !important;color: #fff !important;border: none !important;border-radius: 6px !important;padding: 8px 25px !important;font-weight: 500;transition: all 0.3s;}
.btn-login:hover, .btn-blue:hover {transform: translateY(-2px);box-shadow: 0 6px 20px rgba(125, 106, 182, 0.5);opacity: 0.9;}
.form-control {border-radius: 6px;border: 1px solid #ddd;transition: all 0.3s;}
.form-control:focus {border-color: #7d6ab6;box-shadow: 0 0 0 3px rgba(125, 106, 182, 0.1);outline: 0;}
.form-group label {color: #666;font-weight: 500;}
.form-horizontal .control-label {padding-top: 10px;text-align: right;}
.help-text {margin-top: 5px;font-size: 12px;color: #999;}
.snow {position: absolute;left: 0;top: 0;right: 0;bottom: 0;pointer-events: none;}
/* 步骤指示器*/
.steps-indicator {display: flex;justify-content: center;align-items: center;margin-bottom: 12px;padding: 10px 0;}
.step-item {display: flex;align-items: center;color: #999;font-size: 13px;gap: 6px;}
.step-item.active {color: #588BEB;}
.step-item.completed {color: #588BEB;}
.step-number {width: 22px;height: 22px;border-radius: 50%;background: #eee;color: #999;display: flex;align-items: center;justify-content: center;font-size: 11px;font-weight: bold;}
.step-item.active .step-number,
.step-item.completed .step-number {background: linear-gradient(135deg, #5e84f4, #5076E9);color: #fff;}
.step-line {width: 30px;height: 1px;background: #b2b2b2;margin: 0 12px;}
.step-item.completed + .step-line,
.step-line.completed {background: #5076E9;}
/* 表单步骤*/
.form-step {display: none;}
.form-step.active {display: block;}
/* 错误提示样式*/
.error-tip {color: #e74c3c;font-size: 12px;margin-top: 5px;display: none;}
.error-tip.show {display: block;}
.success-tip {color: #52c41a;font-size: 12px;margin-top: 5px;display: none;}
.success-tip.show {display: block;}
/* 密码预览*/
.password-preview {background: #f8f9fa;border: 1px solid #e9ecef;border-radius: 8px;padding: 12px 15px;margin-top: 15px;display: none;}
.password-preview.show {display: block;}
.password-preview-title {font-size: 12px;color: #666;margin-bottom: 8px;}
.password-preview-content {font-size: 18px;color: #666666;word-break: break-all;background: #fff;padding: 10px 12px;border-radius: 6px;border: 1px dashed #ddd;}
.password-preview-tip {font-size: 11px;color: #44b88e;margin-top: 8px;}
/* 滑动验证容器*/
.slider-verify-container {margin: 15px 0;display: none;}
.slider-verify-container.show {display: block;}
/* 滑动验证样式*/
.slider-verify {position: relative;background: #f7f9fa;height: 44px;border-radius: 22px;overflow: hidden;border: 1px solid #e4e7eb;-webkit-user-select: none;user-select: none;}
.slider-track {position: absolute;left: 0;top: 0;height: 100%;width: 0;background: #dbe3f3;transition: width 0.1s;}
.slider-btn {position: absolute;left: 0;top: 2px;width: 40px;height: 40px;background: #fff;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);z-index: 2;touch-action: none;}
.slider-text {position: absolute;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;color: #666666;font-size: 14px;z-index: 1;pointer-events: none;}
body.slider-dragging {-webkit-user-select: none;user-select: none;}
/* 自定义弹窗样式*/
.custom-popup {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #fff;padding: 25px 40px;border-radius: 15px;box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);z-index: 9999;display: none;text-align: center;}
.custom-popup.show {display: block;animation: popupFadeIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
@keyframes popupFadeIn {
    from {opacity: 0;transform: translate(-50%, -60%);}
    to {opacity: 1;transform: translate(-50%, -50%);}
}
/* 密码强度指示器*/
.password-strength {display: flex;gap: 5px;margin-top: 8px;}
.strength-bar {flex: 1;height: 4px;background: #eee;border-radius: 2px;}
.strength-bar.weak {background: #e74c3c;}
.strength-bar.medium {background: #f39c12;}
.strength-bar.strong {background: #47b369;}
/* 成功页面*/
.success-page {text-align: center;padding: 20px 0;}
.success-icon {width: 70px;height: 70px;background: linear-gradient(135deg, #6386ef, #588BEB);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 20px;color: #fff;font-size: 30px;}
/* 左上角返回链接 — 卡片内淡雅胶囊 */
.back-link {position: absolute;top: 14px;left: 14px;z-index: 5;display: inline-flex;align-items: center;gap: 5px;padding: 5px 12px 5px 9px;border-radius: 999px;background: rgba(88, 139, 235, 0.06);border: 1px solid rgba(88, 139, 235, 0.18);color: #5b6b8a;font-size: 12px;letter-spacing: 0.4px;line-height: 1;text-decoration: none;box-shadow: 0 1px 2px rgba(15, 32, 39, 0.04);transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;animation: backLinkFadeIn 0.5s ease both 0.15s;}
.back-link:hover {background: rgba(88, 139, 235, 0.12);color: #3553b5;border-color: rgba(88, 139, 235, 0.38);transform: translateX(-2px);box-shadow: 0 2px 8px rgba(88, 139, 235, 0.15);}
.back-link:active {transform: translateX(-1px) scale(0.98);}
.back-link:focus-visible {outline: none;box-shadow: 0 0 0 2px rgba(88, 139, 235, 0.35);}
.back-link__icon {width: 12px;height: 12px;flex: 0 0 12px;transition: transform 0.25s ease;}
.back-link:hover .back-link__icon {transform: translateX(-2px);}
.back-link__text {font-weight: 400;}
@media (max-width: 480px) {
    .back-link {top: 10px;left: 10px;padding: 4px 10px 4px 8px;font-size: 11px;}
    .back-link__icon {width: 11px;height: 11px;flex-basis: 11px;}
}
@media (prefers-reduced-motion: reduce) {
    .back-link,
    .back-link__icon {transition: none;animation: none;}
}
@keyframes backLinkFadeIn {
    from {opacity: 0;transform: translateY(-4px);}
    to   {opacity: 1;transform: translateY(0);}
}