/* =====================================================================
 * 三套前台風格（主人 2026-11-04 要年輕化；後台「網站設定」切換，?preview_theme= 只預覽）
 *   共用同一份 index.html：body[data-theme=a|b|c] 換顏色變數＋各區塊樣式；B 的星空層、C 的角色列平常藏起來
 *   字體一律 Noto Sans TC／Microsoft JhengHei；旋轉、偏移只在桌機做（手機不超出）
 * ===================================================================== */
.constellation,.sky,.chars{display:none}
.hero{position:relative;overflow:hidden}
.hero-in{position:relative;z-index:1}
.hero-chart{position:relative;isolation:isolate}
.pv-bar{position:fixed;left:12px;right:84px;bottom:12px;z-index:45;background:#1d1530;color:#fff;border-radius:14px;padding:8px 12px;font-size:13px;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.pv-bar[hidden]{display:none}
.pv-bar .ph{margin-right:4px}
.pv-links{display:flex;gap:12px;flex-wrap:wrap}
.pv-links a{color:#ffd76a;font-weight:700;white-space:nowrap}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .facts li,.svc,.faq details,.ct-card,.char{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease}
}

/* ---------- A 清新文青：米白＋莫蘭迪紫／青綠、圓角卡片、手繪星圖線 ---------- */
body[data-theme=a]{--ink:#2e2a38;--ink-2:#4a4556;--muted:#6a6476;--paper:#f7f3ec;--paper-2:#f0ebf4;--card:#fffdf9;--line:#e1d9e7;--teal:#4d8276;--teal-2:#3d6b61;--accent:#77649f;--accent-2:#62528a;--accent-soft:#ece6f5;--radius:20px;--shadow:0 16px 34px -22px rgba(74,58,110,.5)}
body[data-theme=a] .hd{background:rgba(247,243,236,.92)}
body[data-theme=a] .hero{background:radial-gradient(720px 380px at 88% -4%,#e6def3 0%,transparent 66%),radial-gradient(520px 320px at -4% 104%,#dcece7 0%,transparent 70%),var(--paper)}
body[data-theme=a] .constellation{display:block;position:absolute;right:-2%;top:8px;width:min(62%,760px);color:var(--accent);opacity:.3;pointer-events:none}
body[data-theme=a] .sec-title{position:relative;padding-bottom:8px}
body[data-theme=a] .sec-title::before{width:10px;height:10px;border-radius:3px;transform:rotate(45deg);background:var(--teal)}
body[data-theme=a] .sec-title::after{content:"";position:absolute;left:22px;bottom:-4px;width:92px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 12'%3E%3Cpath d='M2 8 C 14 2, 22 11, 34 6 S 56 2, 66 7 S 82 9, 90 4' fill='none' stroke='%2377649f' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat}
body[data-theme=a] .seal{background:var(--accent);border-radius:999px;padding:4px 10px}
body[data-theme=a] .facts li,body[data-theme=a] .svc,body[data-theme=a] .pp-form,body[data-theme=a] .faq details,body[data-theme=a] .ct-card,body[data-theme=a] .res-card{border-color:var(--line);border-radius:20px}
body[data-theme=a] .svc:nth-child(1){background:#efe9f7;border-color:#ddd3ec}
body[data-theme=a] .svc:nth-child(4){background:#e9f2ef;border-color:#d3e4de}
body[data-theme=a] .svc .ph{color:var(--accent)}
@media (hover:hover){body[data-theme=a] .facts li:hover,body[data-theme=a] .svc:hover,body[data-theme=a] .faq details:hover{transform:translateY(-3px);box-shadow:var(--shadow)}}
body[data-theme=a] .lineage{background:linear-gradient(160deg,#e8f1ed,#efeaf6);color:var(--ink-2)}
body[data-theme=a] .vert{color:var(--teal);border-color:var(--accent)}
body[data-theme=a] .lineage .prose p{color:var(--ink-2)}
body[data-theme=a] .tenets li{border-top-color:#cfdcd6}
body[data-theme=a] .tenets .ph{color:var(--accent)}
body[data-theme=a] .tenets b{color:var(--ink)}
body[data-theme=a] .tenets small{color:var(--muted)}
body[data-theme=a] input:not([type=checkbox]):not([type=radio]),body[data-theme=a] select,body[data-theme=a] .seg{border-color:#cdc3d8;border-radius:12px}
body[data-theme=a] .seg label+label span{border-left-color:#cdc3d8}
body[data-theme=a] .ft{background:#2e2a38;color:#d9d4e3}
body[data-theme=a] .zw-grid{--zw-center:#4a4366;--zw-bg:#fffdf9}
body[data-theme=a] .zw-soul{background:#f3eef9}
body[data-theme=a] .sample{border-radius:22px}
@media (min-width:861px){
  body[data-theme=a] .hero-chart{transform:rotate(-1.2deg)}
  body[data-theme=a] .hero-chart::before{content:"";position:absolute;inset:18px -16px 22px 26px;z-index:-1;border-radius:30px;background:linear-gradient(135deg,#d9ebe5,#e6ddf3);transform:rotate(3.5deg)}
}

/* ---------- B 潮流夜空：深紫夜空＋霓虹、玻璃卡片、星點與星軌（減少動態時不動） ---------- */
body[data-theme=b]{--ink:#f4f1ff;--ink-2:#d9d3f0;--muted:#aca4cf;--paper:#110b24;--paper-2:#160f2e;--card:rgba(255,255,255,.06);--line:rgba(255,255,255,.15);--teal:#4fd8f2;--teal-2:#2bb8d6;--accent:#b88bff;--accent-2:#a06bff;--accent-soft:rgba(176,124,255,.16);--radius:18px;--shadow:0 18px 40px -24px rgba(0,0,0,.85);background:#110b24;color:var(--ink-2)}
body[data-theme=b] .sky{display:block;position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(1200px 700px at 80% -10%,#2a1660 0%,transparent 60%),radial-gradient(900px 600px at 0% 110%,#0f2a4a 0%,transparent 60%),#110b24}
body[data-theme=b] .sky .stars{position:absolute;left:0;right:0;top:-50%;height:200%;background-repeat:repeat}
body[data-theme=b] .sky .s1{background-image:radial-gradient(1.3px 1.3px at 18px 26px,#fff,transparent 70%),radial-gradient(1px 1px at 132px 84px,#d9ceff,transparent 70%),radial-gradient(1.2px 1.2px at 210px 170px,#bfe9ff,transparent 70%),radial-gradient(1px 1px at 70px 200px,#fff,transparent 70%);background-size:240px 240px;opacity:.75}
body[data-theme=b] .sky .s2{background-image:radial-gradient(2px 2px at 60px 90px,#fff,transparent 70%),radial-gradient(1.6px 1.6px at 300px 260px,#ffc9ef,transparent 70%),radial-gradient(1.8px 1.8px at 190px 330px,#c8f4ff,transparent 70%);background-size:380px 380px;opacity:.6}
body[data-theme=b] .sky .trail{position:absolute;width:1500px;height:1500px;right:-760px;top:-760px;border-radius:50%;opacity:.55;background:repeating-radial-gradient(circle at center,transparent 0 26px,rgba(184,139,255,.22) 27px,transparent 28.5px);-webkit-mask:conic-gradient(from 200deg,transparent 0 40%,#000 62%,transparent 86%);mask:conic-gradient(from 200deg,transparent 0 40%,#000 62%,transparent 86%)}
@media (prefers-reduced-motion:no-preference){
  body[data-theme=b] .sky .s1{animation:zwDrift 180s linear infinite}
  body[data-theme=b] .sky .s2{animation:zwDrift 260s linear infinite,zwTwinkle 5s ease-in-out infinite alternate}
  body[data-theme=b] .sky .trail{animation:zwSpin 300s linear infinite}
}
@keyframes zwDrift{to{transform:translateY(25%)}}
@keyframes zwTwinkle{from{opacity:.35}to{opacity:.7}}
@keyframes zwSpin{to{transform:rotate(360deg)}}
body[data-theme=b] main,body[data-theme=b] .ft{position:relative;z-index:1}
body[data-theme=b] .hd{background:rgba(17,11,36,.8);border-bottom-color:var(--line)}
body[data-theme=b] .hero{background:radial-gradient(640px 380px at 82% 6%,rgba(176,124,255,.26),transparent 70%),radial-gradient(520px 320px at 6% 92%,rgba(79,216,242,.12),transparent 70%)}
body[data-theme=b] .lineage,body[data-theme=b] .flow,body[data-theme=b] .faq{background:rgba(255,255,255,.025)}
body[data-theme=b] .lineage{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
body[data-theme=b] .btn.primary{background:linear-gradient(100deg,#6c38ec,#ad2f88);color:#fff;box-shadow:0 0 24px -4px rgba(176,100,255,.6)}
body[data-theme=b] .btn.primary:hover{background:linear-gradient(100deg,#7c4bff,#c23a9a)}
body[data-theme=b] .btn.ghost{color:#efeaff;border-color:rgba(255,255,255,.45)}
body[data-theme=b] .btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff}
body[data-theme=b] .seal{background:#6c38ec}
body[data-theme=b] .facts li,body[data-theme=b] .svc,body[data-theme=b] .pp-form,body[data-theme=b] .faq details,body[data-theme=b] .ct-card,body[data-theme=b] .res-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px -26px rgba(0,0,0,.9)}
@media (prefers-reduced-transparency:reduce){body[data-theme=b] .facts li,body[data-theme=b] .svc,body[data-theme=b] .pp-form,body[data-theme=b] .faq details,body[data-theme=b] .ct-card,body[data-theme=b] .res-card{background:#1c1440;-webkit-backdrop-filter:none;backdrop-filter:none}}
body[data-theme=b] .res-card{border-left:4px solid var(--accent)}
body[data-theme=b] .svc:nth-child(1){background:rgba(176,124,255,.14);border-color:rgba(176,124,255,.4)}
body[data-theme=b] .svc:nth-child(4){background:rgba(79,216,242,.08);border-color:rgba(79,216,242,.3)}
body[data-theme=b] .svc .ph{background:rgba(255,255,255,.08);border-color:var(--line);color:var(--accent)}
@media (hover:hover){body[data-theme=b] .svc:hover,body[data-theme=b] .facts li:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(184,139,255,.5),0 0 30px -8px rgba(184,139,255,.6)}}
body[data-theme=b] .vert{color:#fff;border-color:#ff8fd6}
body[data-theme=b] .tenets li{border-top-color:var(--line)}
body[data-theme=b] .tenets .ph{color:#ff9ad5}
body[data-theme=b] .tenets small{color:var(--muted)}
body[data-theme=b] .steps .ph{background:linear-gradient(135deg,#6c38ec,#ad2f88);box-shadow:0 0 18px -2px rgba(176,100,255,.6)}
body[data-theme=b] .steps li:not(:last-child)::after{background:repeating-linear-gradient(90deg,#b88bff 0 6px,transparent 6px 12px)}
body[data-theme=b] .sec-title::before{background:linear-gradient(180deg,#4fd8f2,#ff8fd6);box-shadow:0 0 12px rgba(255,143,214,.7)}
body[data-theme=b] input:not([type=checkbox]):not([type=radio]),body[data-theme=b] select{background:rgba(255,255,255,.07);color:var(--ink);border-color:rgba(255,255,255,.28)}
body[data-theme=b] input::placeholder{color:#a39bc8}
body[data-theme=b] select option{background:#1d1440;color:#f4f1ff}
body[data-theme=b] .seg{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.28)}
body[data-theme=b] .seg label+label span{border-left-color:rgba(255,255,255,.28)}
body[data-theme=b] .seg input:checked+span{background:linear-gradient(100deg,#6c38ec,#ad2f88)}
body[data-theme=b] .res-kw span{background:rgba(255,255,255,.1)}
body[data-theme=b] .ft{background:#0a0618;color:#c4bde2}
body[data-theme=b] .modal-box{background:#1d1440}
body[data-theme=b] .toast{background:#2c1f60}
body[data-theme=b] .ct-empty{color:var(--muted)}
body[data-theme=b] .zw-grid{--zw-bg:rgba(21,14,48,.94);--zw-line:rgba(255,255,255,.13);--zw-ink:#f0ecff;--zw-muted:#aaa2cf;--zw-accent:#ff9ad5;--zw-center:#2a1c5e;border-color:rgba(184,139,255,.7);box-shadow:0 0 0 1px rgba(184,139,255,.25),0 0 46px -8px rgba(184,139,255,.6)}
body[data-theme=b] .zw-soul{background:rgba(255,154,213,.12);box-shadow:inset 0 0 0 1.5px #ff9ad5,inset 0 0 22px rgba(255,154,213,.32)}
body[data-theme=b] .zw-center dt,body[data-theme=b] .zw-legend{color:#bfb6e6}
@media (hover:hover){body[data-theme=b] .zw-cell{transition:box-shadow .3s ease}body[data-theme=b] .zw-cell:hover{box-shadow:inset 0 0 18px rgba(79,216,242,.4)}}
body[data-theme=b] .sample{border-radius:16px}

/* ---------- C Q 版角色：粉彩底、貼紙感卡片與標籤、14 主星角色列 ---------- */
body[data-theme=c]{--ink:#33283f;--ink-2:#4b3f58;--muted:#665a74;--paper:#fff7f1;--paper-2:#eef6ff;--card:#fff;--line:#eadfd3;--teal:#1d8a73;--teal-2:#16705d;--accent:#cf346c;--accent-2:#b2285a;--accent-soft:#ffe1ec;--radius:22px;--shadow:4px 4px 0 #33283f}
body[data-theme=c] .hd{background:rgba(255,247,241,.94);border-bottom:2px solid var(--ink)}
body[data-theme=c] .hero{background:radial-gradient(420px 280px at 88% 12%,#ffd6e5 0%,transparent 70%),radial-gradient(380px 260px at 4% 92%,#cdf1e2 0%,transparent 70%),radial-gradient(360px 220px at 52% -6%,#fff0b5 0%,transparent 72%),var(--paper)}
body[data-theme=c] .btn{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
body[data-theme=c] .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
body[data-theme=c] .btn.ghost{background:#fff;color:var(--ink)}
body[data-theme=c] .btn.ghost:hover{background:#fff3c4;color:var(--ink)}
body[data-theme=c] .seal{background:#ffd34d;color:var(--ink);border:2px solid var(--ink);border-radius:10px;transform:rotate(-4deg)}
body[data-theme=c] .sec-title{display:inline-flex;background:#fff3c4;border:2px solid var(--ink);border-radius:14px;padding:4px 16px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-1.2deg)}
body[data-theme=c] .sec-title::before{display:none}
body[data-theme=c] .facts li,body[data-theme=c] .svc,body[data-theme=c] .pp-form,body[data-theme=c] .faq details,body[data-theme=c] .ct-card,body[data-theme=c] .res-card{border:2px solid var(--ink);border-radius:22px;box-shadow:4px 4px 0 var(--ink)}
body[data-theme=c] .facts li:nth-child(1){background:#ffe8f0}
body[data-theme=c] .facts li:nth-child(2){background:#e3f6ee}
body[data-theme=c] .facts li:nth-child(3){background:#fff3c4}
body[data-theme=c] .svc:nth-child(1){background:#ffe1ec}
body[data-theme=c] .svc:nth-child(2){background:#e3f6ee}
body[data-theme=c] .svc:nth-child(3){background:#fff3c4}
body[data-theme=c] .svc:nth-child(4){background:#ebe6ff}
body[data-theme=c] .svc .ph{border:2px solid var(--ink);color:var(--accent)}
@media (hover:hover){body[data-theme=c] .svc:hover,body[data-theme=c] .facts li:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}}
body[data-theme=c] .lineage{background:#e3f6ee;color:var(--ink-2);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
body[data-theme=c] .vert{color:var(--ink);border-color:var(--accent)}
body[data-theme=c] .lineage .prose p{color:var(--ink-2)}
body[data-theme=c] .tenets li{border-top:2px dashed var(--ink)}
body[data-theme=c] .tenets .ph{color:var(--accent)}
body[data-theme=c] .tenets b{color:var(--ink)}
body[data-theme=c] .tenets small{color:var(--muted)}
body[data-theme=c] .steps .ph{background:var(--accent);border:2px solid var(--ink)}
body[data-theme=c] .steps li:not(:last-child)::after{background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 12px)}
body[data-theme=c] .faq{background:#fff0f6}
body[data-theme=c] input:not([type=checkbox]):not([type=radio]),body[data-theme=c] select,body[data-theme=c] .seg{border:2px solid var(--ink);border-radius:14px}
body[data-theme=c] .seg label+label span{border-left:2px solid var(--ink)}
body[data-theme=c] .seg input:checked+span{background:var(--teal)}
body[data-theme=c] .ft{background:var(--ink);color:#e9e1f0}
body[data-theme=c] .chars{display:block;background:#fff;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
body[data-theme=c] .chars-sub{margin:0 0 16px;color:var(--muted)}
body[data-theme=c] .char-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px 10px}
body[data-theme=c] .char{margin:0;text-align:center;transform:rotate(var(--r,0deg))}
body[data-theme=c] .char img{width:100%;max-width:100px;height:auto;margin:0 auto;background:#fff;border:2px solid var(--ink);border-radius:50%;box-shadow:3px 3px 0 var(--ink)}
body[data-theme=c] .char figcaption small{display:block;font-size:12px;color:var(--muted);white-space:nowrap}
body[data-theme=c] .char figcaption b{display:inline-block;margin-top:2px;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:0 8px;font-size:12px;color:var(--ink);white-space:nowrap}
@media (hover:hover) and (prefers-reduced-motion:no-preference){body[data-theme=c] .char:hover{transform:rotate(0) scale(1.06)}}
body[data-theme=c] .zw-grid{--zw-center:#4a3d86;--zw-bg:#fff;--zw-accent:#c42c63}
body[data-theme=c] .zw-soul{background:#ffe8f0}
body[data-theme=c] .sample{border:3px solid var(--ink);border-radius:22px;box-shadow:6px 6px 0 var(--ink)}
body[data-theme=c] .sample .zw-grid{border:0}
@media (min-width:861px){
  body[data-theme=c] .hero-chart{transform:rotate(1.2deg)}
  body[data-theme=c] .hero-chart::after{content:"";position:absolute;width:104px;height:104px;right:-24px;top:-50px;border-radius:50%;background-color:#fff!important;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);background:url("images/characters/%E7%B4%AB%E5%BE%AE.svg") no-repeat center/contain;transform:rotate(12deg)}
}
@media (max-width:860px){
  body[data-theme=c] .char-row{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:640px){
  body[data-theme=a] .constellation{width:120%;right:-40%;top:0;opacity:.18}
  body[data-theme=c] .char-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 6px}
  body[data-theme=c] .char figcaption b{font-size:11px;padding:0 6px}
  .pv-bar{right:72px;font-size:12px}
}

/* 亮點卡三張：桌機三欄（圖示在上）、手機一張一列 */
.facts{grid-template-columns:repeat(3,minmax(0,1fr))}
.facts li{flex-direction:column;gap:6px}
@media (max-width:640px){
  .facts{grid-template-columns:1fr;gap:8px}
  .facts li{flex-direction:row;align-items:center;gap:10px;padding:10px 12px}
  .facts small{font-size:12.5px}
}