/* ═══════════════════════════════════════════════════
   针灸入门学习网站 · 全局样式
   style.css — 设计系统 · 组件库 · 通用布局
   色调：珊瑚红 + 深青 + 米白 · 年轻活泼卡片风
   ═══════════════════════════════════════════════════ */

:root {
  --coral:        #E8614A;
  --coral-light:  #FF8570;
  --coral-pale:   #FFF0ED;
  --coral-dark:   #C44A35;
  --teal:         #1A3A4A;
  --teal-mid:     #2C5A70;
  --teal-light:   #4A8FA8;
  --teal-pale:    #E8F4F8;
  --cream:        #FAFAF7;
  --cream2:       #F2F2EC;
  --warm-gray:    #E4E4DC;
  --text-1:       #1A2028;
  --text-2:       #4A5568;
  --text-3:       #8A9BAE;
  --white:        #FFFFFF;
  --success:      #48BB78;
  --warning:      #ECC94B;
  --danger:       #E53E3E;

  /* 经脉颜色 */
  --c-lu:  #5A7FB5; --c-li:  #6E9E52; --c-st:  #C4A04A;
  --c-sp:  #C47A4A; --c-ht:  #C45050; --c-si:  #A85878;
  --c-bl:  #4A78B0; --c-ki:  #384D90; --c-pc:  #6040A0;
  --c-sj:  #3A9070; --c-gb:  #508A50; --c-lv:  #406840;
  --c-du:  #A06030; --c-ren: #287878;

  --font-serif: 'Noto Serif SC', serif;
  --font-sans:  'Noto Sans SC', sans-serif;
  --radius-sm:  8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 32px;
  --shadow-sm:  0 2px 8px rgba(26,58,74,0.08);
  --shadow-md:  0 6px 24px rgba(26,58,74,0.12);
  --shadow-lg:  0 16px 48px rgba(26,58,74,0.16);
  --shadow-coral: 0 8px 24px rgba(232,97,74,0.25);
  --ease: cubic-bezier(0.4,0,0.2,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--text-1);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }

/* ── NAV ── */
.site-nav {
  position: sticky; top:0; z-index:200;
  background: rgba(26,58,74,0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.nav-inner {
  max-width:1100px; margin:0 auto; padding:0 2rem;
  height:60px; display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav-logo {
  font-family:var(--font-serif); font-size:1.05rem; color:var(--white);
  font-weight:700; letter-spacing:.06em;
  display:flex; align-items:center; gap:.45rem; flex-shrink:0;
}
.nav-logo-dot { width:8px; height:8px; background:var(--coral); border-radius:50%; }
.nav-links { display:flex; align-items:center; gap:.2rem; list-style:none; overflow-x:auto; scrollbar-width:none; }
.nav-links::-webkit-scrollbar { display:none; }
.nav-links a {
  display:flex; align-items:center; gap:.3rem;
  padding:.38rem .8rem; border-radius:20px;
  font-size:.8rem; color:rgba(255,255,255,0.65);
  transition:color .2s,background .2s; white-space:nowrap;
}
.nav-links a:hover { color:var(--white); background:rgba(255,255,255,0.1); }
.nav-links a.active { color:var(--white); background:var(--coral); }

/* ── LAYOUT ── */
.page-wrap { max-width:1100px; margin:0 auto; padding:0 2rem 5rem; }

.page-header { padding:3rem 0 2rem; border-bottom:1px solid var(--warm-gray); margin-bottom:2.5rem; }
.page-eyebrow {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--coral); background:var(--coral-pale); border-radius:20px;
  padding:.22rem .9rem; margin-bottom:.85rem;
}
.page-header h1 {
  font-family:var(--font-serif); font-size:2.2rem; font-weight:700;
  color:var(--teal); line-height:1.25; margin-bottom:.5rem;
}
.page-header p { font-size:1rem; color:var(--text-2); max-width:560px; }

.section-title {
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--font-serif); font-size:1.2rem; font-weight:700;
  color:var(--teal); margin-bottom:1.25rem;
}
.section-title::before {
  content:''; display:block; width:4px; height:20px;
  background:var(--coral); border-radius:2px; flex-shrink:0;
}

/* ── CARDS ── */
.card {
  background:var(--white); border-radius:var(--radius-md);
  border:1px solid var(--warm-gray); box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease-spring), box-shadow .25s var(--ease);
  overflow:hidden;
}
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.card-grid  { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.25rem; }
.card-grid-2 { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.25rem; }

