/* 愈见塔罗 · 编辑级奢华（象牙白） — 提炼自 V2 设计稿 */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --ivory:#F5F1E8; --paper:#FBF8F1; --ink:#16130E; --ink2:#3D372C;
  --muted:#8A8171; --gold:#A9873F; --hair:#D8CDB4;
}
html { scroll-behavior:smooth; }
body {
  font-family:"Helvetica Neue",Arial,"Microsoft YaHei",sans-serif;
  background:var(--ivory); color:var(--ink); -webkit-font-smoothing:antialiased;
}
.serif { font-family:Georgia,"Songti SC",SimSun,serif; }
a { color:inherit; text-decoration:none; }
.caps { letter-spacing:.32em; text-transform:uppercase; }
.frame { max-width:1140px; margin:0 auto; padding:0 24px; }

/* 顶部导航 */
.topnav { border-bottom:1px solid var(--hair); background:rgba(245,241,232,.96); position:sticky; top:0; z-index:50; backdrop-filter:blur(6px); }
.topnav .in { max-width:1140px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:28px; }
.topnav .brand { font-family:Georgia,"Songti SC",SimSun,serif; font-size:16px; letter-spacing:.3em; padding:16px 0; }
.topnav .brand small { color:var(--muted); font-size:9px; letter-spacing:.28em; display:block; margin-top:3px; }
.topnav .links { margin-left:auto; display:flex; gap:24px; flex-wrap:wrap; }
.topnav .links a { font-size:11px; letter-spacing:.22em; color:var(--ink2); padding:6px 0; border-bottom:1px solid transparent; }
.topnav .links a:hover, .topnav .links a.on { color:var(--ink); border-bottom-color:var(--gold); }

/* 区块标题 */
.sec-head { display:flex; align-items:baseline; gap:18px; margin:44px 0 26px; }
.sec-head .no { font-family:Georgia,serif; font-size:13px; color:var(--gold); letter-spacing:.1em; }
.sec-head h2 { font-family:Georgia,"Songti SC",SimSun,serif; font-size:24px; letter-spacing:.24em; }
.sec-head .line { flex:1; height:1px; background:var(--hair); }
.sec-head .en { font-size:10px; color:var(--muted); letter-spacing:.3em; }

