/* ============================================================
 * 理想创造 OS —— main.css（Ver 1.0 星尘版）
 * 设计系统：平面色彩为主角，图片只是可选皮肤
 * 令牌：夜空蓝渐变 / 星尘金 / 奶白纸 / 墨蓝文字 / 暖橙
 * ============================================================ */

:root {
  /* ---- 色彩令牌 ---- */
  --night-1: #1b3a6b;            /* 夜空渐变 · 亮 */
  --night-2: #0f1f42;            /* 夜空渐变 · 深 */
  --night-deep: #0a1530;         /* 极深夜蓝 */
  --gold: #f2c96b;               /* 星尘金 */
  --gold-deep: #b98a2f;          /* 纸面上的金字 */
  --paper: #faf6ee;              /* 奶白纸 */
  --paper-2: #f1e9d8;            /* 奶白 · 次层 */
  --ink: #1c2440;                /* 墨蓝文字 */
  --ink-soft: #565f82;           /* 墨蓝 · 弱 */
  --ink-faint: #8a90ad;          /* 墨蓝 · 淡 */
  --orange: #e8956d;             /* 暖橙点缀 */
  --teal: #6ba8a0;
  --blue: #5b8fc9;
  --purple: #8b7ec8;
  /* 昼间平面色（奶杏 / 淡金） */
  --dawn-1: #f8e9cd;
  --dawn-2: #f2cd9a;
  --dawn-3: #e9b083;

  /* ---- 形状令牌 ---- */
  --r-window: 18px;
  --r-card: 14px;
  --r-tile: 16px;
  --r-pill: 99px;
  --shadow-win: 0 26px 70px rgba(10, 21, 48, 0.38), 0 4px 16px rgba(10, 21, 48, 0.16);
  --shadow-card: 0 6px 22px rgba(10, 21, 48, 0.10);
  --shadow-tile: 0 6px 16px rgba(10, 21, 48, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  --ls-wide: 0.22em;
  --ls-brand: 0.42em;

  /* ---- 字体 ---- */
  --kai: "LXGW WenKai", "LXGW WenKai TC", "Noto Serif SC", "Songti SC", "STSong", "Source Han Serif SC", "SimSun", serif;
  --garamond: "EB Garamond", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --hand: "Caveat", "LXGW WenKai", cursive;
  --serif: var(--kai);

  /* ---- 动效令牌（全局统一手感） ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* 点击诞生的小星星配色 */
  --star-gold: #f2c96b;
  --star-cream: #f5f0e6;
  --sans: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;

  /* 颗粒质感（内联 SVG 噪点，无外部依赖） */
  --noise-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.14 0 0 0 0 0.25 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; height: 100dvh; overflow: hidden; }
/* 浏览器底部地址栏 / 手势条：所有贴底 UI 统一加这段安全边距 */
:root { --sb: env(safe-area-inset-bottom, 0px); }
body {
  font-family: var(--sans);
  background: var(--night-2);
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
button { font-family: inherit; background: none; border: none; cursor: pointer; color: inherit; }
/* hidden 必须彻底退出命中测试；曾因透明全屏层（opacity:0）仍拦截点击 */
[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ============================================================
 * 开机动线：深空蓝 + 描边星星 + 品牌名 + 星座连线进度
 * ============================================================ */

/* ============================================================
 * 开机页：暖黄昏天空 + 清晰信息层级（星 → 品牌 → 诗 → 进度 → 跳过）
 * 背景小星球沉在下半，绝不与文案抢同一中心点
 * ============================================================ */
#boot {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  /* 秋日黄昏：上紫、中金橙、下暖褐 —— 与登录默认天光一致 */
  background:
    radial-gradient(ellipse 90% 55% at 50% 100%, rgba(255, 150, 80, 0.28), transparent 58%),
    radial-gradient(ellipse 70% 45% at 18% 18%, rgba(120, 70, 140, 0.35), transparent 55%),
    radial-gradient(ellipse 55% 40% at 88% 22%, rgba(255, 170, 90, 0.18), transparent 50%),
    linear-gradient(165deg, #2a1a38 0%, #3d2850 28%, #6a3a48 58%, #b86a48 82%, #e8a060 100%);
  transition: opacity 0.7s ease;
}
#boot::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--noise-dark);
  pointer-events: none;
  opacity: 0.18;
}
#boot.fade {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden;
}
/* 跳过时的快速淡出（300ms 内） */
#boot.quick-fade, #login.quick-fade { transition: opacity 0.22s ease !important; }

/* 背景层：星尘 + 小星球（下沉构图，给文字留空） */
.boot-sky {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  overflow: hidden;
}
.boot-glow {
  position: absolute; border-radius: 50%;
  filter: blur(40px); pointer-events: none;
}
.boot-glow-a {
  width: 55vmin; height: 55vmin;
  left: 50%; bottom: -8%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 180, 100, 0.45), transparent 68%);
  opacity: 0.85;
}
.boot-glow-b {
  width: 40vmin; height: 40vmin;
  right: -5%; top: 8%;
  background: radial-gradient(circle, rgba(160, 90, 180, 0.28), transparent 70%);
}
.boot-planet {
  position: absolute;
  left: 50%;
  bottom: max(6%, 48px);
  transform: translateX(-50%);
  width: min(52vmin, 300px);
  height: min(52vmin, 300px);
  opacity: 0;
  animation:
    bootPlanetIn 1.15s ease 0.08s forwards,
    bootPlanetFloat 8s ease-in-out 1.2s infinite;
}
@keyframes bootPlanetIn {
  from { opacity: 0; transform: translateX(-50%) scale(0.88) translateY(24px); filter: blur(10px); }
  to   { opacity: 0.92; transform: translateX(-50%) scale(1) translateY(0); filter: none; }
}
@keyframes bootPlanetFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-8px); }
}
.boot-planet-core {
  position: absolute; inset: 12%; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 230, 180, 0.65), transparent 30%),
    radial-gradient(circle at 68% 58%, rgba(200, 120, 70, 0.55), transparent 38%),
    radial-gradient(circle at 45% 75%, rgba(90, 120, 90, 0.45), transparent 42%),
    radial-gradient(circle at 50% 50%, #8a5a48 0%, #4a3040 52%, #1e1428 100%);
  box-shadow:
    inset -16px -14px 36px rgba(20, 8, 16, 0.55),
    0 0 50px rgba(255, 160, 90, 0.28),
    0 0 100px rgba(242, 201, 107, 0.12);
}
.boot-planet-shine {
  position: absolute; inset: 16% 20% auto auto; width: 30%; height: 24%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 248, 220, 0.7), transparent 72%);
  filter: blur(2px);
}
.boot-planet-atm {
  position: absolute; inset: 5%; border-radius: 50%;
  background: radial-gradient(circle, transparent 56%, rgba(255, 170, 110, 0.32) 76%, transparent 100%);
  mix-blend-mode: screen;
  animation: bootAtm 5s ease-in-out infinite;
}
@keyframes bootAtm { 0%,100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.025); } }
.boot-planet-ring {
  position: absolute; left: -10%; right: -10%; top: 46%; height: 18%;
  border: 1.5px solid rgba(255, 210, 150, 0.42);
  border-radius: 50%;
  transform: rotateX(72deg) rotateZ(-18deg);
  box-shadow: 0 0 16px rgba(255, 180, 100, 0.2);
  animation: bootRing 12s linear infinite;
}
@keyframes bootRing { to { transform: rotateX(72deg) rotateZ(342deg); } }
.boot-dust {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 18% 18%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 72% 12%, rgba(255,220,150,.55), transparent),
    radial-gradient(1.4px 1.4px at 88% 48%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 28% 70%, rgba(255,200,140,.4), transparent),
    radial-gradient(1.1px 1.1px at 52% 32%, rgba(255,255,255,.3), transparent);
  opacity: 0.55; animation: bootDust 9s ease-in-out infinite alternate;
}
@keyframes bootDust { from { opacity: .35; } to { opacity: .7; } }

/* 前景文案柱：上半屏居中，与下半星球分层 */
#boot-stage {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  width: min(92vw, 420px);
  padding: 0 16px;
  margin-top: min(-8vh, -28px);
  text-align: center;
}

/* 手绘星星 */
#boot-star { width: 78px; height: 78px; overflow: visible; flex: none; }
#boot-star .star-outline {
  stroke: #ffd98a;
  stroke-width: 2.1;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  filter: drop-shadow(0 0 0 rgba(242, 201, 107, 0));
  animation: starDraw 1s cubic-bezier(0.6, 0, 0.3, 1) 0.1s forwards,
             starGlow 0.65s ease 1.15s forwards;
}
@keyframes starDraw { to { stroke-dashoffset: 0; } }
@keyframes starGlow {
  to { filter: drop-shadow(0 0 16px rgba(255, 200, 120, 0.9)); }
}
#boot-star .star-spark {
  stroke: #ffd98a; stroke-width: 2; opacity: 0;
  animation: sparkIn 0.45s ease forwards;
}
#boot-star .s1 { animation-delay: 1.2s; }
#boot-star .s2 { animation-delay: 1.32s; }
#boot-star .s3 { animation-delay: 1.44s; }
@keyframes sparkIn { to { opacity: 0.9; } }

#boot-brand {
  font-family: var(--serif);
  font-size: clamp(22px, 5.6vw, 32px);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: #fff6e8;
  text-shadow: 0 2px 24px rgba(40, 16, 24, 0.45);
  margin: 0;
  opacity: 0;
  animation: brandIn 0.85s ease 0.35s forwards;
}
@keyframes brandIn {
  from { opacity: 0; transform: translateY(12px); filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: none; }
}

#boot-poem {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.12em;
  line-height: 1.75;
  color: rgba(255, 240, 220, 0.72);
  margin: 0;
  max-width: 18em;
  min-height: 0;
  opacity: 0;
  animation: brandIn 0.85s ease 0.55s forwards;
}

.boot-tagline {
  margin: 0;
  max-width: 20em;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  line-height: 1.7;
  color: rgba(255, 220, 170, 0.55);
  opacity: 0;
  animation: brandIn 0.85s ease 0.7s forwards;
}

/* 进度：星座线 + 细条 + 状态与百分比一行 */
.boot-progress {
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  opacity: 0;
  animation: brandIn 0.55s ease 0.85s forwards;
}
#boot-constellation { width: 100%; height: 36px; }
#boot-cl-line {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.5, 0, 0.3, 1);
}
#boot-cl-dots circle {
  fill: rgba(255, 240, 220, 0.2);
  transition: fill 0.35s ease, filter 0.35s ease;
}
#boot-cl-dots circle.lit {
  fill: #ffd98a;
  filter: drop-shadow(0 0 5px rgba(255, 200, 120, 0.85));
}
.boot-bar-track {
  width: 100%;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 240, 220, 0.12);
  overflow: hidden;
}
#boot-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 180, 100, 0.5), #ffd98a 55%, #ffe9c0);
  box-shadow: 0 0 10px rgba(255, 200, 120, 0.45);
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.boot-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255, 230, 190, 0.55);
}
#boot-status {
  flex: 1;
  text-align: left;
  min-height: 1.2em;
  color: rgba(255, 220, 170, 0.7);
}
#boot-bios-pct {
  font-family: "SF Mono", "Cascadia Code", Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 220, 160, 0.75);
  flex: none;
}

#boot-skip {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 2;
  padding: 8px 14px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: rgba(255, 240, 220, 0.42);
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease;
}
#boot-skip:hover {
  color: rgba(255, 240, 220, 0.85);
  background: rgba(20, 10, 16, 0.25);
}

/* 开机期间不让 toast 抢戏 */
body:has(#boot:not(.fade):not([hidden])) #os-exp-toast {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================================
 * 登录界面：玻璃卡片浮在 3D 星空上 + 轨道环，与星球叙事一体
 * ============================================================ */

#login {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; padding: 0 20px;
  /* 暖黄昏暗角：上半透出夕阳，下半略压以托卡片，绝不冷灰蒙 */
  background:
    radial-gradient(ellipse 70% 58% at 50% 38%, transparent 0%, rgba(40, 22, 36, 0.08) 52%, rgba(22, 12, 24, 0.48) 100%);
  opacity: 0;
  pointer-events: none; /* 未显示时绝不挡点击（曾因透明全屏层锁死整页） */
  transition: opacity 0.75s ease;
  cursor: pointer;
  overflow: hidden;
}
#login::after { content: ''; position: absolute; inset: 0; background: var(--noise-dark); pointer-events: none; opacity: 0.12; }
#login.has3d::after { opacity: 0.04; }
#login.show {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  display: flex !important; /* 覆盖 forceShow 可能留下的 inline display:none */
}
#login.show .login-card {
  /* 兜底：动画被禁用/中断时卡片仍须可见可点 */
  opacity: 1;
}
#login.fade {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden;
  transition: opacity 0.55s ease;
}
#login > * { position: relative; z-index: 1; }

/* 轨道环：绕登录卡片缓转，呼应星球环 */
.login-orbit {
  position: absolute; left: 50%; top: 50%;
  width: min(78vmin, 520px); height: min(78vmin, 520px);
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 0;
}
.login-orbit-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(242, 201, 107, 0.14);
  box-shadow: 0 0 24px rgba(120, 170, 255, 0.06) inset;
}
.login-orbit-ring.r1 { animation: loginOrbit 28s linear infinite; }
.login-orbit-ring.r2 {
  inset: 9%; border-color: rgba(160, 200, 255, 0.12);
  animation: loginOrbit 40s linear infinite reverse;
}
.login-orbit-ring.r3 {
  inset: 18%; border-style: dashed; border-color: rgba(245, 240, 230, 0.08);
  animation: loginOrbit 56s linear infinite;
}
@keyframes loginOrbit { to { transform: rotate(360deg); } }
.login-orbit-dot {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, #ffe9a3, rgba(242, 201, 107, 0.2));
  box-shadow: 0 0 12px rgba(242, 201, 107, 0.7);
  top: 50%; left: 50%;
}
.login-orbit-dot.d1 { animation: loginDot1 28s linear infinite; }
.login-orbit-dot.d2 { animation: loginDot2 40s linear infinite reverse; width: 4px; height: 4px; }
@keyframes loginDot1 {
  from { transform: rotate(0deg) translateX(min(39vmin, 260px)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(min(39vmin, 260px)) rotate(-360deg); }
}
@keyframes loginDot2 {
  from { transform: rotate(90deg) translateX(min(31vmin, 210px)) rotate(-90deg); }
  to   { transform: rotate(450deg) translateX(min(31vmin, 210px)) rotate(-450deg); }
}

/* 玻璃卡片：把文字/按钮聚成一块，背景 3D 仍透出来 */
.login-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  padding: 36px 40px 28px;
  border-radius: 28px;
  background: linear-gradient(165deg, rgba(18, 28, 58, 0.42), rgba(10, 16, 36, 0.28));
  border: 1px solid rgba(245, 240, 230, 0.12);
  box-shadow:
    0 20px 60px rgba(4, 8, 20, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  max-width: min(92vw, 420px);
  transform: translateY(10px); opacity: 0;
}
#login.show .login-card {
  animation: loginCardIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s forwards;
}
@keyframes loginCardIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* 纯 CSS 星点装饰：WebGL 不可用时的星空回退；3D 就绪（.has3d）后让位给真实星空 */
.login-stars {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  transition: opacity 1.2s ease;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(245,240,230,.7), transparent),
    radial-gradient(1px 1px at 34% 12%, rgba(242,201,107,.6), transparent),
    radial-gradient(1.8px 1.8px at 58% 28%, rgba(245,240,230,.5), transparent),
    radial-gradient(1px 1px at 76% 16%, rgba(245,240,230,.65), transparent),
    radial-gradient(1.3px 1.3px at 88% 40%, rgba(242,201,107,.5), transparent),
    radial-gradient(1px 1px at 22% 48%, rgba(245,240,230,.45), transparent),
    radial-gradient(1.6px 1.6px at 46% 60%, rgba(245,240,230,.35), transparent),
    radial-gradient(1px 1px at 68% 72%, rgba(242,201,107,.45), transparent),
    radial-gradient(1.2px 1.2px at 8% 74%, rgba(245,240,230,.5), transparent),
    radial-gradient(1px 1px at 92% 84%, rgba(245,240,230,.4), transparent);
}
#login.has3d .login-stars { opacity: 0.08; }
#login.has3d .login-orbit { opacity: 0.85; }
/* 3D 不可用时的回退底色（深夜蓝，与开机屏同一叙事） */
#login:not(.has3d) {
  background:
    radial-gradient(ellipse 55% 48% at 50% 52%, transparent 0%, rgba(6, 10, 24, 0.2) 55%, rgba(6, 10, 24, 0.75) 100%),
    radial-gradient(900px 520px at 82% -6%, rgba(91, 143, 201, 0.2), transparent 60%),
    radial-gradient(760px 520px at 12% 106%, rgba(242, 201, 107, 0.08), transparent 55%),
    linear-gradient(168deg, #16305c 0%, var(--night-2) 58%, var(--night-deep) 100%);
}

/* 头像 = 迷你星球 + 呼吸光晕 */
#login-avatar-wrap { position: relative; width: 108px; height: 108px; cursor: pointer; flex: none; }
#login-avatar-wrap .halo {
  position: absolute; inset: -14px; border-radius: 50%;
  border: 1px solid rgba(242, 201, 107, 0.35);
  animation: haloBreath 3.4s ease-in-out infinite;
}
#login-avatar-wrap .halo.h2 { inset: -26px; border-color: rgba(242, 201, 107, 0.16); animation-delay: -1.7s; }
#login-avatar-wrap .halo.h3 {
  inset: -40px; border-color: rgba(140, 180, 255, 0.12);
  animation-delay: -0.8s; animation-duration: 4.6s;
}
@keyframes haloBreath {
  0%, 100% { transform: scale(0.96); opacity: 0.5; }
  50%      { transform: scale(1.05); opacity: 1; }
}
#login-avatar {
  width: 108px; height: 108px; border-radius: 50%;
  overflow: hidden; position: relative;
  border: 2px solid rgba(242, 201, 107, 0.5);
  background: radial-gradient(circle at 50% 50%, #2a4a78, #0e1830 70%);
  box-shadow: 0 0 50px rgba(120, 170, 255, 0.28), 0 0 80px rgba(242, 201, 107, 0.12);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.login-mini-planet {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 240, 200, 0.45), transparent 32%),
    radial-gradient(circle at 68% 58%, rgba(90, 160, 110, 0.55), transparent 38%),
    radial-gradient(circle at 42% 72%, rgba(70, 120, 170, 0.5), transparent 42%),
    radial-gradient(circle at 50% 50%, #3a5f8c 0%, #15243f 100%);
  animation: lmpSpin 18s linear infinite;
}
.lmp-land {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 28% 18% at 35% 40%, rgba(120, 170, 90, 0.65), transparent 70%),
    radial-gradient(ellipse 22% 16% at 70% 55%, rgba(90, 140, 80, 0.55), transparent 70%);
}
.lmp-shine {
  position: absolute; left: 18%; top: 16%; width: 34%; height: 26%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 252, 235, 0.55), transparent 70%);
  filter: blur(1px);
}
@keyframes lmpSpin {
  from { transform: rotate(0deg) scale(1.08); }
  to   { transform: rotate(360deg) scale(1.08); }
}
#login-avatar-wrap:hover #login-avatar {
  transform: scale(1.06);
  box-shadow: 0 0 70px rgba(160, 200, 255, 0.45), 0 0 90px rgba(242, 201, 107, 0.28);
}
/* 品牌星标叠在迷你星球上 */
#login-avatar svg {
  position: absolute; inset: 0; margin: auto;
  width: 48%; height: 48%;
  stroke: var(--gold);
  stroke-width: 4;
  filter: drop-shadow(0 0 10px rgba(242, 201, 107, 0.65));
  opacity: 0.92;
}

/* 进入按钮：品牌邀请（登录页唯一入口，做得更醒目一些） */
#login-enter {
  position: relative; overflow: hidden;
  margin-top: 10px;
  font-size: 14.5px; letter-spacing: 0.3em; text-indent: 0.3em;
  font-family: var(--serif);
  color: var(--ink);
  background: linear-gradient(180deg, #f9e09b, #eebc55);
  border-radius: var(--r-pill);
  padding: 14px 46px;
  box-shadow: 0 8px 30px rgba(242, 201, 107, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}
/* 星辉扫过 */
#login-enter::after {
  content: '';
  position: absolute; top: -40%; bottom: -40%; left: -30%;
  width: 34%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: skewX(-18deg);
  animation: enterSheen 3.6s ease-in-out 1.6s infinite;
  pointer-events: none;
}
@keyframes enterSheen {
  0%, 55% { left: -40%; }
  85%, 100% { left: 130%; }
}
#login-enter:hover { transform: translateY(-2px); box-shadow: 0 12px 38px rgba(242, 201, 107, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
#login-enter:active { transform: translateY(0) scale(0.97); }

#login-name {
  font-family: var(--serif);
  font-size: clamp(20px, 3.2vw, 28px); letter-spacing: 0.36em; text-indent: 0.36em;
  color: var(--paper); margin-top: 8px;
  text-shadow: 0 2px 26px rgba(10, 21, 48, 0.7);
}
#login-sub {
  font-family: var(--serif);
  font-size: 13px; letter-spacing: 0.2em; text-indent: 0.2em;
  color: rgba(245, 240, 230, 0.58);
}
#login-hint {
  font-size: 11.5px; letter-spacing: 0.14em;
  color: rgba(242, 201, 107, 0.7);
  animation: hintFloat 3s ease-in-out infinite;
  margin-top: 2px;
}
@keyframes hintFloat { 0%,100% { opacity: .45; } 50% { opacity: .9; } }

