/* 全局样式 — 摩尔庄园 Q 萌埃及风 */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  background: linear-gradient(180deg, #FFE9B0 0%, #F4D07A 60%, #E8B86F 100%);
  min-height: 100vh;
  color: #5C3A1E;
  overflow-x: hidden;
}

/* 飘动的金字塔背景 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 10% 80%, rgba(232, 193, 112, 0.4), transparent 30%),
    radial-gradient(circle at 90% 20%, rgba(255, 215, 0, 0.3), transparent 30%);
  pointer-events: none;
  z-index: 0;
}

.auth-wrap {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 28px;
  padding: 36px 32px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 12px 40px rgba(139, 69, 19, 0.25);
  border: 4px solid #FFF;
  position: relative;
}

.auth-card::before {
  content: '';
  position: absolute;
  top: -28px; left: 50%;
  transform: translateX(-50%);
  width: 64px; height: 64px;
  background: #FFD700;
  border-radius: 50%;
  border: 4px solid #FFF;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  background-image: radial-gradient(circle at 35% 35%, #FFFAF0, #FFD700 60%, #B8860B);
}

.auth-title {
  text-align: center;
  font-size: 26px;
  color: #B8541F;
  margin: 16px 0 6px;
  font-weight: bold;
}

.auth-subtitle {
  text-align: center;
  color: #A67C52;
  font-size: 13px;
  margin-bottom: 24px;
}

/* tab 切换 */
.tabs {
  display: flex;
  background: #F5DEB3;
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 24px;
}
.tab {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  color: #8B4513;
  transition: all 0.2s;
}
.tab.active {
  background: #FFF;
  color: #B8541F;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* 表单 */
.field {
  margin-bottom: 14px;
}

/* 一行两列（手机也保持两列以缩短表单高度） */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.field-row .field { margin-bottom: 14px; }
.field-row .hint { font-size: 11px; }

.field label {
  display: block;
  font-size: 13px;
  color: #8B4513;
  margin-bottom: 6px;
  font-weight: bold;
}

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.field input {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #F5D7A1;
  border-radius: 12px;
  font-size: 14px;
  background: #FFFAF0;
  color: #5C3A1E;
  transition: all 0.2s;
  outline: none;
}

.field input:focus {
  border-color: #F5B73D;
  background: #FFF;
  box-shadow: 0 0 0 3px rgba(245, 183, 61, 0.2);
}

.field input.invalid {
  border-color: #D9534F;
  background: #FFF0F0;
}

.field input.valid {
  border-color: #7FB069;
}

.btn-sms {
  position: absolute;
  right: 6px;
  padding: 8px 14px;
  background: #F5B73D;
  color: #FFF;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  transition: all 0.2s;
}
.btn-sms:hover:not(:disabled) { background: #E8A220; }
.btn-sms:disabled {
  background: #C9B896;
  cursor: not-allowed;
}

.hint {
  font-size: 12px;
  margin-top: 4px;
  min-height: 16px;
}
.hint.err { color: #D9534F; }
.hint.ok  { color: #7FB069; }

/* 头像选择 */
.avatar-row {
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
.avatar-opt {
  flex: 1;
  border: 3px solid #F5D7A1;
  border-radius: 14px;
  padding: 8px;
  cursor: pointer;
  text-align: center;
  background: #FFFAF0;
  transition: all 0.2s;
}
.avatar-opt:hover { transform: translateY(-2px); }
.avatar-opt.selected {
  border-color: #F5B73D;
  background: #FFF8DC;
  box-shadow: 0 4px 12px rgba(245, 183, 61, 0.3);
}
.avatar-opt svg { width: 60px; height: 70px; }
.avatar-opt .nm { font-size: 11px; margin-top: 2px; color: #8B4513; }

.btn-primary {
  width: 100%;
  padding: 14px;
  background: linear-gradient(180deg, #F5B73D 0%, #E8A220 100%);
  color: #FFF;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.2s;
  box-shadow: 0 4px 0 #B8860B;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #B8860B; }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 #B8860B; }
.btn-primary:disabled {
  background: #C9B896;
  box-shadow: 0 4px 0 #8B7355;
  cursor: not-allowed;
}

.toast {
  position: fixed;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  background: rgba(92, 58, 30, 0.95);
  color: #FFF;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.toast.show { opacity: 1; }
.toast.err { background: rgba(217, 83, 79, 0.95); }
.toast.ok  { background: rgba(127, 176, 105, 0.95); }

.hide { display: none !important; }