/* 拾己 · Moonly-inspired original skin v1
   Clean-room visual direction: deep space, moon gold, warm ivory, ritual cards.
   No Moonly assets, copy, code or trademarks are used. */
:root{
  --paper:#080D19;
  --desk:#050812;
  --card:#121A2D;
  --card2:#182137;
  --ink:#F8F0E3;
  --sub:#AAB4D2;
  --faint:#737F9F;
  --line:#2C3855;
  --seal:#E9B85C;
  --seal2:#F3D78B;
  --green:#79C99A;
  --tape:#1B2540;
  --glow:rgba(233,184,92,.42);
  --shadow:0 14px 40px rgba(0,0,0,.34);
  --soft-shadow:0 8px 26px rgba(0,0,0,.26);
  --gold:#E9B85C; /* 每日一抽能量条等引用；此前未定义导致相关声明失效 */
  --serif:"Noto Serif SC","Songti SC",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Consolas,monospace;
  --sans:"Noto Sans SC",ui-sans-serif,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
}
html{background:var(--desk)}
body{
  background:
    radial-gradient(circle at 82% -10%,rgba(233,184,92,.16),transparent 28%),
    radial-gradient(circle at 8% 18%,rgba(112,132,205,.15),transparent 32%),
    linear-gradient(180deg,#070C18 0%,#0A1020 48%,#070B16 100%);
  color:var(--ink);
}
.app{
  background:transparent!important;
  position:relative;z-index:1;
  box-shadow:0 0 0 1px rgba(248,240,227,.04),0 30px 90px rgba(0,0,0,.36);
}
.sky i{background:#F3D78C}
.starfield i{background:#FDF7E8;box-shadow:0 0 8px rgba(248,240,227,.85)}
.starfield i.main{background:#F3D78C;box-shadow:0 0 16px 4px rgba(233,184,92,.85)}
.aurora{opacity:.10;background:linear-gradient(100deg,transparent 8%,rgba(233,184,92,.42) 32%,rgba(112,132,205,.16) 55%,rgba(233,184,92,.36) 80%,transparent 96%)}
.shooting-star{width:184px;height:9px}
.shooting-star .ss-head{width:7px;height:7px;box-shadow:0 0 18px 6px rgba(255,252,240,.98)}
.shooting-star .ss-tail{width:176px;background:linear-gradient(90deg,rgba(255,252,240,0),rgba(255,252,240,.55) 55%,rgba(255,252,240,1))}
.topbar{
  height:64px;
  background:rgba(7,11,22,.78);
  border-bottom:1px solid rgba(233,184,92,.20);
  backdrop-filter:blur(18px) saturate(1.2);
}
.topbar-inner{height:64px;padding:0 22px}
.brand{font-size:22px;letter-spacing:.08em;color:var(--ink);text-shadow:0 0 22px rgba(233,184,92,.16)}
.brand-tag{color:var(--seal2);letter-spacing:.12em}
.top-action,.back{color:var(--sub)}
.top-action{border:1px solid rgba(233,184,92,.24);border-radius:999px;padding:8px 14px;background:rgba(233,184,92,.06)}
.screen{padding:30px 20px 52px;animation:rise .38s cubic-bezier(.2,0,0,1) both}

/* Hero: original moon-phase medallion + constellation field */
.hero{position:relative;min-height:300px;padding:22px 0 8px;isolation:isolate}
.hero:before{
  content:"";position:absolute;left:-20px;right:-20px;top:-30px;height:350px;z-index:-2;pointer-events:none;
  background:
    radial-gradient(2px 2px at 10% 18%,rgba(248,240,227,.9),transparent 70%),
    radial-gradient(1.5px 1.5px at 22% 9%,rgba(233,184,92,.85),transparent 70%),
    radial-gradient(2px 2px at 38% 24%,rgba(248,240,227,.6),transparent 70%),
    radial-gradient(1.5px 1.5px at 56% 12%,rgba(233,184,92,.7),transparent 70%),
    radial-gradient(2.5px 2.5px at 68% 30%,rgba(248,240,227,.75),transparent 70%),
    radial-gradient(1.5px 1.5px at 86% 16%,rgba(233,184,92,.8),transparent 70%),
    radial-gradient(2px 2px at 92% 42%,rgba(248,240,227,.5),transparent 70%),
    radial-gradient(circle at 82% 18%,rgba(233,184,92,.20),transparent 130px),
    linear-gradient(135deg,rgba(23,33,58,.72),rgba(8,13,25,0) 74%);
  animation:twinkle 5.2s ease-in-out infinite;
}
.hero:after{
  content:"";position:absolute;left:auto;right:18px;top:42px;width:118px;height:118px;z-index:-1;pointer-events:none;border-radius:50%;
  background:
    radial-gradient(circle at 62% 38%,#FFF2C9 0 10px,transparent 11px),
    radial-gradient(circle at 46% 58%,rgba(116,91,44,.35) 0 9px,transparent 10px),
    radial-gradient(circle at 50% 50%,#F4D789 0 43px,#DDAE50 44px 47px,rgba(233,184,92,.18) 48px 58px,transparent 59px);
  box-shadow:0 0 30px rgba(233,184,92,.34),0 0 90px rgba(233,184,92,.18);
  opacity:.94;
  animation:moonFloat 4.8s ease-in-out infinite;
}
.eyebrow{color:var(--seal2);letter-spacing:.12em;text-transform:uppercase}
.hero .eyebrow{position:relative;z-index:2;max-width:255px}
.hero h1{font-size:42px;line-height:1.12;letter-spacing:-.02em;max-width:390px;text-shadow:0 2px 30px rgba(0,0,0,.34)}
.hero h1 .seal-stamp{position:relative;left:auto;right:auto;top:auto;bottom:auto;display:inline-block;width:62px;height:62px;margin-left:12px;padding-top:33px;font-size:9px;line-height:1.35;vertical-align:-15px;box-sizing:border-box;pointer-events:none}
.hero h1 .seal-ring{inset:-5px}
.hero h1 em{color:var(--seal2);text-shadow:0 0 26px rgba(233,184,92,.34)}
.hero p{color:#B9C2DA;font-size:14px;line-height:1.85;max-width:355px}
@keyframes moonFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(3deg)}}

/* Data band and section rhythm */
.databand{
  margin:30px 0 34px;padding:18px 14px;border:1px solid rgba(233,184,92,.20);border-radius:22px;
  background:linear-gradient(180deg,rgba(248,240,227,.055),rgba(248,240,227,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),var(--soft-shadow);
}
.databand b{color:var(--seal2);font-size:23px;text-shadow:0 0 18px rgba(233,184,92,.24)}
.databand div:last-child b{font-size:18px;line-height:1.55}
.databand span{color:#8994B2}
.databand .gold-stars{display:none}
.section-head{margin:0 0 18px}
.section-head h2{color:#C2CBE2;letter-spacing:.12em}
.section-head span{color:var(--faint)}
.cat-tabs{gap:10px;margin:-4px 0 18px;padding-bottom:3px}
.cat-tab{
  padding:9px 16px;border-radius:999px;border:1px solid rgba(170,180,210,.20);background:rgba(18,26,45,.62);
  color:#AAB4D2;box-shadow:inset 0 1px 0 rgba(255,255,255,.03);transition:transform .18s,border-color .18s,background .18s,color .18s;
}
.cat-tab:hover{transform:translateY(-1px);border-color:rgba(233,184,92,.46)}
.cat-tab.on{background:linear-gradient(180deg,#F3D78B,#E9B85C);border-color:#F0CA76;color:#121A2D;box-shadow:0 8px 26px rgba(233,184,92,.28)}

/* Cards */
.grid{gap:14px}
.test-card{
  border:1px solid rgba(170,180,210,.18);border-radius:22px;background:linear-gradient(180deg,var(--card2),var(--card));
  box-shadow:var(--soft-shadow);transition:transform .2s cubic-bezier(.2,0,0,1),border-color .2s,box-shadow .2s;
}
.test-card:hover{transform:translateY(-3px);border-color:rgba(233,184,92,.44);box-shadow:0 18px 46px rgba(0,0,0,.34),0 0 0 1px rgba(233,184,92,.10)}
.test-card:active{transform:scale(.99)}
.card-banner{height:176px;border-bottom:1px solid rgba(233,184,92,.16);filter:saturate(.92) contrast(1.04);position:relative}
.card-banner:after{content:"";display:block;width:100%;height:100%;background:linear-gradient(180deg,rgba(8,13,25,.06),rgba(8,13,25,.48))}
.card-body{padding:21px 22px 23px}
.card-num{color:var(--seal2);letter-spacing:.10em}
.test-card h3,.card-title{display:block;color:var(--ink);font-weight:600;letter-spacing:.01em;font-size:18px;line-height:1.45;margin:0 0 8px}
.test-card p,.card-desc{display:block;color:#AAB4D2;font-size:13px;line-height:1.65;margin:0}
.card-state{border-color:rgba(233,184,92,.55);color:var(--seal2);background:rgba(7,11,22,.66)}
.card-state.done{background:linear-gradient(180deg,#9BD9B7,#79C99A);border-color:transparent;color:#08110D}

/* Quiz */
.quiz-top{margin-bottom:4px}
.progress-wrap{margin:18px 0 28px}
.progress-line{height:5px;border-radius:999px;background:#1B2540;box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.progress-line i{background:linear-gradient(90deg,#B98436,#F3D78B);box-shadow:0 0 16px rgba(233,184,92,.42)}
.progress-label{color:#96A2C0}
.question-kicker{color:var(--seal2);letter-spacing:.14em}
.question{
  font-size:29px;line-height:1.32;max-width:680px;padding:2px 0 4px;color:#F8F0E3;
  text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.30);
}
.quiz-hint{color:#9AA6C4;line-height:1.75}
.options{gap:13px}
.option{
  border:1px solid rgba(170,180,210,.17);border-radius:20px;background:linear-gradient(180deg,rgba(24,33,55,.94),rgba(18,26,45,.94));
  box-shadow:var(--soft-shadow);transition:transform .18s,border-color .18s,background .18s,box-shadow .18s;
}
.option:hover{transform:translateY(-1px);border-color:rgba(233,184,92,.40)}
.option .opt-text{color:#BDC7DE}
.option.selected{
  border-color:rgba(233,184,92,.78);background:linear-gradient(180deg,rgba(233,184,92,.16),rgba(18,26,45,.96));
  box-shadow:0 12px 32px rgba(233,184,92,.12),inset 0 0 0 1px rgba(243,215,139,.12);
}
.option.selected:before{width:4px;background:linear-gradient(180deg,#F3D78B,#C98F3B)}
.option .cb{border-color:#73809F}
.option.selected .cb{background:var(--seal2);border-color:var(--seal2);box-shadow:0 0 16px rgba(233,184,92,.38)}
.primary{
  border-radius:999px;background:linear-gradient(180deg,#F5DA92,#E3AE4E);color:#16110A;font-weight:700;
  box-shadow:0 12px 30px rgba(233,184,92,.28),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .16s,box-shadow .16s,opacity .16s;
}
.primary:hover{transform:translateY(-1px);box-shadow:0 16px 38px rgba(233,184,92,.34)}
.primary:disabled{opacity:.38;box-shadow:none}
.secondary,.prev-link{color:var(--sub)}
.flow-actions{background:linear-gradient(180deg,rgba(8,13,25,.72),#080D19);border-top:1px solid rgba(233,184,92,.16)}

/* Result */
.result-hero,.result-block,.paywall{
  border:1px solid rgba(170,180,210,.17);border-radius:24px;background:linear-gradient(180deg,rgba(24,33,55,.96),rgba(16,24,43,.96));
  box-shadow:var(--soft-shadow);
}
.result-hero{overflow:hidden;padding:26px 24px;padding-right:112px}
.result-hero:after{content:"";position:absolute;right:-42px;top:-42px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#F3D78B 0 38px,rgba(233,184,92,.20) 39px 64px,transparent 65px);opacity:.32}
.result-hero h1{font-size:37px;letter-spacing:-.02em;text-shadow:0 2px 30px rgba(0,0,0,.32)}
.spec-ul{width:48px;height:3px;border-radius:999px;background:linear-gradient(90deg,#E9B85C,#F5DA92)}
.result-block h3{color:#C1CBE4;letter-spacing:.12em}
.radar-dim{border-left-color:rgba(233,184,92,.56)}
.radar-dim-head span{color:var(--seal2)}
.radar-area{fill:rgba(233,184,92,.18);stroke:#F3D78B;filter:drop-shadow(0 0 10px rgba(233,184,92,.24))}
.radar-dot{fill:#F3D78B}
.bar{background:#1B2540;border-radius:999px;overflow:hidden}
.bar i{background:linear-gradient(90deg,#B98436,#F3D78B);border-radius:999px}
.tag{border-color:rgba(233,184,92,.22);background:rgba(233,184,92,.07);color:#C4B893}
.locked-preview{max-height:92px;filter:saturate(.96)}
.locked-fade{height:88px;background:linear-gradient(180deg,rgba(8,13,25,.08),rgba(8,13,25,.92) 58%,#080D19 82%)}
.paywall{overflow:hidden;position:relative}
.paywall:before{content:"";position:absolute;right:-54px;top:-64px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(243,215,139,.26),transparent 68%)}
.pw-kicker{color:var(--seal2);letter-spacing:.13em}
.pw-row{border-bottom-color:rgba(170,180,210,.14)}
.pw-row b{color:var(--seal2)}
.price{color:var(--ink);text-shadow:0 0 22px rgba(233,184,92,.18)}
.price s:after{background:#E9B85C}
.pw-note{color:#96A2C0}
.code-link{color:#AAB4D2}
.modal-mask{background:rgba(4,7,14,.72);backdrop-filter:blur(8px)}
.modal{background:linear-gradient(180deg,#182137,#10182B);border-top:1px solid rgba(233,184,92,.26);box-shadow:0 -20px 80px rgba(0,0,0,.42)}
.modal input{background:#0A1020;border-color:#334061;color:var(--ink)}
.qr-slot,.empty,.error{border-color:rgba(233,184,92,.22);background:rgba(18,26,45,.72)}

/* Seal and motion polish */
.seal-stamp{color:var(--seal2);border-color:rgba(233,184,92,.76);text-shadow:0 0 14px rgba(233,184,92,.24)}
.seal-ring{border-color:rgba(233,184,92,.48)}
#sgToast{background:rgba(18,26,45,.96);border-color:rgba(233,184,92,.38);box-shadow:0 14px 44px rgba(0,0,0,.48)}
.gold-stars{filter:drop-shadow(0 0 12px rgba(233,184,92,.28))}

/* Tarot flow harmonization */
.tarot-stage{
  background:
    radial-gradient(circle at 82% 8%,rgba(233,184,92,.12),transparent 170px),
    radial-gradient(circle at 12% 34%,rgba(112,132,205,.12),transparent 210px),
    linear-gradient(180deg,#0A1122,#070B16);
}
.t-kicker,.t-week-label{color:var(--seal2)}
.t-title{text-shadow:0 2px 28px rgba(0,0,0,.34)}
.t-primary{background:linear-gradient(180deg,#F5DA92,#E3AE4E);color:#16110A;box-shadow:0 12px 30px rgba(233,184,92,.28)}
.tcard,.tflip .face,.tflip2 .face{border-color:rgba(233,184,92,.34);box-shadow:0 10px 28px rgba(0,0,0,.42)}
.t-slot .ph{background:rgba(18,26,45,.64);border-color:#354363}
.t-slot.filled .ph{border-color:var(--seal2);box-shadow:0 0 22px rgba(233,184,92,.34)}
.t-auto{background:rgba(18,26,45,.9);border-color:rgba(233,184,92,.5);color:var(--seal2)}
.t-card-block{border-radius:22px;border-color:rgba(170,180,210,.17);background:linear-gradient(180deg,rgba(24,33,55,.96),rgba(16,24,43,.96));box-shadow:var(--soft-shadow)}
.t-card-block .kw b{border-color:rgba(233,184,92,.24);color:var(--seal2)}

/* Responsive */
@media (max-width:599px){
  .screen{padding:20px 16px 44px}
  .hero{min-height:276px;padding-top:16px}
  .hero:after{left:auto;width:64px;height:64px;right:8px;top:8px}
  .screen>.seal-stamp{right:28px;top:132px;width:56px;height:56px;font-size:9px;padding-top:29px}
  .hero h1{font-size:36px;max-width:356px;padding-right:0}
  .hero h1 .seal-stamp{width:54px;height:54px;margin-left:8px;padding-top:29px;font-size:8.5px;vertical-align:-13px}
  .databand{margin:24px 0 30px;border-radius:20px;padding:16px 10px}
  .card-banner{height:166px}
  .question{font-size:24px}
  .flow-actions{background:linear-gradient(180deg,rgba(8,13,25,.86),#080D19)}
}
@media (min-width:600px){
  body{padding:24px 0}
  .app{border-radius:28px;overflow:hidden}
  .grid{grid-template-columns:1fr 1fr;gap:18px}
}
@media (min-width:1200px){
  body{padding:0!important;background:#050812}
  .app{max-width:1440px;border-radius:0;overflow:visible}
  .topbar-inner{max-width:1160px;height:68px;padding:0 34px}
  .app>*:not(header){max-width:1160px}
  .screen{padding:56px 34px 76px}
  .hero{min-height:310px;padding-top:22px}
  .hero:after{left:auto;right:72px;top:34px;width:178px;height:178px}
  .screen>.seal-stamp{top:176px;right:92px}
  .hero .eyebrow{max-width:520px}
  .hero h1{font-size:64px;max-width:760px}
  .hero h1 .seal-stamp{width:76px;height:76px;margin-left:16px;padding-top:40px;font-size:10px;vertical-align:-18px}
  .hero p{font-size:16px;max-width:560px}
  .databand{margin:28px 0 38px;padding:22px 24px;border-radius:26px}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .card-banner{height:190px}
  .test-card{border-radius:26px}
  .question{max-width:800px;font-size:36px}
  .options,.quiz-top,.progress-wrap,.question-kicker,.quiz-hint,.flow-actions,.legal{max-width:800px}
  .result-hero{padding:40px 38px}
  .result-hero h1{font-size:50px}
  .result-block,.paywall{border-radius:28px}
  .radar-wrap{max-width:560px}
  .result-block:has(.radar-wrap){max-width:820px;margin-left:auto;margin-right:auto;padding-top:24px;padding-bottom:24px}
  footer.site-footer{background:rgba(18,26,45,.88);border-top-color:rgba(233,184,92,.18)}
}
@media (prefers-reduced-motion:reduce){
  .hero:before,.hero:after{animation:none!important}
  .test-card,.option,.primary,.cat-tab{transition:none!important}
}


/* ===== 2026-10-20 可访问性增强 ===== */
/* 全局键盘焦点可见（此前仅 4 个选择器有焦点样式） */
:focus-visible{outline:2px solid var(--seal2);outline-offset:2px;border-radius:6px}
button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:none}