@media (max-width: 768px) {
  /* —— 移动端登录：秋天黄昏 + 星球在上、卡片在下 —— */
  #login {
    justify-content: flex-end;
    padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
    /* 上半几乎全透：露出金橙天光与上移的星球；只在底部托卡片 */
    background:
      linear-gradient(180deg,
        rgba(50, 28, 42, 0.00) 0%,
        rgba(55, 30, 40, 0.02) 32%,
        rgba(40, 20, 32, 0.16) 58%,
        rgba(22, 12, 22, 0.42) 78%,
        rgba(14, 8, 16, 0.58) 100%);
  }
  #login::after,
  #login.has3d::after {
    opacity: 0.03;
  }
  .login-card {
    padding: 20px 18px 16px;
    border-radius: 22px;
    gap: 9px;
    max-width: min(94vw, 400px);
    width: 100%;
    /* 暖玻璃：透出夕阳与秋色星球，少模糊少发灰 */
    background: linear-gradient(165deg, rgba(48, 30, 42, 0.42), rgba(24, 14, 26, 0.30));
    border: 1px solid rgba(255, 210, 160, 0.22);
    box-shadow:
      0 16px 40px rgba(20, 8, 16, 0.32),
      inset 0 1px 0 rgba(255, 230, 190, 0.14);
    backdrop-filter: blur(5px) saturate(1.35);
    -webkit-backdrop-filter: blur(5px) saturate(1.35);
  }
  #login-avatar-wrap { width: 78px; height: 78px; }
  #login-avatar { width: 78px; height: 78px; }
  #login-avatar-wrap .halo.h3 { display: none; }
  .login-orbit {
    /* 轨道环跟着上移的星球，围在上半屏 */
    top: 26%;
    width: min(88vmin, 400px);
    height: min(88vmin, 400px);
    opacity: 0.55;
  }
  #login-name {
    font-size: 20px;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    margin-top: 4px;
  }
  #login-sub { font-size: 12.5px; }
  #login-enter {
    width: 100%;
    max-width: 280px;
    padding: 13px 24px;
    font-size: 14px;
    margin-top: 4px;
  }
  #login-hint { font-size: 11px; margin-top: 0; }
  .login-quote {
    font-size: 11.5px;
    margin-top: 4px;
    padding: 0 8px;
    line-height: 1.7;
  }
  .login-quote .lq-fr { display: none; } /* 竖屏省一行，减少灰雾感文案堆叠 */
  /* boot-planet 尺寸见上文 @media 开机排版 */
}

/* 更窄的手机：再精简文案层，露出更多天空与星球 */
@media (max-width: 420px) {
  .login-card { padding: 20px 18px 16px; gap: 8px; }
  .login-value {
    font-size: 11px !important;
    line-height: 1.55 !important;
    max-width: 16em !important;
    letter-spacing: 0.04em !important;
  }
  .login-cosmos {
    font-size: 11px !important;
    margin-top: 4px !important;
    letter-spacing: 0.06em !important;
  }
  .login-quote { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ============================================================
 * 桌面：平面色彩为主角
 * ============================================================ */

/* 桌面整体一层（z-index:2），压在 body 级 3D 天空画布（z-index:1）之上 */
#desktop { position: fixed; inset: 0; z-index: 2; }

.wallpaper {
  position: absolute; inset: 0;
  transition: opacity 2.4s ease;
}
.wallpaper::after { content: ''; position: absolute; inset: 0; background: var(--noise-dark); }
/* 3D 就绪：平面壁纸让位（仅作 WebGL 不可用时的回退） */
#desktop.has3d .wallpaper { opacity: 0 !important; }

/* 昼间平面壁纸（默认）：明亮通透的故事书蓝 */
#wallpaper-day {
  background:
    radial-gradient(1100px 700px at 82% -10%, rgba(255, 255, 255, 0.38), transparent 60%),
    radial-gradient(900px 660px at 6% 110%, rgba(242, 201, 107, 0.22), transparent 55%),
    linear-gradient(165deg, #5aa5f5 0%, #3a8bef 42%, #2e7ce6 70%, #2568c4 100%);
  opacity: 1;
}
/* 夜间平面壁纸：深夜蓝渐变（设置里切换） */
#wallpaper-night {
  background:
    radial-gradient(1000px 620px at 85% -8%, rgba(91, 143, 201, 0.30), transparent 62%),
    radial-gradient(900px 620px at 6% 108%, rgba(242, 201, 107, 0.10), transparent 58%),
    radial-gradient(1400px 900px at 50% 45%, #20457e 0%, var(--night-1) 38%, var(--night-2) 78%, var(--night-deep) 100%);
  opacity: 0;
}
/* 日落彩蛋壁纸：暖杏 / 淡金 */
#wallpaper-sunset {
  background:
    radial-gradient(1000px 640px at 82% -6%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1000px 700px at 50% 112%, rgba(232, 149, 109, 0.4), transparent 62%),
    linear-gradient(166deg, var(--dawn-1) 0%, var(--dawn-2) 52%, var(--dawn-3) 100%);
  opacity: 0;
}
/* 雪夜平面壁纸：雪原深夜蓝 + 远处一点路灯暖光（WebGL 回退） */
#wallpaper-snow {
  background:
    radial-gradient(1100px 620px at 50% 112%, rgba(255, 179, 90, 0.16), transparent 55%),
    radial-gradient(1000px 700px at 82% -8%, rgba(138, 168, 255, 0.16), transparent 60%),
    linear-gradient(168deg, #0a1226 0%, #0e1a36 45%, #16264a 78%, #1d3057 100%);
  opacity: 0;
}
#desktop.theme-snow #wallpaper-day,
#desktop.theme-snow #wallpaper-night,
#desktop.theme-snow #wallpaper-sunset { opacity: 0; }
#desktop.theme-snow #wallpaper-snow { opacity: 1; }

#desktop.theme-night #wallpaper-day { opacity: 0; }
#desktop.theme-night #wallpaper-night { opacity: 1; }
#desktop.theme-dusk #wallpaper-day { opacity: 0; }
#desktop.theme-dusk #wallpaper-sunset { opacity: 1; }
#desktop.egg-shown #wallpaper-day,
#desktop.egg-shown #wallpaper-night { opacity: 0; }
#desktop.egg-shown #wallpaper-sunset { opacity: 1; }

/* 星座连线装饰 */
#constellation {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}
#constellation .cl-group path { stroke: rgba(255, 255, 255, 0.26); fill: none; }
#constellation .cl-group circle { fill: rgba(255, 255, 255, 0.55); }
#desktop.theme-night #constellation .cl-group path { stroke: rgba(245, 240, 230, 0.14); }
#desktop.theme-night #constellation .cl-group circle { fill: rgba(245, 240, 230, 0.4); }
#desktop.egg-shown #constellation .cl-group path, #desktop.theme-dusk #constellation .cl-group path { stroke: rgba(28, 36, 64, 0.12); }
#desktop.egg-shown #constellation .cl-group circle, #desktop.theme-dusk #constellation .cl-group circle { fill: rgba(28, 36, 64, 0.28); }

/* 角落柔光晕 */
.glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 1; transition: opacity 2.4s ease; }
.glow-tr {
  top: -18vmin; right: -14vmin; width: 52vmin; height: 52vmin;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 65%);
}
.glow-bl {
  bottom: -20vmin; left: -12vmin; width: 56vmin; height: 56vmin;
  background: radial-gradient(circle, rgba(242, 201, 107, 0.25), transparent 65%);
}
#desktop.theme-night .glow-tr { background: radial-gradient(circle, rgba(242, 201, 107, 0.14), transparent 65%); }
#desktop.theme-night .glow-bl { background: radial-gradient(circle, rgba(91, 143, 201, 0.18), transparent 65%); }
#desktop.egg-shown .glow-tr, #desktop.theme-dusk .glow-tr { background: radial-gradient(circle, rgba(255,255,255,.5), transparent 65%); }
#desktop.egg-shown .glow-bl, #desktop.theme-dusk .glow-bl { background: radial-gradient(circle, rgba(232,149,109,.3), transparent 65%); }

/* 日落彩蛋光晕 */
#sunset-glow {
  position: absolute; left: 50%; bottom: -18%;
  width: 60vmin; height: 60vmin; z-index: 1;
  transform: translateX(-50%) scale(0.4);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 201, 107, 0.7) 0%, rgba(232, 149, 109, 0.3) 45%, transparent 70%);
  opacity: 0; pointer-events: none;
  transition: opacity 3s ease, transform 3.4s ease;
}
/* 黄昏 / 日落彩蛋：底部暖日光晕 */
#desktop.egg-shown #sunset-glow, #desktop.theme-dusk #sunset-glow { opacity: 0.9; transform: translateX(-50%) scale(1); }

#stars, #dust { position: absolute; inset: 0; width: 100%; height: 100%; }
#stars { z-index: 1; }
#dust { z-index: 60; pointer-events: none; }
/* 沉浸动态 Shader 背景：在 3D 星球之下，全屏不拦截点击 */
#fx-bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: none;
  opacity: 0;
  transition: opacity 0.7s ease;
}
#fx-bg.on {
  display: block;
  opacity: 1;
}
/* Shader 开启时：平面壁纸/装饰淡出，避免抢戏；文件夹与 Dock 不受影响 */
body.shader-bg-on #desktop .wallpaper,
body.shader-bg-on #desktop #constellation,
body.shader-bg-on #desktop .glow,
body.shader-bg-on #desktop .planet-aura {
  opacity: 0 !important;
  transition: opacity 0.6s ease;
}

/* 3D 天空世界画布：body 级固定层（登录页与桌面共用），在平面壁纸之上、桌面内容之下 */
#planet3d {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none; display: none;
}


#desktop-click-zone { position: absolute; inset: 0; z-index: 2; top: 32px; bottom: 0; touch-action: none; /* 触屏拖拽旋转星球不滚屏 */ }

/* ============================================================
 * 桌面图标（主要入口）
 * ============================================================ */

#desktop-icons {
  position: absolute; top: 48px; right: 14px; z-index: 3;
  /* 真实桌面行为：自上而下排满一列后，自动往左换新的一列，永不溢出屏幕 */
  display: flex; flex-direction: column; flex-wrap: wrap-reverse;
  align-content: flex-start; gap: 12px;
  max-height: calc(100vh - 52px - 96px);
  padding: 6px;
  border-radius: 20px;
  /* 极轻微的局部自适应环境背光：确保 3D 星球旋转至任何角度时图标与文字都清晰 */
  background: radial-gradient(ellipse at 85% 20%, rgba(12, 18, 36, 0.28) 0%, rgba(12, 18, 36, 0.12) 55%, transparent 85%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.dicon, .dapp {
  width: 88px; padding: 8px 4px 7px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  cursor: pointer; border-radius: var(--r-card);
  transition: background 0.18s ease;
}
.dicon:hover, .dapp:hover { background: rgba(245, 240, 230, 0.08); }
.dicon.selected, .dapp.selected { background: rgba(245, 240, 230, 0.14); }
/* 活的文件夹：纸感轮廓（标签页与包身一笔连成）+ 内容小卡片从翻盖后偷看，
 * 悬停时翻盖掀开、卡片扇形起身——对齐 portfolio-site-template 的文件夹语言。
 * 阴影叠三层而不是单层：紧贴的落座影、中距离的形体影、大范围的漫射影，
 * 每层都很淡，合起来才读作「光」，单层加深只会像贴了张黑贴纸 */
.dfolder {
  position: relative;
  width: 60px; height: 52px;
  perspective: 340px;
  /* 每只文件夹一个按序号决定的静态倾角（--ftilt 来自图标元素），hover 回正 */
  transform: rotate(var(--ftilt, 0deg));
  transition: transform 0.18s var(--ease-out), filter 0.22s ease;
  filter: drop-shadow(0 1px 2px rgba(10, 21, 48, 0.12))
          drop-shadow(0 5px 12px rgba(10, 21, 48, 0.20));
}
.dicon:hover .dfolder { transform: rotate(0deg) translateY(-3px) scale(1.05); }
/* 选中态：柔和光圈 */
.dicon.selected .dfolder {
  transform: rotate(0deg) translateY(-2px);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.85))
          drop-shadow(0 1px 2px rgba(10, 21, 48, 0.12))
          drop-shadow(0 5px 12px rgba(10, 21, 48, 0.20));
}
/* 按压回馈：只在有精确指针时「按得下去」 */
@media (hover: hover) and (pointer: fine) {
  .dicon:active .dfolder { transform: rotate(0deg) translateY(-1px) scale(0.96); }
  .dapp:active .dtile { transform: translateY(-1px) scale(0.94); }
}
.df-back { position: absolute; inset: 0; width: 100%; height: 100%; }
.df-fill { fill: var(--tile, var(--gold)); }
.df-line { fill: none; stroke: rgba(28, 36, 64, 0.26); stroke-width: 1.2; }
/* 夜与雪夜：包身压进夜色，墨色线条换成星金 */
.df-night { fill: rgba(15, 31, 66, 0.5); display: none; }
#desktop.theme-night .df-night { display: block; }
#desktop.theme-night .df-line { stroke: rgba(242, 201, 107, 0.30); }

/* 内容小卡片：平时只从翻盖后探出一点头，悬停扇形起身。
 * 卡身大部分藏在翻盖后——翻盖是毛玻璃，隔着玻璃能看见里面内容的颜色，
 * 一眼就知道这个文件夹里装着什么 */
.df-cards { position: absolute; inset: 0; z-index: 1; }
.df-card {
  position: absolute; left: 50%; top: 7%;
  width: 50%; margin-left: -25%;
  aspect-ratio: 3 / 4;
  border-radius: 3px;
  background-color: #fbf7ee;
  background-image: var(--noise-paper);
  border: 0.5px solid rgba(28, 36, 64, 0.14);
  box-shadow: 0 2px 5px rgba(10, 21, 48, 0.14);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-deep);
  transform-origin: 50% 92%;
  transition: transform 0.36s var(--ease-spring);
  transition-delay: calc(var(--d, 0) * 30ms);
}
.df-card svg { width: 48%; height: 48%; }
.dicon:hover .df-card,
.dicon:focus-visible .df-card {
  transform: translateY(var(--lift, -44%)) translateX(calc(var(--off, 0) * 20%)) rotate(var(--tilt, 0deg));
}
/* 夜里换成深色纸 */
#desktop.theme-night .df-card {
  background-color: #17233f;
  background-image: var(--noise-dark);
  border-color: rgba(242, 201, 107, 0.22);
  color: var(--gold);
}

/* 翻盖：毛玻璃——薄薄的白 tint + 强模糊，背后包身的颜色与内容卡片
 * 透成一片柔和的色晕（对齐 portfolio-site-template 的 flap 语言）。
 * 圆角用百分比——轮廓是 SVG 单位随尺寸缩放，固定 rem 圆角只在某一个尺寸下对得上 */
.df-flap {
  position: absolute; left: 0; right: 0; top: 20%; bottom: 0; z-index: 2;
  border-radius: 10% / 15%;
  /* 薄薄的白 tint 即可：奶度压低，让包身颜色透出来（对光读得出文件夹本色） */
  background: linear-gradient(rgb(255 255 255 / 0.38), rgb(255 255 255 / 0.24));
  backdrop-filter: blur(7px) saturate(185%);
  -webkit-backdrop-filter: blur(7px) saturate(185%);
  box-shadow: 0 -2px 6px -1px rgba(10, 21, 48, 0.10), inset 0 0 0 0.5px rgba(255, 255, 255, 0.6);
  transform-origin: bottom center;
  transition: transform 0.34s var(--ease-spring);
}
.dicon:hover .df-flap,
.dicon:focus-visible .df-flap { transform: rotateX(-46deg); }
#desktop.theme-night .df-flap {
  background: linear-gradient(rgb(15 31 66 / 0.34), rgb(15 31 66 / 0.44));
  backdrop-filter: blur(7px) saturate(140%);
  -webkit-backdrop-filter: blur(7px) saturate(140%);
  box-shadow: 0 -2px 6px -1px rgba(0, 0, 0, 0.28), inset 0 0 0 0.5px rgba(242, 201, 107, 0.22);
}
.dicon-label, .dapp-label {
  font-size: 12px; letter-spacing: 0.06em; font-weight: 500;
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 10px rgba(10, 21, 48, 0.95);
  padding: 2px 8px; border-radius: 7px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease, text-shadow 0.16s ease;
}
.dicon:hover .dicon-label, .dapp:hover .dapp-label {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 12px rgba(242, 201, 107, 0.45);
}
.dicon.selected .dicon-label, .dapp.selected .dapp-label { background: rgba(255, 255, 255, 0.92); color: var(--ink); text-shadow: none; }

