/* PHOENIX VORTEX · 塔罗爱情版 —— 配色取自教材 PDF 实测：
   旋涡深紫 #290A2D / 紫 #771F68 / 品红 #902355 / 火焰红 #BE382A / 橙 #E69742 / 金 #F5D457 / 纸面米白与奶油 #F4E8C8 / 标题锈红 #901020 */
:root{
  --bg:#1D0A26; --bg2:#290A2D; --bg3:#38134a;
  --paper:#FBF7EE; --paper2:#F4E8C8; --paper3:#EFE3C8;
  --ink:#2B1220; --ink2:#4A2440;
  --gold:#E9A13B; --gold2:#F5D457; --gold-bright:#F5D457; --flame:#BE382A; --rust:#901020;
  --muted:#CBB8A6; --btn-deep:#7A4A00;
  --plum:#771F68; --magenta:#902355;
  --cream:#F7EFDF; --cream-dim:#cbb8a6;
  --line:#4a2158; --ok:#7fb069; --bad:#e4572e;
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.45);
  --serif:"Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --sans:-apple-system,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
}
*{box-sizing:border-box}
/* 全站图片/SVG 尺寸兜底：任何图片不得撑破容器（返工一·防撑满整屏事故） */
img,svg{max-width:100%}
img{height:auto}
html{scroll-behavior:smooth}
body{margin:0;background:
  radial-gradient(1100px 600px at 85% -10%, rgba(119,31,104,.5), transparent 60%),
  radial-gradient(900px 500px at -10% 110%, rgba(144,35,85,.35), transparent 55%),
  var(--bg);
  color:var(--cream); font-family:var(--sans); min-height:100vh; display:flex; flex-direction:column}
a{color:var(--gold); text-decoration:none}
button{font-family:inherit; cursor:pointer}
input,select,textarea{font-family:inherit}
.view{flex:1; width:100%; max-width:1060px; margin:0 auto; padding:18px 16px 40px}

/* ---------- 顶栏（只留品牌块，导航已移至底部） ---------- */
.topbar{position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:14px;
  padding:8px 16px; background:rgba(29,10,38,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:10px; color:var(--cream); flex:none; min-width:0}
.brand-img{width:42px; height:42px; max-width:42px; max-height:42px; flex:none; object-fit:cover; border-radius:9px; border:1px solid rgba(233,161,59,.55); display:block}
.brand-text{font-family:var(--serif); font-size:20px; letter-spacing:.14em; line-height:1.05; display:flex; flex-direction:column; flex:none; white-space:nowrap}
.brand-text small{font-size:10px; letter-spacing:.42em; color:var(--gold); margin-top:3px; white-space:nowrap}

/* ---------- 底部导航（全站固定一排 8 项） ---------- */
body{padding-bottom:calc(58px + env(safe-area-inset-bottom, 0px))}
.bottomnav{position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; align-items:stretch;
  background:rgba(29,10,38,.97); border-top:1px solid rgba(245,212,87,.38);
  padding-bottom:env(safe-area-inset-bottom, 0px); box-shadow:0 -6px 18px rgba(0,0,0,.35)}
.bottomnav a{position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:7px 0 6px; color:var(--cream-dim); font-size:11px; letter-spacing:.08em; line-height:1.15; white-space:nowrap}
.bottomnav a .bnav-ico{width:21px; height:21px; flex:none; display:block}
.bottomnav a:hover{color:var(--gold2)}
.bottomnav a.on{color:var(--gold2)}
.bottomnav a.on::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:22px; height:2.5px; border-radius:0 0 3px 3px; background:var(--gold2)}
@media (max-width:360px){
  .bottomnav a{font-size:10.5px; letter-spacing:.03em; padding-top:6px}
  .bottomnav a .bnav-ico{width:20px; height:20px}
}

/* ---------- 通用 ---------- */
h1,h2,h3{font-family:var(--serif); font-weight:600}
.page-title{font-size:26px; letter-spacing:.08em; margin:6px 0 4px; color:var(--cream)}
.page-sub{color:var(--cream-dim); margin:0 0 18px; font-size:14px; line-height:1.7}
.btn{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--gold);
  background:linear-gradient(180deg, rgba(233,161,59,.18), rgba(233,161,59,.06));
  color:var(--gold2); padding:10px 18px; border-radius:999px; font-size:15px; transition:.15s}
