/* ===== Login Page ===== */
    .login-page {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow-y: auto;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    /* ===== Login Brand Banner ===== */
    .login-banner {
      display: block;
      width: calc(100% + 80px);
      margin: -40px -40px 24px;
      border-radius: 12px 12px 0 0;
      user-select: none;
      -webkit-user-drag: none;
    }

    .login-card {
      margin: auto;
      background: #fff;
      border-radius: 12px;
      padding: 40px;
      width: 380px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }

    .login-card h1 {
      text-align: center;
      margin-bottom: 8px;
      font-size: 24px;
    }

    .login-card p {
      text-align: center;
      color: #666;
      margin-bottom: 24px;
      font-size: 14px;
    }

    .login-card .form-group {
      margin-bottom: 16px;
    }

    .login-card label {
      display: block;
      margin-bottom: 6px;
      font-weight: 500;
      font-size: 14px;
    }

    .login-card input {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 14px;
      transition: border-color 0.2s;
    }

    .login-card input:focus {
      outline: none;
      border-color: #667eea;
    }

    .login-card button {
      width: 100%;
      padding: 12px;
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      transition: opacity 0.2s;
    }

    .login-card button:hover {
      opacity: 0.9;
    }

    .login-card .error {
      color: #e74c3c;
      text-align: center;
      margin-top: 12px;
      font-size: 14px;
    }

    /* ===== Success Banner ===== */
    .success-banner {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      margin-top: 12px;
      background: linear-gradient(135deg, #e6ffed 0%, #f0fff4 100%);
      border: 1px solid #b7eb8f;
      border-radius: 8px;
      color: #389e0d;
      font-size: 14px;
      animation: bannerFadeIn 0.4s ease-out;
    }

    .success-banner.fade-out {
      animation: bannerFadeOut 0.4s ease-in forwards;
    }

    .success-banner-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      background: #52c41a;
      color: #fff;
      border-radius: 50%;
      font-size: 12px;
      font-weight: bold;
      flex-shrink: 0;
    }

    .success-banner-text {
      flex: 1;
    }

    .login-card .success-banner-close {
      background: none;
      border: none;
      color: #389e0d;
      font-size: 18px;
      cursor: pointer;
      padding: 0 4px;
      line-height: 1;
      opacity: 0.6;
      flex-shrink: 0;
      width: auto;
    }

    .login-card .success-banner-close:hover {
      opacity: 1;
    }

    @keyframes bannerFadeIn {
      from { opacity: 0; transform: translateY(-8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes bannerFadeOut {
      from { opacity: 1; transform: translateY(0); }
      to   { opacity: 0; transform: translateY(-8px); }
    }

    /* ===== Captcha ===== */
    .captcha-group {
      margin-bottom: 16px;
    }

    .captcha-box {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .captcha-box input {
      flex: 1;
    }

    .captcha-box img {
      width: 120px;
      height: 40px;
      cursor: pointer;
      border: 1px solid #ddd;
      border-radius: 4px;
      background: #f5f5f5;
      transition: opacity 0.3s ease;
      object-fit: contain;
      opacity: 0.6;
      background: linear-gradient(90deg, #f5f5f5 25%, #e8e8e8 50%, #f5f5f5 75%);
      background-size: 200% 100%;
      animation: captchaShimmer 1.5s ease-in-out infinite;
    }

    /* Loaded 状态：平滑显示 */
    .captcha-box img.is-loaded {
      opacity: 1;
      background: #f5f5f5;
      animation: none;
    }

    /* Error 状态：红色边框 + 提示背景 */
    .captcha-box img.is-error {
      opacity: 1;
      background: #fff2f0;
      border-color: #ffccc7;
      animation: none;
    }

    @keyframes captchaShimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* ===== Password Strength ===== */
    .password-strength {
      margin-top: 8px;
    }

    /* ===== Remember Me ===== */
    .remember-me-row {
      margin-bottom: 16px;
    }

    .remember-me-label {
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      font-size: 14px;
      color: #666;
      user-select: none;
    }

    .remember-me-label input[type="checkbox"] {
      width: 16px;
      height: 16px;
      margin: 0;
      cursor: pointer;
      accent-color: #667eea;
    }

    .strength-bar {
      height: 4px;
      background: #eee;
      border-radius: 2px;
      overflow: hidden;
    }

    .strength-fill {
      height: 100%;
      width: 0;
      transition: width 0.3s, background 0.3s;
    }

    .strength-fill.weak { width: 25%; background: #ff4d4f; }
    .strength-fill.medium { width: 50%; background: #faad14; }
    .strength-fill.strong { width: 75%; background: #52c41a; }
    .strength-fill.very_strong { width: 100%; background: #1890ff; }

    .strength-text {
      font-size: 12px;
      margin-top: 4px;
      display: block;
    }

    /* ===== Register Page ===== */
    .register-card {
      width: 420px;
    }

    .check-result {
      font-size: 12px;
      margin-top: 4px;
      display: block;
    }

    .check-result.available { color: #52c41a; }
    .check-result.unavailable { color: #ff4d4f; }

    .login-footer {
      text-align: center;
      margin-top: 16px;
      font-size: 14px;
    }

    .login-footer a {
      color: #667eea;
      text-decoration: none;
    }

    .login-footer a:hover {
      text-decoration: underline;
    }

    /* ===== Password Visibility Toggle ===== */
    .password-wrapper {
      position: relative;
    }

    .password-wrapper input {
      padding-right: 40px;
    }

    .login-card .toggle-password-visibility {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: auto;
      padding: 4px;
      background: none;
      border: none;
      border-radius: 0;
      color: #999;
      font-size: inherit;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.2s;
    }

    .login-card .toggle-password-visibility:hover {
      color: #667eea;
    }

    /* ===== Filing Info ===== */
    .login-filing {
      text-align: center;
      margin-top: 16px;
      padding-top: 12px;
      border-top: 1px solid #eee;
    }

    .login-filing-item {
      margin: 0;
      font-size: 11px;
      color: #999;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      flex-wrap: wrap;
    }

    .login-filing-badge {
      height: 16px;
      width: auto;
      vertical-align: middle;
    }

    .login-filing-item a {
      color: inherit;
      text-decoration: none;
    }

    .login-filing-item a:active {
      opacity: 0.7;
    }

    /* ===== Back to Home Button ===== */
    .back-home-btn {
      position: fixed;
      top: 20px;
      left: 20px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      text-decoration: none;
      z-index: 100;
      transition: background 0.2s;
    }

    .back-home-btn:hover {
      background: rgba(255, 255, 255, 0.4);
    }

    .back-home-btn svg {
      width: 20px;
      height: 20px;
    }