/* 文件夹正面大徽记：坐在翻盖中央，与纸感包身形成对照（不再是角落小徽章） */
.df-face {
  position: absolute;
  left: 50%; top: 52%;
  width: 34px; height: 34px;
  margin-left: -17px; margin-top: -17px;
  z-index: 4;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transition: transform 0.34s var(--ease-spring, cubic-bezier(.2,.8,.2,1)),
              filter 0.28s ease;
}
.df-face-core {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  border-radius: 32%;
  display: flex; align-items: center; justify-content: center;
  /* 瓷贴感：亮面 + 文件夹本色，与包身同色系对照 */
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--tile, #f2c96b) 42%, #fff) 0%,
    var(--tile, #f2c96b) 55%,
    color-mix(in srgb, var(--tile, #f2c96b) 72%, #1c2440) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1.5px 3px rgba(28, 36, 64, 0.16),
    0 2px 6px rgba(10, 21, 48, 0.22),
    0 0 0 0.5px rgba(28, 36, 64, 0.12);
  color: rgba(255, 255, 255, 0.96);
  transition: transform 0.34s var(--ease-spring, cubic-bezier(.2,.8,.2,1)),
              box-shadow 0.28s ease;
}
.df-face-core svg { width: 58%; height: 58%; display: block; }
/* 轨道光环：悬停时缓缓旋转 */
.df-orbit {
  position: absolute; inset: -5px; z-index: 1;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tile, #f2c96b) 28%, transparent);
  opacity: 0;
  transform: rotate(-12deg) scale(0.86);
  transition: opacity 0.28s ease, transform 0.34s var(--ease-spring, cubic-bezier(.2,.8,.2,1));
}
/* 星屑：悬停闪出 */
.df-spark {
  position: absolute; z-index: 3;
  width: 3px; height: 3px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
  opacity: 0;
  pointer-events: none;
}
.df-spark.s1 { top: 2px; right: 0; }
.df-spark.s2 { bottom: 4px; left: 0; }
.df-spark.s3 { top: 40%; right: -4px; }
/* 有正面徽记时，内容小卡退为背景细节，避免抢戏 */
.dfolder.has-face .df-cards { opacity: 0.42; }
.dicon:hover .dfolder.has-face .df-cards { opacity: 0.72; }
/* 悬停：徽记抬升放大 + 光晕 + 轨道转 + 星屑飘 */
.dicon:hover .df-face,
.dicon:focus-visible .df-face {
  transform: translateY(-6px) scale(1.12);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--tile, #f2c96b) 55%, transparent));
}
.dicon:hover .df-face-core,
.dicon:focus-visible .df-face-core {
  transform: rotate(-4deg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1.5px 3px rgba(28, 36, 64, 0.14),
    0 4px 12px rgba(10, 21, 48, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.35),
    0 0 16px color-mix(in srgb, var(--tile, #f2c96b) 45%, transparent);
}
.dicon:hover .df-face-core svg,
.dicon:focus-visible .df-face-core svg {
  animation: df-glyph-bob 1.1s ease-in-out infinite;
}
.dicon:hover .df-orbit,
.dicon:focus-visible .df-orbit {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  animation: df-orbit-spin 3.6s linear infinite;
}
.dicon:hover .df-spark,
.dicon:focus-visible .df-spark {
  animation: df-spark-pop 1.2s ease-in-out infinite;
}
.dicon:hover .df-spark.s2 { animation-delay: 0.25s; }
.dicon:hover .df-spark.s3 { animation-delay: 0.5s; }

@keyframes df-glyph-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}
@keyframes df-orbit-spin {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1); }
}
@keyframes df-spark-pop {
  0%, 100% { opacity: 0; transform: scale(0.4) translateY(0); }
  40% { opacity: 1; transform: scale(1) translateY(-3px); }
  70% { opacity: 0.4; transform: scale(0.7) translateY(-6px); }
}

/* 夜与雪夜：徽记换成深色底 + 星金描边感 */
#desktop.theme-night .df-face-core {
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--tile, #f2c96b) 28%, #1d2b4d) 0%,
    color-mix(in srgb, var(--tile, #f2c96b) 18%, #14213e) 100%);
  color: var(--gold, #f2c96b);
  box-shadow:
    inset 0 1px 0 rgba(242, 201, 107, 0.18),
    inset 0 -1.5px 3px rgba(0, 0, 0, 0.28),
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 0 0 0.5px rgba(242, 201, 107, 0.22);
}
#desktop.theme-night .df-orbit {
  border-color: rgba(242, 201, 107, 0.45);
  box-shadow: 0 0 0 3px rgba(242, 201, 107, 0.12);
}

/* 兼容旧 .df-badge（若某处仍引用不报错） */
.df-badge { display: none; }

/* ============================================================
 * 桌面应用瓷贴（squircle 渐变 + 手绘线条图标，与纸感文件夹区分）
 * ============================================================ */

.dtile {
  width: 52px; height: 52px;
  border-radius: 26%;
  position: relative; /* 夜色遮罩 ::before 的定位基准 */
  display: flex; align-items: center; justify-content: center;
  /* 三段渐变：顶部受光偏亮，中段饱和本色，底部稍沉——渐变档由 JS 按 tint 调好下发 */
  background: linear-gradient(160deg, var(--tint-hi, #f3e2b6) 0%, var(--tint, #EAC97E) 56%, var(--tint-lo, #c99f57) 100%);
  /* 细边 + 双层外阴影：让瓷贴从天空背景里「立」起来 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
              inset 0 -1.5px 3px rgba(28, 36, 64, 0.14),
              inset 0 0 0 0.5px rgba(255, 255, 255, 0.4),
              0 1.5px 3px rgba(10, 21, 48, 0.16),
              0 7px 16px rgba(10, 21, 48, 0.26),
              0 0 0 0.5px rgba(10, 21, 48, 0.10);
  color: rgba(255, 255, 255, 0.96);
  transition: transform 0.18s var(--ease-out), box-shadow 0.22s ease, filter 0.22s ease, color 0.8s ease;
}
/* 夜色遮罩：主题切换时 background-image 渐变无法过渡，
 * 改为盖一层夜色渐变 ::before，用 opacity 0.8s 淡入淡出（与菜单栏过渡节奏对齐） */
.dtile::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, var(--tint-n1, #39416a) 0%, var(--tint-n2, #232c4e) 56%, #101f40 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
/* 图形压在遮罩之上，只让底色入夜 */
.dtile svg { width: 56%; height: 56%; position: relative; z-index: 1; transition: transform 0.34s var(--ease-spring, cubic-bezier(.2,.8,.2,1)); }
.dapp:hover .dtile {
  transform: translateY(-4px) scale(1.06);
  filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7),
              inset 0 -1.5px 3px rgba(28, 36, 64, 0.14),
              inset 0 0 0 0.5px rgba(255, 255, 255, 0.45),
              0 4px 10px rgba(10, 21, 48, 0.22),
              0 12px 22px rgba(10, 21, 48, 0.28),
              0 0 18px color-mix(in srgb, var(--tint, #EAC97E) 35%, transparent);
}
.dapp:hover .dtile svg {
  animation: df-glyph-bob 1.1s ease-in-out infinite;
}
/* 选中态：柔和光圈（与文件夹同一语言） */
.dapp.selected .dtile {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
              inset 0 -1.5px 3px rgba(28, 36, 64, 0.14),
              inset 0 0 0 0.5px rgba(255, 255, 255, 0.4),
              0 0 6px rgba(255, 255, 255, 0.9),
              0 1.5px 3px rgba(10, 21, 48, 0.16),
              0 7px 16px rgba(10, 21, 48, 0.26);
}
/* 夜与雪夜：瓷贴整体压进夜色（渐变档由 JS 预调），线条换成星金，轮廓保持清晰。
 * 底色渐变不动，夜色由 ::before 遮罩淡入（见上），这里只调阴影与线条色 */
#desktop.theme-night .dtile {
  box-shadow: inset 0 1px 0 rgba(242, 201, 107, 0.28),
              inset 0 -1.5px 3px rgba(0, 0, 0, 0.3),
              inset 0 0 0 0.5px rgba(242, 201, 107, 0.22),
              0 1.5px 3px rgba(0, 0, 0, 0.32),
              0 7px 16px rgba(0, 0, 0, 0.4),
              0 0 0 0.5px rgba(242, 201, 107, 0.16);
  color: rgba(242, 201, 107, 0.95);
}
#desktop.theme-night .dtile::before { opacity: 1; }

/* ============================================================
 * 菜单栏 + Apple 菜单
 * ============================================================ */

#menubar {
  position: absolute; top: 0; left: 0; right: 0; height: 32px; z-index: 70;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  font-size: 12.5px;
  /* 默认：适配亮蓝主题的奶白玻璃 */
  background: rgba(250, 246, 238, 0.55);
  color: var(--ink);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 1px solid rgba(28, 36, 64, 0.08);
  transition: background 0.8s ease, color 0.8s ease;
}
#desktop.theme-night #menubar {
  background: rgba(15, 31, 66, 0.5);
  color: var(--paper);
  border-bottom-color: rgba(245, 240, 230, 0.08);
}
#desktop.egg-shown #menubar, #desktop.theme-dusk #menubar {
  background: rgba(250, 246, 238, 0.55);
  color: var(--ink);
  border-bottom-color: rgba(28, 36, 64, 0.08);
}
.menubar-left, .menubar-right { display: flex; align-items: center; gap: 12px; }

#menubar-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 10px; margin-left: -8px;
  border-radius: 8px;
  transition: background 0.15s;
}
#menubar-brand:hover, #menubar-brand.open { background: rgba(28, 36, 64, 0.1); }
#desktop.theme-night #menubar-brand:hover, #desktop.theme-night #menubar-brand.open { background: rgba(245, 240, 230, 0.14); }
#menubar-logo { display: flex; color: var(--gold-deep); }
#desktop.theme-night #menubar-logo { color: var(--gold); }
#menubar-logo svg { width: 15px; height: 15px; }
#menubar-title { font-weight: 600; letter-spacing: 0.08em; }

/* Apple 菜单下拉 */
#apple-menu {
  position: absolute; top: 34px; left: 8px;
  min-width: 208px;
  padding: 7px;
  border-radius: var(--r-card);
  background: rgba(250, 246, 238, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(28, 36, 64, 0.08);
  box-shadow: var(--shadow-win);
  color: var(--ink);
  animation: menuIn 0.18s ease;
  z-index: 80;
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.am-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 7px 10px; border-radius: 9px;
  font-size: 12.5px; letter-spacing: 0.05em;
  transition: background 0.12s;
}
.am-item:hover { background: rgba(242, 201, 107, 0.35); }
.am-item svg { width: 15px; height: 15px; color: var(--gold-deep); flex: none; }
.am-sep { height: 1px; margin: 6px 8px; background: rgba(28, 36, 64, 0.1); }
.am-note { padding: 6px 10px 4px; font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-faint); }

#sunset-hint { display: flex; color: var(--orange); animation: hintFloat 3s ease-in-out infinite; }
#sunset-hint svg { width: 15px; height: 15px; }

#poetic-clock {
  font-family: var(--serif);
  font-size: 12px; letter-spacing: 0.08em;
  cursor: default;
}
.menubar-icon { display: flex; opacity: 0.85; padding: 2px; border-radius: 5px; }
.menubar-icon svg { width: 16px; height: 16px; }
button.menubar-icon:hover { background: rgba(28, 36, 64, 0.1); }
#desktop.theme-night button.menubar-icon:hover { background: rgba(245, 240, 230, 0.14); }
.menubar-icon.deco { opacity: 0.6; cursor: default; }
#theme-toggle { color: var(--gold-deep); }

/* ============================================================
 * 任务栏（Dock）：固定项 + 当前打开的窗口
 * ============================================================ */

#dock {
  position: absolute; left: 0; right: 0; bottom: calc(10px + var(--sb)); z-index: 70;
  display: flex; justify-content: center;
  pointer-events: none;
}
#dock-inner {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 12px;
  border-radius: 22px;
  /* 默认：奶白玻璃 */
  background: rgba(250, 246, 238, 0.6);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(28, 36, 64, 0.08);
  box-shadow: 0 16px 46px rgba(10, 21, 48, 0.35);
  pointer-events: auto;
  max-width: 96vw;
  transition: background 0.8s ease;
}
#desktop.theme-night #dock-inner {
  background: rgba(15, 31, 66, 0.52);
  border-color: rgba(245, 240, 230, 0.1);
}
#desktop.egg-shown #dock-inner, #desktop.theme-dusk #dock-inner {
  background: rgba(250, 246, 238, 0.6);
  border-color: rgba(28, 36, 64, 0.08);
}
#dock-pinned, #dock-running { display: flex; align-items: center; gap: 5px; }
#dock-running:empty { display: none; }
.dock-divider { width: 1px; height: 34px; margin: 0 5px; background: rgba(28, 36, 64, 0.14); }
#desktop.theme-night .dock-divider { background: rgba(245, 240, 230, 0.16); }