/* 按钮 */
.btn {
  display:inline-block; padding:12px 34px; font-size:11px; letter-spacing:.3em;
  border:1px solid var(--ink); color:var(--ink); background:transparent; cursor:pointer; transition:.25s;
}
.btn:hover { background:var(--ink); color:var(--ivory); }
.btn.solid { background:var(--ink); color:var(--ivory); }
.btn.solid:hover { background:var(--gold); border-color:var(--gold); color:#fff; }

/* 首页 Hero */
.hero { display:grid; grid-template-columns:1fr auto; align-items:center; gap:36px; padding:64px 0 54px; }
.hero .over { font-size:11px; letter-spacing:.5em; color:var(--muted); }
.hero h1 {
  font-family:Georgia,"Songti SC",SimSun,serif;
  font-size:clamp(46px,8vw,92px); letter-spacing:.13em; line-height:1.04; margin:20px 0 6px;
}
.hero h1 em { font-style:normal; color:var(--gold); }
.hero .zh { font-family:Georgia,"Songti SC",SimSun,serif; font-size:15px; letter-spacing:.9em; color:var(--ink2); margin-top:16px; }
.hero .sub { font-size:11px; color:var(--muted); letter-spacing:.3em; margin-top:14px; }
.hero .cta { margin-top:32px; display:flex; gap:14px; }
.v-vert {
  writing-mode:vertical-rl; font-family:Georgia,"Songti SC",SimSun,serif;
  font-size:22px; letter-spacing:.8em; color:var(--ink);
  border-left:1px solid var(--gold); padding-left:24px; height:220px;
}
.v-vert small { font-size:9px; letter-spacing:.4em; color:var(--muted); }
@media (max-width:680px){ .hero { grid-template-columns:1fr; } .v-vert { display:none; } }
.hero-rule { display:flex; align-items:center; gap:18px; margin-top:46px; }
.hero-rule .l { flex:1; height:1px; background:var(--hair); }
.hero-rule .l.short { flex:0 0 56px; background:var(--gold); height:2px; }
.hero-rule .d { color:var(--gold); font-size:11px; letter-spacing:.42em; white-space:nowrap; }

/* 首页索引 */
.index-list { border-top:1px solid var(--hair); }
.index-row {
  display:grid; grid-template-columns:64px 1fr 2fr auto; gap:18px; align-items:baseline;
  padding:22px 8px; border-bottom:1px solid var(--hair); cursor:pointer; transition:.2s;
}
.index-row:hover { background:var(--paper); padding-left:18px; }
.index-row .num { font-family:Georgia,serif; color:var(--gold); font-size:15px; }
.index-row .name { font-family:Georgia,"Songti SC",SimSun,serif; font-size:19px; letter-spacing:.3em; }
.index-row .desc { font-size:11.5px; color:var(--muted); letter-spacing:.1em; }
.index-row .arrow { color:var(--gold); }
@media (max-width:720px){ .index-row { grid-template-columns:44px 1fr auto; } .index-row .desc { display:none; } }

/* B端横条 */
.b-strip {
  margin-top:44px; background:#100E0A; color:#EFE9DB;
  display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding:30px 34px;
}
.b-strip .t { font-family:Georgia,"Songti SC",SimSun,serif; font-size:18px; letter-spacing:.3em; color:#E8DCC0; }
.b-strip .d { font-size:11px; color:#9C9170; letter-spacing:.16em; margin-top:8px; line-height:1.9; }
.b-strip .price .p { font-family:Georgia,serif; font-size:34px; color:#E8DCC0; }
.b-strip .price .u { font-size:10px; color:#9C9170; letter-spacing:.3em; margin-top:4px; }
.foot-note { text-align:center; color:var(--muted); font-size:10px; letter-spacing:.2em; margin-top:40px; padding-bottom:50px; }

/* ============ 图鉴 ============ */
.filter-line { display:flex; gap:26px; flex-wrap:wrap; border-bottom:1px solid var(--hair); padding-bottom:14px; margin-bottom:28px; }
.filter-line span { font-size:11px; letter-spacing:.26em; color:var(--muted); cursor:pointer; padding-bottom:3px; }
.filter-line span.on { color:var(--ink); border-bottom:1px solid var(--gold); }
.filter-line .count { margin-left:auto; color:var(--gold); }

.atlas-layout { display:grid; grid-template-columns:1.6fr 1fr; gap:30px; align-items:start; }
@media (max-width:880px){ .atlas-layout { grid-template-columns:1fr; } }

.card-wall { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:16px; }
.tcard { cursor:pointer; transition:.25s; border:1px solid var(--hair); background:var(--paper); padding:8px 8px 10px; }
.tcard img { width:100%; aspect-ratio:.58; object-fit:cover; display:block; filter:saturate(.92); }
.tcard .nm { font-family:Georgia,"Songti SC",SimSun,serif; font-size:11px; letter-spacing:.18em; text-align:center; margin-top:8px; color:var(--ink2); }
.tcard .rn { font-family:Georgia,serif; font-size:9px; color:var(--gold); text-align:center; display:block; margin-top:2px; letter-spacing:.1em; }
.tcard:hover { transform:translateY(-6px); border-color:var(--gold); }
.tcard.on { border-color:var(--gold); box-shadow:0 10px 26px rgba(169,135,63,.18); }

.detail { position:sticky; top:90px; }
@media (max-width:880px){ .detail { position:static !important; } }
.detail .head { display:flex; gap:20px; border-bottom:1px solid var(--hair); padding-bottom:20px; }
.detail .pic { width:128px; flex-shrink:0; border:1px solid var(--hair); background:var(--paper); padding:6px; }
.detail .pic img { width:100%; display:block; }
.detail .tit h3 { font-family:Georgia,"Songti SC",SimSun,serif; font-size:24px; letter-spacing:.28em; }
.detail .tit .en { font-size:10px; color:var(--muted); letter-spacing:.24em; margin-top:8px; }
.detail .tit .kw { font-size:11px; color:var(--ink2); letter-spacing:.14em; margin-top:14px; }
.mean { padding:16px 0; border-bottom:1px solid var(--hair); }
.mean .lab { font-size:10px; letter-spacing:.3em; color:var(--gold); margin-bottom:8px; }
.mean.rev .lab { color:var(--ink2); }
.mean p { font-size:13px; color:var(--ink2); line-height:2; }
.detail .hint { padding-top:16px; font-size:10px; color:var(--muted); letter-spacing:.16em; line-height:2; }
.panel { background:var(--paper); border:1px solid var(--hair); padding:26px 28px; }

/* ============ 课程 ============ */
.stage-h { display:flex; align-items:baseline; gap:14px; margin:38px 0 6px; }
.stage-h .t { font-family:Georgia,"Songti SC",SimSun,serif; font-size:16px; letter-spacing:.28em; color:var(--ink); }
.stage-h .l { flex:1; height:1px; background:var(--hair); }
.lesson-row { display:grid; grid-template-columns:56px 1fr auto auto; gap:16px; align-items:baseline; padding:16px 8px; border-bottom:1px solid var(--hair); }
.lesson-row.ready { cursor:pointer; transition:.2s; }
.lesson-row.ready:hover { background:var(--paper); padding-left:16px; }
.lesson-row .no { font-family:Georgia,serif; color:var(--gold); font-size:14px; }
.lesson-row .t { font-size:14px; letter-spacing:.12em; }
.lesson-row.pending .t { color:var(--muted); }
.lesson-row .c { font-size:10px; color:var(--muted); letter-spacing:.1em; }
.badge { font-size:9px; letter-spacing:.2em; padding:4px 10px; border:1px solid var(--hair); color:var(--muted); }
.badge.ready { border-color:var(--gold); color:var(--gold); }

/* 课程阅读页 */
.course-head { padding:50px 0 30px; border-bottom:1px solid var(--hair); }
.course-head .stage { font-size:10px; letter-spacing:.34em; color:var(--gold); }
.course-head h1 { font-family:Georgia,"Songti SC",SimSun,serif; font-size:clamp(28px,4.4vw,42px); letter-spacing:.14em; margin-top:16px; }
.course-head .meta { display:flex; gap:26px; flex-wrap:wrap; margin-top:18px; font-size:10.5px; color:var(--muted); letter-spacing:.16em; }
.course-body { display:grid; grid-template-columns:220px 1fr; gap:44px; padding:36px 0 70px; }
.course-toc { position:sticky; top:90px; align-self:start; border-right:1px solid var(--hair); padding-right:26px; }
@media (max-width:880px){ .course-body { grid-template-columns:1fr; } .course-toc { position:static !important; border:none; padding:0; } }
.course-toc .h { font-size:10px; letter-spacing:.3em; color:var(--muted); margin-bottom:14px; }
.course-toc a { display:block; font-size:12px; color:var(--ink2); letter-spacing:.06em; padding:9px 0; border-bottom:1px solid var(--hair); line-height:1.7; }
.course-toc a:hover { color:var(--gold); }
.sec { margin-bottom:52px; }
.sec .no { font-family:Georgia,serif; color:var(--gold); font-size:13px; letter-spacing:.1em; }
.sec h2 { font-family:Georgia,"Songti SC",SimSun,serif; font-size:22px; letter-spacing:.16em; margin:10px 0 22px; }
.sec p { font-size:14px; line-height:2.3; color:var(--ink2); letter-spacing:.04em; margin-bottom:18px; text-align:justify; }
.sec blockquote {
  font-family:Georgia,"Songti SC",SimSun,serif; font-size:17px; letter-spacing:.14em;
  border-left:2px solid var(--gold); padding:6px 0 6px 22px; margin:26px 0; color:var(--ink);
}
.kp { background:var(--paper); border:1px solid var(--hair); padding:20px 24px; margin-top:8px; }
.kp .h { font-size:10px; letter-spacing:.3em; color:var(--gold); margin-bottom:12px; }
.kp li { font-size:12.5px; color:var(--ink2); line-height:2.2; letter-spacing:.04em; list-style:none; padding-left:18px; position:relative; }
.kp li::before { content:"—"; position:absolute; left:0; color:var(--gold); }

/* ============ 牌阵研习 ============ */
.spread-layout { display:grid; grid-template-columns:1fr 1.5fr; gap:34px; align-items:start; }
@media (max-width:920px){ .spread-layout { grid-template-columns:1fr; } }

.spread-list { border-top:1px solid var(--hair); }
.spread-row {
  display:grid; grid-template-columns:40px 1fr auto; gap:12px; align-items:baseline;
  padding:17px 8px; border-bottom:1px solid var(--hair); cursor:pointer; transition:.2s;
}
.spread-row:hover { background:var(--paper); padding-left:15px; }
.spread-row.on { background:var(--paper); box-shadow:inset 2px 0 0 var(--gold); padding-left:15px; }
.spread-row .no { font-family:Georgia,serif; color:var(--gold); font-size:13px; }
.spread-row .t { font-family:Georgia,"Songti SC",SimSun,serif; font-size:15.5px; letter-spacing:.18em; }
.spread-row .n { font-size:10px; color:var(--muted); letter-spacing:.12em; white-space:nowrap; }

.variant-tabs { display:flex; gap:10px; margin:18px 0 6px; }
.variant-tabs span {
  font-size:10px; letter-spacing:.2em; color:var(--muted); cursor:pointer;
  border:1px solid var(--hair); padding:6px 14px; transition:.2s;
}
.variant-tabs span.on { border-color:var(--gold); color:var(--gold); }
.variant-tabs span:hover { border-color:var(--gold); }

.pos-list { border-top:1px solid var(--hair); margin-top:16px; }
.pos-item { display:grid; grid-template-columns:34px 1fr; gap:14px; padding:13px 4px; border-bottom:1px solid var(--hair); }
.pos-item .i { font-family:Georgia,serif; color:var(--gold); font-size:13px; }
.pos-item .p { font-size:13px; color:var(--ink2); letter-spacing:.06em; line-height:1.8; }
.pos-item.cut .p::after { content:"切牌"; font-size:9px; letter-spacing:.2em; color:var(--paper); background:var(--gold); padding:2px 8px; margin-left:10px; vertical-align:1px; }

.spread-note { font-size:10px; color:var(--muted); letter-spacing:.16em; line-height:2.1; margin-top:18px; }
.draw-bar { display:flex; gap:14px; align-items:center; margin-top:26px; flex-wrap:wrap; }
.draw-bar .hint { font-size:10px; color:var(--muted); letter-spacing:.2em; }

.draw-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:22px; margin-top:26px; }
.dcard { cursor:pointer; perspective:900px; }
.dcard .flip { position:relative; width:100%; aspect-ratio:.58; transform-style:preserve-3d; transition:transform .65s cubic-bezier(.2,.7,.3,1); }
.dcard.open .flip { transform:rotateY(180deg); }
.dcard .face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border:1px solid var(--hair); }
.dcard .back {
  background:#16130E; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
}
.dcard .back::before {
  content:""; position:absolute; inset:7px; border:1px solid rgba(169,135,63,.55); pointer-events:none;
}
.dcard .back .mono { font-family:Georgia,"Songti SC",SimSun,serif; color:#C9A75C; font-size:19px; letter-spacing:.2em; }
.dcard .back .en { font-size:8px; letter-spacing:.34em; color:#8A7442; }
.dcard .back .star { color:#C9A75C; font-size:10px; letter-spacing:.6em; padding-left:.6em; }
.dcard .front { background:var(--paper); transform:rotateY(180deg); padding:6px; }
.dcard .front img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.92); }
.dcard .front img.rev { transform:rotate(180deg); }
.dcard .front .cutmark {
  position:absolute; top:10px; left:10px; font-size:8px; letter-spacing:.2em; color:var(--paper);
  background:var(--gold); padding:2px 7px; z-index:2;
}
.dcard .meta { margin-top:12px; text-align:center; }
.dcard .meta .pos { font-size:9px; letter-spacing:.24em; color:var(--gold); }
.dcard .meta .nm { font-family:Georgia,"Songti SC",SimSun,serif; font-size:13.5px; letter-spacing:.14em; margin-top:5px; }
.dcard .meta .tag { display:inline-block; font-size:9px; letter-spacing:.2em; padding:2px 9px; margin-top:7px; border:1px solid var(--hair); color:var(--ink2); }
.dcard .meta .tag.rev { border-color:var(--ink2); color:var(--ink2); }
.dcard .meta .mn { font-size:10.5px; color:var(--muted); line-height:1.9; margin-top:9px; letter-spacing:.03em; min-height:40px; }
.dcard:not(.open):hover .flip { transform:translateY(-6px); }
.dcard.open { cursor:default; }

@media (max-width:920px){ .draw-grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:16px; } }

/* ============ 测验认证 ============ */
.quiz-start { display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start; }
@media (max-width:880px){ .quiz-start { grid-template-columns:1fr; } }
.quiz-types li { font-size:12.5px; color:var(--ink2); line-height:2.4; letter-spacing:.05em; list-style:none; padding-left:18px; position:relative; }
.quiz-types li::before { content:"—"; position:absolute; left:0; color:var(--gold); }
.count-pick { display:flex; gap:12px; margin:22px 0 28px; }
.count-pick span {
  font-family:Georgia,serif; font-size:15px; color:var(--ink2); cursor:pointer;
  border:1px solid var(--hair); padding:12px 26px; transition:.2s; letter-spacing:.1em;
}
.count-pick span:hover { border-color:var(--gold); }
.count-pick span.on { border-color:var(--gold); color:var(--gold); box-shadow:inset 0 -2px 0 var(--gold); }

.quiz-top { display:flex; align-items:baseline; gap:20px; margin-bottom:26px; }
.quiz-top .prog { font-family:Georgia,serif; font-size:14px; color:var(--gold); letter-spacing:.14em; }
.quiz-top .bar { flex:1; height:1px; background:var(--hair); position:relative; }
.quiz-top .bar i { position:absolute; left:0; top:-1px; height:3px; background:var(--gold); transition:width .35s; }
.quiz-top .score { font-size:11px; color:var(--muted); letter-spacing:.2em; }

.q-card { max-width:620px; margin:0 auto; text-align:center; }
.q-card .q-img { width:150px; margin:0 auto 22px; border:1px solid var(--hair); background:var(--paper); padding:7px; }
.q-card .q-img img { width:100%; display:block; }
.q-card h3 { font-family:Georgia,"Songti SC",SimSun,serif; font-size:19px; letter-spacing:.12em; line-height:1.9; margin-bottom:26px; }
.q-opts { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (max-width:560px){ .q-opts { grid-template-columns:1fr; } }
.q-opts button {
  font-family:inherit; font-size:13px; letter-spacing:.1em; color:var(--ink2); cursor:pointer;
  border:1px solid var(--hair); background:var(--paper); padding:15px 12px; transition:.2s; line-height:1.7;
}
.q-opts button:hover { border-color:var(--gold); }
.q-opts button.right { border-color:var(--gold); background:#F2E9D6; color:var(--ink); }
.q-opts button.wrong { border-color:#B0533A; background:#F3E2DB; color:#8A3D29; }

.quiz-result { text-align:center; max-width:560px; margin:0 auto; }
.quiz-result .big { font-family:Georgia,serif; font-size:64px; color:var(--ink); }
.quiz-result .big small { font-size:18px; color:var(--muted); }
.quiz-result .verdict { font-family:Georgia,"Songti SC",SimSun,serif; font-size:17px; letter-spacing:.3em; margin:14px 0 8px; }
.quiz-result .sub { font-size:11px; color:var(--muted); letter-spacing:.18em; line-height:2.2; }
.cert-form { display:flex; gap:12px; justify-content:center; margin:30px 0 8px; flex-wrap:wrap; }
.cert-form input {
  font-family:inherit; font-size:13px; letter-spacing:.2em; text-align:center;
  border:1px solid var(--hair); background:var(--paper); padding:12px 18px; width:180px; outline:none;
}
.cert-form input:focus { border-color:var(--gold); }

.cert {
  border:1px solid var(--gold); outline:1px solid var(--hair); outline-offset:5px;
  padding:56px 40px; text-align:center; max-width:620px; margin:34px auto 0; background:var(--paper);
}
.cert .org { font-size:10px; letter-spacing:.5em; color:var(--muted); }
.cert h2 { font-family:Georgia,"Songti SC",SimSun,serif; font-size:30px; letter-spacing:.5em; margin:22px 0 6px; text-indent:.5em; }
.cert .line { width:56px; height:1px; background:var(--gold); margin:18px auto; }
.cert .who { font-family:Georgia,"Songti SC",SimSun,serif; font-size:26px; letter-spacing:.3em; margin:12px 0; }
.cert .txt { font-size:11.5px; color:var(--ink2); letter-spacing:.14em; line-height:2.4; }
.cert .meta { display:flex; justify-content:space-between; margin-top:34px; font-size:10px; color:var(--muted); letter-spacing:.2em; }

/* ---------- 手机/平板全局自适应 ---------- */
@media (max-width: 720px) {
  body { -webkit-text-size-adjust: 100%; }
  .frame { padding: 0 16px; }
  .topnav .in { flex-wrap: wrap; padding: 0 16px; row-gap: 0; }
  .topnav .brand { font-size: 14px; letter-spacing: .2em; padding: 12px 0 6px; }
  .topnav .brand small { display: none; }
  .topnav .links { margin-left: 0; width: 100%; justify-content: space-between; gap: 6px; padding-bottom: 10px; flex-wrap: nowrap; overflow-x: auto; }
  .topnav .links a { font-size: 10.5px; letter-spacing: .04em; padding: 4px 0; white-space: nowrap; }
  .sec-head { gap: 10px; margin: 30px 0 20px; }
  .sec-head h2 { font-size: 19px; letter-spacing: .16em; }
  .sec-head .en { display: none; }
  .foot-note { padding: 0 16px; }
}

/* 手机端课程列表行：标题给足空间，隐藏字数 */
@media (max-width: 720px) {
  .lesson-row { grid-template-columns: 34px 1fr auto; gap: 10px; padding: 14px 4px; align-items: baseline; }
  .lesson-row .no { font-size: 11px; }
  .lesson-row .t { font-size: 13.5px; letter-spacing: .03em; line-height: 1.6; }
  .lesson-row .c { display: none; }
}

/* 手机端（尤其微信内置浏览器）：吸顶导航去毛玻璃、全不透明，修复滚动时内容透叠 */
@media (max-width: 720px) {
  .topnav { background: #F5F1E8; backdrop-filter: none; -webkit-backdrop-filter: none; }
}