:root { --void:#050510; --deep:#0c0c23; --ink:#f2efff; --mist:#aaa4c6; --line:rgba(224,217,255,.16); --lilac:#c8bdff; --gold:#f4cc8b; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; overflow-x:hidden; color:var(--ink); background:radial-gradient(ellipse 60% 36% at 50% 4%,#32275a 0,transparent 95%),radial-gradient(ellipse 40% 25% at 100% 45%,#1d4652 0,transparent 100%),var(--void); font-family:"Songti SC","Noto Serif SC",Georgia,serif; } body::before { content:""; position:fixed; z-index:-1; inset:0; opacity:.35; background-image:radial-gradient(circle at 9% 18%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 64% 13%,#fff 0 .7px,transparent 1.2px),radial-gradient(circle at 87% 67%,#d9c7ff 0 1px,transparent 1.5px),radial-gradient(circle at 27% 72%,#fff 0 .6px,transparent 1px),radial-gradient(circle at 73% 87%,#fff 0 1px,transparent 1.4px); background-size:170px 190px,130px 170px,190px 220px,120px 150px,210px 190px; }
button,textarea { font:inherit; } button { cursor:pointer; }.shell { width:min(720px,100%); margin:auto; padding:34px 21px 56px; }.hero { position:relative; padding-top:8px; }.orb { position:absolute; z-index:-1; border:1px solid rgba(217,200,255,.16); border-radius:50%; }.orb-one { width:240px; height:240px; right:-70px; top:-90px; box-shadow:0 0 70px #7959aa55,inset 0 0 45px #8a70c833; }.orb-two { width:330px; height:330px; left:-260px; top:130px; }.stars { position:absolute; right:12px; top:27px; color:#f7d79b; font-size:13px; letter-spacing:8px; }.brand { display:flex; align-items:center; gap:10px; color:#f6ecdd; }.brand-mark { display:grid; place-items:center; width:30px; height:30px; border:1px solid #d9c0e9; border-radius:50%; color:var(--gold); font-size:22px; }.brand strong { display:block; font-family:Georgia,serif; font-size:18px; font-weight:500; letter-spacing:.08em; }.brand small { display:block; margin-top:1px; color:var(--mist); font-size:10px; letter-spacing:.28em; }.date { position:absolute; right:0; top:13px; color:var(--mist); font-family:ui-sans-serif,system-ui,sans-serif; font-size:11px; letter-spacing:.1em; }.hero h1 { margin:45px 0 0; font-size:clamp(31px,8.4vw,51px); font-weight:500; letter-spacing:-.06em; line-height:1.23; }.hero em { color:#d6c8ff; font-style:normal; }.second-line { margin:18px 0 0; color:#c7bbdf; font-size:15px; line-height:1.75; letter-spacing:.025em; }.intro { margin:24px 0 0; color:var(--mist); font-size:13px; line-height:1.8; }
.panel { border:1px solid var(--line); border-radius:3px 24px 3px 24px; background:linear-gradient(135deg,rgba(198,180,255,.12),rgba(255,255,255,.025)); box-shadow:0 22px 80px rgba(0,0,0,.3); }.ask { margin-top:31px; padding:20px; }.label-row,.section-title,.mode-row { display:flex; align-items:center; justify-content:space-between; }.label-row { font-size:14px; }.label-row span,.section-title span { color:var(--mist); font-family:ui-sans-serif,system-ui,sans-serif; font-size:10px; }.ask textarea { display:block; width:100%; min-height:72px; padding:15px 0; border:0; outline:0; resize:none; color:var(--ink); background:transparent; font-size:16px; line-height:1.6; }.ask textarea::placeholder { color:#77728d; }.mode-row { justify-content:flex-start; gap:8px; border-top:1px solid var(--line); padding-top:14px; }.mode { border:1px solid var(--line); border-radius:99px; padding:8px 11px; color:var(--mist); background:transparent; font-family:ui-sans-serif,system-ui,sans-serif; font-size:11px; }.mode.active { color:#17131f; background:linear-gradient(100deg,#f4d196,#c9b9ff); border-color:transparent; }.mode-note { margin:12px 0 16px; min-height:18px; color:var(--mist); font-size:11px; }.ask-button,.again { width:100%; border:0; border-radius:2px 14px 2px 14px; padding:14px 17px; color:#130e1b; background:linear-gradient(100deg,#f3ce8e,#cabaff); font-weight:600; text-align:left; }.ask-button span { float:right; font-size:21px; line-height:14px; }
.reading-options{display:flex;flex-wrap:wrap;gap:7px;margin:-2px 0 16px}.spread{border:1px solid var(--line);border-radius:99px;padding:6px 9px;color:var(--mist);background:transparent;font-size:10px}.spread.active{border-color:#e5c88d;color:#191325;background:#eac98e}.liuren-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:-3px 0 15px;padding:12px;border:1px solid rgba(217,200,255,.18);border-radius:10px;background:rgba(188,169,255,.07)}.liuren-inputs label{display:block;margin-bottom:5px;color:var(--mist);font-family:ui-sans-serif,system-ui,sans-serif;font-size:10px}.liuren-inputs input{width:100%;border:1px solid var(--line);border-radius:7px;padding:7px;color:var(--ink);background:#0b0b1c;outline:0;text-align:center}.liuren-inputs p{grid-column:1/-1;margin:2px 0 0;color:var(--mist);font-size:10px;line-height:1.5}
section:not(.ask) { margin-top:35px; }.section-title { margin-bottom:13px; }.section-title h2 { margin:0; font-size:16px; font-weight:500; }.quick-grid,.system-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }.quick-card,.system { min-width:0; border:1px solid var(--line); border-radius:12px 3px 12px 3px; padding:14px 6px; color:var(--ink); background:rgba(255,255,255,.035); text-align:center; transition:.18s ease; }.quick-card:hover,.system:hover { transform:translateY(-2px); border-color:#b6a7dd; background:rgba(202,187,255,.12); }.quick-card i,.system i { display:block; height:27px; color:var(--gold); font-size:23px; font-style:normal; line-height:1; }.quick-card b,.system b { display:block; margin-top:8px; font-size:12px; font-weight:500; }.quick-card small,.system small { display:block; overflow:hidden; margin-top:4px; color:var(--mist); font-family:ui-sans-serif,system-ui,sans-serif; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.system { padding:15px 5px; }.system i { color:#c8bbff; }.system.selected { border-color:#cbbdff; background:rgba(192,176,255,.18); box-shadow:inset 0 0 0 1px #cbbdff; }
.daily { display:flex; gap:13px; align-items:flex-start; padding:19px; }.daily-glyph { color:var(--gold); font-size:24px; }.daily span,.action span { color:#eecb8e; font-family:ui-sans-serif,system-ui,sans-serif; font-size:10px; letter-spacing:.15em; }.daily p { margin:6px 0 0; font-size:14px; line-height:1.55; }.disclaimer { margin:24px 10px 0; color:#77728d; font-size:10px; line-height:1.7; text-align:center; }
dialog { width:min(530px,calc(100% - 32px)); max-height:92vh; padding:0; border:1px solid var(--line); border-radius:3px 25px 3px 25px; color:var(--ink); background:#111124; box-shadow:0 30px 90px #000; }.result-card { position:relative; padding:30px 25px; overflow:hidden; }.result-card::before { content:""; position:absolute; inset:-50% 20% auto; height:330px; background:radial-gradient(circle,rgba(171,144,245,.25),transparent 65%); pointer-events:none; }.close { position:absolute; z-index:1; right:15px; top:10px; border:0; color:var(--mist); background:none; font-size:28px; }.result-system,.result-kind { position:relative; color:var(--gold); font-family:ui-sans-serif,system-ui,sans-serif; font-size:10px; letter-spacing:.18em; text-align:center; }.result-question { position:relative; margin:20px auto 0; max-width:350px; color:var(--mist); font-size:13px; line-height:1.55; text-align:center; }.result-symbol { position:relative; margin-top:25px; color:#d7c6ff; font-size:68px; text-align:center; }.result-card h2 { position:relative; margin:9px 0 0; font-size:30px; font-weight:500; letter-spacing:-.05em; text-align:center; }.line { width:44px; height:1px; margin:22px auto; background:var(--gold); }.result-reading { margin:0; font-size:15px; line-height:1.85; }.action { margin-top:20px; padding:15px; border:1px solid rgba(244,204,139,.16); border-radius:11px; background:rgba(228,182,109,.08); }.action p { margin:6px 0 0; font-size:14px; line-height:1.6; }.again { margin-top:20px; text-align:center; } dialog::backdrop { background:rgba(1,1,9,.76); backdrop-filter:blur(7px); }
.draw-card{cursor:pointer}.draw-card::after{content:'点击查看单牌详解';display:block;margin-top:9px;color:#ebcf9a;font-family:ui-sans-serif,system-ui,sans-serif;font-size:9px;text-align:right}.card-detail{position:relative;padding:34px 25px 28px;overflow:hidden}.detail-symbol{color:#d7c6ff;font-size:54px;text-align:center}.detail-kicker{margin:5px 0 0;color:var(--gold);font-family:ui-sans-serif,system-ui,sans-serif;font-size:10px;letter-spacing:.18em;text-align:center}.card-detail h2{margin:8px 0 0;font-size:29px;font-weight:500;text-align:center}.detail-core{margin:17px 0;color:#cec8dc;font-size:14px;line-height:1.75;text-align:center}.detail-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:18px}.detail-tab{border:1px solid var(--line);border-radius:8px;padding:8px 2px;color:var(--mist);background:transparent;font-size:11px}.detail-tab.active{border-color:#e4c584;color:#18121e;background:#e5c589}.detail-copy{margin-top:15px;padding:16px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);font-size:14px;line-height:1.85}.detail-copy h3{margin:0 0 9px;color:#f1d196;font-size:13px;font-weight:500}.detail-copy p{margin:0 0 10px}.detail-copy p:last-child{margin-bottom:0}.detail-note{margin:14px 7px 0;color:#817b98;font-size:10px;line-height:1.6;text-align:center}
.result-title{position:relative;margin:8px 0 0;font-size:27px;font-weight:500;text-align:center}.result-summary{position:relative;margin:18px 0;font-size:14px;line-height:1.8}.cards{display:grid;grid-template-columns:1fr;gap:10px;margin-top:18px}.draw-card{position:relative;padding:15px 15px 15px 55px;min-height:0;border:1px solid var(--line);border-radius:11px 2px 11px 2px;background:rgba(255,255,255,.045);text-align:left}.draw-card .position{color:var(--gold);font-family:ui-sans-serif,system-ui,sans-serif;font-size:10px}.draw-card .card-symbol{position:absolute;left:17px;top:31px;margin:0;color:#d8c9ff;font-size:26px}.draw-card h3{margin:6px 0 0;font-size:15px;font-weight:500;line-height:1.35}.draw-card p{margin:8px 0 0;color:#c6c0d6;font-size:12px;line-height:1.7;text-align:left}.method{margin-top:18px;padding:13px;border-left:2px solid var(--gold);background:rgba(244,204,139,.06);color:#c9c2d6;font-size:12px;line-height:1.7}.method b{color:var(--gold);font-weight:500}.liuren-number-row{display:flex;justify-content:center;gap:10px;margin:18px 0}.liuren-number{display:grid;place-items:center;width:54px;height:54px;border:1px solid var(--line);border-radius:50%;color:var(--gold);font-size:19px}.result-action{margin-top:18px}
@media (max-width:420px) { .shell { padding-top:25px; }.quick-grid,.system-grid { gap:6px; }.quick-card { padding:12px 3px; }.quick-card b,.system b { font-size:10px; }.quick-card small,.system small { font-size:8px; } }
.plain-detail{width:min(540px,calc(100% - 30px));padding:28px 23px;border:1px solid var(--line);border-radius:18px;background:#111124;color:var(--ink)}.plain-detail::backdrop{background:rgba(1,1,9,.78);backdrop-filter:blur(7px)}.plain-detail h2{text-align:center;font-weight:500}.plain-detail p{font-size:14px;line-height:1.85}.plain-detail b{color:#f1d196}.detail-star{text-align:center;color:#d7c6ff;font-size:42px}.close-detail{position:absolute;right:14px;top:8px;border:0;background:none;color:var(--mist);font-size:28px}
.finding-plan{margin-top:18px;padding:17px;border:1px solid rgba(244,204,139,.32);border-radius:12px;background:linear-gradient(135deg,rgba(244,204,139,.14),rgba(176,152,255,.09))}.finding-plan span{color:#f1d196;font-size:10px;letter-spacing:.12em}.finding-plan h3{margin:8px 0 12px;font-size:18px;font-weight:500}.finding-plan p{margin:8px 0;font-size:13px;line-height:1.75}.finding-plan b{color:#e6d7be}
.deep-guidance{margin-top:18px;padding:18px;border:1px solid rgba(200,189,255,.35);border-radius:12px;background:linear-gradient(135deg,rgba(176,152,255,.16),rgba(244,204,139,.06))}.deep-guidance span{color:#d8caff;font-size:10px;letter-spacing:.12em}.deep-guidance h3{margin:8px 0 12px;font-size:19px;font-weight:500}.deep-guidance p{margin:10px 0;font-size:13px;line-height:1.85}.deep-guidance b{color:#f1d196}
.ai-reading{margin:18px 0;padding:19px;border:1px solid rgba(244,204,139,.48);border-radius:12px;background:linear-gradient(135deg,rgba(244,204,139,.15),rgba(176,152,255,.15));box-shadow:inset 0 0 34px rgba(214,193,255,.07)}.ai-reading span{color:#f1d196;font-family:ui-sans-serif,system-ui,sans-serif;font-size:10px;letter-spacing:.14em}.ai-reading h3{margin:9px 0 12px;font-size:19px;font-weight:500}.ai-reading p,.ai-copy{margin:0;color:#eeeaf7;font-size:14px;line-height:1.9}.ai-copy{white-space:pre-wrap}.ai-reading[hidden]{display:none}
.install-app{position:fixed;z-index:10;right:18px;bottom:18px;border:1px solid rgba(244,204,139,.55);border-radius:99px;padding:11px 15px;color:#17121f;background:linear-gradient(100deg,#f3ce8e,#cabaff);box-shadow:0 8px 30px rgba(0,0,0,.35);font-size:13px;font-weight:600}