:root { --bg-color:#0D0B10; --surface-color:rgba(38,28,49,.5); --border-color:rgba(208,33,129,.25); --text-primary:#F0EBF5; --text-secondary:#887E96; --accent-fuchsia:#D02181; --accent-purple:#532C88; }
body { font-family:'Noto Sans SC',sans-serif; background-color:#000; color:var(--text-primary); }
.font-brand { font-family:'Long Cang', cursive; }
.font-serif { font-family:'Noto Serif SC', serif; }
.iphone-container { width:100%; max-width:520px; height:956px; background-color:var(--bg-color); border-radius:40px; border:8px solid #000; box-shadow:0 0 80px rgba(208,33,129,.2); position:relative; overflow:hidden; display:flex; flex-direction:column; }
#cosmic-background { position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; z-index:0; }
@keyframes move-stars { from{transform:translateY(0)} to{transform:translateY(-2000px)} }
#stars1,#stars2,#stars3{ position:absolute; left:0; top:0; width:100%; height:200%; background-repeat:repeat; background-position:0 0; }
#stars1{ background-image: radial-gradient(1px 1px at 50px 100px, var(--text-primary), transparent), radial-gradient(1px 1px at 150px 240px, var(--text-primary), transparent), radial-gradient(1px 1px at 270px 400px, var(--text-primary), transparent); background-size:520px 956px; animation:move-stars 150s linear infinite; }
#stars2{ background-image: radial-gradient(1.5px 1.5px at 100px 300px, var(--text-primary), transparent), radial-gradient(1.5px 1.5px at 200px 500px, var(--text-primary), transparent), radial-gradient(2px 2px at 350px 750px, var(--text-primary), transparent); background-size:520px 956px; animation:move-stars 100s linear infinite; }
#stars3{ background-image: radial-gradient(2.5px 2.5px at 220px 150px, var(--text-primary), transparent), radial-gradient(2.5px 2.5px at 400px 600px, var(--text-primary), transparent); background-size:520px 956px; animation:move-stars 50s linear infinite; }
#cosmic-background::before{ content:''; position:absolute; top:10%; left:-50%; width:200%; height:100%; background:radial-gradient(ellipse at center, rgba(208,33,129,.2) 0%, transparent 40%); animation:nebula-glow 20s infinite alternate ease-in-out; }
@keyframes nebula-glow{ from{ transform:scale(1) rotate(-20deg); opacity:.5 } to{ transform:scale(1.2) rotate(10deg); opacity:.8 } }
.flowing-line-svg{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; opacity:.7; mix-blend-mode:screen; }
.flowing-line-svg .line{ stroke-dasharray:1000; stroke-dashoffset:1000; animation:draw-line 20s infinite ease-in-out; }
@keyframes draw-line{ 50%{stroke-dashoffset:0} 100%{stroke-dashoffset:-1000} }
.main-content{ flex-grow:1; overflow-y:auto; scrollbar-width:none; position:relative; z-index:2; }
.main-content::-webkit-scrollbar{ display:none; }
.title-accent{ color:var(--accent-fuchsia); text-shadow:0 0 10px var(--accent-fuchsia), 0 0 30px rgba(208,33,129,.6); }
.form-container{ background:var(--surface-color); border:1px solid var(--border-color); backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px); }
.custom-input{ color:var(--text-primary); background:rgba(31,27,39,.9); border:1px solid rgba(255,255,255,.08); transition:all .2s; box-shadow:inset 0 1px 4px rgba(0,0,0,.45); }
.custom-input::placeholder{ color:#B8B2C4; opacity:.9; }
.custom-input:focus-within,.custom-input:focus{ outline:none; border-color:var(--accent-fuchsia); background:rgba(31,27,39,.95); box-shadow:0 0 0 2px rgba(208,33,129,.18), inset 0 1px 4px rgba(0,0,0,.5); }
.toggle-btn.active{ background-image:linear-gradient(to right, var(--accent-fuchsia), var(--accent-purple)); color:var(--text-primary); font-weight:500; }
.toggle-btn:not(.active){ background-color:rgba(13,11,16,.6); color:var(--text-secondary); }
.modal-toggle-btn{ background-color:rgba(13,11,16,.6); color:var(--text-secondary); border:none; transition:all .2s ease; }
.modal-toggle-btn.active{ background-image:linear-gradient(to right, var(--accent-fuchsia), var(--accent-purple)); color:var(--text-primary); font-weight:600; }
.action-btn{ background-image:linear-gradient(to right, var(--accent-fuchsia), var(--accent-purple)); color:var(--text-primary); transition:all .3s ease; }
.action-btn:hover{ transform:scale(1.02); box-shadow:0 0 20px rgba(208,33,129,.7); }
.notice-bar{ display:flex; align-items:center; padding:10px 12px; background:rgba(13,11,16,.6); border:1px solid var(--border-color); border-radius:12px; }
/* 解惑答疑输入容器，参考设计稿 */
.ask-container{
  margin:0;
  background-color:#1E1C2A;
  border:1px solid #3A3749;
  border-radius:16px;
  padding:0;
  position:relative;
}
.ac-header{
  padding:15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.02);
  border-radius:16px 16px 0 0;
}
.ac-user{
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 8px 4px 0;
  border-radius:8px;
  transition:background-color .2s;
}
.ac-user.clickable{ cursor:pointer; }
.ac-user.clickable:active{ background-color:rgba(255,255,255,.05); }
.ac-avatar{
  width:24px;
  height:24px;
  border-radius:50%;
  background:linear-gradient(135deg,#00E096,#00BFA5);
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:12px;
  color:#fff;
  font-weight:bold;
}
.ac-avatar.add-btn{
  background:rgba(0,224,150,.1);
  border:1px dashed #00E096;
  color:#00E096;
  box-sizing:border-box;
}
.ac-name{ font-size:14px; color:#E0E0E0; font-weight:500; }
.ac-change{
  font-size:12px;
  color:#00E096;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:4px;
}
.ac-body{ padding:5px; position:relative; }

/* 未绑定命主时的“+ 尚未绑定命主”样式 */
.qa-user-empty{
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 8px 4px 0;
  border-radius:8px;
  color:var(--text-secondary);
  cursor:pointer;
  transition:background-color .2s;
}
.qa-user-empty:active{ background-color:rgba(255,255,255,.05); }
/* 提示需要绑定命主时的轻微高亮 */
.ring-attention{
  box-shadow:0 0 0 1px rgba(0,224,150,.6);
}
.qa-avatar-add{
  width:24px;
  height:24px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,224,150,0.1);
  border:1px dashed #00E096;
  color:#00E096;
  font-size:13px;
  font-weight:600;
  box-sizing:border-box;
}
.qa-name-empty{
  font-size:14px;
  color:var(--text-primary);
  font-weight:500;
}
.ac-textarea{
  width:100%;
  height:100px;
  background:transparent;
  border:none;
  color:#E0E0E0;
  font-size:14px;
  resize:none;
  font-family:inherit;
  line-height:1.6;
  padding:0;
}
.ac-textarea::placeholder{ color:#555; }
.ac-textarea:focus{ outline:none; }
.ac-counter{ text-align:right; font-size:12px; color:#555; margin-top:5px; }

/* 解惑答疑：命主下拉浮层 */
.profile-dropdown-float{
  position:absolute;
  top:50px;
  left:15px;
  right:15px;
  background-color:#2C2938;
  border-radius:12px;
  padding:5px;
  border:1px solid #4A4759;
  z-index:50;
  display:none;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.profile-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:8px;
  background:transparent;
  border:none;
  cursor:pointer;
}
.profile-item:hover{ background-color:#3A3749; }
.profile-avatar-circle{
  width:20px;
  height:20px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  color:#fff;
  background:linear-gradient(135deg,#00E096,#00BFA5);
}
.profile-name-text{
  font-size:12px;
  color:#fff;
}
.profile-empty{
  padding:10px;
  font-size:12px;
  color:#A09DB0;
  text-align:center;
}

.history-title-simple{ font-size:13px; color:#7A788A; margin-bottom:12px; font-weight:500; padding-left:2px; }
.history-section-standalone{ padding:0 16px; margin-top:25px; }
.history-empty-state{
  text-align:center;
  padding:30px 20px;
  color:rgba(255,255,255,.15);
  font-size:12px;
  border:1px dashed rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.01);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}

/* 命主下拉卡片样式 */
.bound-card{ margin:4px 2px 8px; padding:10px 12px 8px; border-radius:18px; background:rgba(13,11,16,.9); border:1px solid rgba(255,255,255,.06); box-shadow:0 10px 28px rgba(0,0,0,.85); }
.bound-card-header{ display:flex; align-items:center; gap:10px; }
.bound-avatar-main{ width:28px; height:28px; border-radius:999px; background:linear-gradient(135deg,#00E096,#00BFA5); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:600; }
.bound-name-main{ flex:1; color:var(--text-primary); font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bound-actions a{ margin-left:8px; font-size:13px; color:#00E096; text-decoration:none; }
.bound-actions a i{ font-size:13px; }
.bound-dropdown{ margin-top:10px; padding:8px 10px 6px; border-radius:14px; background:rgba(31,27,39,.95); border:1px solid rgba(255,255,255,.05); max-height:160px; overflow-y:auto; scrollbar-width:none; }
.bound-dropdown::-webkit-scrollbar{ display:none; }
.bound-option-row{ width:100%; display:flex; align-items:center; padding:6px 4px; background:transparent; border:none; color:var(--text-primary); font-size:14px; text-align:left; cursor:pointer; border-radius:10px; }
.bound-option-row + .bound-option-row{ margin-top:4px; }
.bound-option-avatar{ width:22px; height:22px; border-radius:999px; display:flex; align-items:center; justify-content:center; margin-right:8px; background:rgba(255,255,255,.06); color:#fff; font-size:12px; }
.bound-option-name{ flex:1; }
.bound-option-row:hover{ background:rgba(255,255,255,.03); }
.bound-option-row:hover .bound-option-avatar{ background:linear-gradient(135deg,#00E096,#00BFA5); }
.notice-bar .icon{ width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-right:8px; background:rgba(0,224,150,.15); color:#00E096; font-size:12px; font-weight:600; }
.notice-bar .bound-avatar-icon{ background:linear-gradient(135deg, rgba(208,33,129,.25), rgba(83,44,136,.25)); color:var(--accent-fuchsia); font-size:11px; border:1px solid rgba(208,33,129,.3); animation:none; }
.notice-bar .qa-list-icon{ background:linear-gradient(135deg, rgba(136,126,150,.2), rgba(83,44,136,.15)); color:var(--text-secondary); font-size:11px; border:1px solid rgba(136,126,150,.25); animation:none; }
.notice-bar .bound-avatar-icon i, .notice-bar .qa-list-icon i{ animation:none; transform:none; }
.notice-bar .text{ flex:1; color:var(--text-primary); }
.notice-bar .action-link{ margin-left:8px; color:var(--accent-fuchsia); font-size:13px; }
.notice-bar .spinner{ width:14px; height:14px; display:inline-block; border:2px solid rgba(255,255,255,.18); border-top-color:var(--accent-fuchsia); border-radius:50%; animation:spin 1s linear infinite; vertical-align:middle; margin-right:4px; }
/* 命理列表中生成中的记录：统一用绿色高亮 */
.notice-bar.bazi-processing .action-link{ color:#22C55E; }
.notice-bar.bazi-processing .spinner{  border-top-color:#22C55E; }
/* 生成中的命理记录：左侧不显示边框，让卡片更轻一点 */
.notice-bar.bazi-processing{ border-left:none; }
.segment-tabs{ background-color:rgba(13,11,16,.6); border-radius:9999px; padding:4px; }
/* 顶部主 tab：sliding-tabs 结构 */
.sliding-tabs{
  position:relative;
  max-width:360px;
  width:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  padding:4px;
  height:48px;
  background-color:#1E1C2A;
  border:1px solid #3A3749;
  border-radius:30px;
}
.sliding-tabs .tab-indicator{
  position:absolute;
  left:4px;
  top:4px;
  bottom:4px;
  width:calc(50% - 4px);
  background:linear-gradient(90deg,#2C2938,#3A3749);
  border:1px solid #4A4759;
  border-radius:25px;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  z-index:1;
}
.sliding-tabs[data-active="2"] .tab-indicator{ transform:translateX(100%); }
.sliding-tabs .tab-item{
  flex:1 1 auto;
  text-align:center;
  z-index:2;
  font-size:14px;
  font-weight:500;
  color:#7A788A;
  cursor:pointer;
  line-height:40px;
  border:none;
  background:transparent;
  transition:color .3s ease-out;
  position: relative;
}
.sliding-tabs .tab-item.active{
  color:#fff;
  text-shadow:0 0 10px rgba(255,255,255,.3);
}
.sliding-tabs .tab-item:not(.active){ color:#7A788A; }

.tab-badge {
    position: absolute;
    top: 8px;
    right: 12px;
    background: linear-gradient(135deg, #FDE68A, #F59E0B);
    color: #1E1C2A;
    font-size: 14px;
    padding: 0px 6px;
    border-radius: 10px;
    white-space: nowrap;
    line-height: 1.2;
    font-weight: 700;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    pointer-events: none;
    transform: scale(0.9);
}

.tag-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 0 4px;
    border-top: 1px solid rgba(255,255,255,.04);
}

/* --- 胶囊通用样式 --- */
.tag-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    height: 46px; 
    padding: 0 12px;
    display: flex;
    align-items: center; 
    font-size: 13px;
    color: #ccc;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden; /* 确保流光动效不溢出 */
}

.tag-btn-content {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    position: relative;
    z-index: 2; /* 确保文字在流光之上 */
}

.tag-btn b {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.tag-btn span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- 2026 香槟金特别版 (Champagne Gold Style) --- */
.tag-btn.special-new-year {
    /* 保持半宽 */
    grid-column: auto; 
    
    /* 背景：极淡的香槟金透明底 */
    background: rgba(230, 210, 170, 0.05);
    
    /* 边框：香槟金 (低饱和度，优雅) */
    border: 1px solid #E6D2AA; 
    
    /* 阴影：柔和的光晕 */
    box-shadow: 0 0 8px rgba(230, 210, 170, 0.15);
}

/* 标签文字：香槟金 */
.tag-btn.special-new-year b {
    color: #E6D2AA; 
    text-shadow: 0 0 2px rgba(230, 210, 170, 0.3);
}

/* 内容文字：米白色 */
.tag-btn.special-new-year span {
    color: #F7F2E8; 
    font-weight: 500;
}

/* 右上角星星：香槟金 */
.corner-star {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 9px;
    color: #E6D2AA;
    animation: twinkle 2s infinite alternate;
    z-index: 10;
}

/* --- 核心动效：流光划过 (Shine) --- */
.tag-btn.special-new-year::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%; /* 起始位置在左侧外部 */
    width: 100%;
    height: 100%;
    /* 模拟光束：透明 -> 半透明白金 -> 透明 */
    background: linear-gradient(
        120deg, 
        transparent 0%, 
        rgba(255, 250, 240, 0.0) 30%,
        rgba(255, 250, 240, 0.3) 50%, 
        rgba(255, 250, 240, 0.0) 70%,
        transparent 100%
    );
    transform: skewX(-25deg); /* 倾斜角度 */
    animation: shine-sweep 3.5s infinite ease-in-out; /* 循环动效 */
    pointer-events: none;
    z-index: 1;
}

/* 流光位移关键帧 */
@keyframes shine-sweep {
    0% { left: -150%; }
    20% { left: 150%; } /* 快速划过 */
    100% { left: 150%; } /* 停留一段时间 */
}

/* 星星闪烁 */
@keyframes twinkle {
    0% { opacity: 0.5; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.2); }
}

/* 通用底部弹窗 modal 逻辑：默认隐藏，添加 .visible 时弹出 */
.modal{ pointer-events:none; }
.modal.visible{ pointer-events:auto; }
.modal-panel{
  background-color:#1c1625;
  border-top:1px solid var(--border-color);
  transform:translateY(100%);
  opacity:0;
  visibility:hidden;
  transition:transform .3s ease-in-out, opacity .3s ease-in-out;
}
.modal.visible .modal-panel{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
}
.modal-overlay{
  background-color:rgba(0,0,0,.6);
  transition:opacity .3s ease-in-out;
  opacity:0;
}
.modal.visible .modal-overlay{ opacity:1; }

.picker-container{ -webkit-mask-image:linear-gradient(to bottom, transparent, black 25%, black 75%, transparent); mask-image:linear-gradient(to bottom, transparent, black 25%, black 75%, transparent); }
.picker-highlight{ position:absolute; top:50%; left:0; right:0; height:2.5rem; transform:translateY(-50%); border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); pointer-events:none; }
.picker-column{ overflow-y:scroll; scrollbar-width:none; }
.picker-column::-webkit-scrollbar{ display:none; }
.picker-item{ display:flex; align-items:center; justify-content:center; height:2.5rem; color:var(--text-secondary); transition:color .2s; flex-shrink:0; text-align:center; padding:0 4px; }
#loading-screen{ transition:opacity .5s ease-in-out; background-color: black;}
.loader-container{ width:180px; height:180px; animation:rotate-loader 20s linear infinite; }
@keyframes rotate-loader{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
.loader-ring{ border-style:solid; border-radius:50%; position:absolute; top:0; left:0; right:0; bottom:0; animation:rotate-opposite 10s linear infinite; }
@keyframes rotate-opposite{ from{transform:rotate(0)} to{transform:rotate(-360deg)} }
.loader-core{ width:30%; height:30%; background:var(--accent-fuchsia); border-radius:50%; box-shadow:0 0 20px var(--accent-fuchsia), 0 0 40px var(--accent-purple); animation:pulse-core 2s infinite ease-in-out; }
@keyframes pulse-core{ 50%{ transform:scale(.8); opacity:.7 } }
.progress-bar-bg{ background-color:rgba(136,126,150,.2); }
.progress-bar-fill{ background-image:linear-gradient(to right, var(--accent-purple), var(--accent-fuchsia)); transition:width .5s ease-out; }
.loading-step{ transition:opacity .5s, transform .5s; }
.loading-step.completed{ opacity:.5; }
.loading-step.active .step-icon{ animation:spin-icon 1s linear; }
@keyframes spin-icon{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
#report-section{ transition:opacity .5s ease-in-out; }
.natal-chart-container{ position:relative; overflow:hidden; perspective:1000px; background:radial-gradient(circle at center, rgba(26,26,46,.6) 0%, transparent 80%); animation:rotate-loader 40s linear infinite; }
.report-tab{ position:relative; transition:color .3s; }
.report-tab.active{ color:var(--text-primary); }
.report-tab:not(.active){ color:var(--text-secondary); }
.report-tab-underline{ position:absolute; bottom:-8px; left:0; width:100%; height:3px; background-image:linear-gradient(to right, var(--accent-fuchsia), var(--accent-purple)); transform:scaleX(0); transition:transform .3s ease-in-out; }
.report-tab.active .report-tab-underline{ transform:scaleX(1); }
.bento-card{ background-color:rgba(38,28,49,.5); border:1px solid var(--border-color); border-radius:1.5rem; padding:1.5rem; position:relative; overflow:hidden; transform:translateY(30px); opacity:0; transition:opacity .8s cubic-bezier(.25,1,.5,1), transform .8s cubic-bezier(.25,1,.5,1); }
.bento-card::before{ content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(208,33,129,.1), transparent 40%); opacity:0; transition:opacity .5s; pointer-events:none; }
.bento-card:hover::before{ opacity:1; }
.highlight{ color:var(--accent-fuchsia); }
.glow-text{ text-shadow:0 0 8px var(--accent-fuchsia), 0 0 20px rgba(208,33,129,.5); }
.line-chart-container{ position:relative; height:250px; width:100%; }
.hexagram-path{ stroke-dasharray:1000; stroke-dashoffset:1000; animation:draw-in 2s ease-in-out forwards; }
@keyframes draw-in{ to{stroke-dashoffset:0} }
.view-toggle-btn{ background-color:transparent; color:var(--text-secondary); transition:all .3s; }
.view-toggle-btn.active{ color:var(--accent-fuchsia); }
.report-view{ transition:opacity .4s ease-in-out; }
.text-report-container h3,.text-report-container h2,.text-report-container h4{ font-family:'Noto Serif SC',serif; color:var(--accent-fuchsia); font-weight:700; margin-bottom:.75rem; padding-bottom:.5rem; border-bottom:1px solid var(--border-color); }
.text-report-container p,.text-report-container ul{ color:var(--text-primary); font-size:.9rem; line-height:1.9; margin-bottom:1.5rem; }
.text-report-container strong,.text-report-container .highlight{ font-weight:500; color:var(--accent-fuchsia); }
.text-report-container .card-title{ font-size:1.25rem; }
.text-report-container .icon{ color:var(--accent-fuchsia); margin-right:.75rem; font-size:1.1rem; }
.text-report-container .content-block{ margin-bottom:1.25rem; }
.text-report-container .content-block h4{ font-weight:500; color:#ccc; margin-bottom:.5rem; border:none; padding-bottom:0; }
.example-card{ background:var(--surface-color); border:1px solid var(--border-color); transition:transform .3s ease; cursor:pointer; }
.example-card:hover{ transform:translateY(-4px); }
@keyframes spin{ to{ transform:rotate(360deg) } }
/* 验证码行布局（避免依赖 tailwind） */
.code-row{ display:flex; align-items:center; gap:.5rem; }
.code-row .custom-input{ flex:1 1 auto; min-width:0; }
.code-send-btn{ display:flex; align-items:center; justify-content:center; height:44px; padding:0 14px; white-space:nowrap; border-radius:.75rem; width:120px; }
/* 登录表单加宽：减少左右内边距 */
#login-form.wide-form{ padding-left:12px; padding-right:12px; }

.armillary-sphere{ position:relative; width:300px; height:300px; transform-style:preserve-3d; animation:float 6s ease-in-out infinite; }
.core{ position:absolute; top:50%; left:50%; width:40px; height:40px; transform:translate(-50%,-50%); background:#be2e8f; border-radius:50%; box-shadow:0 0 20px #be2e8f, 0 0 40px #be2e8f; z-index:0; }
.sphere-ring{ position:absolute; top:50%; left:50%; border-radius:50%; transform-style:preserve-3d; box-sizing:border-box; opacity:.9; filter:blur(.5px); }
.ring-1{ width:100%; height:100%; margin-left:-150px; margin-top:-150px; border:3px solid transparent; border-top-color:#be2e8f; border-right-color:#7a3a9a; box-shadow:0 0 10px rgba(190,46,143,.6); animation:spin-x 8s linear infinite; }
.ring-2{ width:80%; height:80%; margin-left:-120px; margin-top:-120px; border:2.5px solid transparent; border-bottom-color:#e55c91; border-left-color:#f7a9cf; box-shadow:0 0 8px rgba(229,92,145,.6); animation:spin-y 12s linear infinite reverse; }
.ring-3{ width:60%; height:60%; margin-left:-90px; margin-top:-90px; border:2px solid transparent; border-top-color:#9c9c9c; border-right-color:#808080; box-shadow:0 0 6px rgba(156,156,156,.5); animation:spin-diagonal 10s linear infinite; }
.ring-text{ width:110%; height:110%; margin-left:-165px; margin-top:-165px; border:1px dashed rgba(122,58,154,.3); animation:spin-z 15s linear infinite; }
@keyframes spin-x{ 0%{ transform:rotateX(0) rotateY(0) } 100%{ transform:rotateX(360deg) rotateY(360deg) } }
@keyframes spin-y{ 0%{ transform:rotateY(0) rotateX(45deg) } 100%{ transform:rotateY(360deg) rotateX(45deg) } }
@keyframes spin-diagonal{ 0%{ transform:rotate3d(1,1,.5,0deg) } 100%{ transform:rotate3d(1,1,.5,360deg) } }
@keyframes spin-z{ 0%{ transform:rotateZ(0) } 100%{ transform:rotateZ(360deg) } }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-15px) } }

/* 会员按钮样式 */
.vip-badge-custom {
    position: absolute;
    top: 20px;
    right: 0;
    background: #d4b475;
    color: #43341b;
    padding: 6px 12px 6px 10px;
    border-radius: 100px 0 0 100px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 100;
    transition: all 0.2s;
}

.vip-badge-custom:active {
    transform: scale(0.95);
    opacity: 0.9;
}

.vip-icon {
    width: 16px;
    height: 16px;
    fill: #43341b;
}
.star-dot{ position:absolute; background:rgba(255,255,255,.6); border-radius:50%; opacity:0; animation:twinkle 5s infinite ease-in-out; box-shadow:0 0 5px rgba(255,255,255,.3); z-index:1; }
.star-dot:nth-child(1){ width:2px; height:2px; top:15%; left:10%; animation-delay:.5s; }
.star-dot:nth-child(2){ width:1.5px; height:1.5px; top:30%; left:5%; animation-delay:1.2s; }
.star-dot:nth-child(3){ width:2.5px; height:2.5px; top:20%; right:15%; animation-delay:2.3s; }
.star-dot:nth-child(4){ width:1.8px; height:1.8px; bottom:10%; left:20%; animation-delay:3.8s; }
.star-dot:nth-child(5){ width:2.2px; height:2.2px; bottom:5%; right:10%; animation-delay:4.5s; }
@keyframes twinkle{ 0%,100%{ opacity:0; transform:scale(.8) } 50%{ opacity:1; transform:scale(1.2) } }