/* CatArcana — 淡黄色插画风格 */
@import url("https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Nunito:wght@400;600;700;800;900&display=swap");

:root{
  --cream:#fffbeb;
  --butter:#fff3cd;
  --honey:#f5e6b8;
  --sun:#f0c14b;
  --sun-deep:#d4a017;
  --blush:#ffd6e0;
  --mint:#b8e8d9;
  --lavender:#d4c4f4;
  --ink:#3d3428;
  --ink-soft:#6b5d4f;
  --paper:rgba(255,255,255,.72);
  --line:rgba(61,52,40,.12);
  --shadow-soft:0 12px 40px rgba(212,160,23,.15), 0 4px 16px rgba(61,52,40,.08);
  --radius:20px;
  --font-display:"ZCOOL KuaiLe", cursive;
  --font-body:"Nunito", system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(240,193,75,.35), transparent 55%),
    radial-gradient(ellipse 90% 60% at 100% 30%, rgba(212,196,244,.25), transparent 50%),
    radial-gradient(ellipse 70% 50% at 0% 70%, rgba(184,232,217,.22), transparent 45%),
    linear-gradient(180deg, var(--cream) 0%, var(--butter) 45%, #fff8e8 100%);
  overflow-x:hidden;
}

/* 散落装饰：塔罗小牌 + 水晶球 */
body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}
body::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='68' viewBox='0 0 48 68'%3E%3Crect x='4' y='4' width='40' height='60' rx='6' fill='%23fff8e8' stroke='%23e8d4a8' stroke-width='2'/%3E%3Ccircle cx='24' cy='28' r='10' fill='%23f0c14b' opacity='.7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='62' viewBox='0 0 44 62'%3E%3Crect x='3' y='3' width='38' height='56' rx='5' fill='%23fffdf5' stroke='%23d4c4f4' stroke-width='1.5'/%3E%3Cpath d='M22 18 L28 32 L16 32 Z' fill='%23b8e8d9'/%3E%3C/svg%3E"),
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.5) 0 18px, transparent 20px),
    radial-gradient(circle at 88% 78%, rgba(240,193,75,.15) 0 40px, transparent 42px);
  background-size:48px 68px, 44px 62px, 120px 120px, 200px 200px;
  background-position:8% 15%, 92% 25%, 75% 8%, 20% 90%;
  background-repeat:no-repeat;
  opacity:.85;
}
body::after{
  background-image:
    radial-gradient(circle at 18% 55%, rgba(212,196,244,.35) 0 22px, rgba(255,255,255,.15) 23px 28px, transparent 30px),
    radial-gradient(circle at 85% 12%, rgba(184,232,217,.4) 0 18px, rgba(255,255,255,.2) 19px 24px, transparent 28px),
    radial-gradient(circle at 50% 88%, rgba(240,193,75,.12) 0 80px, transparent 85px);
  background-size:100% 100%;
  background-repeat:no-repeat;
}

.app{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:20px 16px 100px;
}

.shell{
  width:min(1100px, 100%);
}

/* 品牌 */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand .logo{
  width:48px;
  height:48px;
  border-radius:16px;
  background:linear-gradient(145deg, var(--sun), var(--honey));
  box-shadow:var(--shadow-soft);
  display:grid;
  place-items:center;
  border:2px solid rgba(255,255,255,.6);
  font-size:22px;
}
.brand .title{
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:400;
  letter-spacing:.05em;
  color:var(--ink);
}
.brand .subtitle{
  font-size:12px;
  color:var(--ink-soft);
  margin-top:2px;
  font-weight:600;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.brand-build-pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
  color:#7a5a20;
  background:linear-gradient(180deg, rgba(255,251,235,.95), rgba(240,193,75,.35));
  border:1px solid rgba(212,160,23,.45);
}
.welcome-build-banner{
  display:inline-block;
  margin-bottom:4px;
  padding:4px 10px;
  border-radius:10px;
  background:rgba(240,193,75,.2);
  border:1px solid rgba(212,160,23,.35);
  font-size:13px;
}
.selfbuild-steps p{
  margin:0 0 14px;
}
.selfbuild-steps p:last-child{
  margin-bottom:0;
}
.selfbuild-steps code{
  font-size:12px;
  font-weight:700;
  padding:2px 6px;
  border-radius:6px;
  background:rgba(61,52,40,.06);
  color:var(--ink);
}