/* ── BADGE ── */
.badge {
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.72rem; font-weight:600; padding:.2rem .65rem; border-radius:20px; letter-spacing:.04em;
}
.badge-coral  { background:var(--coral-pale); color:var(--coral-dark); }
.badge-teal   { background:var(--teal-pale);  color:var(--teal-mid); }
.badge-green  { background:#F0FFF4; color:#276749; }
.badge-purple { background:#FAF5FF; color:#6B46C1; }
.badge-orange { background:#FFFAF0; color:#C05621; }
.badge-gray   { background:var(--cream2); color:var(--text-2); }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.65rem 1.6rem; border-radius:var(--radius-sm);
  font-size:.9rem; font-weight:600; font-family:var(--font-sans);
  transition:all .2s var(--ease); cursor:pointer;
}
.btn-primary { background:var(--coral); color:var(--white); box-shadow:var(--shadow-coral); }
.btn-primary:hover { background:var(--coral-dark); transform:translateY(-1px); }
.btn-outline { background:transparent; color:var(--teal); border:1.5px solid var(--teal-light); }
.btn-outline:hover { background:var(--teal); color:var(--white); }
.btn-ghost { background:rgba(255,255,255,0.12); color:var(--white); border:1px solid rgba(255,255,255,0.2); }
.btn-ghost:hover { background:rgba(255,255,255,0.22); }
.btn-sm { padding:.45rem 1.1rem; font-size:.82rem; }
.btn-lg { padding:.85rem 2.2rem; font-size:1rem; border-radius:var(--radius-md); }

/* ── TABS ── */
.tabs-wrap {
  display:flex; gap:.3rem; padding:.45rem;
  background:var(--cream2); border-radius:var(--radius-md);
  overflow-x:auto; scrollbar-width:none; margin-bottom:1.75rem;
}
.tabs-wrap::-webkit-scrollbar { display:none; }
.tab-btn {
  flex-shrink:0; padding:.52rem 1.15rem; border-radius:var(--radius-sm);
  font-size:.84rem; font-weight:500; color:var(--text-2);
  transition:all .2s var(--ease); white-space:nowrap;
}
.tab-btn:hover { background:var(--white); color:var(--text-1); }
.tab-btn.active { background:var(--white); color:var(--coral); font-weight:700; box-shadow:var(--shadow-sm); }

/* ── K-CARD (expandable) ── */
.k-card {
  background:var(--white); border:1px solid var(--warm-gray); border-radius:var(--radius-md);
  overflow:hidden; cursor:pointer;
  transition:box-shadow .2s var(--ease), transform .2s var(--ease-spring);
  box-shadow:var(--shadow-sm);
}
.k-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.k-card-head { display:flex; align-items:center; gap:.85rem; padding:1.1rem 1.25rem; }
.k-card-icon {
  width:42px; height:42px; border-radius:var(--radius-sm);
  background:var(--coral-pale); color:var(--coral);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0;
}
.k-card-title { font-family:var(--font-serif); font-size:1rem; font-weight:700; color:var(--teal); }
.k-card-sub   { font-size:.77rem; color:var(--text-3); margin-top:.1rem; }
.k-card-arrow { margin-left:auto; color:var(--text-3); transition:transform .3s var(--ease); }
.k-card.open .k-card-arrow { transform:rotate(180deg); }
.k-card-body  { max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.k-card.open .k-card-body { max-height:800px; }
.k-card-body-inner {
  padding:.25rem 1.25rem 1.25rem;
  border-top:1px solid var(--warm-gray);
  font-size:.88rem; color:var(--text-2); line-height:1.9;
}

/* ── ACUPOINT CARD ── */
.acu-card {
  background:var(--white); border-radius:var(--radius-md);
  border:1px solid var(--warm-gray); box-shadow:var(--shadow-sm);
  overflow:hidden; cursor:pointer;
  transition:transform .25s var(--ease-spring), box-shadow .25s var(--ease);
}
.acu-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.acu-card-top {
  padding:1rem 1.15rem .75rem;
  display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem;
}
.acu-card-name { font-family:var(--font-serif); font-size:1.4rem; font-weight:700; color:var(--teal); line-height:1; }
.acu-card-pinyin { font-size:.73rem; color:var(--text-3); margin-top:.2rem; letter-spacing:.05em; }
.acu-card-dot {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; color:var(--white); flex-shrink:0;
}
.acu-card-body { padding:.65rem 1.15rem 1rem; border-top:1px solid var(--warm-gray); }
.acu-card-row { display:flex; gap:.5rem; font-size:.82rem; margin-bottom:.4rem; line-height:1.6; }
.acu-card-label { flex-shrink:0; font-weight:700; color:var(--text-3); font-size:.72rem; min-width:34px; padding-top:.1rem; }
.acu-card-val { color:var(--text-2); }
.acu-card-tags { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.55rem; }

/* ── QUIZ ── */
.quiz-wrap {
  background:linear-gradient(135deg, var(--teal) 0%, var(--teal-mid) 100%);
  border-radius:var(--radius-lg); padding:2rem; margin-top:3rem; color:var(--white);
}
.quiz-title {
  font-family:var(--font-serif); font-size:1.15rem; font-weight:700;
  margin-bottom:1.5rem; display:flex; align-items:center; gap:.6rem;
}
.quiz-q {
  background:rgba(255,255,255,0.07); border-radius:var(--radius-md); padding:1.25rem;
  margin-bottom:1rem; border:1px solid rgba(255,255,255,0.1);
}
.quiz-q-text { font-size:.92rem; font-weight:600; margin-bottom:.9rem; line-height:1.6; }
.quiz-options { display:flex; flex-direction:column; gap:.5rem; }
.quiz-opt {
  display:flex; align-items:center; gap:.7rem; padding:.6rem 1rem;
  border-radius:var(--radius-sm); border:1.5px solid rgba(255,255,255,0.15);
  font-size:.85rem; cursor:pointer; transition:background .15s,border-color .15s;
  user-select:none; color:rgba(255,255,255,0.85);
}
.quiz-opt:hover  { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.3); }
.quiz-opt.selected { background:rgba(232,97,74,0.25); border-color:var(--coral-light); color:var(--white); }
.quiz-opt.correct  { background:rgba(72,187,120,0.25); border-color:#68D391; color:var(--white); }
.quiz-opt.wrong    { background:rgba(229,62,62,0.2); border-color:#FC8181; }
.quiz-opt.show-correct { background:rgba(72,187,120,0.15); border-color:#68D391; opacity:.8; }
.quiz-opt input { display:none; }
.quiz-feedback { font-size:.78rem; margin-top:.4rem; padding:.3rem .6rem; border-radius:4px; display:none; }
.quiz-feedback.correct { background:rgba(72,187,120,0.2); display:block; }
.quiz-feedback.wrong   { background:rgba(229,62,62,0.2); display:block; }
.quiz-submit {
  background:var(--coral); color:var(--white); border-radius:var(--radius-sm);
  padding:.7rem 2rem; font-size:.9rem; font-weight:600; font-family:var(--font-serif);
  transition:background .2s,transform .1s; margin-top:.5rem;
}
.quiz-submit:hover { background:var(--coral-dark); transform:scale(1.02); }
.quiz-result {
  margin-top:1rem; padding:1rem; background:rgba(255,255,255,0.1);
  border-radius:var(--radius-sm); font-family:var(--font-serif); font-size:1rem;
  text-align:center; display:none; border:1px solid rgba(255,255,255,0.15);
}
.mark-done-btn {
  display:block; width:100%; margin-top:.85rem;
  background:transparent; border:1.5px solid rgba(255,255,255,0.3);
  color:rgba(255,255,255,0.8); border-radius:var(--radius-sm); padding:.65rem;
  font-size:.88rem; font-family:var(--font-serif); transition:all .2s;
}
.mark-done-btn:hover { background:rgba(255,255,255,0.1); color:var(--white); }
.mark-done-btn.done { background:var(--success); border-color:var(--success); color:var(--white); }

/* ── SEARCH ── */
.search-bar { position:relative; }
.search-bar input {
  width:100%; padding:.8rem 1.2rem .8rem 3rem; border-radius:var(--radius-xl);
  border:2px solid var(--warm-gray); font-size:.92rem; font-family:var(--font-sans);
  background:var(--white); color:var(--text-1); outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.search-bar input:focus { border-color:var(--coral); box-shadow:0 0 0 3px rgba(232,97,74,0.12); }
.search-bar input::placeholder { color:var(--text-3); }
.search-bar-icon {
  position:absolute; left:1.1rem; top:50%; transform:translateY(-50%);
  color:var(--text-3); font-size:1.05rem; pointer-events:none;
}
.search-dropdown {
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:var(--white); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); border:1px solid var(--warm-gray);
  max-height:300px; overflow-y:auto; z-index:300; display:none;
}
.search-item {
  padding:.7rem 1rem; cursor:pointer; border-bottom:1px solid var(--cream2);
  transition:background .1s; display:flex; align-items:center; gap:.75rem;
}
.search-item:hover { background:var(--coral-pale); }
.search-item:last-child { border-bottom:none; }
.si-dot {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; color:var(--white); flex-shrink:0;
}
.si-name { font-weight:600; font-size:.88rem; }
.si-info { font-size:.74rem; color:var(--text-3); margin-top:.05rem; }

/* ── TABLE ── */
.data-table { width:100%; border-collapse:collapse; font-size:.85rem; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); }
.data-table thead tr { background:var(--teal); }
.data-table th { padding:.72rem 1rem; color:rgba(255,255,255,0.85); font-family:var(--font-serif); font-weight:400; text-align:left; font-size:.8rem; letter-spacing:.05em; }
.data-table td { padding:.62rem 1rem; border-bottom:1px solid var(--warm-gray); color:var(--text-2); vertical-align:top; }
.data-table tbody tr:nth-child(even) td { background:var(--cream2); }
.data-table tbody tr:hover td { background:var(--coral-pale); }

/* ── ANIMATIONS ── */
@keyframes fadeUp  { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes scaleIn { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} }
@keyframes float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes shimmer { from{background-position:-200% 0} to{background-position:200% 0} }

/* ── FOOTER ── */
.site-footer {
  background:var(--teal); color:rgba(255,255,255,0.55);
  text-align:center; padding:2rem; font-size:.82rem;
}
.site-footer strong { color:var(--coral-light); }

/* ── RESPONSIVE ── */
@media(max-width:768px) {
  .nav-inner { padding:0 1rem; }
  .page-wrap { padding:0 1rem 4rem; }
  .page-header h1 { font-size:1.7rem; }
  .card-grid, .card-grid-2 { grid-template-columns:1fr; }
  .quiz-wrap { padding:1.25rem; }
}
@media(max-width:480px) {
  .nav-links a span.nav-txt { display:none; }
}