/* ============================================================
   星空模式：从 lulu 站原样迁移（图层/星点/流星），
   变量名映射到新版（--bg/--card/--text/--line/--brand）
   ============================================================ */
.cosmos{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  opacity:0;visibility:hidden;
  transition:opacity 1.2s ease,visibility 1.2s ease;
}
:root[data-theme="star"] .cosmos{opacity:1;visibility:visible}
:root[data-theme="star"] .app{position:relative;z-index:1;background:transparent}

/* 深蓝星野：渐变 + 照片都锁在 fixed 层里，
   高度恒等于视口，切换页面（滚动高度从 3 万 px 变到 1 千 px）也不会重算 */
.cosmos-sky{position:absolute;inset:0;background:#01030A}
:root[data-theme="star"] .cosmos-sky{
  background:
    linear-gradient(180deg,rgba(1,3,10,.52),rgba(3,9,26,.12) 48%,rgba(10,30,62,.55)),
    url(../img/stars-bg.webp) center 42%/cover no-repeat,
    #01030A;
}

.cosmos-galaxy-photo,
.cosmos-saturn-photo,
.cosmos-girl-photo{position:absolute;height:auto;pointer-events:none;user-select:none}

/* 右侧仙女座星系：左缘贴在主体（.shell）右侧外 20px，和左边的女孩形成对称；
   主体变宽变窄时它跟着走，不会钻到侧栏底下 */
.cosmos-galaxy-photo{
  left:calc(50% + var(--shell-max, 1080px) / 2 + 20px);right:auto;top:30%;
  width:clamp(360px,30vw,640px);opacity:.9;z-index:0;
}
/* 左侧星环行星 */
.cosmos-saturn-photo{
  --sat-w:clamp(160px,14vw,240px);
  left:1vw;top:5%;width:var(--sat-w);opacity:.94;z-index:3;
  filter:brightness(1.42) contrast(1.08) drop-shadow(0 0 30px rgba(120,160,255,.30));
}
/* 少女插画：裙边压住「当前页面正文卡片」左缘 62px。
   卡片宽度各页不同（首页 1080 容器、详情页 760 阅读列），所以由 JS 实测左缘写入 --girl-right；
   fallback 按 shell 1080 算，避免 JS 未执行时错位。 */
.cosmos-girl-photo{
  left:auto;
  right:var(--girl-right, calc(50vw + 540px - 62px));
  top:6%;
  width:clamp(320px,34vw,780px);
  max-width:none;
  opacity:.95;z-index:2;
  transform:none;
  filter:drop-shadow(0 0 26px rgba(120,150,255,.28));
}

/* 土星更靠内，先收；女孩要两侧留白够（>=1360）才出现 */
@media (max-width:1760px){
  .cosmos-saturn-photo{display:none}
  .cosmos-galaxy-photo{opacity:.55}
}
@media (max-width:1359px){
  .cosmos-girl-photo{display:none}
  .cosmos-galaxy-photo{opacity:.3}
}
@media (max-width:1023px){
  .cosmos-galaxy-photo{left:auto;right:-12vw;top:42%;width:min(70vw,420px);opacity:.22}
}

/* ---------- 星空配色（新版变量） ---------- */
:root[data-theme="star"]{
  color-scheme:dark;
  --bg:#03091A;
  --card:rgba(6,16,38,.62);
  --card-solid:rgba(8,20,46,.86);
  --text:#EAF2FF;
  --text-2:#B6CBE8;
  --text-3:#8FA6CC;
  --line:rgba(126,170,250,.20);
  --brand:#FF5C72;
  --brand-soft:rgba(28,60,116,.46);
  --shadow:0 8px 34px rgba(0,6,26,.48);
  --glass:blur(13px) saturate(140%);
}
/* body 只给纯色：一旦用渐变，它会按 scrollHeight 拉伸，
   首页 33054px 与日历 1264px 下同一个渐变会显示成完全不同的颜色（视觉上的"跳动"） */
:root[data-theme="star"]{background:#03091A}
:root[data-theme="star"] body{background:#03091A}
:root[data-theme="star"] .app{background:transparent}
:root[data-theme="star"] .cal-card,
:root[data-theme="star"] .forum-tile,
:root[data-theme="star"] .profile-card,
:root[data-theme="star"] .article,
:root[data-theme="star"] .replies,
:root[data-theme="star"] .mine-list,
:root[data-theme="star"] .navbar,
:root[data-theme="star"] .topbar,
:root[data-theme="star"] .composer,
:root[data-theme="star"] .tabbar{
  backdrop-filter:blur(13px) saturate(140%);
  -webkit-backdrop-filter:blur(13px) saturate(140%);
  background:var(--card);
  box-shadow:0 8px 34px rgba(0,6,26,.42),inset 0 1px 0 rgba(150,195,255,.07);
}
:root[data-theme="star"] .topbar,
:root[data-theme="star"] .navbar,
:root[data-theme="star"] .tabbar{
  background:rgba(6,16,38,.78);
  border-color:rgba(126,170,250,.16);
}
/* 星空：composer 是一张独立的浮起卡片，比外层实，输入框再亮一档 + 蓝描边 */
:root[data-theme="star"] .composer{
  background:rgba(7,18,40,.96);
  border-color:rgba(126,170,250,.30);
}
:root[data-theme="star"] .tb-search{background:rgba(12,28,60,.62)}
:root[data-theme="star"] .composer .fake{
  background:rgba(126,170,250,.12);
  border-color:rgba(126,170,250,.34);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.22);
}
:root[data-theme="star"] .chip{background:rgba(20,40,80,.58);color:#B6CBE8}
:root[data-theme="star"] .mine-item,
:root[data-theme="star"] .reply{border-color:rgba(126,170,250,.10)}
:root[data-theme="star"] .profile-hero{
  background:linear-gradient(135deg,#1B3B6E,#0A1E3E 60%,#040C22);
}
:root[data-theme="star"] .ft-item i{background:rgba(126,170,250,.3)}

/* ---------- 深色模式 ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E1116;
  --card:#171A21;
  --card-solid:#1B1F27;
  --text:#E7EAF1;
  --text-2:#A5ADBE;
  --text-3:#6C7488;
  --line:#252A34;
  --brand:#FF5C72;
  --brand-soft:rgba(255,36,66,.16);
  --shadow:0 4px 18px rgba(0,0,0,.32);
}
:root[data-theme="dark"] body{background:#0E1116}
:root[data-theme="dark"] .app{background:#0E1116}
:root[data-theme="dark"] .tb-search{background:#22262F}
/* 深色：外壳不能再是白色（app.css 默认），否则白壳包黑框很突兀 */
:root[data-theme="dark"] .composer{
  background:#171A21;
  border-color:#2A303C;
}
:root[data-theme="dark"] .composer .fake{
  background:#22262F;
  border-color:#333A48;
}
:root[data-theme="dark"] .chip{background:#22262F;color:#A5ADBE}
:root[data-theme="dark"] .mine-item,
:root[data-theme="dark"] .reply{border-color:#22262F}
:root[data-theme="dark"] .profile-hero{
  background:linear-gradient(135deg,#3A1522,#22111A 60%,#140C10);
}
:root[data-theme="dark"] .forum-tile,
:root[data-theme="dark"] .profile-card{box-shadow:0 4px 18px rgba(0,0,0,.28)}

/* 主题平滑过渡 */
body,.forum-tile,.profile-card,.article,.replies,.mine-list,
.navbar,.topbar,.composer,.tabbar,.tb-search,
.chip,.reply,.mine-item,
.site-hd,.m-hd,.feed-panel,.feed-head,.side-card{
  transition:background-color .55s ease,color .55s ease,
             border-color .55s ease,box-shadow .55s ease;
}

/* 动态特效：闪烁星点 + 流星（与 lulu 一致） */
.cosmos-twinkle,.cosmos-meteors{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cosmos-meteors{z-index:4}
.cosmos-twinkle .tw{
  position:absolute;border-radius:50%;background:rgb(var(--tc));
  box-shadow:0 0 5px 1px rgba(var(--tc),.6);opacity:.25;
  animation:tw-star ease-in-out infinite alternate;
}
@keyframes tw-star{from{opacity:.10;transform:scale(.6)}to{opacity:.92;transform:scale(1.28)}}
.cosmos-twinkle .tw.bright::before,
.cosmos-twinkle .tw.bright::after{content:"";position:absolute;background:rgba(var(--tc),.7)}
.cosmos-twinkle .tw.bright::before{left:-6px;top:50%;width:14px;height:1px;transform:translateY(-50%)}
.cosmos-twinkle .tw.bright::after{top:-6px;left:50%;width:1px;height:14px;transform:translateX(-50%)}
.meteor{
  position:absolute;width:var(--mlen);height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(170,205,255,.22) 40%,rgba(236,246,255,1) 100%);
  filter:drop-shadow(0 0 8px rgba(190,220,255,.95));opacity:0;
  animation:meteor-fly var(--mdur) cubic-bezier(.28,.08,.62,1) forwards;
}
.meteor::after{
  content:"";position:absolute;right:-1px;top:-2px;width:5px;height:5px;
  border-radius:50%;background:#fff;box-shadow:0 0 12px 3px rgba(210,232,255,.95);
}
@keyframes meteor-fly{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(var(--mrot)) translateX(-24px)}
  14%{opacity:1}
  82%{opacity:.9}
  100%{opacity:0;transform:translate3d(var(--mdx),var(--mdy),0) rotate(var(--mrot)) translateX(0)}
}
@media (prefers-reduced-motion:reduce){
  .cosmos-twinkle .tw{animation:none;opacity:.6}
  .meteor{display:none}
}

/* 主题切换按钮 */
.theme-btn{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:var(--text-2);flex:none;
}
.theme-btn:hover{background:rgba(255,255,255,.08)}
.theme-btn svg{width:19px;height:19px}

/* 详情页正文：更实的卡片底 + 更亮的正文色，保证星空下长文可读 */
:root[data-theme="star"] .article,
:root[data-theme="star"] .replies{background:rgba(9,20,44,.94)}
:root[data-theme="star"] .article .body,
:root[data-theme="star"] .reply .rt{color:#EEF5FF}
:root[data-theme="star"] .article .body p,
:root[data-theme="star"] .reply .rt p{color:inherit}