/* === 会员登录/注册 页面样式 - 现代化重写 === */

* {box-sizing: border-box;}
body {margin:0; padding:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; flex-direction: column;}
a {color: #667eea; text-decoration: none; transition: color 0.2s;}
a:hover {color: #764ba2; text-decoration: underline;}

.form-page {display: flex; flex-direction: column; align-items: center; justify-content: center; flex:1; padding: 40px 20px;}

.form-card {background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.15); width: 100%; max-width: 440px; padding: 40px 36px; position: relative; animation: fadeIn 0.4s ease-out;}

@keyframes fadeIn {from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);}}

.form-header {text-align: center; margin-bottom: 32px;}
.form-header .logo {display: inline-block; font-size: 28px; font-weight: 700; color: #333; letter-spacing: -0.5px; background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
.form-header .logo:hover {text-decoration: none;}
.form-header p {color: #999; font-size: 14px; margin: 8px 0 0;}

.form-body h2 {font-size: 20px; font-weight: 600; color: #333; margin: 0 0 24px; text-align: center;}

.form-group {margin-bottom: 20px;}
.form-group label {display: block; font-size: 13px; font-weight: 500; color: #555; margin-bottom: 6px;}
.form-group label .required {color: #e74c3c;}
.form-group .ipt {width: 100%; height: 44px; padding: 0 14px; border: 1.5px solid #e0e0e0; border-radius: 10px; font-size: 15px; color: #333; background: #fafafa; transition: all 0.25s; outline: none;}
.form-group .ipt:focus {border-color: #667eea; background: #fff; box-shadow: 0 0 0 4px rgba(102,126,234,0.1);}
.form-group .ipt-note {font-size: 12px; color: #aaa; margin: 6px 0 0; padding:0; line-height:1.4;}

.form-group .code-row {display: flex; gap: 10px; align-items: center;}
.form-group .code-row .ipt {flex:1;}
.form-group .code-row #mycode img {border-radius: 8px; cursor: pointer;}

.form-row {display: flex; gap: 12px;}

.form-group .btn {width: 100%; height: 46px; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #667eea, #764ba2); cursor: pointer; transition: all 0.25s;}
.form-group .btn:hover {transform: translateY(-1px); box-shadow: 0 8px 25px rgba(102,126,234,0.3);}
.form-group .btn:active {transform: translateY(0); box-shadow: none;}

.form-footer {text-align: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid #f0f0f0;}
.form-footer p {font-size: 14px; color: #888; margin: 0;}
.form-footer a {color: #667eea; font-weight: 500;}

.form-copyright {text-align: center; color: rgba(255,255,255,0.6); font-size: 12px; padding: 20px;}

.form-tos {background: #f8f9ff; border: 1px solid #e8ecff; border-radius: 10px; padding: 12px; margin-bottom: 20px;}
.form-tos .tos-text {width: 100%; border: none; background: transparent; font-size: 12px; line-height: 1.8; color: #666; height: 90px; resize: none; padding: 0;}

.form-tip {background: #f0f4ff; border: 1px solid #dce3ff; border-radius: 10px; padding: 14px; margin-bottom: 16px; font-size: 13px; color: #555; line-height:1.6;}
.form-tip strong {color: #667eea;}

.login-tip {background: #f0f4ff; border: 1px solid #dce3ff; border-radius: 10px; padding: 30px 20px; text-align: center;}
.login-tip p {font-size: 15px; color: #555; margin: 0 0 16px;}
.login-tip p a {color: #667eea; font-weight: 500;}

.error-box {background: #fff0f0; border: 1px solid #ffd4d4; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: 13px; color: #c0392b; line-height:1.5;}
.success-box {background: #f0fff4; border: 1px solid #d4ffdc; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: 13px; color: #27ae60; line-height:1.5;}

.form-card.wide {max-width: 640px;}

.data-table {width: 100%; border-collapse: collapse; font-size: 13px;}
.data-table th {background: #f8f9ff; color: #555; font-weight: 600; padding: 10px 12px; text-align: left; border-bottom: 2px solid #e8ecff;}
.data-table td {padding: 10px 12px; border-bottom: 1px solid #f0f0f0; color: #555;}
.data-table tr:hover td {background: #fafbff;}
.data-table a {color: #667eea;}
.data-table .btn-sm {display: inline-block; padding: 4px 12px; border-radius: 6px; font-size: 12px; color: #fff; background: linear-gradient(135deg, #667eea, #764ba2); border: none; cursor: pointer; text-decoration: none;}
.data-table .btn-sm:hover {opacity: 0.85; text-decoration: none;}

.qq-login {display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; border: 1.5px solid #e0e0e0; border-radius: 10px; font-size: 14px; color: #555; background: #fff; transition: all 0.2s; cursor: pointer; text-decoration: none;}
.qq-login:hover {border-color: #667eea; color: #667eea; text-decoration: none; transform: translateY(-1px);}
.qq-login .qq-icon {display: inline-block; width: 20px; height: 20px; background: #12b7f5; border-radius: 4px; color: #fff; font-size: 14px; text-align: center; line-height: 20px; font-weight: bold; flex-shrink:0;}

@media (max-width: 600px) {
  .form-card {padding: 28px 20px; border-radius: 12px;}
  .form-header .logo {font-size: 24px;}
  .form-body h2 {font-size: 18px;}
  .form-row {flex-direction: column; gap: 0;}
  .form-group .btn {height: 44px; font-size: 15px;}
}