/* 按钮 */
.btn{
  appearance:none;
  border:none;
  background:linear-gradient(180deg, var(--sun) 0%, var(--sun-deep) 100%);
  color:#fff;
  font-family:var(--font-body);
  font-weight:800;
  padding:12px 18px;
  border-radius:999px;
  box-shadow:0 6px 20px rgba(240,193,75,.45);
  cursor:pointer;
  border:2px solid rgba(255,255,255,.5);
}
.btn.secondary{
  background:linear-gradient(180deg, var(--mint), #9dd9c8);
  color:var(--ink);
  box-shadow:0 6px 18px rgba(157,217,200,.35);
}
.btn.ghost{
  background:var(--paper);
  color:var(--ink);
  border:2px solid var(--line);
  box-shadow:none;
}
.btn.danger{
  background:linear-gradient(180deg, #ff8a8a, #e85d5d);
  color:#fff;
}
.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.grid2{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:18px;
}
/* 首页：今日运势在上，魔法入口在下（全宽单列） */
.grid2.grid2--home-stack{
  grid-template-columns: 1fr;
}
@media (max-width:900px){
  .grid2{ grid-template-columns: 1fr; }
}

.card{
  background:var(--paper);
  border:2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding:18px;
  backdrop-filter: blur(8px);
}

.hero{
  padding:22px 20px;
  background:
    radial-gradient(ellipse 100% 80% at 20% 0%, rgba(240,193,75,.2), transparent 55%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(212,196,244,.18), transparent 50%),
    var(--paper);
  position:relative;
  overflow:visible;
}

.h1{
  font-family:var(--font-display);
  font-size:1.65rem;
  font-weight:400;
  margin:0 0 8px;
  color:var(--ink);
}
.p{
  color:var(--ink-soft);
  margin:0;
  line-height:1.65;
  font-weight:600;
}

/* 虚拟猫猫展示区 */
.cat-showcase{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:16px;
  margin-top:14px;
}
.cat-showcase--home{
  align-items:stretch;
}
.cat-stage{
  position:relative;
  flex:1;
  min-width:200px;
  max-width:280px;
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cat-stage--home{
  flex:0 0 min(200px, 42vw);
  width:min(200px, 42vw);
  max-width:none;
  min-width:0;
  isolation:isolate;
  background:transparent;
}
.cat-stage .cat-svg{
  width:100%;
  max-width:168px;
  height:auto;
  display:block;
  margin:0 auto;
}
.card.hero .cat-stage .cat-svg{
  max-width:220px;
}
.card.hero .cat-stage--home .cat-svg,
.card.hero .cat-stage--home .cat-mascot-img{
  max-width:min(190px, 36vw);
}
.cat-mascot-wrap{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cat-showcase--home .cat-mascot-wrap{
  filter:drop-shadow(0 8px 18px rgba(61,52,40,.12));
}
.cat-showcase--home .cat-mascot-img,
.cat-stage--companion .cat-mascot-wrap--blend .cat-mascot-img{
  mix-blend-mode:multiply;
  filter:none; /* 避免与 .cat-svg 的 drop-shadow 叠乘；首页阴影在 .cat-mascot-wrap */
}
.crystal-orb--home{
  align-self:center;
}
.cat-glow{
  position:absolute;
  inset:8%;
  background:radial-gradient(circle, rgba(255,243,180,.9) 0%, rgba(255,235,200,.4) 55%, transparent 70%);
  border-radius:50%;
  filter:blur(2px);
}
.cat-svg{
  position:relative;
  z-index:2;
  width:min(220px, 85%);
  height:auto;
  filter: drop-shadow(0 8px 20px rgba(61,52,40,.12));
}
/* 参考立绘位图：保持水彩边缘柔和，勿用像素化渲染 */
.cat-mascot-img{
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  image-rendering:auto;
}
.cat-scroll-float{
  position:absolute;
  left:-4%;
  top:18%;
  z-index:3;
  padding:8px 10px;
  background:linear-gradient(145deg, #fffef8, #f5ecd8);
  border:2px solid #e8d4a8;
  border-radius:10px 10px 10px 4px;
  font-size:10px;
  font-weight:800;
  color:var(--sun-deep);
  line-height:1.25;
  transform:rotate(-8deg);
  box-shadow:2px 4px 12px rgba(61,52,40,.1);
  font-family:var(--font-display);
}
.cat-scroll-float .sub{
  display:block;
  font-size:9px;
  color:var(--ink-soft);
  font-family:var(--font-body);
  font-weight:700;
}
.cat-mini-tarot{
  position:absolute;
  right:2%;
  top:12%;
  z-index:3;
  width:42px;
  height:58px;
  background:linear-gradient(160deg, #fffef5, #ffe8a8);
  border:2px solid #e8c860;
  border-radius:8px;
  display:grid;
  place-items:center;
  font-size:22px;
  transform:rotate(12deg);
  box-shadow:3px 6px 14px rgba(212,160,23,.25);
}
.cat-sparkles{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}
.cat-sparkles span{
  position:absolute;
  width:8px;
  height:8px;
  background:var(--lavender);
  clip-path:polygon(50% 0%, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0% 50%, 39% 35%);
  opacity:.7;
  animation:twinkle 2.5s ease-in-out infinite;
}
.cat-sparkles span:nth-child(1){ top:12%; left:8%; animation-delay:0s; background:#c4b5fd; }
.cat-sparkles span:nth-child(2){ top:22%; right:6%; animation-delay:.4s; background:#f9a8d4; }
.cat-sparkles span:nth-child(3){ bottom:18%; left:15%; animation-delay:.8s; background:#7dd3fc; }
@keyframes twinkle{
  0%,100%{ transform:scale(1); opacity:.5; }
  50%{ transform:scale(1.2); opacity:1; }
}

.crystal-orb{
  width:56px;
  height:56px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff 0%, #e0d4ff 35%, #a78bfa 70%, #7c3aed 100%);
  box-shadow:inset -4px -8px 16px rgba(255,255,255,.5), 0 8px 24px rgba(124,58,237,.25);
  border:2px solid rgba(255,255,255,.6);
}

/* 首页今日运势卷轴 */
.fortune-scroll{
  flex:1;
  min-width:180px;
  padding:14px 16px;
  background:linear-gradient(180deg, #fffef6, #fff3d4);
  border:2px dashed rgba(212,160,23,.35);
  border-radius:16px;
  position:relative;
}
/* 与左侧猫方块同高：随 flex 拉伸，内容垂直居中 */
.fortune-scroll--tall{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:min(200px, 50vw);
}
.fortune-whisper{
  margin:0;
  font-size:15px;
  line-height:1.65;
  font-weight:600;
  color:var(--ink);
}
.fortune-lucky-meta{
  margin-top:12px;
  padding-top:10px;
  border-top:1px dashed rgba(212,160,23,.35);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.fortune-lucky-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  font-size:13px;
  font-weight:700;
  color:var(--ink-soft);
}
.fortune-lucky-label{
  color:var(--sun-deep);
  min-width:6.5em;
}
.fortune-lucky-swatch{
  width:18px;
  height:18px;
  border-radius:6px;
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 1px 4px rgba(0,0,0,.12);
  flex-shrink:0;
}
.fortune-lucky-value{
  color:var(--ink);
  font-weight:800;
}
.fortune-lucky-num{
  font-size:1.15rem;
  font-family:var(--font-display);
  color:var(--sun-deep);
}
.fortune-scroll::before{
  content:"";
  position:absolute;
  left:10px;
  top:-6px;
  width:24px;
  height:12px;
  background:linear-gradient(90deg, #e8d4a8, #f5e6b8);
  border-radius:4px;
}
.fortune-scroll .ft-title{
  font-family:var(--font-display);
  font-size:1rem;
  color:var(--sun-deep);
  margin-bottom:6px;
}

/* 今日综合分 + 树状柱维度分 */
.fortune-overall-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:10px 0 4px;
}
.fortune-overall-score{
  display:flex;
  align-items:baseline;
  gap:10px;
}
.fortune-overall-num{
  font-family:var(--font-display);
  font-size:2.35rem;
  font-weight:700;
  color:var(--sun-deep);
  line-height:1;
  letter-spacing:-.02em;
}
.fortune-overall-unit{
  font-size:1rem;
  font-weight:800;
  color:var(--ink-soft);
  margin-left:2px;
  vertical-align:.15em;
}
.fortune-overall-label{
  font-size:13px;
  font-weight:800;
  color:var(--ink-soft);
}

.fortune-bars-wrap{
  margin-top:14px;
  padding:14px 12px;
  border-radius:16px;
  border:2px solid rgba(240,193,75,.28);
  background:linear-gradient(165deg, rgba(255,255,255,.78), rgba(255,248,220,.55));
  box-shadow:0 6px 18px rgba(240,193,75,.08);
}
.fortune-bars-title{
  font-size:12px;
  font-weight:800;
  color:var(--ink-soft);
  margin-bottom:12px;
  text-align:center;
}
.fortune-bars{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:6px;
  min-height:118px;
  padding:0 2px;
}
.fortune-bar-col{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.fortune-bar-value{
  font-size:11px;
  font-weight:900;
  color:var(--ink);
}
.fortune-bar-trunk{
  position:relative;
  width:100%;
  max-width:38px;
  height:96px;
  margin:0 auto;
  background:linear-gradient(180deg, rgba(139,115,85,.12), rgba(61,52,40,.1));
  border-radius:999px 999px 10px 10px;
  border:2px solid rgba(212,160,23,.22);
  box-shadow:inset 0 4px 10px rgba(255,255,255,.35);
}
.fortune-bar-fill{
  position:absolute;
  left:5px;
  right:5px;
  bottom:5px;
  height:var(--bar-pct);
  min-height:10%;
  border-radius:999px 999px 8px 8px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--bar-hue) 82%, #fff), var(--bar-hue));
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.12);
}
.fortune-bar-name{
  font-size:10px;
  font-weight:800;
  color:var(--ink-soft);
  text-align:center;
  line-height:1.2;
}

.tabs{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:50;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(255,251,235,.92) 25%, rgba(255,243,205,.97));
  backdrop-filter: blur(12px);
  border-top:2px solid var(--line);
}
.tabs .tabbar{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:6px;
  max-width: 1100px;
  margin:0 auto;
}
.tab{
  cursor:pointer;
  text-align:center;
  padding:10px 4px;
  border-radius:14px;
  border:2px solid transparent;
  background: rgba(255,255,255,.45);
  color: var(--ink-soft);
  font-weight:800;
  font-size:11px;
}
@media (min-width:420px){
  .tab{ font-size:12px; padding:12px 6px; }
}
.tab.active{
  color: var(--ink);
  background: linear-gradient(180deg, #fffef0, var(--honey));
  border-color: rgba(240,193,75,.45);
  box-shadow:0 4px 12px rgba(240,193,75,.2);
}

.moduleGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
}
@media (max-width:700px){
  .moduleGrid{ grid-template-columns: 1fr; }
}

.module{
  cursor:pointer;
  padding:16px;
  border-radius:18px;
  border:2px solid var(--line);
  background:linear-gradient(145deg, rgba(255,255,255,.85), rgba(255,248,220,.6));
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.module:hover{
  transform: translateY(-3px);
  border-color: rgba(240,193,75,.4);
  box-shadow:0 10px 28px rgba(240,193,75,.12);
}
.module .name{
  font-family:var(--font-display);
  font-size:1.05rem;
  color:var(--ink);
}
.module .desc{
  margin-top:8px;
  color:var(--ink-soft);
  line-height:1.5;
  font-size:13px;
  font-weight:600;
}
.module.module-name-only{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px 14px;
}
.module.module-name-only .name{
  font-size:1.12rem;
  margin:0;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  border:2px solid var(--line);
  background: rgba(255,255,255,.6);
  color:var(--ink-soft);
  font-weight:800;
  font-size:11px;
}

.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.label{
  color:var(--ink-soft);
  font-weight:800;
  font-size:12px;
}
input, select, textarea{
  background: rgba(255,255,255,.85);
  border:2px solid var(--line);
  color: var(--ink);
  border-radius:14px;
  padding:12px 14px;
  outline:none;
  font-family:var(--font-body);
  font-weight:600;
}
textarea{ min-height:110px; resize:vertical; }

.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.hint{
  color:var(--ink-soft);
  font-size:13px;
  line-height:1.55;
  font-weight:600;
}

.modalOverlay{
  position:fixed;
  inset:0;
  z-index:100;
  background: rgba(61,52,40,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  backdrop-filter: blur(4px);
}
.modal{
  width:min(720px, 100%);
  border-radius:24px;
  border:3px solid rgba(255,255,255,.7);
  background:linear-gradient(180deg, #fffef8, #fff3d4);
  box-shadow:0 28px 80px rgba(61,52,40,.18);
  padding:20px;
  max-height:90vh;
  overflow:auto;
}
.modal h2{
  margin:4px 0 8px;
  font-size:1.25rem;
  font-family:var(--font-display);
  font-weight:400;
  color:var(--ink);
}

/* 选猫弹窗：中间网格可滚动，底部按钮始终贴底可见 */
.modal.modal--cat-picker{
  display:flex;
  flex-direction:column;
  width:min(520px, calc(100vw - 24px));
  max-height:min(88vh, 720px);
  overflow:hidden;
  padding:16px 16px 14px;
}
.modal--cat-picker .cat-picker-header{
  flex-shrink:0;
}
.modal--cat-picker .cat-picker-header h2{
  margin-top:0;
}
.modal--cat-picker .cat-picker-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:4px 2px 8px;
  margin:0 -2px;
}
.modal--cat-picker .cat-picker-footer{
  flex-shrink:0;
  padding-top:12px;
  margin-top:4px;
  border-top:2px dashed rgba(212,160,23,.35);
  background:linear-gradient(180deg, rgba(255,254,248,.2), rgba(255,251,235,.95));
}
.tarotDeck{
  display:grid;
  grid-template-columns: repeat(10, 1fr);
  gap:8px;
  transform-style: preserve-3d;
}
.tarotDeck[data-can-draw="0"]:not(.tarotDeck--shuffling){
  pointer-events:none;
  opacity:.65;
}
.tarotDeck--shuffling{
  pointer-events:none;
  opacity:1;
  overflow: visible;
  padding: 8px 6px 10px;
  margin: -4px -6px 0;
}
@media (max-width:900px){
  .tarotDeck{ grid-template-columns: repeat(7, 1fr); }
}
@media (max-width:620px){
  .tarotDeck{ grid-template-columns: repeat(5, 1fr); }
}

.tcard{
  position:relative;
  width:100%;
  aspect-ratio: 3 / 4.2;
  border-radius:12px;
  border:2px solid rgba(232,212,168,.8);
  cursor:pointer;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: translateZ(0);
}
.tcard.back{
  background:
    radial-gradient(circle at 30% 25%, rgba(240,193,75,.35), transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(184,232,217,.25), transparent 55%),
    linear-gradient(180deg, #fffef5, #fff3d4);
}
.tcard .sym{
  font-size:18px;
  font-weight:900;
  color:var(--sun-deep);
  font-family:var(--font-display);
}

/* 洗牌：搓麻将式 — 牌序随机重排 + 每帧随机横移/旋转（由 JS 写入 style），不上下弹跳 */
.tarotDeck--shuffling .tcard.tcard--jam{
  animation: none;
  will-change: transform;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* 解读揭晓前：迷雾遮罩 */
.reading-area-shell{
  position:relative;
  min-height: 120px;
  margin-top: 4px;
}
.tarot-reading-blurhost{
  filter: blur(12px) saturate(0.88);
  opacity: 0.38;
  pointer-events: none;
  user-select: none;
}
.tarot-reading-smoke{
  position: absolute;
  inset: 0;
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  background:
    radial-gradient(ellipse 75% 55% at 50% 45%, rgba(255,255,255,.12), transparent 55%),
    radial-gradient(ellipse 100% 80% at 30% 70%, rgba(200,190,170,.45), transparent 50%),
    linear-gradient(165deg, rgba(255,251,235,.75), rgba(220,210,195,.5));
  animation: tarot-smoke-drift 3.5s ease-in-out infinite;
  box-shadow: inset 0 0 48px rgba(255,255,255,.35);
}
.tarot-smoke-particles{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.45;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.5) 0, transparent 40%),
    radial-gradient(circle at 75% 60%, rgba(240,230,210,.4) 0, transparent 35%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,.35) 0, transparent 30%);
  animation: tarot-smoke-pulse 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tarot-smoke-drift{
  0%, 100%{ opacity: 0.95; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.012); }
}
@keyframes tarot-smoke-pulse{
  0%, 100%{ opacity: 0.35; }
  50%{ opacity: 0.55; }
}
.tarot-reading-smoke-tip{
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 900;
  color: var(--sun-deep);
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

.reading-area-inner .reading-direct{
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.65;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px dashed rgba(212,160,23,.35);
}
.reading-area-inner .reading-interpretation{
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 14px;
}

.slots{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:10px;
  margin-bottom:12px;
}
@media (max-width:900px){
  .slots{ grid-template-columns: repeat(3, 1fr); }
}

.slot{
  border-radius:16px;
  border:2px dashed rgba(212,160,23,.35);
  background: rgba(255,255,255,.5);
  padding:10px;
  min-height: 120px;
}
.slot .pos{
  font-size:11px;
  font-weight:900;
  color: var(--sun-deep);
  font-family:var(--font-display);
}
.slot .content{
  margin-top:8px;
  color: var(--ink-soft);
  font-size:13px;
  line-height:1.4;
  font-weight:600;
}

.readingSummary{
  font-size:17px;
  font-weight:900;
  margin-bottom:10px;
  color:var(--ink);
  line-height:1.45;
}
.readingBlock{
  border-radius:16px;
  border:2px solid var(--line);
  background: rgba(255,255,255,.55);
  padding:14px;
  margin-top:10px;
}
.readingBlock .title{
  font-family:var(--font-display);
  font-weight:400;
  margin-bottom:6px;
  color:var(--sun-deep);
}
.readingBlock .text{
  color: var(--ink-soft);
  line-height:1.65;
  font-weight:600;
}

.planetGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
}
@media (max-width:720px){
  .planetGrid{ grid-template-columns: repeat(1, 1fr); }
}
.planetBtn{
  cursor:pointer;
  padding:12px;
  border-radius:16px;
  border:2px solid var(--line);
  background: rgba(255,255,255,.6);
  transition: transform .15s ease, border-color .15s ease;
}
.planetBtn:hover{
  transform: translateY(-2px);
  border-color: rgba(240,193,75,.4);
}
.planetBtn.active{
  background: linear-gradient(145deg, rgba(255,248,220,.9), rgba(184,232,217,.35));
  border-color: rgba(157,217,200,.8);
}
.planetBtn .n{ font-weight:900; color:var(--ink); }
.planetBtn .m{
  color:var(--ink-soft);
  font-size:12px;
  margin-top:4px;
  font-weight:700;
}

/* 合盘：出生日期文本框（yyyy/mm/dd，避免系统日期控件用 mm/dd/yyyy） */
input.compat-date-text{
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* —— 星盘：深色盘 + 标签页 + 行星浮层 —— */
.natal-shell .grid2{ align-items: start; }
.natal-chart-hero{
  background: linear-gradient(165deg, #0d1830 0%, #070a12 55%, #0a1424 100%);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.08);
  padding: 14px 14px 10px;
  margin: 0 0 4px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.natal-chart-hero__bar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.natal-chart-title{
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: rgba(255,251,235,.95);
}
.natal-pill{
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(130,190,255,.15);
  color: rgba(190,220,255,.95);
  border: 1px solid rgba(130,190,255,.25);
}
.natal-chart-stage{
  display:flex;
  justify-content: center;
  max-width: 440px;
  margin: 0 auto;
}
.natal-wheel-svg{
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,.35));
}
.natal-chart-footnote{
  font-size: 11px;
  color: rgba(255,255,255,.45);
  text-align: center;
  margin: 10px 0 0;
  line-height: 1.45;
}
.natal-tabs{
  display:flex;
  gap: 0;
  margin: 12px 0 0;
  border-bottom: 2px solid var(--line);
}
.natal-tab{
  flex:1;
  padding: 12px 8px;
  border: none;
  background: transparent;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-family: inherit;
}
.natal-tab:hover{ color: var(--ink); }
.natal-tab--active{
  color: var(--sun-deep);
  border-bottom-color: rgba(157,217,200,.95);
}
.natal-card{ margin-top: 10px; }
.natal-disclaimer{
  font-size: 11px;
  color: var(--ink-soft);
  margin: 0 0 12px;
  line-height: 1.5;
}
.natal-compat-block{
  margin-bottom: 18px;
}
.natal-element-block{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}
@media (max-width: 640px){
  .natal-element-block{ grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
.natal-element-donut-wrap{
  position: relative;
  width: 120px;
  height: 120px;
}
.natal-element-donut{
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 16px var(--paper);
}
.natal-element-donut-center{
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 13px;
  font-weight: 900;
  color: var(--ink-soft);
  pointer-events: none;
}
.natal-element-title{
  font-weight: 900;
  font-size: 15px;
  margin-bottom: 6px;
  color: var(--ink);
}
.natal-element-legend{
  display:flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-top: 8px;
}
.natal-ai-out{
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: rgba(255,255,255,.65);
  line-height: 1.7;
  font-weight: 600;
  color: var(--ink-soft);
  min-height: 120px;
}
.natal-ai-out--empty{
  display:flex;
  align-items: center;
  justify-content: center;
}
.natal-ai-error{
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255,107,107,.12);
  color: rgba(180,40,40,.95);
  font-size: 13px;
  font-weight: 700;
}
.natal-planet-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(5,8,16,.55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.natal-planet-modal-card{
  position: relative;
  width: 100%;
  max-width: 380px;
  max-height: min(82vh, 560px);
  overflow-y: auto;
  background: var(--paper);
  border-radius: 18px;
  border: 2px solid var(--line);
  box-shadow: var(--shadow-soft);
  padding: 18px 18px 16px;
}
.natal-planet-modal-close{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: rgba(0,0,0,.06);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
}
.natal-planet-modal-head{
  display:flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding-right: 36px;
}
.natal-planet-modal-name{
  font-size: 1.25rem;
  font-weight: 900;
  color: #e85d8e;
  font-family: var(--font-display);
}
.natal-planet-modal-motion{
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 700;
}
.natal-planet-modal-rep{
  margin: 8px 0 12px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
  font-weight: 600;
}
.natal-planet-modal-row{
  display:flex;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 8px;
  line-height: 1.5;
}
.natal-planet-modal-row .k{
  flex: 0 0 2.5em;
  color: var(--ink-soft);
  font-weight: 800;
}
.natal-planet-modal-row .v{
  font-weight: 700;
  color: var(--ink);
}
.natal-planet-modal-aspects-title{
  font-weight: 900;
  margin: 12px 0 6px;
  font-size: 14px;
  color: var(--sun-deep);
}
.natal-planet-modal-aspects{
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 600;
  line-height: 1.65;
}
.natal-planet-modal-aspects li{ margin-bottom: 4px; }

.kv{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:10px;
}
@media (max-width:720px){
  .kv{ grid-template-columns: 1fr; }
}
.kv .cell{
  border-radius:14px;
  border:2px solid var(--line);
  background: rgba(255,255,255,.55);
  padding:12px;
}
.kv .cell .k{
  color:var(--ink-soft);
  font-weight:800;
  font-size:11px;
}
.kv .cell .v{
  margin-top:6px;
  font-weight:800;
  line-height:1.35;
  color:var(--ink);
}

.hexLines{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.hexLine{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:14px;
  border:2px solid var(--line);
  background: rgba(255,255,255,.55);
}
.hexLine .left{ display:flex; align-items:center; gap:10px; }
.hexGlyph{
  width:26px;
  height:26px;
  border-radius:8px;
  display:grid;
  place-items:center;
  border:2px solid var(--line);
  background: rgba(255,255,255,.7);
  font-weight:900;
  color:var(--ink);
}
.hexLine .idx{
  color:var(--ink-soft);
  font-weight:800;
  font-size:11px;
}
.hexLine.active{
  border-color: rgba(240,193,75,.55);
  background: rgba(255,243,205,.5);
}

.loadingDot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background: var(--mint);
  margin-left:8px;
  animation: blink 1s infinite;
}
@keyframes blink{
  0%,100%{ transform: translateY(0); opacity:.55; }
  50%{ transform: translateY(-3px); opacity:1; }
}

.kbd{
  font-family: ui-monospace, monospace;
  border:2px solid var(--line);
  background: rgba(255,255,255,.7);
  padding:2px 8px;
  border-radius:8px;
  color: var(--ink-soft);
  font-weight:800;
  font-size:11px;
}

.firebase-setup-hint{
  line-height:1.65;
  font-size:12px;
}

/* Firebase Phone：人机验证挂载点，需有足够高度避免被裁切 */
#recaptchaContainer{
  min-height:80px;
  margin:12px 0;
}

/* 登录页：不升级 Blaze 时的测试号说明 */
.login-dev-hint{
  font-size:12px;
  line-height:1.55;
  padding:12px 14px;
  border-radius:14px;
  border:2px dashed rgba(240,193,75,.45);
  background:rgba(255,251,235,.75);
}
.login-dev-hint b{
  color:var(--ink);
}

/* 猫猫陪伴页 */
.cat-chat-log{
  max-height:220px;
  overflow:auto;
  padding:10px;
  border-radius:14px;
  border:2px solid var(--line);
  background: rgba(255,255,255,.6);
  margin-top:10px;
}
.cat-chat-line{
  margin-bottom:10px;
  font-size:13px;
  font-weight:600;
  line-height:1.45;
  color:var(--ink-soft);
}
.cat-chat-line b{ color:var(--ink); }

/* 形象选择网格 */
.cat-picker-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-top:12px;
}
@media (max-width:520px){
  .cat-picker-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cat-picker-tile{
  aspect-ratio:1;
  border-radius:14px;
  border:3px solid var(--line);
  cursor:pointer;
  background:linear-gradient(145deg, #fffef8, #fff3d4);
  display:grid;
  place-items:center;
  transition: transform .12s ease, border-color .12s ease;
  padding:6px;
}
.cat-picker-tile:hover{
  transform: scale(1.03);
  border-color: rgba(240,193,75,.55);
}
.cat-picker-tile.selected{
  border-color: var(--sun-deep);
  box-shadow:0 0 0 3px rgba(240,193,75,.25);
}
.cat-picker-svg-inner{
  width:100%;
  height:100%;
  max-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.cat-picker-svg-inner svg,
.cat-picker-svg-inner .cat-svg,
.cat-picker-svg-inner img.cat-mascot-img{
  width:100% !important;
  height:auto !important;
  max-height:100%;
  display:block;
  object-fit:contain;
}

.tarot-strip-svg .cat-svg{
  width:76px;
  height:auto;
  display:block;
}

.tarot-cat-hint{
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  border:2px dashed rgba(212,196,244,.5);
  background: rgba(255,255,255,.55);
  font-size:13px;
  font-weight:700;
  color:var(--ink-soft);
  line-height:1.5;
}

/* 八字排盘 — 暖色卡片 / 测测风 */
.bazi-shell{
  --bazi-ink:#3f342c;
  --bazi-soft:#6e6156;
  --bazi-card:rgba(255,253,250,.96);
  --bazi-accent:#e07c4c;
}

.bazi-shell .shell{
  width:min(980px, 100%);
}

.bazi-hero{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  padding:22px 20px 24px;
  margin-bottom:18px;
  background:
    radial-gradient(ellipse 80% 90% at 100% -10%, rgba(232,126,90,.2), transparent 50%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(184,232,217,.14), transparent 55%),
    linear-gradient(165deg, #fff9f2 0%, #fff3e8 100%);
  border:1px solid rgba(224,124,76,.14);
  box-shadow:0 10px 36px rgba(120,80,50,.08), 0 2px 12px rgba(61,52,40,.06);
}
.bazi-hero::after{
  content:"";
  position:absolute;
  top:14px;
  right:18px;
  width:36px;
  height:36px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #ffd4c8, #e8a090 45%, transparent 70%);
  opacity:.78;
  pointer-events:none;
}

.bazi-hero__text{ position:relative; z-index:1; }
.bazi-hero__title{
  font-size:1.32rem;
  font-weight:900;
  color:var(--bazi-ink);
  letter-spacing:.02em;
}
.bazi-hero__sub{
  margin:10px 0 0;
  font-size:14px;
  line-height:1.55;
  color:var(--bazi-soft);
  font-weight:600;
}

.bazi-pill-ghost{
  display:inline-block;
  margin-top:14px;
  padding:8px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  color:var(--bazi-soft);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(224,124,76,.22);
}

.bazi-grid{
  align-items:start;
  gap:20px;
}
.bazi-col-main{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.bazi-card{
  background:var(--bazi-card);
  border-radius:18px;
  padding:18px 18px 20px;
  border:1px solid rgba(61,52,40,.08);
  box-shadow:0 8px 28px rgba(80,55,40,.07), 0 2px 8px rgba(61,52,40,.04);
}
.bazi-card--side{
  position:sticky;
  top:16px;
}

.bazi-card__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  gap:10px;
}
.bazi-bracket{
  font-weight:900;
  font-size:1.05rem;
  color:var(--bazi-ink);
}
.bazi-ai-tag{
  font-size:11px;
  font-weight:800;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(224,124,76,.14);
  color:#b85c38;
}

.bazi-pattern-line{
  font-size:14px;
  font-weight:800;
  color:var(--bazi-ink);
  margin-bottom:8px;
}
.bazi-body-text{
  font-size:14px;
  line-height:1.65;
  color:var(--bazi-ink);
  margin:0 0 8px;
}
.bazi-muted{
  color:var(--bazi-soft);
  font-size:13px;
}

.bazi-row-icon{
  font-size:15px;
  font-weight:800;
  color:var(--bazi-ink);
  margin-bottom:8px;
}

.bazi-tabs{
  display:flex;
  gap:22px;
  border-bottom:2px solid rgba(61,52,40,.08);
  margin-bottom:16px;
}
.bazi-tab{
  appearance:none;
  border:none;
  background:none;
  font-family:inherit;
  font-size:15px;
  font-weight:800;
  color:var(--bazi-soft);
  padding:8px 2px 12px;
  cursor:pointer;
  position:relative;
}
.bazi-tab--on{ color:var(--bazi-accent); }
.bazi-tab--on::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:3px;
  border-radius:3px 3px 0 0;
  background:var(--bazi-accent);
}

.bazi-bar-chart{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:8px;
  min-height:196px;
  padding:8px 4px 0;
}
.bazi-bar-chart--scroll{
  justify-content:flex-start;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:12px;
  gap:6px;
}
.bazi-bar-chart--scroll .bazi-bar-col{
  flex:0 0 auto;
  min-width:44px;
  max-width:none;
  width:48px;
}
.bazi-bar-chart--scroll .bazi-bar-track{
  max-width:none;
  width:32px;
  margin:0 auto;
}
.bazi-bar-chart--narrow .bazi-bar-col{
  min-width:0;
  flex:1;
}
.bazi-bar-col{
  flex:1;
  min-width:52px;
  max-width:92px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.bazi-bar-tag{
  font-size:10px;
  line-height:1.3;
  text-align:center;
  color:var(--bazi-soft);
  font-weight:700;
  min-height:2.6em;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bazi-bar-track{
  width:100%;
  max-width:44px;
  height:140px;
  background:rgba(232,154,108,.14);
  border-radius:12px 12px 8px 8px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
}
.bazi-bar-fill{
  width:100%;
  border-radius:10px 10px 6px 6px;
  background:linear-gradient(180deg, #f2b896, #e89a6c);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-top:6px;
  min-height:28px;
}
.bazi-bar-fill span{
  font-size:12px;
  font-weight:900;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.15);
}
.bazi-bar-fill--soft{
  background:linear-gradient(180deg, #f0c9b0, #e8a090);
}
.bazi-bar-x{
  font-size:11px;
  text-align:center;
  line-height:1.45;
  color:var(--bazi-soft);
  font-weight:700;
}
.bazi-ganzhi{
  color:var(--bazi-ink);
  font-weight:900;
}
.bazi-liunian-hint{
  font-size:10px;
  font-weight:600;
  opacity:.88;
}

.bazi-favor-line{
  font-weight:900;
  font-size:15px;
  color:var(--bazi-ink);
  margin:0 0 14px;
}
.bazi-lucky-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.bazi-lucky-label{
  font-size:12px;
  font-weight:800;
  color:var(--bazi-soft);
  min-width:4em;
}
.bazi-swatches{ display:flex; gap:10px; }
.bazi-swatch{
  width:36px;
  height:36px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.bazi-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.bazi-chips--wrap{ margin-top:8px; }
.bazi-chip{
  padding:6px 12px;
  border-radius:10px;
  font-size:12px;
  font-weight:800;
  color:#a33d2e;
  border:1px solid rgba(200,90,70,.42);
  background:rgba(255,250,248,.92);
}
.bazi-chip--soft{
  color:var(--bazi-ink);
  border-color:rgba(61,52,40,.1);
  background:rgba(252,248,242,.96);
  font-weight:700;
}

.bazi-ten-chart{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:6px;
  padding:12px 0 4px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.bazi-ten-col{
  flex:0 0 auto;
  width:52px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.bazi-ten-track{
  width:28px;
  height:120px;
  background:rgba(61,52,40,.06);
  border-radius:10px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
}
.bazi-ten-fill{
  width:100%;
  border-radius:8px 8px 4px 4px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:4px;
  min-height:20px;
}
.bazi-ten-fill span{
  font-size:9px;
  font-weight:900;
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.2);
}
.bazi-ten-ico{ font-size:16px; line-height:1; }
.bazi-ten-name{
  font-size:10px;
  font-weight:800;
  text-align:center;
  color:var(--bazi-ink);
  line-height:1.25;
}

.bazi-shen-block{ margin-bottom:16px; }
.bazi-shen-block:last-child{ margin-bottom:0; }
.bazi-shen-head{
  font-size:14px;
  font-weight:900;
  color:var(--bazi-ink);
  margin-bottom:8px;
}
.bazi-shen-emoji{ margin-right:4px; }

.bazi-pillar-deck{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.bazi-pillar-card{
  background:var(--bazi-card);
  border-radius:18px;
  padding:16px 16px 18px;
  border:1px solid rgba(61,52,40,.08);
  box-shadow:0 6px 22px rgba(80,55,40,.06);
}
.bazi-pillar-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.bazi-pillar-icon{
  width:32px;
  height:32px;
  border-radius:50%;
  background:linear-gradient(145deg, #f5a87a, #e87850);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:14px;
  flex-shrink:0;
}
.bazi-pillar-title{
  flex:1;
  font-weight:900;
  font-size:15px;
  color:var(--bazi-ink);
}
.bazi-pillar-gz{
  font-weight:900;
  font-size:14px;
  color:#b85c4a;
}
.bazi-pillar-def{
  background:rgba(61,52,40,.05);
  border-radius:12px;
  padding:10px 12px;
  font-size:13px;
  line-height:1.5;
  color:var(--bazi-soft);
  margin-bottom:10px;
}
.bazi-pillar-read{
  margin:0;
  font-size:14px;
  line-height:1.65;
  color:var(--bazi-ink);
}

.bazi-footnote{
  font-size:12px;
  color:var(--bazi-soft);
  line-height:1.5;
  margin:8px 0 0;
  text-align:center;
}

.bazi-liu-result{
  margin-top:12px;
  padding-top:14px;
  border-top:1px solid rgba(61,52,40,.1);
}

.bazi-hex-lines .hexLine{
  border-color:rgba(224,124,76,.24);
  background:rgba(255,255,255,.78);
}
.bazi-hex-lines .hexGlyph{
  border-color:rgba(224,124,76,.28);
}
.bazi-hex-advice{
  font-size:12px;
  font-weight:700;
  color:var(--bazi-soft);
  max-width:52%;
  text-align:right;
  line-height:1.4;
}

@media (max-width:900px){
  .bazi-card--side{ position:static; }
}

/* 六爻起卦动效（全屏轻遮罩 + 铜钱 + 太极环） */
.modalOverlay--liu{
  background:rgba(45,38,32,.48);
  backdrop-filter:blur(7px);
}
.modal--liu-cast{
  width:min(340px, 92vw);
  text-align:center;
  padding:28px 22px 26px;
  background:linear-gradient(165deg, #fffbf5 0%, #ffeee0 52%, #ffe8d4 100%);
  border:2px solid rgba(224,124,76,.38);
  box-shadow:0 24px 64px rgba(80,45,30,.22);
}
.modal--liu-cast .liu-cast-title{
  font-family:var(--font-display);
  font-size:1.42rem;
  color:#3f342c;
  margin:0 0 6px;
}
.modal--liu-cast .liu-cast-hint{
  margin:0 0 20px;
  font-size:13px;
  color:#6e6156;
  font-weight:600;
  line-height:1.5;
}
.liu-cast-coins{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  margin-bottom:22px;
  min-height:48px;
}
.liu-coin{
  width:38px;
  height:38px;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.65) 0 18%, transparent 22%),
    linear-gradient(145deg, #f4d4a8, #c9a063 48%, #7a5a20);
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.55),
    0 5px 14px rgba(0,0,0,.18);
  animation:liuCoinToss .85s ease-in-out infinite;
}
.liu-coin:nth-child(2){ animation-delay:.1s; }
.liu-coin:nth-child(3){ animation-delay:.2s; }
@keyframes liuCoinToss{
  0%, 100%{ transform:translateY(0) rotateY(0deg) scale(1); }
  30%{ transform:translateY(-16px) rotateY(190deg) scale(1.05); }
  60%{ transform:translateY(3px) rotateY(360deg) scale(1); }
}
.liu-cast-ring{
  width:104px;
  height:104px;
  margin:0 auto 18px;
  border-radius:50%;
  border:3px dashed rgba(224,124,76,.5);
  border-top-color:rgba(200,90,70,.95);
  display:grid;
  place-items:center;
  animation:liuRingSpin 1.15s linear infinite;
  box-shadow:inset 0 0 20px rgba(255,200,160,.25);
}
.liu-cast-taiji{
  font-size:40px;
  line-height:1;
  color:rgba(184,92,74,.9);
  animation:liuTaijiPulse 1.6s ease-in-out infinite;
}
@keyframes liuRingSpin{
  to{ transform:rotate(360deg); }
}
@keyframes liuTaijiPulse{
  0%, 100%{ opacity:.85; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.06); }
}
.liu-cast-status{
  margin:0;
  font-size:14px;
  font-weight:800;
  color:#b85c4a;
  letter-spacing:.08em;
}