:root { --pink:#c83b3b; --purple:#0f766e; --ink:#241a16; --china-red:#c83b3b; --jade:#0f766e; --gold:#c89b3c; --paper:#fff8ea; --ink-blue:#111827; }
body { font-family: "Microsoft YaHei", "PingFang SC", "Noto Serif SC", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); }
.glass { background: rgba(255,248,234,.82); backdrop-filter: blur(18px); border: 1px solid rgba(200,155,60,.18); box-shadow:0 10px 40px rgba(112,66,20,.06); }
.brand-logo { display:inline-flex; align-items:center; gap:0; min-width:0; text-decoration:none; color:inherit; }
.brand-seal { position:relative; display:grid; width:2.65rem; height:2.65rem; place-items:center; border-radius:1.05rem; color:#fff8ea; font-family:"STKaiti","KaiTi","Noto Serif SC",serif; font-size:1.18rem; font-weight:900; letter-spacing:.02em; background:radial-gradient(circle at 30% 22%,#f8d276 0 12%,#d06a2d 38%,#b72b25 70%,#5c1622 100%); box-shadow:0 12px 28px rgba(198,86,34,.28), inset 0 0 0 1px rgba(255,248,234,.24), inset -8px -10px 18px rgba(65,18,25,.28); }
.brand-seal::after { content:""; position:absolute; inset:.34rem; border:1px solid rgba(255,248,234,.26); border-radius:.78rem; }
.brand-word { display:flex; flex-direction:column; line-height:1; transform:translateY(.02rem); }
.brand-word b { font-family:"STSong","Songti SC","Noto Serif SC","Microsoft YaHei",serif; font-size:1.34rem; font-weight:900; letter-spacing:.035em; background:linear-gradient(115deg,#fff7d6 0%,#f5c568 28%,#83dfcf 62%,#fffaf0 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 18px rgba(245,197,104,.16); }
.brand-word small { margin-top:.22rem; color:rgba(255,248,234,.48); font-size:.52rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.hero-bg { background: radial-gradient(circle at 16% 6%, rgba(200,59,59,.16), transparent 28%), radial-gradient(circle at 88% 4%, rgba(15,118,110,.15), transparent 28%), linear-gradient(135deg,#fff8ea 0%,#fff2df 46%,#f3fbf7 100%); }
.hero-bg::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.32; background-image:linear-gradient(90deg,rgba(151,99,38,.06) 1px,transparent 1px),linear-gradient(rgba(151,99,38,.05) 1px,transparent 1px); background-size:36px 36px; mask-image:linear-gradient(to bottom,#000,transparent 78%); }
body.starry-page { background:#101322; color:#fff8ea; }
body.starry-page .hero-bg { background:transparent; }
body.starry-page::before { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background:radial-gradient(circle at 20% 8%, rgba(200,59,59,.16), transparent 25%), radial-gradient(circle at 82% 12%, rgba(214,159,53,.14), transparent 24%), radial-gradient(circle at 48% 48%, rgba(15,118,110,.16), transparent 32%), linear-gradient(180deg,#101322 0%,#101a2f 48%,#111120 100%); }
body.starry-page::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.28; background-image:radial-gradient(circle, rgba(255,248,234,.75) 0 1px, transparent 1.6px), radial-gradient(circle, rgba(116,214,199,.7) 0 1px, transparent 1.5px); background-size:82px 82px, 130px 130px; background-position:12px 20px, 44px 58px; }
body.starry-page .glass { background:rgba(16,19,34,.72); border-color:rgba(255,248,234,.12); box-shadow:0 10px 40px rgba(0,0,0,.18); color:#fff8ea; }
body.starry-page .glass nav { color:rgba(255,248,234,.72); }
body:not(.starry-page) .brand-word b { background:linear-gradient(115deg,#8c241f 0%,#c06f22 38%,#0f766e 78%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; }
body:not(.starry-page) .brand-word small { color:rgba(108,73,35,.55); }
body.starry-page .card { background:rgba(255,248,234,.08); border-color:rgba(255,248,234,.14); color:#fff8ea; box-shadow:0 18px 45px rgba(0,0,0,.18); backdrop-filter:blur(18px); }
body.starry-page .card p, body.starry-page .text-slate-500, body.starry-page .text-slate-600, body.starry-page .text-slate-700 { color:rgba(255,248,234,.66) !important; }
body.starry-page footer { background:rgba(16,19,34,.72); border-color:rgba(255,248,234,.12); color:rgba(255,248,234,.62); }
body.starry-page footer .text-slate-800 { color:#fff8ea !important; }
body.starry-page .mobile-tab { background:rgba(255,248,234,.92); color:#314052; }
.gradient-text { background: linear-gradient(135deg,var(--china-red),#d69f35 48%,var(--jade)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.btn-primary { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:.8rem 1.25rem; color:white; font-weight:700; background:linear-gradient(135deg,#c83b3b,#d69f35); box-shadow:0 16px 40px rgba(200,59,59,.22); transition:.2s; }
.btn-primary:hover { transform: translateY(-2px); box-shadow:0 20px 50px rgba(200,59,59,.3); }
.btn-soft { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:.75rem 1.1rem; background:#fffaf0; color:#9f2f2f; font-weight:700; border:1px solid rgba(200,155,60,.28); }
.btn-soft:hover { transform:translateY(-1px); border-color:rgba(200,155,60,.5); box-shadow:0 12px 28px rgba(112,66,20,.08); }
.btn-primary,.btn-soft,.card,.sphere-node,.mobile-tab a { transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease; }
.mobile-tab a:hover,.mobile-tab a:focus-visible { background:rgba(200,155,60,.1); color:#9f2f2f; outline:none; }
.card:hover { border-color:rgba(200,155,60,.32); }
.card { background:rgba(255,255,255,.9); border:1px solid rgba(200,155,60,.16); border-radius:1.5rem; box-shadow:0 18px 45px rgba(88,51,21,.08); }
.input { width:100%; border-radius:1rem; border:1px solid rgba(200,155,60,.28); background:#fffdf7; padding:.85rem 1rem; outline:none; }
.input:focus { border-color:#c89b3c; box-shadow:0 0 0 4px rgba(200,155,60,.16); }
.badge { display:inline-flex; align-items:center; gap:.25rem; border-radius:999px; padding:.25rem .55rem; font-size:.75rem; font-weight:700; }
.filter-card { border-radius:1.65rem; border:1px solid rgba(200,155,60,.18); background:rgba(255,255,255,.82); padding:.85rem; box-shadow:0 18px 45px rgba(88,51,21,.07); backdrop-filter:blur(18px); }
.filter-location { display:grid; min-width:min(28rem,100%); grid-template-columns:1fr 1fr; gap:.55rem; }
.filter-search { display:flex; min-width:12rem; align-items:center; gap:.55rem; border-radius:999px; border:1px solid rgba(200,155,60,.18); background:#fffdf7; padding:.55rem .85rem; color:#9a5a14; }
.filter-search select { width:100%; background:transparent; font-weight:900; outline:none; color:#241a16; }
.filter-chips { display:flex; gap:.5rem; overflow-x:auto; padding:.1rem; scrollbar-width:none; }
.filter-chips::-webkit-scrollbar { display:none; }
.filter-chips label { flex:0 0 auto; cursor:pointer; }
.filter-chips input { position:absolute; opacity:0; pointer-events:none; }
.filter-chips span { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid rgba(200,155,60,.16); background:#fffaf0; padding:.72rem 1rem; color:#7c5a34; font-size:.9rem; font-weight:900; white-space:nowrap; transition:.18s ease; }
.filter-chips input:checked + span { border-color:rgba(200,59,59,.28); background:linear-gradient(135deg,#c83b3b,#d69f35); color:white; box-shadow:0 12px 28px rgba(200,59,59,.16); }
.filter-more { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid rgba(200,155,60,.2); background:white; padding:.72rem 1rem; color:#9f2f2f; font-size:.9rem; font-weight:900; white-space:nowrap; }
.filter-advanced { margin-top:.8rem; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; border-top:1px solid rgba(200,155,60,.12); padding-top:.8rem; }
.filter-advanced p { margin-bottom:.35rem; color:#8a6a45; font-size:.78rem; font-weight:900; }
.swipe-deck { position:relative; min-height:39rem; max-width:28rem; margin:0 auto 2rem; }
.swipe-card { position:absolute; inset:0; touch-action:pan-y; will-change:transform,opacity; user-select:none; -webkit-user-select:none; transform:translate3d(0,var(--stack-y,0),0) scale(var(--stack-scale,1)); opacity:var(--stack-opacity,1); box-shadow:0 22px 55px rgba(88,51,21,.14); }
.swipe-card.dragging { cursor:grabbing; box-shadow:0 30px 80px rgba(88,51,21,.24); }
.swipe-card.swiped-like { transform:translate3d(140%,0,0) rotate(13deg) !important; opacity:0 !important; transition:.26s ease; }
.swipe-card.swiped-nope { transform:translate3d(-140%,0,0) rotate(-13deg) !important; opacity:0 !important; transition:.26s ease; }
.swipe-cue { pointer-events:none; position:absolute; z-index:5; top:1rem; display:flex; align-items:center; gap:.45rem; border-radius:999px; padding:.6rem .9rem; color:white; font-weight:900; opacity:0; transform:rotate(-8deg); box-shadow:0 16px 36px rgba(0,0,0,.16); backdrop-filter:blur(10px); }
.swipe-cue span { font-size:1.25rem; }
.swipe-cue.like { left:1rem; background:linear-gradient(135deg,#fb7185,#f59e0b); }
.swipe-cue.nope { right:1rem; background:linear-gradient(135deg,#64748b,#94a3b8); transform:rotate(8deg); }
.swipe-toast { position:fixed; left:50%; bottom:6.8rem; z-index:80; transform:translate(-50%,20px); border-radius:999px; background:rgba(17,24,39,.88); padding:.78rem 1.15rem; color:#fff8ea; font-size:.9rem; font-weight:900; opacity:0; pointer-events:none; box-shadow:0 18px 45px rgba(0,0,0,.22); backdrop-filter:blur(16px); transition:.2s ease; }
.swipe-toast.show { opacity:1; transform:translate(-50%,0); }
.swipe-empty { position:absolute; inset:0; z-index:0; display:grid; place-items:center; border-radius:1.5rem; border:1px dashed rgba(200,155,60,.28); background:rgba(255,255,255,.58); padding:2rem; text-align:center; box-shadow:0 18px 45px rgba(88,51,21,.06); }
.gift-tab { flex:1; min-width:4.5rem; border-radius:1rem; padding:.62rem .9rem; color:#9a5a14; }
.gift-tab.active { background:white; color:#9f2f2f; box-shadow:0 10px 22px rgba(112,66,20,.08); }
.gift-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; max-height:19rem; overflow:auto; padding:.1rem .15rem .35rem; }
.gift-card { position:relative; display:flex; min-height:7.4rem; flex-direction:column; align-items:center; justify-content:center; gap:.35rem; border-radius:1.25rem; border:1px solid rgba(200,155,60,.16); background:linear-gradient(180deg,#fffdf7,#fff8ea); padding:.65rem .45rem; text-align:center; transition:.18s ease; }
.gift-card:hover,.gift-card.active { transform:translateY(-2px); border-color:rgba(200,59,59,.42); box-shadow:0 14px 32px rgba(112,66,20,.1); }
.gift-card.active::after { content:"✓"; position:absolute; right:.5rem; top:.5rem; display:grid; width:1.25rem; height:1.25rem; place-items:center; border-radius:999px; background:#c83b3b; color:white; font-size:.72rem; font-weight:900; }
.gift-card img { width:3.2rem; height:3.2rem; object-fit:contain; filter:drop-shadow(0 10px 12px rgba(112,66,20,.12)); }
.gift-card b { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; }
.gift-card small { color:#b45309; font-size:.72rem; font-weight:900; }
.gift-emoji { font-size:2.2rem; }
.gift-sendbar { display:grid; grid-template-columns:1fr auto; gap:.8rem; align-items:center; border-radius:1.35rem; border:1px solid rgba(200,155,60,.16); background:rgba(255,248,234,.72); padding:.75rem; }
.planet-stage { position:relative; min-height:520px; overflow:hidden; border-radius:2rem; background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.95) 0 8%, rgba(255,182,224,.68) 9% 19%, rgba(168,85,247,.42) 20% 35%, transparent 36%), radial-gradient(circle at 18% 10%, rgba(255,255,255,.9), transparent 22%), linear-gradient(145deg,#fff0fa,#efe7ff 48%,#eaf5ff); box-shadow:inset 0 0 80px rgba(255,255,255,.72), 0 28px 90px rgba(124,58,237,.18); }
.planet-core { position:absolute; left:50%; top:48%; width:220px; height:220px; transform:translate(-50%,-50%); border-radius:999px; background:radial-gradient(circle at 34% 26%, #fff 0 9%, #ffd4ef 10% 22%, #ff77bd 42%, #7c3aed 100%); box-shadow:0 0 0 18px rgba(255,255,255,.28), 0 0 80px rgba(255,79,163,.55), inset -24px -30px 60px rgba(65,30,150,.28); }
.planet-core::before { content:""; position:absolute; inset:42% -42%; height:38px; border-radius:999px; transform:rotate(-12deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.88),rgba(255,192,232,.9),transparent); box-shadow:0 12px 30px rgba(124,58,237,.22); }
.orbit { position:absolute; left:50%; top:48%; border:1px solid rgba(124,58,237,.22); border-radius:50%; transform:translate(-50%,-50%) rotate(-12deg); }
.orbit.one { width:330px; height:150px; }
.orbit.two { width:450px; height:220px; border-color:rgba(255,79,163,.2); }
.orbit.three { width:560px; height:310px; border-color:rgba(14,165,233,.14); }
.float-avatar { position:absolute; display:grid; place-items:center; border:4px solid rgba(255,255,255,.82); border-radius:999px; background:white; box-shadow:0 18px 45px rgba(64,35,118,.18); animation:floaty 4.6s ease-in-out infinite; }
.float-avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.float-avatar.a1 { left:12%; top:18%; width:72px; height:72px; }
.float-avatar.a2 { right:13%; top:19%; width:64px; height:64px; animation-delay:-1.4s; }
.float-avatar.a3 { left:18%; bottom:18%; width:58px; height:58px; animation-delay:-2.1s; }
.float-avatar.a4 { right:18%; bottom:16%; width:76px; height:76px; animation-delay:-.7s; }
.spark { position:absolute; width:8px; height:8px; border-radius:999px; background:#fff; box-shadow:0 0 20px #fff; opacity:.9; }
@keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .float-avatar,.soul-node,.meteor,.soul-planet,.soul-planet-wrap::before { animation:none; } .meteor { display:none; } }
.soul-map { position:relative; min-height:620px; overflow:hidden; border-radius:2rem; background:radial-gradient(circle at 50% 58%, rgba(15,118,110,.32), transparent 34%), radial-gradient(circle at 82% 8%, rgba(214,159,53,.18), transparent 18%), radial-gradient(circle at 15% 18%, rgba(200,59,59,.12), transparent 22%), linear-gradient(180deg,rgba(17,24,39,.72) 0%,rgba(16,35,43,.62) 52%,rgba(23,18,15,.5) 100%); border:1px solid rgba(255,248,234,.1); box-shadow:0 28px 90px rgba(0,0,0,.2), inset 0 0 80px rgba(255,248,234,.035); backdrop-filter:blur(8px); }
.soul-map::before { content:""; position:absolute; inset:0; opacity:.24; background-image:radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(167,243,208,.7) 0 1px, transparent 1.4px); background-size:72px 72px, 118px 118px; background-position:10px 16px, 38px 52px; }
.soul-planet-wrap { position:absolute; z-index:2; right:6.8%; top:10%; width:112px; height:112px; display:grid; place-items:center; perspective:760px; filter:drop-shadow(0 0 32px rgba(255,213,112,.42)); }
.soul-planet-wrap::before { content:""; position:absolute; inset:-34px; border-radius:999px; background:radial-gradient(circle,rgba(255,222,130,.24),rgba(255,222,130,.08) 34%,transparent 68%); animation:planetGlow 4.8s ease-in-out infinite; }
.soul-planet { position:relative; width:88px; height:88px; display:grid; place-items:center; border-radius:999px; transform-style:preserve-3d; animation:planetSpin 8.5s linear infinite; background:radial-gradient(circle at 30% 25%,#fff8cf 0 8%,#f2cc64 28%,#de7b21 54%,#9e2f22 78%,#39131c 100%); box-shadow:inset -18px -18px 32px rgba(49,14,22,.48), inset 12px 10px 22px rgba(255,255,220,.34), 0 0 42px rgba(255,199,87,.5); }
.soul-planet::before { content:""; position:absolute; inset:9px; border-radius:999px; background:linear-gradient(90deg,rgba(255,255,255,.34),transparent 28%,rgba(255,255,255,.16) 52%,transparent 74%); mix-blend-mode:screen; transform:translateZ(18px); }
.soul-planet::after { content:""; position:absolute; inset:-8px; border-radius:999px; border:1px solid rgba(255,242,180,.42); transform:rotateX(68deg) rotateZ(-18deg); box-shadow:0 0 18px rgba(255,219,123,.2); }
.planet-core-text { position:relative; z-index:4; color:#fff7d6; font-size:1.45rem; font-weight:900; text-shadow:0 2px 10px rgba(91,30,17,.62); transform:translateZ(26px); }
.planet-ring { position:absolute; inset:10px; border-radius:999px; border:1px solid rgba(255,247,208,.34); transform-style:preserve-3d; }
.planet-ring.ring-a { transform:rotateY(72deg); }
.planet-ring.ring-b { transform:rotateX(72deg); border-color:rgba(125,232,219,.28); }
.planet-ring.ring-c { inset:20px; transform:rotateY(28deg) rotateX(64deg); border-color:rgba(255,255,255,.22); }
.meteor { position:absolute; z-index:1; top:18%; left:110%; width:120px; height:2px; border-radius:999px; pointer-events:none; opacity:0; transform:rotate(-28deg); background:linear-gradient(90deg,rgba(255,248,213,0),rgba(255,248,213,.95)); filter:drop-shadow(0 0 8px rgba(255,230,154,.9)); animation:meteorFly 5s linear infinite; }
.meteor::after { content:""; position:absolute; right:0; top:50%; width:6px; height:6px; border-radius:999px; transform:translateY(-50%); background:#fff8d5; box-shadow:0 0 18px rgba(255,248,213,.95); }
.meteor-two { top:34%; width:88px; animation-delay:2.6s; filter:drop-shadow(0 0 7px rgba(116,214,199,.75)); }
.soul-node { position:absolute; z-index:2; transform:translate(-50%,-50%); color:rgba(255,248,234,.86); font-weight:700; text-shadow:0 0 12px rgba(255,248,234,.16); white-space:nowrap; animation:drift 5.6s ease-in-out infinite; }
.soul-node small { display:block; width:.55rem; height:.55rem; margin:.35rem auto 0; border-radius:999px; background:#74d6c7; box-shadow:0 0 18px rgba(116,214,199,.72); opacity:.92; }
.soul-node.pink small { background:#f2b8a2; box-shadow:0 0 18px rgba(242,184,162,.72); }
.soul-node.dim { color:rgba(255,255,255,.46); font-size:.8rem; font-weight:600; }
.soul-node.lg { font-size:1.1rem; color:#fff; }
.soul-node.xl { font-size:1.28rem; color:#fff; }
.soul-node .tag { display:inline-flex; border-radius:999px; background:rgba(15,118,110,.2); color:#a7f3d0; padding:.16rem .55rem; font-size:.66rem; }
.soul-cta { position:absolute; z-index:3; left:50%; bottom:18px; transform:translateX(-50%); display:flex; align-items:center; gap:.8rem; border-radius:999px; background:rgba(255,248,234,.1); border:1px solid rgba(255,248,234,.16); padding:.7rem .8rem .7rem 1.2rem; color:white; backdrop-filter:blur(16px); box-shadow:0 20px 50px rgba(0,0,0,.24); }
.soul-cta a { border-radius:999px; background:linear-gradient(135deg,#c83b3b,#d69f35); padding:.75rem 1.1rem; font-weight:900; }
.soul-cta a.voice-link { background:linear-gradient(135deg,#0f766e,#d69f35); }
@keyframes drift { 0%,100% { margin-top:0; } 50% { margin-top:-10px; } }
@keyframes meteorFly { 0%,68% { opacity:0; transform:translate3d(0,0,0) rotate(-28deg); } 72% { opacity:1; } 86% { opacity:1; transform:translate3d(-560px,230px,0) rotate(-28deg); } 100% { opacity:0; transform:translate3d(-680px,280px,0) rotate(-28deg); } }
@keyframes planetSpin { 0% { transform:rotateX(-12deg) rotateY(0deg) rotateZ(0deg); } 100% { transform:rotateX(-12deg) rotateY(360deg) rotateZ(360deg); } }
@keyframes planetGlow { 0%,100% { opacity:.72; transform:scale(.96); } 50% { opacity:1; transform:scale(1.06); } }
@keyframes planetGlow { 0%,100% { opacity:.72; transform:scale(.96); } 50% { opacity:1; transform:scale(1.06); } }
.soul-node:nth-child(2n) { animation-delay:-1.3s; }
.soul-node:nth-child(3n) { animation-delay:-2.4s; }
.soul-node:nth-child(4n) { animation-delay:-3.2s; }
.soul-copy { border-radius:0 0 1.35rem 1.35rem; border-bottom:1px solid rgba(255,248,234,.12); background:linear-gradient(180deg,rgba(8,13,29,.68),rgba(8,13,29,.42)); padding:.8rem 1.25rem; backdrop-filter:blur(18px); box-shadow:0 14px 36px rgba(0,0,0,.14); }
.admin-shell { background:#f5f7fb; color:#1f2937; }
.admin-card { background:white; border:1px solid #e6eaf2; border-radius:1rem; box-shadow:0 10px 30px rgba(15,23,42,.05); }
.admin-link { display:flex; align-items:center; gap:.6rem; border-radius:.75rem; padding:.65rem .8rem; color:#cbd5e1; }
.admin-link:hover,.admin-link.active { background:#25324a; color:#fff; }
@media (max-width: 767px) { body { padding-bottom: 88px; } main { padding-bottom:7rem !important; } .filter-card { margin-left:-.15rem; margin-right:-.15rem; border-radius:1.35rem; padding:.7rem; } .filter-location { width:100%; min-width:0; gap:.45rem; } .filter-search { min-width:0; width:100%; padding:.68rem .72rem; } .filter-search span { display:none; } .filter-search select { font-size:.86rem; } .filter-chips { margin-left:-.15rem; margin-right:-.15rem; } .filter-chips span { padding:.62rem .86rem; font-size:.82rem; } .filter-more { flex:1; padding:.66rem .85rem; font-size:.82rem; } .filter-card .btn-primary { flex:1; padding:.66rem .85rem; } .filter-advanced { grid-template-columns:1fr 1fr; gap:.65rem; } .planet-stage { min-height:430px; border-radius:1.5rem; } .planet-core { width:168px; height:168px; } .orbit.one { width:250px; height:116px; } .orbit.two { width:330px; height:160px; } .orbit.three { width:420px; height:230px; } .float-avatar.a1 { left:8%; top:16%; } .float-avatar.a2 { right:8%; top:17%; } .soul-map { min-height:620px; border-radius:0; margin-left:-1rem; margin-right:-1rem; border-left:0; border-right:0; background:radial-gradient(circle at 78% 16%, rgba(214,159,53,.16), transparent 19%), radial-gradient(circle at 50% 58%, rgba(15,118,110,.26), transparent 34%), linear-gradient(180deg,rgba(17,19,34,.35) 0%,rgba(17,26,49,.18) 54%,rgba(17,17,32,.12) 100%); box-shadow:none; } .soul-map::before { opacity:.16; } .soul-copy { left:0 !important; right:0 !important; top:0 !important; border-radius:0 0 1.25rem 1.25rem; border:0; border-bottom:1px solid rgba(255,248,234,.12); background:linear-gradient(180deg,rgba(8,13,29,.72),rgba(8,13,29,.38)); padding:.62rem 1rem; backdrop-filter:blur(16px); box-shadow:0 12px 34px rgba(0,0,0,.14); } .soul-copy h1 { max-width:none; font-size:.95rem; line-height:1.2; letter-spacing:0; } .soul-copy p { max-width:none; font-size:.7rem; line-height:1.25; } .soul-copy .rounded-full { padding:.28rem .56rem; font-size:.68rem; } .soul-node { font-size:.86rem; } .soul-node.lg { font-size:1rem; } .soul-node.xl { font-size:1.08rem; } .soul-node.dim { font-size:.72rem; } .soul-node.hide-sm,.soul-node.dim.hide-sm { display:none; } .soul-planet-wrap { width:70px; height:70px; right:.95rem; top:5.15rem; } .soul-planet { width:54px; height:54px; } .planet-core-text { font-size:1rem; } .planet-ring { inset:7px; } .planet-ring.ring-c { inset:13px; } .soul-cta { width:calc(100% - 2rem); bottom:1.4rem; justify-content:space-between; padding:.55rem .55rem .55rem .9rem; gap:.45rem; } .soul-cta span { max-width:7rem; font-size:.72rem; line-height:1.35; } .soul-cta a { padding:.62rem .72rem; font-size:.78rem; white-space:nowrap; } .sm-node-chui { left:26% !important; top:35% !important; } .sm-node-sutang { left:56% !important; top:37% !important; } .sm-node-lu { left:76% !important; top:46% !important; } .sm-node-sunny { left:44% !important; top:53% !important; } .sm-node-xxg { left:24% !important; top:60% !important; } .sm-node-daoxu { left:55% !important; top:66% !important; } .sm-node-xu { left:74% !important; top:64% !important; } .sm-node-yunna { left:22% !important; top:75% !important; } .sm-node-lihua { left:43% !important; top:78% !important; } .sm-node-dudu { left:68% !important; top:80% !important; } .sm-node-weixin { display:none; } }

/* 首页星图主星球：中心球体 360° 旋转，不再使用右上角月亮 */
.soul-globe-wrap { position:absolute; z-index:1; left:50%; top:53%; width:390px; height:390px; transform:translate(-50%,-50%); display:grid; place-items:center; perspective:1100px; pointer-events:none; opacity:.96; }
.soul-globe-wrap::before { content:""; position:absolute; inset:-70px; border-radius:999px; background:radial-gradient(circle,rgba(24,164,151,.22),rgba(214,159,53,.08) 38%,transparent 68%); filter:blur(2px); animation:soulGlobePulse 5.6s ease-in-out infinite; }
.soul-globe-wrap::after { content:""; position:absolute; width:122%; height:44%; border-radius:50%; border:1px solid rgba(255,248,234,.13); transform:rotateX(68deg) rotateZ(-12deg); box-shadow:0 0 34px rgba(116,214,199,.1); }
.soul-globe { position:relative; width:285px; height:285px; border-radius:999px; transform-style:preserve-3d; animation:soulGlobeSpin 16s linear infinite; background:radial-gradient(circle at 30% 24%,rgba(255,248,234,.92) 0 3%,rgba(116,214,199,.55) 12%,rgba(15,118,110,.48) 34%,rgba(17,24,39,.64) 66%,rgba(7,10,24,.86) 100%); box-shadow:inset -42px -36px 70px rgba(5,7,18,.72), inset 28px 22px 48px rgba(255,248,234,.12), 0 0 70px rgba(15,118,110,.26), 0 0 120px rgba(214,159,53,.1); }
.soul-globe::before { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 32% 24%,rgba(255,248,234,.34),transparent 22%), radial-gradient(circle at 62% 63%,rgba(214,159,53,.16),transparent 30%), linear-gradient(90deg,rgba(255,255,255,.16),transparent 35%,rgba(255,255,255,.08) 64%,transparent); mix-blend-mode:screen; transform:translateZ(18px); }
.soul-globe::after { content:""; position:absolute; inset:14px; border-radius:inherit; border:1px solid rgba(255,248,234,.16); box-shadow:inset 0 0 32px rgba(116,214,199,.08); transform:translateZ(20px); }
.globe-meridian,.globe-latitude { position:absolute; inset:18px; border-radius:999px; border:1px solid rgba(255,248,234,.18); transform-style:preserve-3d; }
.globe-meridian.meridian-a { transform:rotateY(0deg); }
.globe-meridian.meridian-b { transform:rotateY(60deg); border-color:rgba(116,214,199,.18); }
.globe-meridian.meridian-c { transform:rotateY(120deg); border-color:rgba(214,159,53,.18); }
.globe-latitude.latitude-a { inset:58px 20px; transform:rotateX(68deg); border-color:rgba(255,248,234,.2); }
.globe-latitude.latitude-b { inset:98px 28px; transform:rotateX(72deg); border-color:rgba(116,214,199,.18); }
.globe-shine { position:absolute; left:23%; top:17%; width:62px; height:62px; border-radius:999px; background:radial-gradient(circle,rgba(255,248,234,.42),transparent 68%); transform:translateZ(42px); filter:blur(.3px); }
@keyframes soulGlobeSpin { 0% { transform:rotateX(-13deg) rotateY(0deg) rotateZ(0deg); } 100% { transform:rotateX(-13deg) rotateY(360deg) rotateZ(360deg); } }
@keyframes soulGlobePulse { 0%,100% { opacity:.62; transform:scale(.96); } 50% { opacity:1; transform:scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .soul-globe,.soul-globe-wrap::before { animation:none; } }
@media (max-width:767px) { .soul-globe-wrap { top:54%; width:290px; height:290px; opacity:.86; } .soul-globe { width:214px; height:214px; } .globe-meridian,.globe-latitude { inset:14px; } .globe-latitude.latitude-a { inset:44px 18px; } .globe-latitude.latitude-b { inset:74px 24px; } }

/* Soul 风格用户星球：用户节点组成球体，可拖拽 360° 旋转 */
.user-globe-map { min-height:640px; cursor:grab; touch-action:none; background:radial-gradient(circle at 50% 50%, rgba(15,118,110,.28), transparent 38%), radial-gradient(circle at 68% 40%, rgba(214,159,53,.1), transparent 24%), linear-gradient(180deg,#101322 0%,#111a30 50%,#0d1020 100%); }
.user-globe-map:active { cursor:grabbing; }
.user-sphere-shell { position:absolute; z-index:3; inset:4.8rem 1.5rem 5.8rem; user-select:none; -webkit-user-select:none; touch-action:none; }
.user-sphere-shell::before { content:""; position:absolute; left:50%; top:50%; width:min(68vw,520px); height:min(68vw,520px); transform:translate(-50%,-50%); border-radius:999px; background:radial-gradient(circle,rgba(15,118,110,.18),rgba(17,24,39,.08) 45%,transparent 72%); box-shadow:inset 0 0 80px rgba(116,214,199,.05), 0 0 80px rgba(15,118,110,.14); pointer-events:none; }
.user-sphere-halo { position:absolute; left:50%; top:50%; width:min(68vw,520px); height:min(68vw,520px); transform:translate(-50%,-50%); border-radius:999px; border:1px solid rgba(255,248,234,.06); box-shadow:0 0 0 1px rgba(116,214,199,.04), inset 0 0 60px rgba(255,248,234,.025); pointer-events:none; }
.sphere-node { position:absolute; left:0; top:0; display:inline-flex; flex-direction:column; align-items:center; gap:.28rem; color:rgba(255,248,234,.9); font-weight:800; font-size:.92rem; white-space:nowrap; text-shadow:0 0 14px rgba(255,248,234,.18); will-change:transform,opacity; transition:color .16s, text-shadow .16s; }
.sphere-node::after { content:""; width:.62rem; height:.62rem; border-radius:999px; background:#74d6c7; box-shadow:0 0 18px rgba(116,214,199,.8); }
.sphere-node.hot::after { background:#f2b8a2; box-shadow:0 0 18px rgba(242,184,162,.78); }
.sphere-node.big { color:#fff; font-size:1.1rem; }
.sphere-node.dim { color:rgba(255,248,234,.56); font-size:.78rem; }
.sphere-node.tag-node { border-radius:999px; background:rgba(15,118,110,.22); color:#a7f3d0; padding:.16rem .58rem; font-size:.72rem; }
.sphere-node.tag-node::after { width:.45rem; height:.45rem; }
.sphere-node:hover { color:#fff; text-shadow:0 0 18px rgba(255,248,234,.5); }
@media (max-width:767px) { .user-globe-map { min-height:620px; } .user-sphere-shell { inset:4.5rem .2rem 5.5rem; } .user-sphere-shell::before,.user-sphere-halo { width:360px; height:360px; } .sphere-node { font-size:.82rem; } .sphere-node.big { font-size:.98rem; } .sphere-node.dim { font-size:.7rem; } }