/* ============================================================
   大五人格测评系统 · 共享基础样式
   ============================================================ */
:root {
  --ink: #1c2536;
  --ink-2: #38445c;
  --muted: #6a7488;
  --paper: #f4f3ee;
  --card: #ffffff;
  --line: #e5e1d6;
  --navy-900: #101b30;
  --navy-800: #16233f;
  --navy-700: #1e2e52;
  --navy-600: #2b3f6e;
  --gold-600: #a97f2b;
  --gold-500: #c9a24a;
  --gold-400: #d9bc6e;
  --ok: #2e7d5b;
  --warn: #a16207;
  --danger: #b23b3b;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(16, 27, 48, 0.08);
  --serif: Georgia, "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  --sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
a { color: var(--navy-600); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 15px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 10px;
  padding: 10px 20px; font-size: 15px; font-weight: 600; line-height: 1.4;
  transition: all 0.18s ease; white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(135deg, var(--navy-700), var(--navy-600));
  color: #fff; box-shadow: 0 6px 16px rgba(22, 35, 63, 0.25);
}
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(22, 35, 63, 0.32); }
.btn-gold {
  background: linear-gradient(135deg, #a97f2b, #c9a24a);
  color: #fff; box-shadow: 0 6px 16px rgba(169, 127, 43, 0.3);
}
.btn-gold:hover:not(:disabled) { transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { border-color: var(--gold-500); color: var(--gold-600); background: #fbf7ec; }
.btn-danger-ghost { background: transparent; border-color: #e2c9c9; color: var(--danger); }
.btn-danger-ghost:hover { background: #fdf1f1; border-color: var(--danger); }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }

.field { margin-bottom: 16px; }
.field > label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); outline: none; transition: border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(201, 162, 74, .18); }

.hidden { display: none !important; }

/* Toast */
#toast-wrap { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: var(--navy-800); color: #fff; padding: 10px 18px; border-radius: 10px;
  font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.25); animation: toastIn .25s ease; max-width: 80vw;
}
.toast.error { background: #8e2b2b; }
.toast.success { background: #1f6b4b; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; } }

/* 徽章：水平带配色 */
.lv-0 { background: #d9dfe9; color: #3d4a63; }
.lv-1 { background: #b3c0d6; color: #2c3b59; }
.lv-2 { background: #5f7399; color: #fff; }
.lv-3 { background: #c4a04e; color: #332a08; }
.lv-4 { background: #96711f; color: #fff; }