.dock-item {
  position: relative;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
}
.dock-icon {
  width: 42px; height: 42px;
  border-radius: 27%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, rgba(28, 36, 64, 0.1), rgba(28, 36, 64, 0.04));
  border: 1px solid rgba(28, 36, 64, 0.12);
  color: var(--gold-deep);
  transition: transform 0.18s cubic-bezier(0.3, 1.5, 0.5, 1), background 0.15s;
}
#desktop.theme-night .dock-icon {
  background: linear-gradient(160deg, rgba(245, 240, 230, 0.15), rgba(245, 240, 230, 0.05));
  border-color: rgba(245, 240, 230, 0.13);
  color: var(--gold);
}
.dock-icon svg { width: 58%; height: 58%; }
.dock-item:hover .dock-icon { transform: translateY(-5px) scale(1.1); }
/* 激活（前台）窗口 */
.dock-item.active .dock-icon {
  background: rgba(242, 201, 107, 0.28);
  border-color: rgba(242, 201, 107, 0.5);
}
/* 运行指示点 */
.dock-item.running::after {
  content: ''; position: absolute; bottom: -2px; left: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  transform: translateX(-50%);
  background: var(--gold-deep);
  box-shadow: 0 0 6px rgba(185, 138, 47, 0.8);
}
#desktop.theme-night .dock-item.running::after { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
/* 多实例数量徽标 */
.dock-count {
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--ink);
  font-size: 10px; font-weight: 700; line-height: 16px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(10, 21, 48, 0.3);
}
.dock-item.minimized .dock-icon { opacity: 0.55; }
.dock-item .dock-tip {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px 10px; border-radius: 8px;
  background: rgba(15, 31, 66, 0.9);
  border: 1px solid rgba(245, 240, 230, 0.12);
  color: var(--paper);
  font-size: 11.5px; letter-spacing: 0.1em; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.dock-item:hover .dock-tip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
 * 窗口：奶白纸感（终端保留深色）
 * ============================================================ */

.window {
  position: absolute;
  min-width: 320px; min-height: 220px;
  border-radius: var(--r-window);
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  background-image: var(--noise-paper);
  color: var(--ink);
  border: 0.5px solid rgba(28, 36, 64, 0.12);
  box-shadow: 0 12px 34px rgba(10, 21, 48, 0.22), 0 2px 6px rgba(0, 0, 0, 0.06);
  z-index: 10;
  opacity: 0.94;
  transition: opacity 0.2s ease, box-shadow 0.24s ease, border-color 0.24s ease;
  animation: winIn 0.36s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
/* 开窗/关窗动画：窗口用 left/top 定位，transform 仅供拖拽位移，
 * 动画里只动 opacity + scale + translateY，不与定位冲突 */
@keyframes winIn {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { transform: none; }
}
@keyframes winOut {
  from { transform: none; }
  to   { opacity: 0; transform: scale(0.92) translateY(10px); }
}
.window.closing { animation: winOut 0.18s ease-in forwards; }
/* 拖拽/缩放交互期（body.win-interacting）：屏蔽窗口内容与 iframe 命中
 *（iframe 会吞 pointermove，是拖拽卡顿的主因），并关掉过渡避免阴影重算 */
body.win-interacting .win-body,
body.win-interacting .window iframe { pointer-events: none !important; }
body.win-interacting #windows * { transition: none !important; }
/* 中低画质 / 移动端（body.no-blur，由 planet3d 按画质档切换）：
 * 摘掉所有常驻毛玻璃——它们叠在每帧都在动的 3D 画布上，浏览器要逐帧重采样模糊，
 * 是中低端设备持续 GPU 税的大头。面板底色各自保留，主要面板加深底色保证可读 */
body.no-blur * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.no-blur #menubar { background: rgba(250, 246, 238, 0.82); }
body.no-blur #desktop.theme-night #menubar { background: rgba(15, 31, 66, 0.85); }
body.no-blur #dock-inner { background: rgba(250, 246, 238, 0.82); }
body.no-blur #desktop.theme-night #dock-inner { background: rgba(15, 31, 66, 0.85); }
.window.focused {
  opacity: 1;
  border-color: rgba(185, 138, 47, 0.45);
  box-shadow: 0 24px 64px rgba(10, 21, 48, 0.38), 0 2px 10px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(242, 201, 107, 0.3);
}
.window:not(.focused) .win-titlebar {
  opacity: 0.82;
}

/* 深色窗口（终端专用） */
.window.dark {
  background: rgba(18, 26, 54, 0.88);
  background-image: var(--noise-dark);
  color: var(--paper);
  border-color: rgba(245, 240, 230, 0.12);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.window.dark .win-title { color: rgba(245, 240, 230, 0.75); }
.window.dark .win-titlebar { border-bottom-color: rgba(245, 240, 230, 0.08); background: rgba(245, 240, 230, 0.04); }

.win-titlebar {
  height: 40px; flex: none;
  display: flex; align-items: center;
  padding: 0 12px;
  cursor: grab;
  border-bottom: 1px solid rgba(28, 36, 64, 0.07);
  background: rgba(255, 255, 255, 0.4);
}
.win-titlebar:active { cursor: grabbing; }
.win-traffic { display: flex; gap: 8px; }
.traffic-btn {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  transition: filter 0.15s, transform 0.15s;
  position: relative;
}
.traffic-btn:hover { filter: brightness(1.08); transform: scale(1.2); }
.traffic-close { background: #ec7d6b; }
.traffic-min { background: #f2c96b; }
.traffic-max { background: #82c98d; }
.traffic-btn svg {
  position: absolute; inset: 1.5px; width: 7px; height: 7px;
  stroke: rgba(0, 0, 0, 0.5); opacity: 0;
}
.traffic-btn:hover svg { opacity: 1; }

.win-title {
  flex: 1; text-align: center;
  font-size: 12.5px; letter-spacing: 0.14em;
  color: var(--ink-soft);
  pointer-events: none;
  padding-right: 52px;
}
.win-body {
  flex: 1; overflow: auto;
  position: relative;
  user-select: text;
  scrollbar-width: thin;
  scrollbar-color: rgba(185, 138, 47, 0.35) transparent;
}
.win-body::-webkit-scrollbar { width: 8px; height: 8px; }
.win-body::-webkit-scrollbar-thumb { background: rgba(185, 138, 47, 0.3); border-radius: 4px; }
.win-body::-webkit-scrollbar-track { background: transparent; }

.win-resize {
  position: absolute; right: 0; bottom: 0;
  width: 18px; height: 18px;
  cursor: nwse-resize; z-index: 5;
}
.win-resize::after {
  content: ''; position: absolute; right: 4px; bottom: 4px;
  width: 8px; height: 8px;
  border-right: 2px solid rgba(28, 36, 64, 0.22);
  border-bottom: 2px solid rgba(28, 36, 64, 0.22);
  border-radius: 1px;
}

/* ============================================================
 * 应用：访达（奶白）
 * ============================================================ */

.finder { display: flex; height: 100%; }
.finder-side {
  width: 152px; flex: none;
  padding: 12px 8px;
  border-right: 1px solid rgba(28, 36, 64, 0.07);
  background: var(--paper-2);
  display: flex; flex-direction: column; gap: 2px;
}
.finder-side-title {
  font-size: 10.5px; letter-spacing: 0.22em;
  color: var(--ink-faint);
  padding: 4px 10px 8px;
}
.finder-side-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 9px;
  font-size: 12.5px; cursor: pointer;
  color: var(--ink-soft);
  transition: background 0.13s;
}
.finder-side-item .side-dot { width: 8px; height: 8px; border-radius: 3px; background: var(--dot, var(--gold)); flex: none; }
.finder-side-item:hover { background: rgba(28, 36, 64, 0.05); }
.finder-side-item.active { background: rgba(242, 201, 107, 0.35); color: var(--ink); font-weight: 600; }
.finder-main { flex: 1; padding: 20px; overflow: auto; }
.finder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px 14px;
}
.finder-entry {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer; padding: 8px 6px; border-radius: var(--r-card);
  text-align: center;
  transition: background 0.13s;
  /* 进入文件夹时条目依次落位（瀑布式入场），像卡片被一张张摆进格子 */
  animation: entryIn 0.5s var(--ease-out) backwards;
  animation-delay: calc(var(--ei, 0) * 26ms);
}
@keyframes entryIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
}
.finder-entry:hover { background: rgba(28, 36, 64, 0.04); }
.finder-entry:focus-visible { outline: 2px solid rgba(242, 201, 107, 0.8); outline-offset: -2px; }
.finder-entry .entry-name { font-size: 11.5px; line-height: 1.5; color: var(--ink); word-break: break-all; }
.finder-entry .entry-desc { font-size: 10px; color: var(--ink-faint); }

/* 条目卡片：还没打开就能看见里面大概是什么——
 * 文稿是微型手稿、图片是白框缩略图、链接是书签卡、应用端坐图标。
 * 和大屏舞台上的卡是同一件东西，只是一个在格子里、一个在聚光灯下 */
.fcard {
  width: 100%; aspect-ratio: 10 / 8; border-radius: 10px;
  background: #fff; overflow: hidden; position: relative;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.05), 0 2px 6px rgb(10 21 48 / 0.10), 0 10px 22px rgb(10 21 48 / 0.08);
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s ease;
}
.finder-entry:hover .fcard {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.05), 0 6px 14px rgb(10 21 48 / 0.16), 0 18px 34px rgb(10 21 48 / 0.12);
}
@media (hover: hover) and (pointer: fine) {
  .finder-entry:active .fcard { transform: translateY(-1px) scale(0.98); }
}
.fcard-note { padding: 10px 12px; text-align: left; }
.fp-t { font-size: 11px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.fp-l {
  margin-top: 6px; font-size: 8.5px; line-height: 1.65; color: rgba(28, 36, 64, 0.55);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fcard-photo { padding: 5px; }
.fcard-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.fcard-glyph, .fcard-app, .fcard-star { display: flex; align-items: center; justify-content: center; }
.fcard-glyph svg, .fcard-app svg { width: 42px; height: 42px; color: var(--gold-deep); }
.fcard-star { font-size: 30px; color: var(--gold); }
.fcard-link { text-align: left; }
.fcard-link .fcard-link-txt { padding: 10px 12px; }
.fp-tag {
  display: inline-block; font-size: 8.5px; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(242, 201, 107, 0.22); color: var(--gold-deep);
}
.fcard-link .fp-t { margin-top: 7px; }
.fcard-link .fp-l { -webkit-line-clamp: 2; }
/* 子文件夹：一只小小的彩色文件夹，角标件数 */
/* 访达子文件夹：正面大徽记（与桌面 df-face 对照） */
.fcard-folder.has-face { position: relative; }
.fcard-folder .fc-face {
  position: relative; z-index: 2;
  width: 48px; height: 48px; border-radius: 30%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--tile, #f2c96b) 42%, #fff) 0%,
    var(--tile, #f2c96b) 55%,
    color-mix(in srgb, var(--tile, #f2c96b) 72%, #1c2440) 100%);
  color: rgba(255,255,255,.96);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 10px rgba(10,21,48,.2);
  transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.fcard-folder .fc-face svg { width: 58%; height: 58%; color: inherit; }
.finder-entry:hover .fcard-folder .fc-face {
  transform: translateY(-4px) scale(1.08) rotate(-4deg);
  box-shadow: 0 8px 18px rgba(10,21,48,.28), 0 0 16px color-mix(in srgb, var(--tile, #f2c96b) 40%, transparent);
}
.finder-grid.view-sm .fcard-folder .fc-face { width: 32px; height: 32px; }
.finder-grid.view-list .fcard-folder .fc-face { width: 28px; height: 28px; border-radius: 26%; }

.fcard-folder {
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.28)),
    var(--noise-paper),
    var(--tile, var(--gold));
}
.fcard-folder svg { width: 46px; height: 46px; color: rgba(28, 36, 64, 0.72); }
.fc-count {
  position: absolute; right: 8px; bottom: 6px;
  font-size: 9px; letter-spacing: 0.04em; color: rgba(28, 36, 64, 0.55);
}
/* 封面卡：管理员设计的封面就是这件内容的脸 */
.fcard-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fc-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 8px 6px; text-align: center;
  font-size: 10px; color: #fff;
  background: linear-gradient(rgba(10, 21, 48, 0), rgba(10, 21, 48, 0.68));
}
/* 磨砂深色窗口里，白卡更跳，文字颜色随窗体走 */
#desktop.frosted .finder-entry .entry-name { color: rgba(245, 240, 230, 0.92); }

/* 访达工具条：面包屑 + 搜索（文件再多也找得到） */
.finder-tools {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
/* 影视库式多维筛选条 —— 默认收起，点「筛选」按钮才展开 */
.ffilter-toggle {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; font-size: 11.5px; line-height: 1;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid rgba(28, 36, 64, 0.12);
  background: rgba(255, 255, 255, 0.55); color: var(--ink);
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.ffilter-toggle svg { width: 14px; height: 14px; }
.ffilter-toggle:hover { transform: translateY(-1px); border-color: rgba(242, 201, 107, 0.7); }
.ffilter-toggle.on { background: rgba(242, 201, 107, 0.32); border-color: rgba(242, 201, 107, 0.85); font-weight: 600; }
.ff-badge { font-style: normal; font-size: 10px; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(242, 201, 107, 0.92); color: #3a2a10; font-weight: 700; }
.finder-filters { display: flex; flex-direction: column; gap: 8px;
  max-height: 0; overflow: hidden; opacity: 0; margin-bottom: 0; pointer-events: none;
  transition: max-height .3s ease, opacity .22s ease, margin-bottom .3s ease; }
.finder-filters.open { max-height: 46vh; overflow-y: auto; opacity: 1; margin-bottom: 14px; pointer-events: auto; }
.ffilter-row { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.ffilter-row.tagrow { padding-left: 2px; }
.ffilter-label { font-size: 11px; color: var(--ink-faint); margin-right: 2px; }
/* 分组行标签：像影视分类页的「题材 / 年代」，细细的灰色小字 */
.ffilter-label.sub {
  min-width: 44px; opacity: .75; letter-spacing: .12em;
  font-size: 10.5px; flex: none; align-self: baseline; padding-top: 5px;
}
.ffilter-count { font-size: 10.5px; letter-spacing: .04em; color: var(--ink-faint); margin-left: auto; }

/* 分段胶囊：当前文件夹 / 整台电脑、同时满足 / 任一即可 */
.fseg {
  flex: none; display: inline-flex; padding: 2px; border-radius: 999px;
  background: rgba(28, 36, 64, 0.06);
}
.fseg-btn {
  cursor: pointer; font-size: 11px; line-height: 1; letter-spacing: .02em;
  padding: 5px 12px; border-radius: 999px; border: none; background: none;
  color: var(--ink-faint);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.fseg-btn:hover { color: var(--ink); }
.fseg-btn.on {
  background: #fff; color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 4px rgba(10, 21, 48, 0.12);
}
.fseg-mini .fseg-btn { padding: 4px 10px; font-size: 10.5px; }

/* 幽灵下拉：排序 / 标签排列，只留文字和一枚小箭头 */
.fghost {
  position: relative; display: inline-flex; align-items: center; flex: none;
  color: var(--ink-faint); cursor: pointer;
}
.fghost .fsort {
  appearance: none; -webkit-appearance: none;
  font-size: 11px; padding: 5px 18px 5px 2px; border: none; background: none;
  color: inherit; outline: none; cursor: pointer; letter-spacing: .02em;
}
.fghost svg {
  position: absolute; right: 0; width: 11px; height: 11px; pointer-events: none;
  opacity: .6; transition: transform .18s ease;
}
.fghost:hover { color: var(--ink); }
.fghost:hover svg { transform: translateY(1px); }

/* 清除筛选：一行安静的细字 */
.fclear {
  cursor: pointer; border: none; background: none; padding: 4px 2px;
  font-size: 10.5px; letter-spacing: .04em; color: var(--ink-faint);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(28,36,64,.25);
  transition: color .16s ease;
}
.fclear:hover { color: var(--gold-deep); }

/* 标签条目：影视分类页式——无边框文字，悬停浮起，选中镀金加圆点 */
.ftag {
  cursor: pointer; font-size: 11.5px; line-height: 1.6; letter-spacing: .02em;
  padding: 3px 7px; border: none; border-radius: 6px; background: none;
  color: var(--ink-soft); position: relative;
  display: inline-flex; align-items: baseline; gap: 4px;
  transition: color .15s ease, background .15s ease;
}
.ftag i { font-style: normal; font-size: 9px; opacity: .45; }
.ftag:hover { color: var(--ink); background: rgba(28, 36, 64, 0.05); }
.ftag.on {
  color: var(--gold-deep); font-weight: 600;
  background: rgba(242, 201, 107, 0.16);
}
.ftag.on::after {
  content: ''; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 999px;
  background: var(--gold, #f2c96b);
  box-shadow: 0 0 6px rgba(242, 201, 107, 0.8);
}

/* 已选标签：一粒粒小金星，点一下拿掉 */
.fsel-wrap { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fsel-wrap::before {
  content: '已选'; font-size: 10px; letter-spacing: .1em; color: var(--ink-faint); margin-right: 0;
}
.fsel {
  cursor: pointer; font-size: 10.5px; line-height: 1; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 999px; border: none;
  background: rgba(242, 201, 107, 0.85); color: #3a2a10; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  box-shadow: 0 1px 4px rgba(242, 201, 107, 0.35);
  transition: transform .15s ease, filter .15s ease;
}
.fsel em { font-style: normal; opacity: .55; font-weight: 400; }
.fsel:hover { transform: translateY(-1px); filter: brightness(1.05); }
.entry-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.entry-tags span {
  font-size: 9.5px; padding: 1px 6px; border-radius: 999px;
  background: rgba(28, 36, 64, 0.07); color: var(--ink-faint);
}
/* 深色磨砂窗里的同款极简 */
#desktop.frosted .ffilter-toggle {
  background: rgba(245, 240, 230, 0.08); color: rgba(245, 240, 230, 0.9);
  border-color: rgba(245, 240, 230, 0.16);
}
#desktop.frosted .ffilter-toggle.on { background: rgba(242, 201, 107, 0.28); border-color: rgba(242, 201, 107, 0.6); }
#desktop.frosted .fseg { background: rgba(245, 240, 230, 0.08); }
#desktop.frosted .fseg-btn { color: rgba(245, 240, 230, 0.55); }
#desktop.frosted .fseg-btn:hover { color: rgba(245, 240, 230, 0.9); }
#desktop.frosted .fseg-btn.on { background: rgba(245, 240, 230, 0.92); color: var(--ink); }
#desktop.frosted .fghost { color: rgba(245, 240, 230, 0.6); }
#desktop.frosted .fghost:hover { color: rgba(245, 240, 230, 0.95); }
#desktop.frosted .fghost .fsort { background: none; color: inherit; }
#desktop.frosted .fghost .fsort option { color: var(--ink); }
#desktop.frosted .fclear { color: rgba(245, 240, 230, 0.5); text-decoration-color: rgba(245,240,230,.25); }
#desktop.frosted .fclear:hover { color: var(--gold); }
#desktop.frosted .ftag { color: rgba(245, 240, 230, 0.6); }
#desktop.frosted .ftag:hover { color: rgba(245, 240, 230, 0.95); background: rgba(245, 240, 230, 0.07); }
#desktop.frosted .ftag.on { color: var(--gold); background: rgba(242, 201, 107, 0.14); }
#desktop.frosted .fsel-wrap::before { color: rgba(245, 240, 230, 0.45); }
#desktop.frosted .entry-tags span { background: rgba(245, 240, 230, 0.1); color: rgba(245, 240, 230, 0.66); }
.finder-grid.view-sm .entry-tags, .finder-grid.view-list .entry-tags { display: none; }
.finder-crumbs {
  display: flex; align-items: center; gap: 4px; flex: none;
  max-width: 46%; overflow: hidden;
  font-size: 11.5px; color: var(--ink-faint);
}
.crumb { cursor: pointer; padding: 3px 9px; border-radius: 999px; color: var(--ink-faint); }
.crumb:hover { background: rgba(242, 201, 107, 0.25); color: var(--ink); }
.crumb:last-child { color: var(--ink); font-weight: 600; }
.crumb-sep { opacity: 0.5; }
.finder-search {
  flex: 1; min-width: 0; padding: 8px 16px;
  border-radius: 999px; outline: none;
  border: 1px solid rgba(28, 36, 64, 0.14);
  background: rgba(255, 255, 255, 0.6);
  font-size: 12.5px; color: var(--ink);
  transition: border-color 0.16s ease, background 0.16s ease;
}
.finder-search:focus { border-color: rgba(242, 201, 107, 0.7); background: #fff; }
.finder-search::placeholder { color: var(--ink-faint); }
#desktop.frosted .finder-search {
  background: rgba(245, 240, 230, 0.08); color: rgba(245, 240, 230, 0.92);
  border-color: rgba(245, 240, 230, 0.16);
}
#desktop.frosted .finder-search:focus { background: rgba(245, 240, 230, 0.12); }
#desktop.frosted .crumb { color: rgba(245, 240, 230, 0.6); }
#desktop.frosted .crumb:last-child { color: rgba(245, 240, 230, 0.95); }
.finder-empty {
  text-align: center; padding: 60px 20px;
  font-family: var(--serif); font-size: 14px;
  color: var(--ink-faint);
}

/* ============================================================
 * 应用：阅读器（纸感阅读）
 * ============================================================ */

.reader { display: flex; height: 100%; }
.reader-toc {
  width: 196px; flex: none;
  border-right: 1px solid rgba(28, 36, 64, 0.07);
  background: var(--paper-2);
  overflow-y: auto; padding: 16px 10px;
}
.reader-toc-title {
  font-size: 10.5px; letter-spacing: 0.22em;
  color: var(--ink-faint);
  padding: 2px 8px 10px;
}
.reader-toc a {
  display: block;
  padding: 5px 8px; border-radius: 7px;
  font-size: 11.5px; line-height: 1.55;
  color: var(--ink-soft);
  text-decoration: none;
  transition: background 0.12s;
}
.reader-toc a:hover { background: rgba(242, 201, 107, 0.3); color: var(--ink); }
.reader-content {
  flex: 1; overflow-y: auto;
  padding: 38px clamp(22px, 5vw, 64px) 90px;
  font-family: var(--serif);
  color: #2b3153;
  font-size: 15px; line-height: 2.1;
}
.reader-content h1 {
  font-size: 21px; color: var(--ink);
  margin: 1.7em 0 0.75em;
  letter-spacing: 0.08em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid rgba(185, 138, 47, 0.25);
  scroll-margin-top: 12px;
}
.reader-content h1:first-child { margin-top: 0; }
.reader-content h2 {
  font-size: 17.5px; color: #b06a3f;
  margin: 1.6em 0 0.6em; letter-spacing: 0.05em;
  scroll-margin-top: 12px;
}
.reader-content h3 { font-size: 15.5px; color: var(--ink); margin: 1.4em 0 0.5em; }
.reader-content p { margin: 0.4em 0; }
.reader-content strong { color: var(--gold-deep); font-weight: 600; }
.reader-content blockquote {
  margin: 1.1em 0;
  padding: 14px 20px;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  background: rgba(242, 201, 107, 0.14);
  color: var(--ink);
}
.reader-content hr {
  border: none; height: 1px; margin: 2.2em auto;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(185, 138, 47, 0.45), transparent);
}
.reader-content ul { padding-left: 1.4em; }
.reader-content li { margin: 0.28em 0; }
.reader-content a { color: #b06a3f; text-decoration: none; border-bottom: 1px dotted rgba(176, 106, 63, 0.5); }

/* ============================================================
 * 应用：人生电脑（招牌）
 * ============================================================ */

.lifepc { display: flex; height: 100%; }
.lifepc-stack {
  width: 244px; flex: none;
  padding: 22px 18px;
  display: flex; flex-direction: column; justify-content: center;
  border-right: 1px solid rgba(28, 36, 64, 0.07);
  background: var(--paper-2);
  overflow-y: auto;
}
.lifepc-intro {
  font-family: var(--serif); font-size: 12px; line-height: 1.95;
  color: var(--ink-soft);
  padding: 0 4px 16px;
}
.layer-block {
  position: relative;
  border: 1px solid rgba(28, 36, 64, 0.12);
  border-radius: var(--r-card);
  padding: 10px 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.65);
  transition: border-color 0.22s, background 0.22s, transform 0.22s, box-shadow 0.22s;
}
.layer-block:hover { transform: translateX(3px); box-shadow: var(--shadow-card); }
.layer-block.active {
  border-color: var(--layer-color, var(--gold));
  background: #fff;
  box-shadow: 0 4px 18px rgba(10, 21, 48, 0.1);
}
.layer-block .layer-id {
  font-size: 10px; letter-spacing: 0.22em;
  color: var(--layer-color, var(--gold-deep));
  font-weight: 600;
}
.layer-block .layer-name { font-family: var(--serif); font-size: 15px; color: var(--ink); margin-top: 2px; }
.layer-block .layer-tagline { font-size: 10px; color: var(--ink-faint); margin-top: 3px; line-height: 1.55; }
/* 层间流动光线 */
.layer-wire {
  height: 22px; width: 2px; margin: 0 auto;
  position: relative; overflow: hidden;
  background: rgba(28, 36, 64, 0.1);
}
.layer-wire::after {
  content: ''; position: absolute; left: 0; top: -40%;
  width: 100%; height: 40%;
  background: linear-gradient(180deg, transparent, var(--gold-deep), transparent);
  animation: wireFlow 2.2s linear infinite;
}
.layer-wire:nth-of-type(odd)::after { animation-delay: -1.1s; }
@keyframes wireFlow { to { top: 110%; } }

.lifepc-detail {
  flex: 1; overflow-y: auto;
  padding: 32px clamp(18px, 4vw, 46px);
  font-family: var(--serif);
}
.lifepc-detail .detail-id { font-size: 12px; letter-spacing: 0.32em; color: var(--layer-color, var(--gold-deep)); font-weight: 600; }
.lifepc-detail h3 { font-size: 22px; color: var(--ink); margin: 6px 0 4px; letter-spacing: 0.06em; }
.lifepc-detail .detail-tagline { font-size: 13px; color: var(--ink-soft); margin-bottom: 18px; }
.lifepc-detail .detail-summary { font-size: 14px; line-height: 2.1; color: #2b3153; }
.lifepc-detail ul { margin: 16px 0; padding: 0; list-style: none; }
.lifepc-detail li {
  font-size: 13px; line-height: 1.95;
  color: var(--ink-soft);
  padding: 6px 0 6px 20px; position: relative;
}
.lifepc-detail li::before {
  content: '✦'; position: absolute; left: 0;
  color: var(--layer-color, var(--gold-deep)); font-size: 10px; top: 10px;
}
.lifepc-detail .detail-quote {
  margin-top: 20px;
  padding: 14px 20px;
  border-left: 3px solid var(--layer-color, var(--gold));
  border-radius: 0 var(--r-card) var(--r-card) 0;
  background: rgba(242, 201, 107, 0.13);
  font-size: 14px; line-height: 2;
  color: var(--ink);
}
.lifepc-detail .detail-quote::before {
  content: '这一层的任务 —— ';
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--ink-faint); display: block; margin-bottom: 6px;
}

/* ============================================================
 * 应用：星尘浏览器
 * ============================================================ */

.stardust { padding: 28px clamp(16px, 4vw, 42px); height: 100%; overflow-y: auto; }
.stardust-head { text-align: center; margin-bottom: 26px; }
.stardust-head h3 {
  font-family: var(--serif); font-size: 20px;
  letter-spacing: var(--ls-wide); text-indent: var(--ls-wide);
  color: var(--ink);
}
.stardust-head p { font-size: 11.5px; color: var(--ink-faint); margin-top: 7px; letter-spacing: 0.1em; }
.stardust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 16px;
}
.stardust-card {
  position: relative;
  border-radius: var(--r-card);
  padding: 20px 18px 18px;
  cursor: pointer;
  background: #fff;
  border: 1px solid rgba(28, 36, 64, 0.08);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.stardust-card:hover {
  transform: translateY(-4px);
  border-color: rgba(242, 201, 107, 0.7);
  box-shadow: 0 14px 36px rgba(10, 21, 48, 0.14);
}
.stardust-card::before {
  content: ''; position: absolute; top: -60%; left: -60%;
  width: 60%; height: 200%;
  background: linear-gradient(100deg, transparent, rgba(242, 201, 107, 0.22), transparent);
  transform: rotate(18deg);
  transition: left 0.6s ease;
}
.stardust-card:hover::before { left: 130%; }
.stardust-card .card-tag {
  display: inline-block;
  font-size: 10px; letter-spacing: 0.16em;
  color: var(--gold-deep);
  border: 1px solid rgba(185, 138, 47, 0.4);
  border-radius: var(--r-pill); padding: 3px 10px;
  margin-bottom: 12px;
}
.stardust-card h4 { font-family: var(--serif); font-size: 16.5px; color: var(--ink); letter-spacing: 0.04em; }
.stardust-card .card-url { font-size: 11px; color: #b06a3f; margin: 4px 0 10px; }
.stardust-card .card-desc { font-size: 12px; line-height: 1.85; color: var(--ink-soft); }
.stardust-card .card-open { margin-top: 14px; font-size: 11px; letter-spacing: 0.14em; color: var(--ink-faint); }
.stardust-card:hover .card-open { color: var(--gold-deep); }

/* ============================================================
 * 应用：备忘录（软木塞便签墙）
 * ============================================================ */

.notes-wall {
  height: 100%; overflow-y: auto;
  padding: 32px 26px;
  display: flex; flex-wrap: wrap; gap: 24px;
  align-content: flex-start; justify-content: center;
  background: var(--paper-2);
}
.note-card {
  width: 182px; min-height: 152px;
  padding: 22px 16px 16px;
  position: relative;
  background: #fffdf6;
  background-image: var(--noise-paper);
  color: var(--ink);
  border-radius: 3px;
  border: 1px solid rgba(28, 36, 64, 0.06);
  box-shadow: 0 8px 22px rgba(10, 21, 48, 0.14);
  font-family: var(--serif);
  font-size: 13.5px; line-height: 2;
  transform: rotate(var(--r, 0deg));
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.note-card:hover {
  transform: rotate(0deg) scale(1.05);
  box-shadow: 0 16px 38px rgba(10, 21, 48, 0.2);
  z-index: 2;
}
.note-card::before {
  content: ''; position: absolute; top: -7px; left: 50%;
  width: 14px; height: 14px; border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 30%, #f2c96b, #b8902e);
  box-shadow: 0 3px 5px rgba(10, 21, 48, 0.3);
}

/* ============================================================
 * 应用：设置
 * ============================================================ */

.settings { padding: 26px clamp(18px, 4vw, 42px); height: 100%; overflow-y: auto; }
.settings h3 {
  font-family: var(--serif); font-size: 18px;
  color: var(--ink); letter-spacing: 0.12em;
  margin-bottom: 16px;
}
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(28, 36, 64, 0.07);
}
.setting-row .setting-label { font-size: 13px; color: var(--ink); }
.setting-row .setting-desc { font-size: 11px; color: var(--ink-faint); margin-top: 3px; }
.setting-action {
  font-size: 12px; letter-spacing: 0.1em;
  color: var(--gold-deep);
  border: 1px solid rgba(185, 138, 47, 0.45);
  border-radius: 9px; padding: 6px 14px;
  transition: background 0.18s;
  white-space: nowrap;
}
.setting-action:hover { background: rgba(242, 201, 107, 0.25); }
.switch {
  width: 42px; height: 24px; border-radius: var(--r-pill); flex: none;
  background: rgba(28, 36, 64, 0.16);
  position: relative; transition: background 0.25s;
}
.switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(10, 21, 48, 0.25);
  transition: left 0.25s;
}
.switch.on { background: var(--gold); }
.switch.on::after { left: 21px; }

/* ============================================================
 * 应用：关于本机（精美版本信息）
 * ============================================================ */

.about-view {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 36px 30px;
  text-align: center;
  background:
    radial-gradient(320px 200px at 50% -10%, rgba(242, 201, 107, 0.16), transparent 70%),
    var(--paper);
}
.about-star { width: 64px; height: 64px; color: var(--gold-deep); margin-bottom: 12px; filter: drop-shadow(0 4px 14px rgba(242, 201, 107, 0.45)); }
.about-os {
  font-family: var(--serif); font-size: 24px;
  letter-spacing: var(--ls-brand); text-indent: var(--ls-brand);
  color: var(--ink);
}
.about-ver { font-size: 12px; letter-spacing: 0.24em; color: var(--gold-deep); margin-top: 8px; }
.about-line {
  width: 120px; height: 1px; margin: 18px 0;
  background: linear-gradient(90deg, transparent, rgba(185, 138, 47, 0.5), transparent);
}
.about-tagline {
  font-family: var(--serif); font-size: 13px; line-height: 2.1;
  color: var(--ink-soft); letter-spacing: 0.08em;
}
.about-meta { margin-top: 18px; font-size: 11.5px; line-height: 2.1; color: var(--ink-faint); letter-spacing: 0.06em; }

/* ============================================================
 * 应用：终端（深色窗口）
 * ============================================================ */

.terminal {
  height: 100%; overflow-y: auto;
  padding: 14px 16px;
  font-family: "SF Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 12.5px; line-height: 1.75;
  color: #d8e3c8;
}
.term-line { white-space: pre-wrap; word-break: break-all; }
.term-line .prompt { color: var(--gold); }
.term-line.cmd { color: var(--paper); }
.term-out { color: rgba(216, 227, 200, 0.85); white-space: pre-wrap; }
.term-out.poetry { color: var(--gold); font-family: var(--serif); }
.term-out.star-art { color: var(--gold); }
.term-input-row { display: flex; }
.term-input-row .prompt { flex: none; margin-right: 6px; color: var(--gold); }
.term-input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--paper); font: inherit; caret-color: var(--gold);
}

/* ============================================================
 * 应用：回收站
 * ============================================================ */

.trash-view {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 30px;
  text-align: center; position: relative; overflow: hidden;
}
.trash-view svg { width: 64px; height: 64px; color: var(--ink-faint); }
.trash-quote {
  font-family: var(--serif); font-size: 16px;
  letter-spacing: 0.08em; line-height: 2.1;
  color: var(--ink-soft);
}
.trash-empty-btn {
  font-size: 12px; letter-spacing: 0.14em;
  color: #b06a3f;
  border: 1px solid rgba(176, 106, 63, 0.45);
  border-radius: var(--r-pill); padding: 8px 22px;
  transition: background 0.22s, box-shadow 0.22s;
}
.trash-empty-btn:hover { background: rgba(232, 149, 109, 0.16); box-shadow: 0 0 22px rgba(232, 149, 109, 0.25); }
.burst-star {
  position: absolute; pointer-events: none;
  color: var(--gold-deep);
  animation: burst 0.9s ease-out forwards;
}
@keyframes burst {
  from { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
  to   { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3) rotate(160deg); }
}

/* ============================================================
 * 彩蛋文案 / 移动端提示
 * ============================================================ */

#sunset-quote {
  position: absolute; left: 50%; bottom: 21%;
  transform: translateX(-50%) translateY(12px);
  z-index: 65;
  font-family: var(--serif);
  font-size: clamp(15px, 2.4vw, 21px);
  letter-spacing: 0.16em;
  color: var(--ink);
  text-shadow: 0 1px 20px rgba(250, 246, 238, 0.8);
  opacity: 0; pointer-events: none;
  transition: opacity 2.2s ease 1.2s, transform 2.2s ease 1.2s;
  text-align: center; padding: 0 20px; width: max-content; max-width: 90vw;
}
#desktop.egg-shown #sunset-quote { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
 * 移动端适配（<768px）：完整便携模式（3D 场景照常渲染）
 * ============================================================ */

@media (max-width: 767px) {
  /* 手机端不再一律全屏：窗口是可拖动的卡片，支持上下分屏（拖到上/左/右/下边缘吸附） */
  .window {
    min-width: 200px; min-height: 160px;
    border-radius: 14px;
  }
  .win-titlebar { touch-action: none; }
  /* 缩放手柄：保留并加大触控区 */
  .win-resize { display: block; width: 26px; height: 26px; touch-action: none; }
  .win-resize::before { content: ''; position: absolute; inset: -12px; }
  .win-title { padding-right: 0; }

  /* 标题栏红绿灯：视觉不变，透明扩展触控区到 ≥44px */
  .traffic-btn { position: relative; }
  .traffic-btn::after { content: ''; position: absolute; inset: -15px; }
  /* 菜单栏精简：隐藏装饰性状态图标，腾出空间 */
  .menubar-icon.deco { display: none; }
  #menubar-title { font-size: 11.5px; }
  #poetic-clock { font-size: 11px; }
  #apple-menu { left: 4px; }
  /* Dock 横向滚动 */
  #dock { overflow-x: auto; justify-content: flex-start; padding: 0 8px; }
  #dock-inner { flex: none; }
  /* 桌面图标：顶部横向滑动排列 */
  #desktop-icons {
    top: 40px; left: 8px; right: 8px;
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 4px;
    max-height: none;
  }

  .dicon, .dapp { width: 74px; flex: none; }
  .dfolder { width: 50px; height: 43px; }
  .df-face { width: 28px; height: 28px; margin-left: -14px; margin-top: -14px; }
  .df-orbit { inset: -4px; }
  .dtile { width: 44px; height: 44px; }
  /* 开机 / 登录：小屏排版 */
  #boot-stage {
    gap: 12px;
    margin-top: min(-14vh, -40px);
    padding-bottom: 72px; /* 给底部星球与跳过留空 */
  }
  #boot-brand { font-size: 22px; letter-spacing: 0.26em; text-indent: 0.26em; }
  #boot-star { width: 64px; height: 64px; }
  #boot-poem { font-size: 12px; max-width: 16em; }
  .boot-tagline { font-size: 11px; max-width: 17em; }
  .boot-planet {
    width: min(58vmin, 260px);
    height: min(58vmin, 260px);
    bottom: max(4%, 36px);
    opacity: 0.88;
  }
  .boot-quote .bq-fr { display: none; }
  .boot-progress { max-width: 240px; }
  #login-name { letter-spacing: 0.3em; text-indent: 0.3em; }
  #login-hint { padding: 0 40px; text-align: center; }
  .reader-toc { width: 122px; }
  .lifepc { flex-direction: column; }
  .lifepc-stack { width: 100%; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid rgba(28,36,64,.07); }
  .layer-wire { display: none; }
  .finder-side { width: 106px; }
}

/* 减少动态偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01s !important; transition-duration: 0.15s !important; }
}

/* ===== 星尘账户 ===== */
.account { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 26px 24px; text-align: center; }
.account-loading { padding: 40px 0; opacity: .7; font-size: 13px; }
.account-avatar { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(242, 201, 107, .14); color: var(--gold-deep, #b8912f); }
.account-avatar svg { width: 30px; height: 30px; }
.account-title { font-size: 16px; font-weight: 600; }
.account-name { font-size: 15px; font-weight: 600; }
.account-mail, .account-sub { font-size: 12px; opacity: .62; line-height: 1.6; }
.account-role { font-size: 12px; padding: 2px 10px; border-radius: 999px; background: rgba(242, 201, 107, .18); }
.account-field { width: 100%; display: flex; flex-direction: column; gap: 4px; text-align: left; font-size: 12px; opacity: .9; }
.account-field input { width: 100%; padding: 8px 10px; font-size: 13px; border-radius: 8px; color: inherit;
  border: 1px solid rgba(120, 120, 140, .28); background: rgba(255, 255, 255, .5); outline: none; }
.window.dark .account-field input, #desktop.theme-night .account-field input { background: rgba(245, 240, 230, .08); }
.account-field input:focus { border-color: rgba(242, 201, 107, .8); }
.account-btn { width: 100%; padding: 9px 12px; margin-top: 4px; font-size: 13px; cursor: pointer; border-radius: 9px;
  border: 1px solid rgba(242, 201, 107, .55); background: rgba(242, 201, 107, .22); color: inherit; transition: .18s; }
.account-btn:hover { background: rgba(242, 201, 107, .34); }
.account-btn:disabled { opacity: .5; cursor: default; }
.account-btn.ghost { background: transparent; border-color: rgba(120, 120, 140, .3); }
.account-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; font-size: 12px; margin-top: 2px; }
.account-links a { color: inherit; opacity: .65; text-decoration: none; border-bottom: 1px dashed currentColor; }
.account-links a:hover { opacity: 1; }
.account-msg { min-height: 18px; font-size: 12px; opacity: .78; }

/* ===== 发现新版本 提示条 ===== */
#update-bar {
  position: fixed; left: 50%; bottom: 104px; z-index: 9999;
  transform: translate(-50%, 140%); opacity: 0;
  transition: transform .45s cubic-bezier(.2,.8,.3,1), opacity .45s ease;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 16px; border-radius: 999px;
  font-size: 13px; color: #f5f0e6; white-space: nowrap;
  background: rgba(28, 32, 52, .82);
  border: 1px solid rgba(242, 201, 107, .32);
  box-shadow: 0 10px 34px rgba(10, 14, 30, .38);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
#update-bar.show { transform: translate(-50%, 0); opacity: 1; }
#update-bar .ub-star { display: flex; color: #f2c96b; }
#update-bar .ub-star svg { width: 17px; height: 17px; animation: ub-twinkle 2.6s ease-in-out infinite; }
@keyframes ub-twinkle { 0%,100% { opacity: .6; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
#update-bar button { font: inherit; cursor: pointer; border-radius: 999px; transition: .18s; }
#update-bar .ub-go {
  padding: 6px 16px; color: #23200f; border: none;
  background: linear-gradient(180deg, #f7d98d, #efbe58);
}
#update-bar .ub-go:hover { filter: brightness(1.06); }
#update-bar .ub-later {
  padding: 6px 12px; color: rgba(245, 240, 230, .68);
  background: transparent; border: 1px solid rgba(245, 240, 230, .2);
}
#update-bar .ub-later:hover { color: #f5f0e6; border-color: rgba(245, 240, 230, .4); }
@media (max-width: 600px) {
  #update-bar { left: 12px; right: 12px; bottom: calc(12px + var(--sb)); transform: translateY(140%); white-space: normal; }
  #update-bar.show { transform: translateY(0); }
}

/* ============================================================
   桌面编辑（管理员）：右键菜单 / 对话框 / 文稿窗口 / 轻提示
   ============================================================ */
.os-ctx{
  position:fixed;z-index:9000;min-width:172px;padding:6px;
  background:rgba(28,34,52,.94);backdrop-filter:blur(18px);
  border:1px solid rgba(246,207,125,.28);border-radius:12px;
  box-shadow:0 18px 44px rgba(6,10,24,.5);
}
.os-ctx .ctx-item{
  display:block;width:100%;text-align:left;padding:7px 12px;
  background:none;border:0;border-radius:8px;cursor:pointer;
  color:#e8ecf7;font-size:13px;font-family:inherit;
}
.os-ctx .ctx-item:hover{background:rgba(246,207,125,.16);color:#f6cf7d;}
.os-ctx .ctx-item.danger:hover{background:rgba(237,120,120,.18);color:#ffb3b3;}
.os-ctx .ctx-sep{height:1px;margin:5px 8px;background:rgba(255,255,255,.12);}

.os-modal{
  position:fixed;inset:0;z-index:9200;display:flex;align-items:center;justify-content:center;
  background:rgba(8,12,26,.42);backdrop-filter:blur(3px);
}
.os-modal-card{
  width:min(360px,86vw);padding:20px;border-radius:16px;
  background:rgba(26,32,50,.96);border:1px solid rgba(246,207,125,.26);
  box-shadow:0 24px 60px rgba(4,8,20,.55);color:#e8ecf7;
}
.os-modal-title{font-size:14px;margin-bottom:12px;letter-spacing:.02em;}
.os-modal-input{
  width:100%;padding:9px 12px;border-radius:10px;font-size:14px;font-family:inherit;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#fff;outline:none;
}
.os-modal-input:focus{border-color:rgba(246,207,125,.6);}
.os-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}
.os-btn{
  padding:7px 16px;border-radius:9px;border:1px solid rgba(246,207,125,.5);
  background:rgba(246,207,125,.16);color:#f6cf7d;font-size:13px;font-family:inherit;cursor:pointer;
}
.os-btn:hover{background:rgba(246,207,125,.26);}
.os-btn.ghost{border-color:rgba(255,255,255,.2);background:none;color:#c9d2e6;}
.os-btn.danger{border-color:rgba(237,120,120,.5);background:rgba(237,120,120,.16);color:#ffb3b3;}

.docview{padding:22px 26px;height:100%;overflow:auto;display:flex;flex-direction:column;}
.docview .doc-title{font-size:19px;margin:0 0 14px;}
.docview .doc-text{flex:1;line-height:1.9;font-size:14px;opacity:.92;}
.docview .doc-text p{margin:0 0 12px;}
.docview .doc-empty{opacity:.5;}
.docview .doc-editor{
  flex:1;min-height:240px;width:100%;resize:none;padding:14px;border-radius:12px;
  font-family:inherit;font-size:14px;line-height:1.9;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);color:inherit;outline:none;
}
.docview .doc-editor:focus{border-color:rgba(246,207,125,.55);}
.docview .doc-bar{display:flex;justify-content:flex-end;gap:8px;padding-top:14px;}

#os-toast{
  position:fixed;left:50%;bottom:104px;transform:translate(-50%,14px);
  z-index:9400;padding:9px 18px;border-radius:999px;font-size:13px;
  background:rgba(26,32,50,.92);border:1px solid rgba(246,207,125,.3);color:#f6cf7d;
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;
}
#os-toast.show{opacity:1;transform:translate(-50%,0);}

/* ============================================================
 * 磨砂窗口（frosted，独立开关，可叠加在任意主题上）
 * 深色半透明磨砂窗口质感；只影响窗口与内置应用，不改变天空与桌面
 * ============================================================ */

/* 窗口：深色半透明磨砂（终端 .dark 本来深色，不重复处理） */
#desktop.frosted .window:not(.dark) {
  background: rgba(15, 24, 50, 0.58);
  background-image: var(--noise-dark);
  color: var(--paper);
  border-color: rgba(245, 240, 230, 0.15);
  backdrop-filter: blur(26px) saturate(1.25);
  -webkit-backdrop-filter: blur(26px) saturate(1.25);
}
#desktop.frosted .window:not(.dark).focused { border-color: rgba(242, 201, 107, 0.42); }
#desktop.frosted .window:not(.dark) .win-titlebar {
  background: rgba(245, 240, 230, 0.06);
  border-bottom-color: rgba(245, 240, 230, 0.1);
}
#desktop.frosted .window:not(.dark) .win-title { color: rgba(245, 240, 230, 0.72); }
#desktop.frosted .window:not(.dark) .win-resize::after {
  border-right-color: rgba(245, 240, 230, 0.4);
  border-bottom-color: rgba(245, 240, 230, 0.4);
}

/* 访达 */
#desktop.frosted .finder-side { background: rgba(10, 17, 38, 0.35); border-right-color: rgba(245, 240, 230, 0.1); }
#desktop.frosted .finder-side-title { color: rgba(245, 240, 230, 0.45); }
#desktop.frosted .finder-side-item { color: rgba(245, 240, 230, 0.72); }
#desktop.frosted .finder-side-item:hover { background: rgba(245, 240, 230, 0.08); }
#desktop.frosted .finder-side-item.active { background: rgba(242, 201, 107, 0.26); color: #f7ecd2; }
#desktop.frosted .finder-entry:hover { background: rgba(245, 240, 230, 0.07); }
#desktop.frosted .finder-entry.selected { background: rgba(242, 201, 107, 0.3); }
#desktop.frosted .finder-entry svg { color: var(--gold); }
#desktop.frosted .finder-entry .entry-name { color: rgba(245, 240, 230, 0.92); }
#desktop.frosted .finder-entry .entry-desc { color: rgba(245, 240, 230, 0.5); }
#desktop.frosted .finder-empty { color: rgba(245, 240, 230, 0.55); }

/* 阅读器 */
#desktop.frosted .reader-toc { background: rgba(10, 17, 38, 0.35); border-right-color: rgba(245, 240, 230, 0.1); }
#desktop.frosted .reader-toc-title { color: rgba(245, 240, 230, 0.45); }
#desktop.frosted .reader-toc a { color: rgba(245, 240, 230, 0.72); }
#desktop.frosted .reader-toc a:hover { background: rgba(242, 201, 107, 0.22); color: #f7ecd2; }
#desktop.frosted .reader-content { color: rgba(245, 240, 230, 0.9); }
#desktop.frosted .reader-content h1,
#desktop.frosted .reader-content h3 { color: #f7ecd2; }
#desktop.frosted .reader-content h1 { border-bottom-color: rgba(242, 201, 107, 0.35); }
#desktop.frosted .reader-content h2,
#desktop.frosted .reader-content a { color: #eab78c; }
#desktop.frosted .reader-content a { border-bottom-color: rgba(234, 183, 140, 0.5); }
#desktop.frosted .reader-content strong { color: var(--gold); }
#desktop.frosted .reader-content blockquote { background: rgba(242, 201, 107, 0.1); color: rgba(245, 240, 230, 0.92); }

/* 人生电脑 */
#desktop.frosted .lifepc-stack { background: rgba(10, 17, 38, 0.35); border-right-color: rgba(245, 240, 230, 0.1); }
#desktop.frosted .lifepc-intro { color: rgba(245, 240, 230, 0.68); }
#desktop.frosted .layer-block { background: rgba(245, 240, 230, 0.06); border-color: rgba(245, 240, 230, 0.14); }
#desktop.frosted .layer-block.active { background: rgba(242, 201, 107, 0.14); }
#desktop.frosted .layer-block .layer-name { color: #f7ecd2; }
#desktop.frosted .layer-block .layer-tagline { color: rgba(245, 240, 230, 0.5); }
#desktop.frosted .layer-wire { background: rgba(245, 240, 230, 0.12); }
#desktop.frosted .lifepc-detail h3 { color: #f7ecd2; }
#desktop.frosted .lifepc-detail .detail-tagline { color: rgba(245, 240, 230, 0.68); }
#desktop.frosted .lifepc-detail .detail-summary { color: rgba(245, 240, 230, 0.88); }
#desktop.frosted .lifepc-detail li { color: rgba(245, 240, 230, 0.7); }
#desktop.frosted .lifepc-detail .detail-quote { background: rgba(242, 201, 107, 0.1); color: #f7ecd2; }
#desktop.frosted .lifepc-detail .detail-quote::before { color: rgba(245, 240, 230, 0.45); }

/* 星尘浏览器 */
#desktop.frosted .stardust-head h3 { color: #f7ecd2; }
#desktop.frosted .stardust-head p { color: rgba(245, 240, 230, 0.5); }
#desktop.frosted .stardust-card { background: rgba(245, 240, 230, 0.06); border-color: rgba(245, 240, 230, 0.13); box-shadow: none; }
#desktop.frosted .stardust-card:hover { border-color: rgba(242, 201, 107, 0.55); box-shadow: 0 14px 36px rgba(4, 8, 20, 0.4); }
#desktop.frosted .stardust-card h4 { color: #f7ecd2; }
#desktop.frosted .stardust-card .card-tag { color: var(--gold); border-color: rgba(242, 201, 107, 0.45); }
#desktop.frosted .stardust-card .card-url { color: #eab78c; }
#desktop.frosted .stardust-card .card-desc { color: rgba(245, 240, 230, 0.68); }
#desktop.frosted .stardust-card .card-open { color: rgba(245, 240, 230, 0.45); }
#desktop.frosted .stardust-card:hover .card-open { color: var(--gold); }

/* 备忘录：墙面压暗，便签保留纸感（软木墙上的真便签） */
#desktop.frosted .notes-wall { background: rgba(10, 17, 38, 0.3); }

/* 设置 */
#desktop.frosted .settings h3,
#desktop.frosted .setting-row .setting-label { color: #f7ecd2; }
#desktop.frosted .setting-row { border-bottom-color: rgba(245, 240, 230, 0.1); }
#desktop.frosted .setting-row .setting-desc { color: rgba(245, 240, 230, 0.5); }
#desktop.frosted .setting-action { color: var(--gold); border-color: rgba(242, 201, 107, 0.5); }
#desktop.frosted .setting-action:hover { background: rgba(242, 201, 107, 0.18); }
#desktop.frosted .switch { background: rgba(245, 240, 230, 0.2); }
#desktop.frosted .switch.on { background: var(--gold); }

/* 设置：主题三选一分段控件（各主题通用，磨砂窗口下另有深色变体） */
.seg {
  display: flex; flex: none; gap: 2px; padding: 2px;
  border-radius: 10px;
  background: rgba(28, 36, 64, 0.08);
  border: 1px solid rgba(28, 36, 64, 0.1);
}
.seg-item {
  font-size: 12px; padding: 5px 12px; border-radius: 8px;
  color: var(--ink-soft); white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}
.seg-item.on { background: var(--gold); color: var(--ink); font-weight: 600; box-shadow: 0 2px 8px rgba(185, 138, 47, 0.35); }
#desktop.frosted .seg { background: rgba(245, 240, 230, 0.08); border-color: rgba(245, 240, 230, 0.14); }
#desktop.frosted .seg-item { color: rgba(245, 240, 230, 0.65); }
#desktop.frosted .seg-item.on { background: var(--gold); color: var(--ink); }

/* 关于本机 */
#desktop.frosted .about-view {
  background:
    radial-gradient(320px 200px at 50% -10%, rgba(242, 201, 107, 0.14), transparent 70%),
    rgba(10, 17, 38, 0.3);
}
#desktop.frosted .about-os { color: #f7ecd2; }
#desktop.frosted .about-ver { color: var(--gold); }
#desktop.frosted .about-star { color: var(--gold); }
#desktop.frosted .about-tagline { color: rgba(245, 240, 230, 0.72); }
#desktop.frosted .about-meta { color: rgba(245, 240, 230, 0.5); }

/* 回收站 */
#desktop.frosted .trash-view svg { color: rgba(245, 240, 230, 0.45); }
#desktop.frosted .trash-quote { color: rgba(245, 240, 230, 0.72); }
#desktop.frosted .trash-empty-btn { color: #eab78c; border-color: rgba(234, 183, 140, 0.45); }

/* ============================================================
 * 星尘电台 / 视频舱 / 媒体查看器 / 菜单栏音符
 * ============================================================ */

/* 菜单栏音符：播放中高亮并轻轻跳动，静音时变淡 */
#radio-toggle { cursor: pointer; }
#radio-toggle.playing { color: #f2c96b; }
#radio-toggle.playing svg { animation: radio-note 1.6s ease-in-out infinite; }
@keyframes radio-note { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
#radio-toggle.muted { opacity: .45; }

/* ----- 星尘电台 ----- */
.radio { padding: 18px 20px; height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.radio-head h3 { margin: 0; font-size: 17px; }
.radio-head p { margin: 4px 0 0; font-size: 12px; opacity: .55; }
.radio-channels { display: flex; flex-direction: column; gap: 8px; }
.radio-ch {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  text-align: left; font: inherit; color: inherit; cursor: pointer; transition: .18s;
  background: rgba(28, 36, 64, .05); border: 1px solid rgba(28, 36, 64, .09);
}
.radio-ch:hover { border-color: rgba(185, 138, 47, .4); }
.radio-ch.on { background: rgba(217, 169, 79, .14); border-color: rgba(185, 138, 47, .55); }
.radio-eq { display: flex; align-items: flex-end; gap: 2.5px; width: 18px; height: 16px; flex: none; }
.radio-eq i { width: 3.5px; height: 5px; border-radius: 2px; background: currentColor; opacity: .35; }
.radio-ch.on .radio-eq i { opacity: .9; animation: radio-eq .9s ease-in-out infinite; }
.radio-ch.on .radio-eq i:nth-child(2) { animation-delay: .2s; }
.radio-ch.on .radio-eq i:nth-child(3) { animation-delay: .45s; }
@keyframes radio-eq { 0%,100% { height: 5px; } 50% { height: 15px; } }
.radio-ch-text { display: flex; flex-direction: column; gap: 2px; }
.radio-ch-name { font-size: 14px; font-weight: 600; }
.radio-ch-desc { font-size: 12px; opacity: .55; }
.radio-tracks { display: flex; flex-wrap: wrap; gap: 6px; }
.radio-track {
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-family: inherit; color: inherit; cursor: pointer;
  background: rgba(28, 36, 64, .06); border: 1px solid rgba(28, 36, 64, .12);
}
.radio-track:hover { border-color: rgba(185, 138, 47, .5); color: var(--gold); }
.radio-console {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px;
  background: rgba(28, 36, 64, .05); border: 1px solid rgba(28, 36, 64, .09);
}
.radio-play {
  width: 46px; height: 46px; flex: none; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #23200f;
  background: linear-gradient(180deg, #f7d98d, #efbe58);
  box-shadow: 0 4px 14px rgba(185, 138, 47, .35);
}
.radio-play svg { width: 22px; height: 22px; }
.radio-play:hover { filter: brightness(1.05); }
.radio-now { flex: 1; min-width: 0; }
.radio-now-name { font-size: 12.5px; opacity: .75; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio-viz { width: 100%; height: 54px; display: block; }
.radio-vol { display: flex; align-items: center; gap: 10px; }
.radio-mute {
  width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid rgba(28, 36, 64, .12); background: none; color: inherit; cursor: pointer;
}
.radio-mute svg { width: 18px; height: 18px; }
.radio-mute.on { color: var(--gold); border-color: rgba(185, 138, 47, .5); }
.radio-slider { flex: 1; height: 28px; accent-color: #d9a94f; }
.radio-disc { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; opacity: .75; }
.radio-disc svg { width: 28px; height: 28px; }
.radio-disc.spin { animation: radio-disc-spin 4.5s linear infinite; }
@keyframes radio-disc-spin { to { transform: rotate(360deg); } }
.radio-skip {
  width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid rgba(28,36,64,.12);
  background: none; color: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.radio-skip:disabled { opacity: .35; cursor: default; }
.radio-skip svg { width: 16px; height: 16px; }
.radio-prog-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.radio-prog { flex: 1; accent-color: #d9a94f; height: 22px; }
.radio-time { font-size: 11px; opacity: .5; min-width: 2.4em; font-variant-numeric: tabular-nums; }

/* 星尘声境：统一面板布局 */
.sc-app { gap: 12px; }
.sc-head h3 { letter-spacing: .08em; }
.sc-tabs {
  display: flex; gap: 6px; padding: 4px; border-radius: 14px;
  background: rgba(28, 36, 64, .05); border: 1px solid rgba(28, 36, 64, .08);
}
.sc-tab {
  flex: 1; padding: 8px 6px; border: 0; border-radius: 11px; cursor: pointer;
  background: transparent; color: inherit; font: inherit; font-size: 12.5px; letter-spacing: .04em;
  opacity: .7; transition: .18s;
}
.sc-tab:hover { opacity: 1; background: rgba(255,255,255,.35); }
.sc-tab.on {
  opacity: 1; font-weight: 600;
  background: linear-gradient(180deg, rgba(247,217,141,.55), rgba(239,190,88,.35));
  box-shadow: 0 2px 8px rgba(185,138,47,.18);
}
.sc-main { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.sc-cats {
  display: flex; flex-wrap: wrap; gap: 7px;
}
.sc-cat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 999px; cursor: pointer; font: inherit; color: inherit;
  background: rgba(28,36,64,.05); border: 1px solid rgba(28,36,64,.1); transition: .16s;
}
.sc-cat:hover { border-color: rgba(185,138,47,.45); }
.sc-cat.on { background: rgba(217,169,79,.16); border-color: rgba(185,138,47,.55); }
.sc-cat-emoji { font-size: 14px; line-height: 1; }
.sc-cat-name { font-size: 12.5px; font-weight: 600; }
.sc-cat-n {
  font-size: 10.5px; opacity: .5; min-width: 1.2em; text-align: center;
  padding: 0 5px; border-radius: 999px; background: rgba(28,36,64,.06);
}
.sc-cat.on .sc-cat-n { background: rgba(185,138,47,.18); opacity: .8; }
.sc-cat-desc { font-size: 12px; opacity: .55; line-height: 1.5; padding: 0 2px; }
.sc-list {
  flex: 1; min-height: 120px; overflow: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding-right: 2px;
}
.sc-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border-radius: 12px; text-align: left;
  font: inherit; color: inherit; cursor: pointer; transition: .16s;
  background: rgba(28,36,64,.04); border: 1px solid rgba(28,36,64,.08);
}
.sc-item:hover { border-color: rgba(185,138,47,.4); transform: translateY(-1px); }
.sc-item.on { background: rgba(217,169,79,.14); border-color: rgba(185,138,47,.5); }
.sc-item-ico { width: 1.2em; text-align: center; opacity: .55; flex: none; }
.sc-item.on .sc-item-ico { opacity: 1; color: var(--gold-deep, #b8912f); }
.sc-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-item-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-item-sub { font-size: 11.5px; opacity: .5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-item-live {
  flex: none; font-size: 10.5px; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(217,169,79,.2); color: var(--gold-deep, #b8912f);
}
.sc-empty, .sc-hint { font-size: 12.5px; opacity: .55; padding: 12px 4px; line-height: 1.7; }
.sc-console { margin-top: auto; }
.sc-synth .radio-eq { margin-right: 2px; }
.radio-now-name.is-error { color: #c45c4a; opacity: 1; white-space: normal; line-height: 1.45; }
.radio-now-name.is-loading { opacity: .85; }
#desktop.frosted .radio-now-name.is-error { color: #ffb4a8; }

#desktop.frosted .sc-tabs { background: rgba(245,240,230,.06); border-color: rgba(245,240,230,.12); }
#desktop.frosted .sc-tab.on { background: rgba(242,201,107,.2); color: #f7ecd2; }
#desktop.frosted .sc-cat, #desktop.frosted .sc-item {
  background: rgba(245,240,230,.05); border-color: rgba(245,240,230,.12); color: rgba(245,240,230,.88);
}
#desktop.frosted .sc-cat.on, #desktop.frosted .sc-item.on {
  background: rgba(242,201,107,.14); border-color: rgba(242,201,107,.5);
}

/* ----- 视频舱 ----- */
.videohub { padding: 18px 20px; height: 100%; overflow: auto; display: flex; flex-direction: column; }
.vh-head h3 { margin: 0; font-size: 17px; }
.vh-head p { margin: 4px 0 0; font-size: 12px; opacity: .55; }
.vh-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.vh-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  text-align: left; font: inherit; color: inherit; cursor: pointer; transition: .18s;
  background: rgba(28, 36, 64, .05); border: 1px solid rgba(28, 36, 64, .09);
}
.vh-card:hover { border-color: rgba(185, 138, 47, .45); transform: translateY(-1px); }
.vh-card-icon {
  width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: rgba(217, 169, 79, .15); color: #b98a2f;
}
.vh-card-icon svg { width: 19px; height: 19px; }
.vh-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vh-card-title { font-size: 14px; font-weight: 600; }
.vh-card-host { font-size: 11.5px; opacity: .5; }
.vh-card-play {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(28, 36, 64, .08); color: inherit;
}
.vh-card-play svg { width: 13px; height: 13px; }
.vh-card:hover .vh-card-play { background: var(--gold); color: #23200f; }
.vh-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.vh-back {
  padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(28, 36, 64, .14);
  background: none; font: inherit; font-size: 13px; color: inherit; cursor: pointer;
}
.vh-back:hover { border-color: rgba(185, 138, 47, .5); color: var(--gold); }
.vh-now-title { font-size: 14px; font-weight: 600; }
.vh-stage { flex: 1; min-height: 0; display: flex; }
.vh-empty { padding: 30px 28px; height: 100%; overflow: auto; text-align: center; }
.vh-empty > svg { width: 44px; height: 44px; opacity: .4; }
.vh-empty h3 { margin: 12px 0 8px; }
.vh-empty p { font-size: 13px; opacity: .7; line-height: 1.7; }
.vh-empty pre {
  text-align: left; font-size: 12px; line-height: 1.6; padding: 12px 14px; border-radius: 12px; overflow: auto;
  background: rgba(28, 36, 64, .06); border: 1px solid rgba(28, 36, 64, .1);
}
.vh-empty code { font-size: 12px; background: rgba(28, 36, 64, .08); padding: 1px 5px; border-radius: 5px; }
.vh-empty-tip { opacity: .5; font-size: 12px; }

/* ----- 媒体查看器 ----- */
.mediaview { padding: 16px 18px; height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.mv-head { display: flex; align-items: center; gap: 10px; }
.mv-head h3 { margin: 0; font-size: 16px; }
.mv-kind {
  flex: none; font-size: 11px; padding: 3px 10px; border-radius: 999px;
  color: #b98a2f; border: 1px solid rgba(185, 138, 47, .4); background: rgba(217, 169, 79, .12);
}
.mv-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mv-video, .mv-embed { width: 100%; flex: 1; min-height: 260px; border: none; border-radius: 14px; background: #0c1020; }
.mv-audio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.mv-audio-disc {
  width: 92px; height: 92px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #b98a2f; border: 1px solid rgba(185, 138, 47, .35);
  background: radial-gradient(circle at 35% 30%, rgba(247, 217, 141, .5), rgba(217, 169, 79, .18));
}
.mv-audio-disc svg { width: 40px; height: 40px; }
.mv-audio audio { width: 100%; max-width: 380px; }
.mv-image { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.mv-image img { max-width: 100%; max-height: 100%; border-radius: 12px; }
/* 外链即独立应用：网页铺满窗口，不出现地址栏 */
.mv-web { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.mv-frame { flex: 1; min-height: 260px; width: 100%; border: 0; background: #fff; }
.mediaview.mv-browser, .mediaview.mv-app { padding: 0; gap: 0; overflow: hidden; }
.mv-browser .mv-web, .mv-app .mv-web { height: 100%; }
.mv-browser .mv-frame, .mv-app .mv-frame { border-radius: 0; min-height: 0; }
.mv-fallback { font-size: 13px; opacity: .75; padding: 20px; text-align: center; }
.mv-desc { font-size: 12.5px; opacity: .6; }
.mv-empty { padding: 30px; text-align: center; opacity: .6; }

/* 「新建文档」对话框补充：多字段堆叠 / 下拉 / 多行内容 / 提示行 */
.os-modal-card .os-modal-input + .os-modal-input,
.os-modal-card .os-modal-input + .os-modal-hint { margin-top: 8px; }
.os-modal-textarea { min-height: 76px; resize: vertical; line-height: 1.6; }
select.os-modal-input { appearance: none; -webkit-appearance: none; cursor: pointer; }
select.os-modal-input option { color: #1a2032; }
.os-modal-hint { font-size: 11.5px; line-height: 1.7; opacity: .55; }
/* WebDAV 设置表单：小标签 + 输入框成组 */
.wd-label { display: block; font-size: 11px; opacity: .6; margin-bottom: 8px; }
.wd-label .os-modal-input { margin-top: 4px; }
.nd-upload-row { margin: 8px 0 2px; }

/* ----- 磨砂窗口深色变体 ----- */
#desktop.frosted .radio-head h3 { color: #f7ecd2; }
#desktop.frosted .radio-head p { color: rgba(245, 240, 230, .5); }
#desktop.frosted .radio-ch { background: rgba(245, 240, 230, .06); border-color: rgba(245, 240, 230, .13); color: rgba(245, 240, 230, .85); }
#desktop.frosted .radio-ch:hover { border-color: rgba(242, 201, 107, .5); }
#desktop.frosted .radio-ch.on { background: rgba(242, 201, 107, .14); border-color: rgba(242, 201, 107, .55); color: #f7ecd2; }
#desktop.frosted .radio-console { background: rgba(245, 240, 230, .06); border-color: rgba(245, 240, 230, .13); }
#desktop.frosted .radio-now-name { color: rgba(245, 240, 230, .75); }
#desktop.frosted .radio-track { background: rgba(245, 240, 230, .08); border-color: rgba(245, 240, 230, .16); color: rgba(245, 240, 230, .8); }
#desktop.frosted .radio-track:hover { color: var(--gold); border-color: rgba(242, 201, 107, .5); }
#desktop.frosted .radio-mute { border-color: rgba(245, 240, 230, .16); color: rgba(245, 240, 230, .8); }
#desktop.frosted .radio-mute.on { color: var(--gold); border-color: rgba(242, 201, 107, .5); }

#desktop.frosted .vh-head h3,
#desktop.frosted .vh-now-title,
#desktop.frosted .mv-head h3 { color: #f7ecd2; }
#desktop.frosted .vh-head p { color: rgba(245, 240, 230, .5); }
#desktop.frosted .vh-card { background: rgba(245, 240, 230, .06); border-color: rgba(245, 240, 230, .13); color: rgba(245, 240, 230, .88); }
#desktop.frosted .vh-card:hover { border-color: rgba(242, 201, 107, .55); }
#desktop.frosted .vh-card-play { background: rgba(245, 240, 230, .1); }
#desktop.frosted .vh-back { border-color: rgba(245, 240, 230, .2); color: rgba(245, 240, 230, .8); }
#desktop.frosted .vh-back:hover { color: var(--gold); border-color: rgba(242, 201, 107, .5); }
#desktop.frosted .vh-empty { color: rgba(245, 240, 230, .85); }
#desktop.frosted .vh-empty h3 { color: #f7ecd2; }
#desktop.frosted .vh-empty pre { background: rgba(245, 240, 230, .07); border-color: rgba(245, 240, 230, .14); color: rgba(245, 240, 230, .85); }
#desktop.frosted .vh-empty code { background: rgba(245, 240, 230, .12); }
#desktop.frosted .mv-desc { color: rgba(245, 240, 230, .6); }
#desktop.frosted .mv-link-label { color: rgba(245, 240, 230, .6); }
#desktop.frosted .mv-link-url { color: rgba(245, 240, 230, .85); }
#desktop.frosted .mv-fallback { color: rgba(245, 240, 230, .8); }
#desktop.frosted .mv-fallback a { color: var(--gold); }
#desktop.frosted .mv-empty { color: rgba(245, 240, 230, .6); }

/* ----- 移动端 ----- */
@media (max-width: 767px) {
  .radio, .videohub { padding: 14px; }
  .mediaview { padding: 12px 14px; }
  .radio-ch, .vh-card { min-height: 44px; }
  .radio-play { width: 48px; height: 48px; }
  .mv-video, .mv-embed { min-height: 210px; }
  .vh-empty { padding: 22px 16px; }
}

/* ============================================================
 * 水彩动人感增量（金句 / 角落轮换 / 点击生星 / 注销确认）
 * ============================================================ */

/* 法文衬线小字：缀在中文金句下方 */
.bq-fr, .lq-fr, .cq-fr, .empty-fr {
  display: block;
  font-family: var(--garamond);
  font-style: italic;
  font-size: 0.78em;
  letter-spacing: 0.04em;
  text-indent: 0;
  opacity: 0.72;
  margin-top: 0.35em;
}

/* 开机金句：放在进度下方，弱一档，不抢主层级 */
.boot-quote {
  font-family: var(--kai);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: rgba(255, 236, 210, 0.42);
  line-height: 1.75;
  margin: 4px 0 0;
  padding: 0 8px;
  max-width: 22em;
  opacity: 0;
  animation: brandIn 0.9s ease 1.05s forwards;
}
.boot-quote .bq-fr {
  display: block;
  margin-top: 0.35em;
  font-family: var(--garamond);
  font-size: 0.92em;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

/* 登录页金句：只有用心才能看得清 */
.login-quote {
  font-family: var(--kai);
  font-size: 12.5px; letter-spacing: 0.1em; text-indent: 0.1em;
  color: rgba(245, 240, 230, 0.5);
  line-height: 1.9;
  margin-top: 12px;
  padding: 0 28px;
  text-shadow: 0 2px 18px rgba(10, 21, 48, 0.6);
  opacity: 0;
  animation: brandIn 1s ease 0.5s forwards;
}
#login.show .login-quote { animation-delay: 0.55s; }

/* 桌面角落常驻金句：极淡，24s 轮换（main.js 加 .cq-swap 重放淡入） */
#corner-quote {
  position: absolute;
  right: 18px; bottom: 76px; /* Dock 上方 */
  max-width: min(300px, 60vw);
  text-align: right;
  font-family: var(--kai);
  font-size: 11px; letter-spacing: 0.06em;
  color: rgba(245, 240, 230, 0.34);
  line-height: 1.8;
  pointer-events: none;
  z-index: 4;
}
.theme-dusk #corner-quote { color: rgba(58, 46, 79, 0.42); }
#desktop:not(.theme-dusk):not(.theme-night) #corner-quote { color: rgba(74, 64, 54, 0.4); }
#corner-quote .cq-fr { font-size: 0.72em; opacity: 0.6; margin-top: 0.2em; }
#corner-quote.cq-swap { animation: cornerIn 1.2s var(--ease-out) forwards; }
@keyframes cornerIn {
  from { opacity: 0; transform: translateY(6px); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* 点击桌面空白处诞生的小星星：0→1.2 过冲→1，停留后淡出 */
.click-star {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 15px;
  color: var(--star-hue, var(--star-gold));
  text-shadow: 0 0 10px rgba(242, 201, 107, 0.7);
  pointer-events: none;
  z-index: 5;
  animation: starBorn 2.6s var(--ease-out) forwards;
}
@keyframes starBorn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  22%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  72%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

/* 访达空状态 / 终端金句的法文行 */
.finder-empty .empty-fr { margin-top: 0.5em; opacity: 0.6; }
.term-out.term-fr { font-family: var(--garamond); font-style: italic; font-size: 12.5px; opacity: 0.75; }

/* 注销确认：金句挽留内联卡 */
.acc-confirm {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--r-card);
  background: rgba(242, 201, 107, 0.08);
  border: 0.5px solid rgba(185, 138, 47, 0.25);
  animation: cornerIn 0.5s var(--ease-out) forwards;
}
.acc-confirm-quote {
  font-family: var(--kai);
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.8;
}
.acc-confirm-btns { display: flex; gap: 8px; margin-top: 10px; }
.acc-confirm-btns .account-btn { flex: 1; }

/* 移动端：角落金句更短更不抢戏 */
@media (max-width: 768px) {
  #corner-quote { right: 12px; bottom: 66px; max-width: 46vw; font-size: 10px; }
  .boot-quote, .login-quote { font-size: 11px; }
}

/* reduced-motion：彩蛋与金句动效全部静默为直接呈现 */
@media (prefers-reduced-motion: reduce) {
  .click-star { animation: none; opacity: 0; }
  .boot-quote, .login-quote, #corner-quote.cq-swap, .acc-confirm { animation: none; opacity: 1; }
}

/* 角落金句移到左下：右下留给桌面图标与 Dock 呼吸（截图走查修正） */
#corner-quote { left: 18px; right: auto; bottom: 18px; text-align: left; }
@media (max-width: 768px) {
  #corner-quote { left: auto; right: 12px; bottom: 128px; max-width: 46vw; text-align: right; }
}

/* ============================================================
 * 优雅化增量（2026-07 打磨）
 * 入场编排 / 金句可读性 / 登录页聚焦 / 移动端细节
 * 说明：本段全部为追加覆盖，不改上文原规则；reduced-motion 已由
 * 1277 行全局规则把所有动画压到瞬时，无需重复处理。
 * ============================================================ */

/* ---- 桌面入场编排：#desktop 从 hidden 变为可见时各元素依次抵达。
 * 菜单栏改为顶部悬停浮现，不再播放 barIn 入场动画。 ---- */
#dock { animation: dockIn 0.75s var(--ease-out) 0.32s backwards; }
@keyframes dockIn {
  from { transform: translateY(150%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
/* 桌面图标：错峰弹入（refreshIcons 重渲染时会重播，权当刷新反馈）。
 * 应用瓷贴与文件夹都是 #desktop-icons 的直接子代，nth-child 延迟天然按序 stagger */
.dicon, .dapp { animation: iconIn 0.55s var(--ease-spring) backwards; }
.dicon:nth-child(1), .dapp:nth-child(1) { animation-delay: 0.30s; }
.dicon:nth-child(2), .dapp:nth-child(2) { animation-delay: 0.37s; }
.dicon:nth-child(3), .dapp:nth-child(3) { animation-delay: 0.44s; }
.dicon:nth-child(4), .dapp:nth-child(4) { animation-delay: 0.51s; }
.dicon:nth-child(5), .dapp:nth-child(5) { animation-delay: 0.58s; }
.dicon:nth-child(6), .dapp:nth-child(6) { animation-delay: 0.65s; }
.dicon:nth-child(7), .dapp:nth-child(7) { animation-delay: 0.72s; }
.dicon:nth-child(n+8), .dapp:nth-child(n+8) { animation-delay: 0.79s; }
@keyframes iconIn {
  from { opacity: 0; transform: translateY(14px) scale(0.86); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ---- 金句可读性：保持「极淡」气质，但让人能看清 ---- */
#corner-quote { color: rgba(245, 240, 230, 0.46); text-shadow: 0 1px 12px rgba(10, 21, 48, 0.5); }
#desktop:not(.theme-dusk):not(.theme-night) #corner-quote {
  color: rgba(74, 64, 54, 0.52);
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.55);
}
.theme-dusk #corner-quote { text-shadow: 0 1px 10px rgba(255, 255, 255, 0.45); }
.boot-quote { color: rgba(255, 236, 210, 0.42); }
.login-quote { color: rgba(245, 240, 230, 0.58); }

/* ---- 登录页聚焦：暖黄昏暗角（勿用冷蓝，会把夕阳压成灰雾） ---- */
#login {
  background:
    radial-gradient(ellipse 75% 60% at 50% 36%, transparent 18%, rgba(48, 26, 40, 0.10) 55%, rgba(20, 10, 22, 0.50) 100%);
}
/* 移动端必须写在全局 #login 之后，否则会被上面的 radial 盖回冷灰感 */
@media (max-width: 768px) {
  #login {
    background:
      linear-gradient(180deg,
        rgba(50, 28, 42, 0.00) 0%,
        rgba(55, 30, 40, 0.02) 32%,
        rgba(40, 20, 32, 0.16) 58%,
        rgba(22, 12, 22, 0.42) 78%,
        rgba(14, 8, 16, 0.58) 100%);
  }
}
/* 进入按钮：呼吸金光，安静地邀请 */
#login-enter { animation: enterGlow 3.4s ease-in-out 1.2s infinite; }
@keyframes enterGlow {
  0%, 100% { box-shadow: 0 6px 26px rgba(242, 201, 107, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
  50%      { box-shadow: 0 8px 36px rgba(242, 201, 107, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
}

/* ---- 移动端细节 ---- */
@media (max-width: 768px) {
  /* 图标名称不截断：字号缩一点、去掉字距与多余内边距 */
  .dicon, .dapp { width: 78px; }
  .dicon-label, .dapp-label { font-size: 11px; letter-spacing: 0; padding: 1px 2px; }
  /* 角落金句挪到左下：避开 Dock 与图标横排（与上文桌面端处理对齐） */
  #corner-quote { left: 12px; right: auto; bottom: 84px; max-width: 44vw; text-align: left; }
}

/* ---- 星球氛围光晕：叠加在 3D 画布之上的一层呼吸暖光 ----
   屏幕混合只提亮不压暗；夜晚是星尘金，黄昏借落日的暖，白天是一圈淡蓝日芒。 */
.planet-aura {
  position: absolute; z-index: 2;
  left: 50%; top: 54%;
  width: 92vmin; height: 92vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 236, 180, 0.16) 0%, rgba(242, 201, 107, 0.06) 38%, transparent 66%),
    radial-gradient(circle at 50% 52%, rgba(160, 200, 255, 0.08) 0%, transparent 72%);
  animation: auraBreath 9s ease-in-out infinite;
  transition: background 2.4s ease;
}
@keyframes auraBreath {
  0%, 100% { opacity: 0.82; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
}
/* 白天：淡金 + 天蓝双层，让星球轮廓更「有空气」 */
#desktop:not(.theme-dusk):not(.theme-night) .planet-aura {
  background:
    radial-gradient(circle at 48% 46%, rgba(255, 255, 255, 0.22) 0%, rgba(200, 230, 255, 0.08) 42%, transparent 64%),
    radial-gradient(circle at 55% 58%, rgba(255, 230, 170, 0.10) 0%, transparent 58%);
}
/* 黄昏 / 日落彩蛋：暖橙，呼应太阳落下的方向 */
#desktop.theme-dusk .planet-aura, #desktop.egg-shown .planet-aura {
  background:
    radial-gradient(circle at 42% 58%, rgba(255, 170, 110, 0.20) 0%, rgba(255, 179, 124, 0.07) 44%, transparent 70%),
    radial-gradient(circle at 60% 40%, rgba(255, 210, 140, 0.10) 0%, transparent 55%);
}
/* 夜晚：更冷一点的星尘晕，托住深蓝星球 */
#desktop.theme-night:not(.theme-snow) .planet-aura {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 220, 150, 0.12) 0%, rgba(140, 170, 255, 0.06) 46%, transparent 70%);
}
/* 移动端：星球偏大，光晕跟着放大一点 */
@media (max-width: 768px) {
  .planet-aura { width: 120vmin; height: 120vmin; top: 50%; }
}

/* ---- 亮主题图标名称：白天 / 黄昏的天空是亮的，白字会洗没 ---- */
#desktop:not(.theme-night) .dicon-label {
  color: var(--ink);
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.65);
}
/* 亮主题下的选中态：白底 pill 在亮天空上没对比，翻成墨底纸字 */
#desktop:not(.theme-night) .dicon.selected .dicon-label {
  background: rgba(28, 36, 64, 0.78);
  color: var(--paper);
  text-shadow: none;
}

/* ============================================================
   走进世界：桌面轨道机位一键落到地表第一人称
   ============================================================ */
#world-enter { display: none !important; } /* 已并入狐狸视角切换 */

/* 热气球旗帜细看 */
#balloon-hint {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(12px);
  z-index: 9600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 18px 14px;
  border-radius: 22px;
  border: 1px solid rgba(242, 201, 107, 0.4);
  background: rgba(16, 22, 40, 0.72);
  color: rgba(245, 240, 230, 0.95);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: center;
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none; /* 容器不挡点击；按钮单独打开 */
  transition: opacity 0.35s ease, transform 0.35s ease;
  max-width: min(90vw, 480px);
}
#balloon-hint.on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: none;
}
#balloon-hint b {
  font-weight: 600;
  color: #f2c96b;
  letter-spacing: 0.12em;
  font-size: 14px;
}
#balloon-hint span {
  font-size: 12px;
  opacity: 0.78;
  line-height: 1.5;
}
#balloon-close {
  pointer-events: auto;
  margin-top: 2px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(245, 240, 230, 0.35);
  background: rgba(242, 201, 107, 0.18);
  color: rgba(245, 240, 230, 0.95);
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
}
#balloon-close:hover {
  background: rgba(242, 201, 107, 0.32);
  border-color: rgba(242, 201, 107, 0.6);
}
/* 细看时只略淡化 UI，绝不锁死点击（曾导致整桌面无法操作） */
#desktop.balloon-focus #menubar,
#desktop.balloon-focus #dock,
#desktop.balloon-focus #desktop-icons {
  opacity: 0.55;
  transition: opacity 0.4s ease;
}

/* 狐狸漫游：第三人称 / 第一人称切换（右上角，计分在它左侧） */
#fp-view-toggle {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(245, 240, 230, 0.35);
  background: rgba(18, 26, 46, 0.55);
  color: rgba(245, 240, 230, 0.95);
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  pointer-events: auto;
}
#fp-view-toggle:hover {
  background: rgba(34, 48, 78, 0.75);
  border-color: rgba(242, 201, 107, 0.55);
  transform: translateY(-1px);
}
#fp-view-toggle[aria-pressed="true"] {
  border-color: rgba(242, 201, 107, 0.5);
  background: rgba(242, 201, 107, 0.14);
}
#fp-view-toggle .fp-view-ico { font-size: 14px; line-height: 1; }
#fp-view-toggle[hidden] { display: none !important; }
#fp-ui.horizon-on #fp-view-toggle { top: 56px; } /* 避开锁定提示 */

/* 走进世界时的时间拨杆：看日出日落 */
#hz-time {
  position: absolute;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 12px;
  min-width: min(88vw, 420px);
  border-radius: 18px;
  border: 1px solid rgba(245, 240, 230, 0.22);
  background: rgba(12, 18, 36, 0.55);
  backdrop-filter: blur(10px);
  color: rgba(245, 240, 230, 0.92);
  pointer-events: auto;
  z-index: 70;
}
#hz-time .hz-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
#hz-time .hz-presets button {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(245, 240, 230, 0.28);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
}
#hz-time .hz-presets button:hover {
  border-color: rgba(242, 201, 107, 0.55);
  background: rgba(242, 201, 107, 0.12);
}
#hz-hour {
  width: min(78vw, 360px);
  accent-color: #f2c96b;
  cursor: pointer;
}
#hz-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  opacity: 0.85;
}
#fp-ui.horizon-on #fp-jump { display: none; }
#fp-ui.horizon-on { cursor: crosshair; }
#fp-ui.horizon-on.hz-locked { cursor: none; }
/* 锁定提示：右上角小字 */
#fp-ui.horizon-on::after {
  content: '狐狸第一人称 · 点击锁定鼠标 · 滚轮缩放 · V 切回跟随';
  position: absolute;
  top: 18px; right: 18px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(245, 240, 230, 0.2);
  background: rgba(12, 18, 36, 0.45);
  color: rgba(245, 240, 230, 0.72);
  font-size: 11px;
  letter-spacing: 0.06em;
  pointer-events: none;
  backdrop-filter: blur(6px);
}
#fp-ui.horizon-on.hz-locked::after {
  content: '鼠标已锁定 · 滚轮缩放 · Esc 解锁 · V 切回跟随';
  border-color: rgba(242, 201, 107, 0.35);
  color: rgba(255, 236, 190, 0.88);
}
@media (pointer: coarse) {
  #fp-ui.horizon-on::after {
    content: '狐狸第一人称 · 右半屏环视 · 双指缩放';
  }
  #fp-ui.horizon-on.hz-locked::after { content: '狐狸第一人称 · 右半屏环视 · 双指缩放'; }
}

/* ============================================================
   第三人称狐狸漫游叠加层
   点小狐狸进入：桌面 UI 退场，镜头跟在小狐狸身后，陪它走遍这颗星球。
   ============================================================ */
#fp-ui {
  position: fixed; inset: 0; z-index: 500;
  touch-action: none;              /* 拖拽环视不触发浏览器手势 */
  cursor: grab;
  background: transparent;
  font-family: var(--font-ui, inherit);
}
#fp-ui:active { cursor: grabbing; }

/* 进入漫游时，桌面整套 UI 退场（菜单栏 / Dock / 图标 / 窗口 / 装饰） */
#desktop.fp-hidden #menubar,
#desktop.fp-hidden #dock,
#desktop.fp-hidden #desktop-icons,
#desktop.fp-hidden #windows,
#desktop.fp-hidden #corner-quote,
#desktop.fp-hidden #constellation,
#desktop.fp-hidden .planet-aura,
#desktop.fp-hidden #sunset-glow,
body.fox-roam #desktop #menubar,
body.fox-roam #desktop #dock,
body.fox-roam #desktop #desktop-icons,
body.fox-roam #desktop #windows,
body.fox-roam #desktop #corner-quote,
body.fox-roam #desktop #constellation,
body.fox-roam #desktop .planet-aura,
body.fox-roam #desktop #sunset-glow { display: none !important; visibility: hidden !important; pointer-events: none !important; }
#desktop.fp-hidden ~ #world-enter,
body:has(#desktop.fp-hidden) #world-enter,
body.fox-roam #world-enter { display: none !important; }

/* 返回按钮：左上角一枚「回到桌面」 */
#fp-back {
  position: absolute; top: 18px; left: 18px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px 9px 12px;
  border: 1px solid rgba(245, 240, 230, 0.35);
  border-radius: 999px;
  background: rgba(20, 26, 48, 0.55);
  color: rgba(245, 240, 230, 0.92);
  font-size: 13px; letter-spacing: 0.04em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
#fp-back:hover { background: rgba(34, 44, 78, 0.8); border-color: rgba(245, 240, 230, 0.6); transform: translateX(-2px); }
#fp-back svg { width: 15px; height: 15px; }

/* 底部提示：进来时告诉你怎么玩，几秒后温柔淡出 */
#fp-hint {
  position: absolute; left: 50%; bottom: 42px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  max-width: min(88vw, 560px);
  padding: 11px 20px;
  border: 1px solid rgba(245, 240, 230, 0.22);
  border-radius: 999px;
  background: rgba(12, 16, 34, 0.62);
  color: rgba(245, 240, 230, 0.9);
  font-size: 13px; line-height: 1.6; text-align: center;
  backdrop-filter: blur(8px);
  pointer-events: none;
}
#fp-hint .fp-hint-emoji { font-size: 18px; }
#fp-hint.fp-fade { animation: fpHintFade 4.2s ease forwards; }
@keyframes fpHintFade {
  0%, 62% { opacity: 1; }
  100%    { opacity: 0; visibility: hidden; }
}


/* 虚拟摇杆：只在触屏设备出现。静息时淡淡停在左下角作为提示，
 * 手指按住左半屏时整枚摇杆浮动到手指处（主流手游的浮动摇杆手感）。 */
#fp-joy {
  display: none;
  z-index: 60;
  position: absolute; left: 26px; bottom: calc(34px + var(--sb));
  width: 116px; height: 116px;
  border-radius: 50%;
  border: 1.5px solid rgba(245, 240, 230, 0.24);
  background: radial-gradient(circle at 50% 50%, rgba(20, 26, 48, 0.42), rgba(20, 26, 48, 0.24));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  touch-action: none;
  pointer-events: none;
  opacity: 0.42;
  transition: opacity 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
#fp-joy.fp-joy-on {
  opacity: 1;
  border-color: rgba(242, 201, 107, 0.6);
  box-shadow: 0 0 26px rgba(242, 201, 107, 0.18);
}
#fp-joy-knob {
  position: absolute; left: 50%; top: 50%;
  width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: rgba(245, 240, 230, 0.5);
  border: 1.5px solid rgba(245, 240, 230, 0.75);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.05s linear, background 160ms var(--ease-out);
  pointer-events: none;
}
#fp-joy.fp-joy-on #fp-joy-knob {
  background: rgba(242, 201, 107, 0.62);
  border-color: rgba(255, 236, 190, 0.9);
}
@media (pointer: coarse) {
  #fp-joy { display: block; }
  /* 有摇杆时提示文案上移一点避免重叠，并换成触屏说法 */
  #fp-hint { bottom: calc(186px + var(--sb)); font-size: 12px; padding: 9px 15px; max-width: min(78vw, 420px); }
}
/* 触屏兜底：部分平板 pointer 不准，进狐狸后由 JS 挂 .fp-touch */
#fp-ui.fp-touch #fp-joy { display: block; }
#fp-ui.fp-touch #fp-jump { display: flex; }
#fp-ui.fp-touch #fp-shoot { display: flex; }
#fp-ui.fp-touch #fp-hint { bottom: calc(186px + var(--sb)); font-size: 12px; padding: 9px 15px; max-width: min(78vw, 420px); }
#fp-ui.fp-touch #fp-prompt { bottom: calc(230px + var(--sb)); }