.btn:hover{background:rgba(233,161,59,.28); transform:translateY(-1px)}
.btn.primary{background:linear-gradient(180deg,#A85E18,#83450E); color:#fff8ec; border-color:#C97F22; font-weight:600}
.btn.ghost{border-color:var(--line); color:var(--cream-dim); background:transparent}
.btn.small{padding:6px 12px; font-size:13px}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
.chip{display:inline-block; padding:5px 12px; border-radius:999px; border:1px solid var(--line);
  color:var(--cream-dim); font-size:13px; background:rgba(255,255,255,.03); cursor:pointer}
.chip.on{border-color:var(--gold); color:var(--gold2); background:rgba(233,161,59,.14)}
.paper{background:var(--paper); color:var(--ink); border-radius:var(--radius); box-shadow:var(--shadow)}
.muted{color:var(--cream-dim)} .small{font-size:13px}
.tag{font-size:11px; padding:2px 8px; border-radius:6px; background:rgba(144,35,85,.16); color:#e8a2c0; border:1px solid rgba(144,35,85,.4)}
.tag.gold{background:rgba(233,161,59,.14); color:var(--gold2); border-color:rgba(233,161,59,.4)}
.notice{border:1px solid rgba(233,161,59,.5); background:rgba(233,161,59,.1); color:var(--gold2);
  border-radius:10px; padding:10px 14px; font-size:14px; line-height:1.7}
.err{border-color:rgba(228,87,46,.6); background:rgba(228,87,46,.12); color:#ffb59d}

/* ---------- 首页 ---------- */
.hero{position:relative; overflow:hidden; border-radius:20px; padding:20px 24px; text-align:left;
  display:flex; gap:22px; align-items:center;
  background:radial-gradient(420px 240px at 50% -40px, rgba(233,161,59,.28), transparent 70%),
             linear-gradient(180deg, var(--bg3), var(--bg2)); border:1px solid var(--line)}
.hero-art{width:220px; max-width:220px; max-height:200px; aspect-ratio:655/575; flex:none; border-radius:14px; overflow:hidden;
  border:1px solid rgba(233,161,59,.45); box-shadow:0 10px 24px rgba(0,0,0,.5)}
.hero-art img{width:100%; height:100%; max-height:100%; object-fit:cover; display:block}
.hero-text{flex:1; min-width:0}
.hero h1{font-size:32px; letter-spacing:.22em; margin:6px 0 2px; color:var(--cream)}
.hero .en{letter-spacing:.5em; color:var(--gold); font-size:12px; text-transform:uppercase}
.hero p{color:var(--cream-dim); line-height:1.85; max-width:560px; margin:10px 0 16px; font-size:15px}
.hero .cta-row{display:flex; gap:10px; justify-content:flex-start; flex-wrap:wrap}
@media(max-width:680px){
  .hero{flex-direction:column; text-align:center; padding:16px 16px 18px; gap:12px}
  .hero-art{width:160px; max-width:160px; max-height:146px}
  .hero .cta-row{justify-content:center}
  .hero p{margin-left:auto; margin-right:auto}
}
.home-daily{margin-top:18px; display:flex; gap:16px; align-items:center; padding:16px; text-align:left}
.home-daily img{width:74px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.35)}
.grid-links{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:18px}
.link-card{display:block; padding:18px 16px; border-radius:var(--radius); border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); color:var(--cream)}
.link-card:hover{border-color:var(--gold)}
.link-card b{font-family:var(--serif); font-size:17px; letter-spacing:.1em; display:block; margin-bottom:6px; color:var(--gold2)}
.link-card span{font-size:13px; color:var(--cream-dim); line-height:1.6; display:block}

/* ---------- 图鉴 ---------- */
.toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.searchbox{flex:1; min-width:170px; background:rgba(255,255,255,.06); border:1px solid var(--line);
  border-radius:999px; padding:10px 16px; color:var(--cream); font-size:15px}
.searchbox::placeholder{color:#9b8296}
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:14px}
.tcard{display:block; text-align:center; color:var(--cream)}
.tcard .imgwrap{position:relative; border-radius:10px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,.4); border:1px solid rgba(233,161,59,.25)}
.tcard img{width:100%; display:block; aspect-ratio: 560/973; object-fit:cover; background:#3a2144}
.tcard .fav{position:absolute; top:6px; right:6px; width:28px; height:28px; border-radius:50%; border:none;
  background:rgba(29,10,38,.65); color:#d8c7a8; font-size:15px; line-height:1}
.tcard .fav.on{color:var(--gold2)}
.tcard b{display:block; font-family:var(--serif); font-size:14px; margin-top:7px; letter-spacing:.05em}
.tcard span{font-size:11px; color:var(--cream-dim)}
@media (hover:hover){ .tcard:hover .imgwrap{outline:2px solid var(--gold)} }

/* ---------- 牌详情 ---------- */
.detail{display:grid; grid-template-columns:250px 1fr; gap:22px; align-items:start}
.detail .bigimg{width:100%; border-radius:14px; box-shadow:var(--shadow); border:1px solid rgba(233,161,59,.3)}
.detail .bigimg.rev{transform:rotate(180deg)}
.detail-body{padding:22px 24px}
.detail-body h1{margin:0 0 2px; font-size:26px; color:var(--ink)}
.detail-body .en{color:var(--rust); letter-spacing:.14em; font-size:13px; text-transform:uppercase}
.kw-row{display:flex; gap:6px; flex-wrap:wrap; margin:12px 0}
.kw{font-size:12.5px; background:var(--paper2); border:1px solid #e0cd96; color:#7a5510; border-radius:999px; padding:3px 10px}
.imageline{font-family:var(--serif); font-size:16.5px; line-height:1.8; color:var(--plum); border-left:3px solid var(--gold); padding-left:12px; margin:14px 0}
.detail-body h3{color:var(--rust); font-size:16px; margin:20px 0 8px; letter-spacing:.1em}
.detail-body p{line-height:1.85; margin:0 0 8px; font-size:15px}
.subfield{margin:0 0 7px; line-height:1.85; font-size:15px}
.subfield b{color:var(--plum); font-weight:600; margin-right:6px}
.orient-switch{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; margin:8px 0 4px}
.orient-switch button{border:none; background:transparent; color:var(--cream-dim); padding:8px 18px; font-size:14px}
.orient-switch button.on{background:var(--gold); color:#33180a; font-weight:600}
.on-dark .detail-body a{color:var(--plum)}
.quickline{background:var(--paper2); border-radius:10px; padding:10px 14px; font-size:14px; line-height:1.8; margin:10px 0}
@media(max-width:680px){ .detail{grid-template-columns:1fr} .detail .bigimg{max-width:230px; margin:0 auto; display:block} }

/* ---------- 牌阵 ---------- */
.spread-picker{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin-bottom:16px}
.spread-opt{border:1px solid var(--line); border-radius:12px; padding:12px 14px; cursor:pointer; background:rgba(255,255,255,.03)}
.spread-opt.on{border-color:var(--gold); background:rgba(233,161,59,.17)}
@keyframes spflash{0%{box-shadow:0 0 0 3px rgba(245,212,87,.9)}100%{box-shadow:0 0 0 0 rgba(245,212,87,0)}}
.spread-opt.flash{animation:spflash .55s ease-out}
.spread-opt b{font-family:var(--serif); display:block; font-size:15.5px; color:var(--cream); margin-bottom:4px}
.spread-opt span{font-size:12px; color:var(--cream-dim); line-height:1.55; display:block}
.q-input{width:100%; background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; color:var(--cream); font-size:15px; margin-bottom:14px}
.fan{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:18px 10px; border:1px dashed var(--line); border-radius:14px; margin:14px 0}
.cardback{width:56px; height:96px; border-radius:8px; border:1px solid rgba(233,161,59,.55); cursor:pointer; flex:none;
  background:radial-gradient(circle at 50% 38%, rgba(233,161,59,.35), transparent 46%), linear-gradient(160deg,#38134a,#1D0A26);
  display:flex; align-items:center; justify-content:center; transition:.15s; padding:0}
.cardback:hover{transform:translateY(-6px); border-color:var(--gold2)}
.cardback.used{opacity:.18; pointer-events:none; transform:none}
.cardback svg{width:34px; height:34px}
.drawn-row{display:flex; flex-wrap:wrap; gap:14px; margin:16px 0}
.drawn{text-align:center; width:104px}
.drawn img{width:104px; border-radius:9px; box-shadow:0 8px 20px rgba(0,0,0,.45); display:block}
.drawn img.rev{transform:rotate(180deg)}
.drawn .pos{font-size:12px; color:var(--gold2); margin-top:6px; letter-spacing:.06em}
.drawn .nm{font-family:var(--serif); font-size:13.5px}
.drawn .ori{font-size:11px; color:var(--cream-dim)}
.reading{padding:22px 24px; margin-top:18px}
.reading h2{color:var(--ink); margin-top:0}
.reading .rcard{border-top:1px solid #e6d9bd; padding:14px 0}
.reading .rcard:first-of-type{border-top:none}
.reading .rcard h3{color:var(--rust); margin:0 0 6px; font-size:16.5px}
.reading p{line-height:1.85; font-size:15px; margin:0 0 7px}
.manual-row{display:grid; grid-template-columns:110px 1fr auto; gap:10px; align-items:center; margin-bottom:10px}
.manual-row label{color:var(--gold2); font-size:14px}
.manual-row select{background:rgba(255,255,255,.07); color:var(--cream); border:1px solid var(--line); border-radius:9px; padding:9px; font-size:14px; width:100%}
.manual-row select option{color:#111}
.ori-toggle{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.ori-toggle button{border:none; background:transparent; color:var(--cream-dim); padding:8px 12px; font-size:13px}
.ori-toggle button.on{background:var(--gold); color:#33180a; font-weight:600}
@media(max-width:560px){ .manual-row{grid-template-columns:1fr} }

/* ---------- 每日一牌 ---------- */
.daily-wrap{display:grid; grid-template-columns:230px 1fr; gap:22px; align-items:start}
.daily-wrap img.big{width:100%; border-radius:14px; box-shadow:var(--shadow)}
.daily-wrap img.big.rev{transform:rotate(180deg)}
.streak{display:inline-flex; gap:8px; align-items:center; background:rgba(233,161,59,.13); border:1px solid rgba(233,161,59,.45);
  color:var(--gold2); border-radius:999px; padding:6px 14px; font-size:14px}
textarea.judge{width:100%; min-height:84px; background:rgba(255,255,255,.06); border:1px solid var(--line);
  border-radius:12px; color:var(--cream); padding:12px; font-size:15px; line-height:1.7}
@media(max-width:680px){ .daily-wrap{grid-template-columns:1fr} .daily-wrap img.big{max-width:220px; margin:0 auto; display:block} }

/* ---------- 学习 ---------- */
.flash-stage{perspective:1200px; width:min(300px,80vw); margin:18px auto}
.flash{position:relative; width:100%; aspect-ratio:560/973; transform-style:preserve-3d; transition:transform .55s; cursor:pointer}
.flash.flipped{transform:rotateY(180deg)}
.flash .face{position:absolute; inset:0; backface-visibility:hidden; border-radius:14px; overflow:hidden; box-shadow:var(--shadow)}
.flash .face img{width:100%; height:100%; object-fit:cover; display:block}
.flash .back{transform:rotateY(180deg); background:var(--paper); color:var(--ink); padding:12px; overflow:hidden}
.flash-back-in{height:100%; box-sizing:border-box; border:1px solid #d9BE7E; border-radius:9px; padding:14px 14px 12px; display:flex; flex-direction:column; align-items:center; text-align:center; overflow:auto}
.flash-thumb{width:64px; height:auto; border-radius:5px; border:1px solid var(--line); margin-bottom:8px}
.flash .back h3{color:var(--rust); margin:0 0 2px}
.flash-act{line-height:1.75; margin:8px 0 0; font-size:13.5px; text-align:left}
.flash-back-foot{margin-top:auto; padding-top:10px; display:flex; flex-direction:column; gap:2px; align-items:center}
.quiz-opt{display:block; width:100%; text-align:left; margin:8px 0; padding:13px 16px; border-radius:12px;
  border:1px solid var(--line); background:rgba(255,255,255,.045); color:var(--cream); font-size:15px; line-height:1.6}
.quiz-opt:hover{border-color:var(--gold)}
.quiz-opt.right{border-color:var(--ok); background:rgba(127,176,105,.16)}
.quiz-opt.wrong{border-color:var(--bad); background:rgba(228,87,46,.14)}
.quiz-img{width:150px; border-radius:10px; display:block; margin:6px auto 14px; box-shadow:var(--shadow)}
.scorebar{display:flex; gap:16px; flex-wrap:wrap; font-size:14px; color:var(--cream-dim); margin-bottom:10px}
.scorebar b{color:var(--gold2); font-size:17px}

/* ---------- 历史 / 牌迹 ---------- */
.hist-item{display:block; padding:14px 16px; border:1px solid var(--line); border-radius:12px; margin-bottom:10px; color:var(--cream); background:rgba(255,255,255,.03)}
.hist-item:hover{border-color:var(--gold)}
.hist-item .t{font-size:12px; color:var(--cream-dim)}
.hist-item .q{font-family:var(--serif); font-size:16px; margin:3px 0}
.hist-item .c{font-size:13px; color:var(--cream-dim); line-height:1.7}
.badge{font-size:11px; padding:2px 8px; border-radius:6px; border:1px solid var(--line); color:var(--cream-dim)}
.badge.hit{border-color:var(--ok); color:#a8d08d} .badge.miss{border-color:var(--bad); color:#ffb59d}
.badge.pend{border-color:var(--gold); color:var(--gold2)}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:14px 0}
.stat-box{border:1px solid var(--line); border-radius:12px; padding:16px; text-align:center; background:rgba(255,255,255,.03)}
.stat-box b{display:block; font-size:28px; font-family:var(--serif); color:var(--gold2)}
.stat-box span{font-size:12.5px; color:var(--cream-dim)}
.bar-row{display:flex; align-items:center; gap:10px; margin:7px 0; font-size:14px}
.bar-row .lab{width:92px; flex:none; color:var(--cream-dim)}
.bar-row .bar{flex:1; height:12px; background:rgba(255,255,255,.07); border-radius:6px; overflow:hidden}
.bar-row .bar i{display:block; height:100%; background:linear-gradient(90deg, var(--magenta), var(--gold))}
.bar-row .n{width:38px; text-align:right; color:var(--gold2)}
.field{margin-bottom:12px}
.field label{display:block; font-size:13px; color:var(--cream-dim); margin-bottom:6px}
.field textarea,.field select{width:100%; background:rgba(255,255,255,.06); border:1px solid var(--line);
  border-radius:10px; color:var(--cream); padding:10px 12px; font-size:14.5px; line-height:1.7}
.field select option{color:#111}

/* ---------- 页脚 ---------- */
.footer{border-top:1px solid var(--line); padding:22px 18px 30px; text-align:center; color:#9b8296; font-size:12.5px; line-height:1.8}
.footer p{margin:3px auto; max-width:760px}
.foot-mark{width:120px; height:24px; opacity:.8}
.footer a{color:var(--gold)}
table.quick{width:100%; border-collapse:collapse; background:var(--paper); color:var(--ink); border-radius:12px; overflow:hidden; font-size:13.5px}
table.quick th{background:var(--paper2); color:var(--rust); text-align:left; padding:9px 12px; font-family:var(--serif)}
table.quick td{padding:8px 12px; border-top:1px solid #eadfc2; line-height:1.6; vertical-align:top}
table.quick tr td:first-child{font-family:var(--serif); white-space:nowrap}
.ai-out{white-space:pre-wrap; line-height:1.9; font-size:15px}
/* ===== 返工追加：牌名可点击 / 打星 / 分享 / 错题集 / 范围选择 ===== */
.cardlink{color:#EFA8C8; text-decoration:underline dotted var(--gold) 1.5px; text-underline-offset:3px; cursor:pointer; font-weight:600}
.cardlink:hover{color:var(--gold2); text-decoration-color:#EFA8C8}
.paper .cardlink, .exp-box .cardlink{color:var(--magenta)}
.paper .cardlink:hover, .exp-box .cardlink:hover{color:var(--plum); text-decoration-color:var(--magenta)}
.cardpop{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(41,10,45,.55); padding:18px; box-sizing:border-box}
.cardpop[hidden], .sharepop[hidden]{display:none !important}
.cardpop-box{background:var(--deep2, #2a0e33); border:1px solid rgba(233,161,59,.5); border-radius:14px; padding:16px 18px 18px; width:min(320px,92vw); box-shadow:0 18px 48px rgba(41,10,45,.45); text-align:center; max-height:92vh; overflow:auto; position:relative}
.cardpop-img{width:min(200px,58vw); max-width:200px; height:auto; border-radius:6px; border:1px solid var(--line); display:block; margin:0 auto}
.cardpop-img.rev{transform:rotate(180deg)}
.pop-x{position:absolute; top:8px; right:8px; border:1px solid var(--line); background:rgba(255,255,255,.12); color:var(--cream); border-radius:8px; width:30px; height:30px; cursor:pointer; font-size:15px; line-height:1; z-index:2}
.cardpop-nm{font-family:var(--serif); font-size:19px; color:var(--gold2); margin:10px 0 2px}
.cardpop-ori{font-size:12.5px; color:var(--cream-dim)}
.sharepop{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(41,10,45,.55); padding:18px; box-sizing:border-box}
.share-box{background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:14px; padding:16px 18px 18px; width:min(420px,94vw); box-shadow:0 18px 48px rgba(41,10,45,.45); max-height:92vh; overflow:auto; position:relative}
.share-box .pop-x{background:#fff; color:var(--ink)}
.share-box canvas{width:100%; height:auto; border:1px solid var(--line); border-radius:8px; display:block; margin:10px 0}
.q-actions{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line)}
.q-stars{display:inline-flex; gap:2px; align-items:center}
.q-stars .st-lab{font-size:13px; color:var(--muted); margin-right:2px}
.starbtn{border:0; background:transparent; font-size:20px; line-height:1; cursor:pointer; color:#d8c9a8; padding:2px}
.starbtn.on{color:var(--gold-bright)}
.actbtn{border:1px solid var(--line); background:#fff; border-radius:999px; padding:5px 14px; font-size:13.5px; cursor:pointer; color:var(--magenta)}
.actbtn:hover{background:#f7ead9}
.stars-on{color:var(--gold-bright); letter-spacing:2px; font-size:14px}
.wrong-item{display:flex; gap:12px; justify-content:space-between; align-items:flex-start; background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px}
.wrong-item.mastered{opacity:.55; background:#f6efe2}
.wi-main{flex:1; min-width:0}
.wi-tags{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:5px}
.wi-cards{font-family:var(--serif); color:var(--plum); font-size:15.5px}
.wi-prompt{font-size:13.5px; color:var(--muted); line-height:1.65; margin-top:3px}
.wi-btns{display:flex; flex-direction:column; gap:6px; flex:none}
.scopebar{background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:14px}
.scope-row{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:5px 0}
.scope-lab{font-size:13px; color:var(--muted); width:44px; flex:none}
.scope-note{font-size:13px; color:var(--muted); margin-top:6px}
.warnbox{background:#fdf3d7; border:1px solid #e5c86b; color:#6b5510; border-radius:10px; padding:10px 14px; font-size:14px; line-height:1.7; margin:10px 0}
.quiz-set{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin:10px 0}
.quiz-set label{font-size:14.5px}
.quiz-set select, .quiz-set input[type=number]{padding:6px 8px; border:1px solid var(--line); border-radius:8px; font-size:14.5px; width:90px}
.quiz-fb{margin-top:12px}
.quiz-fb .fb-head{font-weight:700; font-size:16px}
.level-note{font-size:13px; color:var(--muted); line-height:1.7}
img{max-width:100%}
svg{max-width:100%; height:auto}
.cardback svg{width:34px; height:34px; flex:none}

/* ===== 本批：凤凰牌背 / 抽牌仪式 / 单牌浮层 / 解读卡 / 选牌器 / 每日抽牌屏 ===== */
.phoenix-back{background:linear-gradient(160deg, rgba(41,10,45,.25), rgba(41,10,45,.55)), url("assets/phoenix-vortex.png") center/cover no-repeat, #2a0e33;
  border:1px solid rgba(233,161,59,.75); box-shadow:inset 0 0 0 3px rgba(41,10,45,.85), inset 0 0 0 4.5px rgba(233,161,59,.55); border-radius:9px}
.cardback{background:linear-gradient(160deg, rgba(41,10,45,.25), rgba(41,10,45,.55)), url("assets/phoenix-vortex.png") center/cover no-repeat, #2a0e33;
  border:1px solid rgba(233,161,59,.75); box-shadow:inset 0 0 0 3px rgba(41,10,45,.85), inset 0 0 0 4.5px rgba(233,161,59,.55)}
.ritual{position:relative; border-radius:18px; padding:20px 14px 18px; overflow:hidden;
  background:radial-gradient(600px 300px at 50% -60px, rgba(233,161,59,.16), transparent 70%), linear-gradient(180deg, var(--bg3), var(--bg2)); border:1px solid var(--line)}
.ritual::before{content:""; position:absolute; inset:0; background:url("assets/phoenix-vortex.png") center/70% no-repeat; opacity:.06; pointer-events:none}
.ritual-stack{position:relative; width:120px; height:190px; margin:8px auto 14px}
.ritual-back{position:absolute; inset:0}
.ritual-stack .ritual-back:nth-child(1){transform:translate(-7px,3px) rotate(-4deg)}
.ritual-stack .ritual-back:nth-child(2){transform:translate(7px,3px) rotate(4deg)}
.ritual-stack .ritual-back:nth-child(3){transform:none}
.ritual-stack.shuffling .ritual-back:nth-child(1){animation:shufL .9s ease-in-out}
.ritual-stack.shuffling .ritual-back:nth-child(2){animation:shufR .9s ease-in-out}
@keyframes shufL{0%,100%{transform:translate(-7px,3px) rotate(-4deg)}30%{transform:translate(-52px,-8px) rotate(-13deg)}60%{transform:translate(6px,0) rotate(2deg)}}
@keyframes shufR{0%,100%{transform:translate(7px,3px) rotate(4deg)}30%{transform:translate(52px,-8px) rotate(13deg)}60%{transform:translate(-6px,0) rotate(-2deg)}}
.ritual-prompt{text-align:center; font-size:17px; color:var(--cream); font-family:var(--serif); line-height:1.6}
.ritual-prompt span{display:block; font-size:13px; color:var(--cream-dim); font-family:inherit}
/* 弧形扇面：每张牌背挂在 .fan-arm 上，臂绕画面下方圆心（舞台底边下 --fan-pivot 处）旋转成彩虹弧。
   几何三数联动：臂高 560 = 圆心→臂顶距离；牌心半径 485（JS fanGeom 的 R）；圆心在舞台顶边下 568px
   （桌面 舞台高 320 + pivot 248；手机 250 + 318），改任一数必须同步改 JS 与另两处。 */
.fan-stage{--fan-pivot:248px; position:relative; height:320px; overflow:hidden; border-radius:14px; touch-action:pan-y; cursor:grab}
.fan-stage:active{cursor:grabbing}
.fan-arm{position:absolute; left:50%; bottom:calc(-1 * var(--fan-pivot)); width:0; height:560px; transform-origin:50% 100%; will-change:transform}
.fan-stage.fan-smooth .fan-arm{transition:transform .35s cubic-bezier(.2,.7,.25,1)}
.fan-stage.fan-smooth .fan-card{transition:filter .35s}
.fan-card{position:absolute; top:0; left:0; width:92px; height:150px; padding:0; border:0; background:transparent; cursor:pointer; perspective:700px}
.fan-card:hover .fc-back{box-shadow:0 0 0 2px rgba(245,212,87,.75), 0 10px 22px rgba(0,0,0,.45)}
.fc-inner{position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d; transition:transform .55s}
.fan-card.lift .fc-inner{transform:translateY(-14px) scale(1.12)}
.fan-card.flip .fc-inner{transform:translateY(-14px) scale(1.06) rotateY(180deg)}
.fan-card.lift .fc-face, .fan-card.flip .fc-face{box-shadow:0 0 0 2px var(--gold2), 0 16px 34px rgba(0,0,0,.55)}
.fc-face{position:absolute; inset:0; backface-visibility:hidden; border-radius:8px; overflow:hidden}
.fc-front{transform:rotateY(180deg)}
.fc-front img{width:100%; height:100%; object-fit:cover; display:block}
.fc-front img.rev{transform:rotate(180deg)}
.fan-ctrl{display:flex; align-items:center; gap:10px; justify-content:center; margin:10px 0 2px; flex-wrap:wrap}
.fan-nav{width:42px; height:42px; border-radius:50%; border:1px solid var(--gold); background:rgba(233,161,59,.12); color:var(--gold2); font-size:24px; line-height:1; cursor:pointer; flex:none; padding:0}
.fan-nav:hover{background:rgba(233,161,59,.28)}
.fan-slider{flex:1; max-width:420px; min-width:120px; accent-color:var(--gold); cursor:pointer}
.fan-pos{font-size:13px; color:var(--cream-dim); min-width:118px}
@media(max-width:680px){
  .fan-stage{--fan-pivot:318px; height:250px}
  .fan-card{width:64px; height:104px}
  .fan-pos{min-width:0}
}
.ritual.noanim .fc-inner{transition:none}
.ritual.noanim .fan-arm{transition:none !important}
.ritual.noanim .ritual-stack .ritual-back{animation:none !important}
.pospop-box{background:#2a0e33; border:1px solid rgba(233,161,59,.5); border-radius:14px; padding:18px; width:min(430px,94vw); box-shadow:0 18px 48px rgba(41,10,45,.5); max-height:92vh; overflow:auto; position:relative; color:var(--cream); text-align:center}
.pospop-img{width:min(190px,55vw); max-width:190px; height:auto; border-radius:7px; border:1px solid var(--line); display:block; margin:0 auto}
.pospop-img.rev{transform:rotate(180deg)}
.pospop-desc{font-size:13.5px; color:var(--gold2); line-height:1.7}
.pospop-core{line-height:1.85; text-align:left; font-size:14.5px}
.pospop-sec{line-height:1.85; text-align:left; font-size:14.5px}
.pospop-sec b{color:var(--gold2); margin-right:6px}
.pospop-combo{background:rgba(233,161,59,.1); border:1px solid rgba(233,161,59,.4); border-radius:10px; padding:10px 14px; text-align:left; line-height:1.8; font-size:14px}
.rcard2{display:flex; gap:14px; padding:14px 0; border-top:1px solid #eadfc2}
.rcard2:first-child{border-top:0}
.rcard-thumb{width:54px; flex:none; border-radius:5px; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.3); align-self:flex-start}
.rcard-thumb.rev{transform:rotate(180deg)}
.rcard-main{flex:1; min-width:0}
.rcard-title{font-family:var(--serif); font-size:16.5px; color:var(--plum); cursor:pointer; line-height:1.5}
.rcard-body{line-height:1.9; margin:6px 0 0; font-size:15px}
.rcard-cite{font-size:12.5px; color:var(--ink2); margin:8px 0 0; line-height:1.6}
.manual-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; font-size:15px}
.man-picked{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.man-picked img{width:40px; border-radius:4px; box-shadow:0 4px 10px rgba(0,0,0,.35)}
.man-picked img.rev{transform:rotate(180deg)}
.man-nm{font-family:var(--serif); color:var(--cream)}
.man-pick-btn{border:1.5px dashed rgba(233,161,59,.6); color:var(--gold2); background:rgba(255,255,255,.03)}
.pickpop{position:fixed; inset:0; z-index:210; display:flex; align-items:flex-end; justify-content:center; background:rgba(41,10,45,.6)}
.pickpop[hidden]{display:none !important}
.pick-box{background:var(--bg2); border:1px solid var(--line); border-radius:16px 16px 0 0; width:min(680px,100vw); max-height:88vh; display:flex; flex-direction:column; padding:12px 14px calc(12px + env(safe-area-inset-bottom)); position:relative}
@media(min-width:681px){ .pickpop{align-items:center} .pick-box{border-radius:16px} }
.pick-head{position:sticky; top:0; display:flex; gap:8px; align-items:center; background:var(--bg2); padding-bottom:8px; z-index:2}
.pick-head input{flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.06); color:var(--cream); font-size:15px}
.pick-head .pop-x{position:static; flex:none}
.pick-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}
.pick-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; overflow-y:auto; padding-bottom:6px}
@media(min-width:681px){ .pick-grid{grid-template-columns:repeat(6,1fr)} }
.pick-cell{background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:10px; padding:6px 4px 7px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--cream)}
.pick-cell img{width:100%; max-width:96px; border-radius:5px; display:block}
.pick-cell span{font-size:12.5px; line-height:1.35; text-align:center}
.pick-cell em{font-style:normal; font-size:11px; color:var(--gold2)}
.pick-cell.used{opacity:.35; cursor:not-allowed}
.pick-cell.mine{border-color:var(--gold); box-shadow:0 0 0 1.5px var(--gold)}
.daily-draw{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; padding:10px 0 6px}
.daily-back{width:150px; height:236px; cursor:default}
.daily-face{width:min(220px,60vw); border-radius:12px; box-shadow:var(--shadow)}
.daily-face.rev{transform:rotate(180deg)}
.badge.part{background:#8a5a12; color:#ffe1a8}
.drawn img[data-pidx], .cboard img[data-pidx]{cursor:pointer}

/* ---------- 星象与元素对应（本批新增；元素色只作徽章点缀，不整页染色） ---------- */
.elem-badge{display:inline-block; padding:1px 10px; border-radius:999px; font-size:13px; font-weight:700; line-height:1.75; letter-spacing:.06em; white-space:nowrap}
.elem-badge.e-fire{background:#BE382A; color:#fff}
.elem-badge.e-water{background:#2E6DA4; color:#fff}
.elem-badge.e-air{background:#F5D457; color:#40260A}
.elem-badge.e-earth{background:#7A5230; color:#fff}
.corr-row{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:8px 0 2px}
.corr-row .corr-txt{font-size:15.5px; color:var(--ink)}
.corr-row.on-dark{justify-content:center}
.corr-row.on-dark .corr-txt{color:var(--cream)}
.astro-select{background:rgba(255,255,255,.07); color:var(--cream); border:1px solid var(--line); border-radius:9px; padding:8px 10px; font-size:15px}
.astro-select option{color:#111}
.elem-summary{display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap; padding:12px 18px; margin-bottom:14px}
.elem-summary .es-title{font-family:var(--serif); font-size:16.5px; color:var(--rust)}
.elem-summary .es-item{display:inline-flex; align-items:center; gap:6px; font-size:16px; color:var(--ink)}
.elem-summary .es-note{font-size:13.5px; color:var(--ink2)}
.astro-elem{padding:16px 18px; margin-bottom:14px}
.astro-elem-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.astro-elem-suit{font-family:var(--serif); font-size:16.5px; color:var(--ink)}
.astro-elem-signs{font-size:15px; color:var(--ink2)}
.astro-cards{display:flex; flex-wrap:wrap; gap:12px}
.astro-card{width:64px; text-align:center; color:var(--ink); text-decoration:none}
.astro-card img{width:64px; border-radius:6px; display:block; box-shadow:0 3px 10px rgba(0,0,0,.25)}
.astro-card span{display:block; font-size:13.5px; margin-top:4px; line-height:1.4}
.astro-table{width:100%; border-collapse:collapse; font-size:16px; color:var(--ink)}
.astro-table th,.astro-table td{padding:8px 6px; border-bottom:1px solid #E7DCC0; text-align:left; vertical-align:middle}
.astro-table th{font-family:var(--serif); color:var(--rust); font-size:15px}
.astro-table tr:last-child td{border-bottom:none}
.astro-rowcard{display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600}
.astro-rowcard img{width:30px; border-radius:3px; display:block}

/* ===== 对比度修复（WCAG AA）：浅底语境覆盖 + 焦点环 =====
   原则：.btn 的金字只许落在深底上；凡底色是纸面/白卡（.paper / .share-box / .wrong-item），
   按钮一律换深金字 #7A4A00＋1.5px 深金边，ghost 换深梅字；纸面内裸链接换梅紫。
   主按钮渐变已在 .btn.primary 处加深（#A85E18→#83450E，白字全程 ≥4.5）。 */
.paper .btn, .share-box .btn, .wrong-item .btn{color:var(--btn-deep); border-color:#A8741A; border-width:1.5px; font-weight:600;
  background:linear-gradient(180deg, rgba(233,161,59,.30), rgba(233,161,59,.15))}
.paper .btn:hover, .share-box .btn:hover, .wrong-item .btn:hover{background:rgba(233,161,59,.38)}
.paper .btn.primary, .share-box .btn.primary, .wrong-item .btn.primary{color:#FFF8EC; border-color:#C97F22;
  background:linear-gradient(180deg,#A85E18,#83450E)}
.paper .btn.ghost, .share-box .btn.ghost, .wrong-item .btn.ghost{color:var(--ink2); border-color:#B99B5F; background:transparent}
.paper a:not(.btn):not(.astro-card):not(.astro-rowcard){color:var(--plum)}
.wrong-item .muted{color:var(--ink2)}
.wrong-item .wi-prompt{color:var(--ink2)}
.wrong-item .tag{color:var(--magenta); background:rgba(144,35,85,.10); border-color:rgba(144,35,85,.45)}
.wrong-item .tag.gold{color:var(--btn-deep); background:rgba(233,161,59,.16); border-color:rgba(168,116,26,.55)}
.wrong-item .badge.hit{color:#3F6212; border-color:#3F6212}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--gold2); outline-offset:2px}
.fan-card:focus:not(:focus-visible), .cardback:focus:not(:focus-visible){outline:none}

/* ===== 日记置顶 + 标签 ===== */
.pinbtn{float:right; margin-left:8px; font-size:11.5px; line-height:1.5; padding:2px 9px; border-radius:999px; border:1px solid var(--line); color:var(--cream-dim); cursor:pointer; background:rgba(255,255,255,.04)}
.pinbtn.on{border-color:var(--gold); color:#1D0A26; background:var(--gold2); font-weight:700}
.tagrow{display:flex; gap:6px; flex-wrap:wrap; margin-top:5px}
.tagchip{display:inline-flex; align-items:center; gap:5px; font-size:12px; line-height:1.6; padding:2px 9px; border-radius:999px; border:1px solid rgba(233,161,59,.5); color:var(--gold2); background:rgba(233,161,59,.10); cursor:pointer}
.tagedit{display:flex; gap:7px; flex-wrap:wrap; align-items:center; background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:10px; padding:8px 10px}
.tagedit:focus-within{border-color:var(--gold)}
.tagedit .tagchip{cursor:default}
.tagedit input{flex:1; min-width:150px; background:transparent; border:none; color:var(--cream); font-size:14.5px; padding:4px 2px}
.tagedit input:focus{outline:none}
.tagx{border:none; background:transparent; color:inherit; font-size:14px; line-height:1; cursor:pointer; padding:0 1px}

/* ---- 发牌式槽位：牌背按钮 + 逐张飞入（默认模式，与扇面共用 .phoenix-back 牌背） ---- */
.deal-slot{width:104px; aspect-ratio:560/973; border-radius:9px; cursor:pointer; padding:0; display:block; margin:0 auto; transition:transform .22s ease-in, opacity .22s}
.deal-slot:focus-visible{outline:2px solid var(--gold2); outline-offset:2px}
.deal-slot.deal-out{transform:rotateY(88deg); opacity:.35}
.deal-fly{animation:dealFly .5s cubic-bezier(.2,.7,.3,1) both; animation-delay:calc(var(--di, 0) * 90ms)}
@keyframes dealFly{from{opacity:0; transform:translateY(-30px) scale(.92)}to{opacity:1; transform:none}}
.deal-in{animation:dealIn .3s ease-out}
@keyframes dealIn{from{opacity:0}to{opacity:1}}
.ritual.noanim .deal-fly, .ritual.noanim .deal-in{animation:none}
@media(max-width:560px){ .deal-slot{width:76px} }