/* ===================================================
   龙部落族谱网 · 基础样式
   www.5er0.com
   =================================================== */

/* ── CSS 变量 ───────────────────────────────────────── */
:root {
  --primary:      #8B1A1A;   /* 深红（龙色） */
  --primary-dark: #6B1010;
  --primary-light:#C84040;
  --gold:         #C9A84C;   /* 金色 */
  --gold-light:   #E8D5A0;
  --bg:           #FDF8F0;   /* 米白背景 */
  --bg-dark:      #F5ECD8;
  --text:         #2C1A0E;   /* 深棕文字 */
  --text-muted:   #7A6550;
  --border:       #D4B896;
  --white:        #FFFFFF;
  --shadow:       0 2px 12px rgba(139,26,26,.12);
  --radius:       10px;
  --radius-sm:    6px;
  --font-zh:      'PingFang SC', 'Microsoft YaHei', '微软雅黑', sans-serif;
  --transition:   .2s ease;
}

/* ── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-zh);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-dark); }
button { cursor: pointer; font-family: var(--font-zh); }

/* ── 字体 ───────────────────────────────────────────── */
h1,h2,h3,h4,h5 { font-weight: 700; line-height: 1.3; color: var(--primary-dark); }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
p  { margin-bottom: .8rem; }

/* ── 通用按钮 ───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .4em;
  padding: .55em 1.4em;
  border: none; border-radius: var(--radius-sm);
  font-size: .95rem; font-weight: 600;
  transition: all var(--transition);
  cursor: pointer;
}
.btn-primary {
  background: var(--primary); color: var(--white);
}
.btn-primary:hover { background: var(--primary-dark); color: var(--white); }

.btn-gold {
  background: var(--gold); color: var(--white);
}
.btn-gold:hover { background: #b8963c; color: var(--white); }

.btn-outline {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
}
.btn-outline:hover { background: var(--primary); color: var(--white); }

.btn-outline-sm {
  display: inline-flex; align-items: center;
  padding: .35em 1em;
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-sm);
  color: var(--primary); font-size: .88rem;
  transition: all var(--transition);
}
.btn-outline-sm:hover { background: var(--primary); color: var(--white); }

.btn-text {
  background: none; border: none;
  color: var(--text-muted); font-size: .88rem;
  padding: .35em .6em;
}
.btn-text:hover { color: var(--primary); }

/* ── 表单 ───────────────────────────────────────────── */
.form-group { margin-bottom: 1.1rem; }
.form-group label {
  display: block; margin-bottom: .35rem;
  font-size: .9rem; font-weight: 600; color: var(--text);
}
.form-group label .req { color: var(--primary-light); margin-left: 2px; }
input[type=text], input[type=tel], input[type=number],
input[type=email], input[type=password],
select, textarea {
  width: 100%; padding: .6em .9em;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-zh); font-size: .95rem;
  background: var(--white); color: var(--text);
  transition: border-color var(--transition);
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
}
textarea { resize: vertical; min-height: 80px; }

/* ── 卡片 ───────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
  box-shadow: var(--shadow);
}

/* ── 徽标 ───────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--primary-light); color: var(--white);
  border-radius: 9px; font-size: .7rem; font-weight: 700;
}

/* ── 分隔线 ─────────────────────────────────────────── */
.divider {
  border: none; border-top: 1px solid var(--border);
  margin: 1.2rem 0;
}

/* ── 工具类 ─────────────────────────────────────────── */
.text-muted  { color: var(--text-muted); }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.d-flex      { display: flex; }
.align-center{ align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.mt-1  { margin-top: .5rem; }
.mt-2  { margin-top: 1rem; }
.mt-3  { margin-top: 1.5rem; }
.mb-2  { margin-bottom: 1rem; }
.w-full{ width: 100%; }

/* ── 浮动保存按钮 ───────────────────────────────────── */
.float-save {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999;
  display: flex; flex-direction: column; gap: .5rem;
}

/* ── 响应式 ─────────────────────────────────────────── */
@media (max-width: 768px) {
  html { font-size: 15px; }
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}