/* ============================================================
 * 文件夹舞台：双击文件夹，卡片飞上全屏毛玻璃轮播
 * （交互移植自 portfolio-site-template，适配本机窗口系统）
 * ============================================================ */
/* 背景是能看见星球运转的毛玻璃：tint 薄、模糊轻，
 * 星球的轮廓与动势透得进来，而不是一片白茫茫 */
#fstage {
  position: fixed; inset: 0; z-index: 200;
  background: rgb(245 240 230 / 0.30);
  backdrop-filter: blur(9px) saturate(130%);
  -webkit-backdrop-filter: blur(9px) saturate(130%);
  opacity: 0; pointer-events: none;
  transition: opacity 240ms var(--ease-out);
}
#fstage.is-open { opacity: 1; pointer-events: auto; }
#desktop.theme-night #fstage {
  background: rgb(9 17 40 / 0.42);
  backdrop-filter: blur(9px) saturate(120%);
  -webkit-backdrop-filter: blur(9px) saturate(120%);
}

.fs-bar {
  position: absolute; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 24px;
}
.fs-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.fs-meta { margin-top: 2px; font-size: 12px; color: var(--ink-faint); }
#desktop.theme-night .fs-title { color: rgba(245, 240, 230, 0.92); }
#desktop.theme-night .fs-meta { color: rgba(245, 240, 230, 0.55); }
.fs-bar-btns { display: flex; gap: 10px; }
.fs-bar button {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 999px; cursor: pointer;
  color: var(--ink-soft); background: rgb(255 255 255 / 0.7);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.05);
  transition: color 0.16s var(--ease-out), transform 0.16s var(--ease-out);
}
.fs-bar button svg { width: 16px; height: 16px; }
.fs-bar button:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .fs-bar button:hover { color: var(--ink); }
}
#desktop.theme-night .fs-bar button {
  color: rgba(245, 240, 230, 0.6); background: rgb(255 255 255 / 0.12);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
}
#desktop.theme-night .fs-bar button:hover { color: rgba(245, 240, 230, 0.95); }

.fs-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 45;
  width: 42px; height: 42px; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer;
  color: var(--ink-soft); background: rgb(255 255 255 / 0.65);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06);
  transition: color 0.16s var(--ease-out), transform 0.16s var(--ease-out);
}
.fs-nav svg { width: 18px; height: 18px; }
.fs-prev { left: 22px; }
.fs-next { right: 22px; }
.fs-nav:hover { color: var(--ink); transform: translateY(-50%) scale(1.06); }
.fs-nav[hidden] { display: none; }
#desktop.theme-night .fs-nav {
  color: rgba(245, 240, 230, 0.6); background: rgb(255 255 255 / 0.12);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
}
#desktop.theme-night .fs-nav:hover { color: rgba(245, 240, 230, 0.95); }

.fs-open {
  position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); z-index: 45;
  padding: 10px 24px; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: var(--paper);
  font-size: 12.5px; letter-spacing: 0.06em;
  box-shadow: 0 8px 24px rgb(10 21 48 / 0.25);
  transition: transform 0.16s var(--ease-out), opacity 0.2s ease;
}
.fs-open:hover { transform: translateX(-50%) translateY(-2px); }
.fs-open[hidden] { display: none; }
#desktop.theme-night .fs-open { background: var(--gold); color: var(--ink); }

.fs-hint {
  position: absolute; inset: auto 0 24px; z-index: 45;
  text-align: center; font-size: 11px; letter-spacing: 0.08em;
  color: var(--ink-faint);
}
#desktop.theme-night .fs-hint { color: rgba(245, 240, 230, 0.4); }
.fs-hint-touch {
  position: absolute; inset: auto 0 22px; z-index: 45; display: none;
  text-align: center; font-size: 11.5px; letter-spacing: 0.06em;
  color: var(--ink-faint);
}
#desktop.theme-night .fs-hint-touch { color: rgba(245, 240, 230, 0.45); }
@media (pointer: coarse) {
  .fs-hint { display: none; }
  .fs-hint-touch { display: block; }
  .fs-nav { display: none; }
  .fs-open { bottom: 92px; }
}

/* 舞台可横向拖动：手指纵向仍归页面，横向交给轮播 */
#fstage { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
#fstage.is-dragging { cursor: grabbing; }
#fstage.is-dragging .fs-card { cursor: grabbing; }

/* 页码点：一眼看出这里有多少件、正在看第几件 */
.fs-dots {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 46;
  display: flex; align-items: center; gap: 8px;
  max-width: min(76vw, 520px); padding: 7px 12px;
  overflow-x: auto; scrollbar-width: none;
  border-radius: 999px; background: rgb(255 255 255 / 0.5);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.05);
}
.fs-dots::-webkit-scrollbar { display: none; }
#desktop.theme-night .fs-dots {
  background: rgb(255 255 255 / 0.1); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
}
.fs-dot {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 999px; cursor: pointer;
  background: rgb(10 21 48 / 0.24);
  transition: width 0.22s var(--ease-out), background 0.22s var(--ease-out);
}
.fs-dot.on { width: 20px; background: var(--ink); }
#desktop.theme-night .fs-dot { background: rgb(245 240 230 / 0.3); }
#desktop.theme-night .fs-dot.on { background: var(--gold); }
@media (pointer: coarse) {
  .fs-dots { bottom: 48px; }
  .fs-dot { width: 8px; height: 8px; }
  .fs-dot.on { width: 22px; }
}

/* ---- 舞台卡片：与文件夹里是同一件东西，只是放大到可读 ---- */
.fs-card { position: absolute; left: 0; top: 0; z-index: 30; cursor: pointer; will-change: transform; }
.fs-card > * {
  width: 100%; height: 100%; box-sizing: border-box;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.05), 0 2px 4px rgb(0 0 0 / 0.06), 0 14px 30px rgb(0 0 0 / 0.14);
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s ease;
}
/* 照片：白卡纸相框 + 同心圆角 */
.fs-photo { background: #fff; border-radius: 16px; padding: 10px; }
.fs-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
/* 文稿：一张真正的微型手稿，放大后就是可读的正文 */
.fs-note { background: #fff; border-radius: 16px; padding: 28px 26px; overflow: hidden; text-align: left; }
.fs-note-title { font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.fs-note-p { margin-top: 12px; font-size: 12.5px; line-height: 1.8; color: rgba(28, 36, 64, 0.62); }
/* 链接：书签卡 */
.fs-link { background: #fff; border-radius: 16px; padding: 22px 24px; text-align: left; }
.fs-link-tag {
  display: inline-block; font-size: 10.5px; letter-spacing: 0.08em;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(242, 201, 107, 0.2); color: var(--gold-deep);
}
.fs-link h4 { margin-top: 10px; font-size: 16px; color: var(--ink); }
.fs-link p { margin-top: 8px; font-size: 12px; line-height: 1.7; color: rgba(28, 36, 64, 0.6); }
.fs-link-url { margin-top: 10px; font-size: 11px; color: var(--ink-faint); }
/* 应用：图标端坐在白卡上 */
.fs-app { background: #fff; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.fs-app svg { width: 84px; height: 84px; color: var(--gold-deep); }
.fs-app p { font-size: 14px; font-weight: 600; color: var(--ink); }
/* 舞台上的子文件夹卡：彩色纸文件夹 */
.fs-app-folder {
  background:
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.3)),
    var(--noise-paper),
    var(--tile, var(--gold));
}
.fs-app-folder svg { color: rgba(28, 36, 64, 0.72); }
/* 媒体（视频 / 音频 / 嵌入） */
.fs-media { background: #fff; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.fs-media svg { width: 68px; height: 68px; color: var(--gold-deep); }
.fs-media p { max-width: 82%; text-align: center; font-size: 13px; color: var(--ink-soft); }
/* 占位：一颗等星星落下来的卡 */
.fs-star {
  background: rgb(255 255 255 / 0.85); border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  font-size: 44px; color: var(--gold);
}
.fs-star p { font-size: 12.5px; color: var(--ink-faint); }
.fs-card > .shake { animation: fsShake 0.45s ease; }
@keyframes fsShake {
  20% { transform: translateX(-7px) rotate(-1deg); }
  45% { transform: translateX(6px) rotate(1deg); }
  70% { transform: translateX(-4px); }
  100% { transform: none; }
}

/* 窗口内嵌应用：网页铺满内容区 */
.mv-browser .mv-web, .mv-app .mv-web { position: relative; }
.mv-browser .mv-frame, .mv-app .mv-frame { position: absolute; inset: 0; height: 100%; }
.win-body:has(.mv-app),
.mac-body:has(.mv-app),
.xp-body:has(.mv-app),
.w11-body:has(.mv-app),
.ios-body:has(.mv-app),
.ios-body:has(.ios-webapp) {
  overflow: hidden;
}

/* ===== 全屏沉浸模式 ===== */
#os-fullscreen-toggle.is-on { color: var(--accent, #e8b661); }
#os-fs-hint {
  position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 12px);
  max-width: min(78vw, 420px); padding: 12px 18px; border-radius: 16px;
  background: rgba(18, 20, 30, .82); color: rgba(245, 240, 230, .94);
  border: 1px solid rgba(245, 240, 230, .16); backdrop-filter: blur(14px);
  font-size: 13px; line-height: 1.85; text-align: center; letter-spacing: .02em;
  opacity: 0; pointer-events: none; z-index: 9999;
  transition: opacity .28s ease, transform .28s ease;
}
#os-fs-hint.show { opacity: 1; transform: translate(-50%, 0); }

/* ===== 访达：显示方式（大 / 中 / 小图标 / 列表）===== */
.finder-views { display: flex; align-items: center; gap: 2px; flex: none; padding: 2px; border-radius: 999px; background: rgba(28, 36, 64, 0.06); }
.fview-btn {
  width: 28px; height: 24px; display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; border-radius: 999px; cursor: pointer;
  color: rgba(28, 36, 64, 0.45); transition: background .15s ease, color .15s ease;
}
.fview-btn svg { width: 15px; height: 15px; }
.fview-btn:hover { color: var(--ink); background: rgba(255, 255, 255, .6); }
.fview-btn.active { color: var(--gold-deep); background: #fff; box-shadow: 0 1px 3px rgb(10 21 48 / .14); }
#desktop.frosted .finder-views { background: rgba(245, 240, 230, .08); }
#desktop.frosted .fview-btn { color: rgba(245, 240, 230, .5); }
#desktop.frosted .fview-btn:hover { color: rgba(245, 240, 230, .95); background: rgba(245, 240, 230, .1); }
#desktop.frosted .fview-btn.active { color: var(--gold); background: rgba(245, 240, 230, .16); box-shadow: none; }

.finder-grid.view-xl { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px 20px; }
.finder-grid.view-xl .entry-name { font-size: 13px; }
.finder-grid.view-sm { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px 10px; }
.finder-grid.view-sm .entry-name { font-size: 10.5px; }
.finder-grid.view-sm .entry-desc { display: none; }
.finder-grid.view-sm .fcard-note, .finder-grid.view-sm .fcard-link .fcard-link-txt { padding: 6px 7px; }
.finder-grid.view-sm .fp-l { display: none; }
.finder-grid.view-sm .fcard-glyph svg, .finder-grid.view-sm .fcard-app svg { width: 28px; height: 28px; }
.finder-grid.view-sm .fcard-folder svg { width: 30px; height: 30px; }

/* 列表：一行一件，左图标右文字，像访达的清单视图 */
.finder-grid.view-list { display: block; }
.finder-grid.view-list .finder-entry {
  flex-direction: row; align-items: center; text-align: left; gap: 12px;
  padding: 7px 10px; border-radius: 10px;
}
.finder-grid.view-list .finder-entry + .finder-entry { border-top: 1px solid rgba(28, 36, 64, .06); }
#desktop.frosted .finder-grid.view-list .finder-entry + .finder-entry { border-top-color: rgba(245, 240, 230, .08); }
.finder-grid.view-list .fcard { width: 40px; flex: none; aspect-ratio: 10 / 8; border-radius: 7px; }
.finder-grid.view-list .fcard .fp-t, .finder-grid.view-list .fcard .fp-l,
.finder-grid.view-list .fcard .fp-tag, .finder-grid.view-list .fc-count, .finder-grid.view-list .fc-name { display: none; }
.finder-grid.view-list .fcard-glyph svg, .finder-grid.view-list .fcard-app svg { width: 20px; height: 20px; }
.finder-grid.view-list .fcard-folder svg { width: 22px; height: 22px; }
.finder-grid.view-list .finder-entry:hover .fcard { transform: none; }
.finder-grid.view-list .entry-name { font-size: 12.5px; flex: 1; min-width: 0; word-break: break-all; }
.finder-grid.view-list .entry-desc {
  flex: none; max-width: 42%; text-align: right; font-size: 10.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 网页截图：链接 / 含链接的文件夹自动抓取目标网页首屏 */
.fshot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity .45s ease;
}
.fshot.on { opacity: 1; }
.fcard-link.has-shot .fcard-link-txt {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px;
  background: linear-gradient(rgba(10, 21, 48, 0), rgba(10, 21, 48, .82));
}
.fcard-link.has-shot .fp-t { color: #fff; }
.fcard-link.has-shot .fp-l { display: none; }
.fcard-link.has-shot .fp-tag { display: none; }
.fcard-folder.has-shot .fshot-bg { filter: saturate(1.05); }
.fcard-folder.has-shot .fshot-bg.on { opacity: .55; }
.fcard-folder.has-shot .fc-face { position: relative; filter: drop-shadow(0 2px 6px rgb(10 21 48 / .35)); }

/* ===== 漫游：跳跃按钮（触屏右下角，键鼠用空格） ===== */
#fp-jump{
  position:fixed; right:26px; bottom:calc(34px + var(--sb)); z-index:60;
  width:82px; height:82px; border-radius:50%;
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border:1px solid rgba(245,240,230,.34);
  background:radial-gradient(circle at 34% 28%, rgba(242,201,107,.34), rgba(20,22,38,.42));
  color:rgba(245,240,230,.92); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  box-shadow:0 6px 26px rgba(0,0,0,.28), inset 0 0 18px rgba(242,201,107,.14);
  font-size:13px; letter-spacing:.16em; cursor:pointer; touch-action:none; user-select:none;
  transition:transform .12s ease, box-shadow .2s ease;
}
#fp-jump svg{ width:26px; height:26px; }
#fp-jump.fp-jump-hit{ animation:fp-jump-pop .26s ease-out; }
@keyframes fp-jump-pop{
  0%{ transform:scale(.86); box-shadow:0 0 0 0 rgba(242,201,107,.45); }
  100%{ transform:scale(1); box-shadow:0 0 0 22px rgba(242,201,107,0); }
}
@media (pointer: coarse){ #fp-jump{ display:flex; } }


/* ===== 漫游游戏层：星光计分 / 发射键 / 城堡提示 / 转场淡入 ===== */
#fp-score{
  position:absolute; top:20px; right:148px; z-index:62; /* 给「第一人称」按钮让位 */
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px; border-radius:999px;
  border:1px solid rgba(242,201,107,.34);
  background:rgba(20,26,48,.5); color:rgba(245,240,230,.92);
  font-size:13px; letter-spacing:.06em;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  pointer-events:none;
}
#fp-score .fp-score-star{ color:#F2C96B; font-size:15px; }

#fp-prompt{
  position:absolute; left:50%; bottom:calc(112px + var(--sb)); transform:translateX(-50%);
  z-index:62; padding:10px 20px; border-radius:999px;
  border:1px solid rgba(245,240,230,.28);
  background:rgba(20,26,48,.55); color:rgba(245,240,230,.9);
  font-size:13px; letter-spacing:.04em; cursor:pointer;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:border-color .25s ease, background .25s ease, transform .2s ease;
}
#fp-prompt.fp-prompt-hot{
  border-color:rgba(242,201,107,.7);
  background:rgba(46,38,26,.62);
  box-shadow:0 0 26px rgba(242,201,107,.2);
}
#fp-prompt:hover{ transform:translateX(-50%) translateY(-2px); }

/* 剧情确认条：走近景点/飞机时弹出，人工选择进入或先不了 */
#fp-encounter {
  position: absolute;
  left: 50%;
  bottom: calc(118px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 90;
  pointer-events: auto;
  max-width: min(92vw, 420px);
}
#fp-encounter[hidden] { display: none !important; }
#fp-encounter .fp-enc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 12px;
  border-radius: 18px;
  border: 1px solid rgba(242, 201, 107, 0.45);
  background: rgba(14, 20, 40, 0.72);
  color: rgba(245, 240, 230, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04);
  text-align: center;
}
#fp-encounter.fp-enc-hot .fp-enc-card {
  animation: fp-enc-pop 0.34s cubic-bezier(.2,.8,.2,1);
}
@keyframes fp-enc-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
#fp-encounter .fp-enc-msg {
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0.04em;
}
#fp-encounter .fp-enc-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
#fp-encounter .fp-enc-yes,
#fp-encounter .fp-enc-no {
  min-width: 104px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: 1px solid rgba(245, 240, 230, 0.28);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
#fp-encounter .fp-enc-yes {
  background: linear-gradient(160deg, rgba(242, 201, 107, 0.95), rgba(210, 160, 70, 0.92));
  color: #1a2038;
  border-color: rgba(255, 236, 190, 0.55);
  font-weight: 600;
}
#fp-encounter .fp-enc-no {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(245, 240, 230, 0.88);
}
#fp-encounter .fp-enc-yes:hover { transform: translateY(-1px); filter: brightness(1.05); }
#fp-encounter .fp-enc-no:hover {
  border-color: rgba(245, 240, 230, 0.45);
  background: rgba(255, 255, 255, 0.12);
}
#fp-encounter .fp-enc-hint {
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.62;
}
body.castle-inside #fp-encounter { display: none !important; }
#fp-ui.fp-touch #fp-encounter { bottom: calc(240px + env(safe-area-inset-bottom, 0px)); }
@media (pointer: coarse) {
  #fp-encounter { bottom: calc(240px + env(safe-area-inset-bottom, 0px)); }
}

/* 城堡模式：沉浸体验 —— 藏狐狸控件 + 藏桌面壳层 */
body.castle-inside #fp-back,
body.castle-inside #fp-view-toggle,
body.castle-inside #fp-hint,
body.castle-inside #fp-score,
body.castle-inside #fp-joy,
body.castle-inside #fp-jump,
body.castle-inside #fp-shoot,
body.castle-inside #fp-prompt,
body.castle-inside #hz-time {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* 桌面图标 / 菜单 / Dock / 窗口 全部退场 */
body.castle-inside #desktop #menubar,
body.castle-inside #desktop #dock,
body.castle-inside #desktop #desktop-icons,
body.castle-inside #desktop #windows,
body.castle-inside #desktop #corner-quote,
body.castle-inside #desktop #constellation,
body.castle-inside #desktop .planet-aura,
body.castle-inside #desktop #sunset-glow,
body.castle-inside #desktop #sunset-quote,
body.castle-inside #update-bar {
  display: none !important;
  pointer-events: none !important;
}
body.castle-inside #desktop {
  pointer-events: none !important;
}
#fp-ui.castle-mode {
  cursor: grab;
  background: transparent;
  /* 不挡楼层按钮：按钮在更高 z-index */
  z-index: 500;
}
#fp-ui.castle-mode:active { cursor: grabbing; }

/* 城堡里的离开按钮：须高于 #fp-ui(500)，否则点不到 */
#fp-exit{
  position:fixed; left:16px; top:calc(env(safe-area-inset-top, 0px) + 16px); z-index:620;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:999px;
  border:1px solid rgba(191,230,255,.34);
  background:rgba(16,24,46,.72); color:rgba(238,246,255,.95);
  font-size:12px; letter-spacing:.06em; cursor:pointer;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
  pointer-events: auto !important;
  touch-action: manipulation;
}
#fp-exit span{ font-size:14px; opacity:.85; }
#fp-exit:hover{ background:rgba(30,44,78,.82); border-color:rgba(191,230,255,.6); transform:translateY(-1px); }
#fp-exit[hidden]{ display:none !important; }

/* 四层游览面板：z 必须 > #fp-ui，否则鼠标/触屏点不中 */
#castle-floors {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 620;
  width: min(176px, 44vw);
  padding: 12px 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(242, 201, 107, 0.4);
  background: rgba(14, 18, 34, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 36px rgba(0,0,0,.4);
  color: rgba(245, 240, 230, 0.95);
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
#castle-floors[hidden] { display: none !important; }
#castle-floors .cf-title {
  font-size: 11px;
  letter-spacing: 0.16em;
  opacity: 0.55;
  text-align: center;
  margin-bottom: 8px;
}
#castle-floors .cf-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#castle-floors .cf-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(245, 240, 230, 0.14);
  background: rgba(245, 240, 230, 0.06);
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
#castle-floors .cf-btn:hover {
  background: rgba(245, 240, 230, 0.12);
  transform: translateX(-2px);
}
#castle-floors .cf-btn.on {
  background: rgba(242, 201, 107, 0.28);
  border-color: rgba(242, 201, 107, 0.7);
}
#castle-floors .cf-n {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  background: rgba(242, 201, 107, 0.22);
  color: #FFE9A8;
}
#castle-floors .cf-btn.on .cf-n {
  background: rgba(242, 201, 107, 0.55);
  color: #1a1420;
}
#castle-floors .cf-lab {
  font-size: 12.5px;
  letter-spacing: 0.04em;
}
#castle-floors .cf-nav {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
#castle-floors .cf-nav-btn {
  flex: 1;
  padding: 7px 4px;
  border-radius: 10px;
  border: 1px solid rgba(245, 240, 230, 0.16);
  background: rgba(245, 240, 230, 0.08);
  color: inherit;
  font-size: 12px;
  cursor: pointer;
}
#castle-floors .cf-nav-btn:hover:not(:disabled) {
  background: rgba(242, 201, 107, 0.22);
}
#castle-floors .cf-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
#castle-floors .cf-tip {
  margin-top: 8px;
  font-size: 10.5px;
  opacity: 0.45;
  text-align: center;
  line-height: 1.4;
}
@media (max-width: 620px) {
  #castle-floors {
    right: 8px;
    left: 8px;
    top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    transform: none;
    width: auto;
  }
  #castle-floors .cf-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #fp-exit { top: calc(env(safe-area-inset-top, 0px) + 10px); }
}



#fp-shoot{
  position:fixed; right:120px; bottom:calc(52px + var(--sb)); z-index:60;
  width:66px; height:66px; border-radius:50%;
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border:1px solid rgba(245,240,230,.32);
  background:radial-gradient(circle at 34% 28%, rgba(158,201,242,.34), rgba(20,22,38,.42));
  color:rgba(245,240,230,.92); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  box-shadow:0 6px 26px rgba(0,0,0,.28), inset 0 0 18px rgba(158,201,242,.14);
  font-size:12px; letter-spacing:.14em; cursor:pointer; touch-action:none; user-select:none;
}
#fp-shoot svg{ width:24px; height:24px; }
#fp-shoot.fp-shoot-hit{ animation:fp-shoot-pop .26s ease-out; }
@keyframes fp-shoot-pop{
  0%{ transform:scale(.86); box-shadow:0 0 0 0 rgba(245,240,230,.45); }
  100%{ transform:scale(1); box-shadow:0 0 0 20px rgba(245,240,230,0); }
}
@media (pointer: coarse){ #fp-shoot{ display:flex; } #fp-prompt{ bottom:calc(230px + var(--sb)); } }

#fp-fade{
  position:fixed; inset:0; z-index:900; pointer-events:none;
  background:#0B1024; opacity:0; transition:opacity .28s ease;
}
#fp-fade.on{ opacity:1; }

/* ===== 观景点分镜：黑边 + 暗角 + 字幕，像一段小电影 ===== */
#fp-cine {
  position: fixed; inset: 0; width: 100%; height: 100dvh; z-index: 90;
  opacity: 0; visibility: hidden;
  transition: opacity 420ms var(--ease-out), visibility 420ms;
}
#fp-cine.on { opacity: 1; visibility: visible; }
/* 宽画幅：只留一道很窄的渐隐黑边（画面几乎铺满整屏，不再切掉一大块） */
#fp-cine .fp-cine-bar {
  position: absolute; left: 0; right: 0; height: 4vh;
  transform: scaleY(0);
  transition: transform 520ms cubic-bezier(.22,.8,.28,1);
}
#fp-cine .fp-cine-bar.t {
  top: 0; transform-origin: top;
  background: linear-gradient(to bottom, rgba(5,7,15,.92), rgba(5,7,15,0));
}
#fp-cine .fp-cine-bar.b {
  bottom: 0; transform-origin: bottom; height: 7vh;
  background: linear-gradient(to top, rgba(5,7,15,.92), rgba(5,7,15,0));
}
#fp-cine.on .fp-cine-bar { transform: scaleY(1); }
/* 暗角：四周压暗一点，视线自然收进画面中心 */
#fp-cine .fp-cine-vig {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 48%, rgba(0,0,0,0) 52%, rgba(4,6,14,.36) 100%);
  opacity: 0; transition: opacity 900ms var(--ease-out) 200ms;
}
#fp-cine.on .fp-cine-vig { opacity: 1; }
#fp-cine .fp-cine-txt {
  position: absolute; left: 0; right: 0; bottom: calc(6vh + env(safe-area-inset-bottom, 0px));
  text-align: center; padding: 0 24px;
  color: rgba(248, 244, 236, 0.96);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: translateY(12px);
  transition: opacity 700ms var(--ease-out) 260ms, transform 700ms var(--ease-out) 260ms;
}
#fp-cine.on .fp-cine-txt { opacity: 1; transform: translateY(0); }
#fp-cine .fp-cine-t { font-size: 26px; letter-spacing: 0.34em; font-weight: 500; }
#fp-cine .fp-cine-s {
  margin-top: 10px; font-size: 13.5px; letter-spacing: 0.12em; line-height: 2;
  opacity: 0.85; min-height: 1.9em;
}
#fp-cine .fp-cine-s.fp-cine-in { animation: cine-line-in 900ms var(--ease-out) both; }
@keyframes cine-line-in {
  from { opacity: 0; filter: blur(4px); transform: translateY(8px); }
  to { opacity: .85; filter: blur(0); transform: translateY(0); }
}
#fp-cine .fp-cine-skip {
  position: absolute; right: 16px; top: calc(4vh + 10px + env(safe-area-inset-top, 0px));
  font-size: 11px; letter-spacing: 0.1em; color: rgba(245, 240, 230, 0.45);
}
@media (max-width: 640px) {
  #fp-cine .fp-cine-bar { height: 2.5vh; }
  #fp-cine .fp-cine-bar.b { height: 5vh; }
  #fp-cine .fp-cine-t { font-size: 20px; letter-spacing: .26em; }
  #fp-cine .fp-cine-s { font-size: 12.5px; }
}


/* 分镜进行时：桌面元素安静退场，整块屏幕只留这片风景 */
body.cine-on #desktop-icons,
body.cine-on #menubar,
body.cine-on #dock,
body.cine-on #corner-quote,
body.cine-on #fp-ui > *:not(#fp-cine) {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 480ms var(--ease-out);
}

/* 托管管理器里被定位到的那一行 */
.sh-row.is-focus{outline:1px solid rgba(212,175,110,.75);border-radius:12px;background:rgba(212,175,110,.10);}