/* 张玉航的星空小站 · 通用样式 main.css */
/* 三套主题共用的基础样式 + 夜航星图视觉系统（v1.8.0） */
/* 设计锚点：深靛蓝底 + 月白文字 + 琥珀金点缀 + 细衬线标题 + 星轨噪点 + 克制动效 */

/* ========== 全局 CSS 变量定义（夜航星图 token） ========== */
:root{
  /* --- 背景（深靛蓝，非纯黑，带蓝调的高级感） --- */
  --bg-primary: #0d1230;          /* 午夜深蓝靛 */
  --bg-secondary: #1a2150;        /* 次级深蓝 */
  --bg-elevated: #141a3f;         /* 浮层底 */

  /* --- 表面（半透明，保留 0.75 透明度以让星轨视频透出来） --- */
  --surface: rgba(20,26,63,.72);
  --surface-hover: rgba(30,38,84,.82);
  --card-solid: rgba(18,23,54,.94);

  /* --- 边框（细 1px 描边，高级感的"轻"） --- */
  --border: rgba(140,150,200,.28);
  --border-strong: rgba(232,176,77,.55);   /* 琥珀金描边 */
  --border-hover: rgba(232,176,77,.8);

  /* --- 文字（月白主 + 灰蓝辅，对比度 ≥4.5:1） --- */
  --text-primary: #f4f1e8;       /* 月白 */
  --text-secondary: #a8b0cc;     /* 灰蓝 */
  --text-tertiary: #6b7394;      /* 弱化 */
  --text-inverse: #0d1230;       /* 反色（放在亮色面上用） */

  /* --- 点缀（琥珀金为主，做"点睛"不做"铺满"） --- */
  --accent-gold: #e8b04d;        /* 琥珀金（主点缀） */
  --accent-rose: #c77b8b;        /* 暗玫瑰（暖点缀，替代荧光粉） */
  --accent-teal: #6fb3b8;        /* 青灰蓝（冷点缀） */
  --accent-lilac: #9d8fc7;       /* 暗紫（替代荧光紫） */
  --accent-sage: #8fb89f;        /* 鼠尾草绿（成功/正向） */
  --accent-alert: #d9785f;       /* 陶土红（警示/错误） */

  /* --- 语义色（统一调用） --- */
  --accent: var(--accent-gold);
  --success: var(--accent-sage);
  --warning: var(--accent-gold);
  --error: var(--accent-alert);
  --info: var(--accent-teal);

  /* --- 阴影（带偏移+柔和模糊，非纯黑） --- */
  --shadow: 0 6px 24px rgba(0,0,0,.35);
  --shadow-soft: 0 3px 12px rgba(0,0,0,.25);
  --shadow-hover: 0 14px 44px rgba(0,0,0,.5);
  --shadow-glow: 0 0 24px rgba(232,176,77,.28);

  /* --- 背景叠加层（压暗视频/图片，保证文字可读） --- */
  --overlay: linear-gradient(135deg, rgba(13,18,48,.72) 0%, rgba(26,33,80,.5) 100%);
  --bg-image: url('bg-starry.jpg');

  /* --- 圆角（克制，8-12px，非 16-20px 大圆角） --- */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;

  /* --- 字号阶梯（1.25 比，4 级） --- */
  --fs-xs: 0.78rem;
  --fs-sm: 0.88rem;
  --fs-base: 1rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.6rem;
  --fs-xl: 2.1rem;
  --fs-2xl: 2.75rem;

  /* --- 字族（标题细衬线 · 正文无衬线 · 代码等宽） --- */
  --font-display: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;   /* 标题：文艺编辑感 */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'HarmonyOS Sans', 'Microsoft YaHei', sans-serif;
  --font-mono: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;

  /* --- 动效 token（统一时长 + 缓动，可 prefers-reduced-motion 降级） --- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);   /* 指数级 out，柔和 */
  --ease-snap: cubic-bezier(0.5, 0, 0.5, 1);        /* 短促卡点（赛璐璐风备选） */
  --dur-fast: 140ms;
  --dur-med: 320ms;
  --dur-slow: 600ms;
  --blur: 12px;
  --transition: all var(--dur-med) var(--ease-out);
}

/* ========== 动态背景容器（视频 + canvas 双层，v1.8.0 起） ========== */
.theme-bg{
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--bg-primary);
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  transition: background 0.8s ease-in-out;
}
/* 视频背景层（有上传视频时出现，替代静态图） */
.theme-bg::before{
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-image);
  background-size: cover;
  background-position: center;
  transition: opacity .8s ease-in-out;
}
html[data-bg-video] .theme-bg::before{
  opacity: 0;  /* 视频在位时隐藏静态图 */
}
html[data-bg-video] .theme-bg{
  background-color: var(--bg-primary);
}

/* canvas 星轨层（v1.8.0 新，由 bg-canvas.js 填充） */
.stars-canvas{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ========== 加载动画 ========== */
.page-loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  transition: opacity .6s ease, visibility .6s ease;
}
.page-loader.hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-magic-circle{
  width: 72px;
  height: 72px;
  border: 2px solid var(--border);
  border-top-color: var(--accent-gold);
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
  position: relative;
}
.loader-magic-circle::before{
  content: '';
  position: absolute;
  inset: 8px;
  border: 1.5px dashed var(--accent-rose);
  border-radius: 50%;
  animation: spin-reverse 2s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes spin-reverse{ to{ transform: rotate(-360deg); } }
.loader-text{
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 3px;
  font-family: var(--font-display);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity: .45; }
  50%{ opacity: 1; }
}

/* ========== 主题切换按钮 ========== */
.theme-switcher{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0;
}
.theme-btn{
  padding: 11px 20px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: var(--transition);
  backdrop-filter: blur(10px);
  font-family: var(--font-body);
}
.theme-btn:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-hover);
}
.theme-btn:active{
  transform: translateY(0) scale(0.98);
}
.theme-btn.active{
  border-color: var(--accent-gold);
  background: var(--surface-hover);
  color: var(--accent-gold);
  box-shadow: var(--shadow-glow);
}

/* 通用卡片基础 */
html[data-theme] .card,
html[data-theme] .home-card,
html[data-theme] .section,
html[data-theme] .modal-content,
html[data-theme] .checklist li{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}
/* 卡片 hover（轻抬 + 描边发光） */
html[data-theme] .home-card:hover,
html[data-theme] .card:hover{
  transform: translateY(-3px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover), var(--shadow-glow);
}

/* ========== 按钮通用样式（v1.8.0 重做） ========== */
html[data-theme] button,
html[data-theme] .btn,
html[data-theme] .login-btn,
html[data-theme] .mem-btn{
  transition: var(--transition);
  cursor: pointer;
  font-family: var(--font-body);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 10px;
  min-height: 44px;  /* 移动端触控目标 */
}
html[data-theme] .mem-btn,
html[data-theme] .btn{
  background: var(--surface-hover);
  border-color: var(--border);
}
html[data-theme] .mem-btn:hover,
html[data-theme] .btn:hover,
html[data-theme] button:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-hover);
  color: var(--accent-gold);
}
html[data-theme] .mem-btn:active,
html[data-theme] button:active{
  transform: translateY(0) scale(0.98);
}
/* 金色主按钮（.mem-btn.solid） */
html[data-theme] .mem-btn.solid,
html[data-theme] .btn.solid{
  background: var(--accent-gold);
  color: var(--text-inverse);
  border-color: var(--accent-gold);
  box-shadow: var(--shadow-glow);
}
html[data-theme] .mem-btn.solid:hover{
  filter: brightness(1.08);
  color: var(--text-inverse);
}
/* ghost 按钮（次级入口） */
html[data-theme] .mem-btn.ghost,
html[data-theme] .btn.ghost{
  background: var(--surface);
  border-color: var(--border);
  opacity: 0.92;
}

/* ========== 弹窗关闭按钮 ========== */
html[data-theme] .modal-close{
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text-primary) !important;
  font-size: 1.1rem !important;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  backdrop-filter: blur(10px);
}
html[data-theme] .modal-close:hover{
  background: var(--accent-gold) !important;
  color: var(--text-inverse) !important;
  transform: rotate(90deg) scale(1.08);
  box-shadow: var(--shadow-glow);
  border-color: var(--accent-gold) !important;
}

/* ========== 今日/天气卡片（降低透明度+去模糊+新布局） ========== */
html[data-theme] #todayCard,
html[data-theme] #weatherCard{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--card-solid) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px !important;
}
/* 卡片 hover 效果 */
html[data-theme] #todayCard:hover,
html[data-theme] #weatherCard:hover{
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* ========== 动效降级（prefers-reduced-motion） ========== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .theme-bg::before,
  .stars-canvas{
    display: none !important;
  }
}

/* ========== 移动端降级（粒子/光标自动关） ========== */
@media (max-width: 640px){
  .stars-canvas{ display: none; }
  :root{
    --fs-xl: 1.8rem;
    --fs-2xl: 2.2rem;
  }
}

/* ==================================================================
   夜航星图 · 下半段（今日/天气布局、动效、控件、控件降级）
   ================================================================== */

/* 旧变量兼容映射（page CSS / HTML 仍引用这些短名，统一指向新 token） */
html[data-theme]{
  --text: var(--text-primary);
  --text2: var(--text-secondary);
  --text3: var(--text-tertiary);
  --bg: var(--bg-primary);
  --bg2: var(--bg-secondary);
  --surface2: rgba(255,255,255,.05);
  --pink: var(--accent-rose);
  --purple: var(--accent-lilac);
  --blue: var(--accent-teal);
  --gold: var(--accent-gold);
  --red: var(--accent-alert);
  --green: var(--accent-sage);
  --orange: var(--accent-gold);
  --accent-pink: var(--accent-rose);
  --accent-purple: var(--accent-lilac);
  --accent-blue: var(--accent-teal);
  --accent-green: var(--accent-sage);
  --accent-red: var(--accent-alert);
  --pink-bg: rgba(199,123,139,.16);
}

/* ========== 标题：细衬线，文艺编辑感（替代 cute.css 的 ZCOOL 萌字体） ========== */
html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  line-height: 1.3;
}
html[data-theme] h1{ font-size: var(--fs-2xl); }
html[data-theme] h2{ font-size: var(--fs-lg); }
html[data-theme] h3{ font-size: var(--fs-md); }

/* ========== 正文：无衬线，舒适行宽 ========== */
html[data-theme] body{
  font-family: var(--font-body);
  line-height: 1.75;
  letter-spacing: 0.2px;
  color: var(--text-primary);
}

/* ========== 卡片：细描边 + 轻投影 + hover 发光（去掉 cute.css 的彩虹边框） ========== */
html[data-theme] .card,
html[data-theme] .home-card,
html[data-theme] .section,
html[data-theme] .gacha-card,
html[data-theme] .result-card{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}
html[data-theme] .card:hover,
html[data-theme] .home-card:hover{
  transform: translateY(-3px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover), var(--shadow-glow);
}

/* ========== 按钮：克制圆角 + 细描边 + hover 抬升（去掉 cute.css 的大回弹+3px白边） ========== */
html[data-theme] button,
html[data-theme] .btn,
html[data-theme] .gacha-btn,
html[data-theme] .action-btn{
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 10px 22px;
  min-height: 44px;
  transition: var(--transition);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}
html[data-theme] button:hover,
html[data-theme] .btn:hover,
html[data-theme] .gacha-btn:hover{
  transform: translateY(-2px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover), var(--shadow-glow);
  color: var(--accent-gold);
}
html[data-theme] button:active,
html[data-theme] .btn:active{
  transform: translateY(0) scale(0.985);
}
/* 主按钮（金色实底） */
html[data-theme] .btn-primary,
html[data-theme] button.primary,
html[data-theme] .mem-btn.solid,
html[data-theme] .btn.solid{
  background: var(--accent-gold);
  color: var(--text-inverse);
  border-color: var(--accent-gold);
  box-shadow: var(--shadow-glow);
}
html[data-theme] .btn-primary:hover,
html[data-theme] button.primary:hover{
  filter: brightness(1.08);
  color: var(--text-inverse);
}
/* ghost 次级按钮 */
html[data-theme] .mem-btn.ghost,
html[data-theme] .btn.ghost{
  background: var(--surface);
  border-color: var(--border);
  opacity: 0.92;
}

/* ========== 输入框：细描边 + focus 金色光圈 ========== */
html[data-theme] input,
html[data-theme] textarea,
html[data-theme] select{
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 11px 16px;
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: var(--transition);
}
html[data-theme] input:focus,
html[data-theme] textarea:focus,
html[data-theme] select:focus{
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(232,176,77,.18);
}
html[data-theme] input::placeholder{
  color: var(--text-tertiary);
}

/* ========== 标签/徽章 ========== */
html[data-theme] .badge,
html[data-theme] .tag,
html[data-theme] .status-tag{
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
}

/* ========== 版本徽章（金色描边，非荧光粉） ========== */
html[data-theme] .version-badge,
html[data-theme] .version{
  background: transparent;
  color: var(--accent-gold);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 4px 12px;
  font-weight: 600;
  font-size: 0.78rem;
}

/* ========== 表格 ========== */
html[data-theme] table{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
html[data-theme] th{
  background: var(--surface-hover);
  color: var(--text-primary);
  padding: 12px 14px;
  font-weight: 600;
  font-size: 0.82rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
html[data-theme] td{
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--text-secondary);
}
html[data-theme] tr:last-child td{ border-bottom: none; }
html[data-theme] tr:hover td{
  background: rgba(232,176,77,.05);
}

/* ========== 弹窗（高级感：圆角 16 + 重投影，非 cute 的 28 大圆角回弹） ========== */
html[data-theme] .modal,
html[data-theme] .popup,
html[data-theme] .dialog,
html[data-theme] .modal-content{
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card-solid);
  box-shadow: var(--shadow-hover);
}

/* ========== 进度条（金色渐变，非荧光粉） ========== */
html[data-theme] .progress,
html[data-theme] .progress-bar,
.p-bar-new,
.p-bar-new i{
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}
html[data-theme] .progress-fill,
html[data-theme] .progress-bar-fill,
.p-bar-new i{
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-rose));
  transition: width .6s var(--ease-out);
}

/* ========== 链接（克制，hover 金色下划线偏移） ========== */
html[data-theme] a{
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
html[data-theme] a:hover{
  color: var(--accent-gold);
}

/* ========== 分隔线（细 1px 金色渐变） ========== */
html[data-theme] hr,
html[data-theme] .divider{
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
  margin: 20px 0;
}

/* ========== 导航栏（细 1px 描边 + 毛玻璃，非 cute 的 24px 大圆角） ========== */
html[data-theme] .nav,
html[data-theme] .navbar,
html[data-theme] .header{
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

/* ========== 卡片内文字（透明卡片上清晰可读） ========== */
html[data-theme] .card p,
html[data-theme] .card li,
html[data-theme] .card td,
html[data-theme] .home-card p,
html[data-theme] .home-card li{
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ========== 滚动条（细 8px 灰蓝，非 cute 的 10px 荧光） ========== */
html[data-theme] ::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}
html[data-theme] ::-webkit-scrollbar-track{
  background: transparent;
}
html[data-theme] ::-webkit-scrollbar-thumb{
  background: var(--border);
  border-radius: 4px;
}
html[data-theme] ::-webkit-scrollbar-thumb:hover{
  background: var(--border-hover);
}

/* ==================================================================
   夜航星图 · 动效层（focus moment + 安静支持态）
   ================================================================== */

/* 焦点动效：卡片入场 位移+模糊（IntersectionObserver 加 .in 触发） */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out),
              filter var(--dur-slow) var(--ease-out);
}
.reveal.in{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* 光标跟随光晕层（由 cursor-glow.js 填充，移动端自动不渲染） */
.cursor-glow{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* 卡片翻转（3D，hover 触发，仅 .flip-card 启用） */
.flip-card{
  perspective: 1000px;
}
.flip-card-inner{
  position: relative;
  transition: transform .6s var(--ease-out);
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner{
  transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-card-back{
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}

/* 页面内容淡入 */
.page-content{
  animation: fadeInUp .6s var(--ease-out);
}
@keyframes fadeInUp{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* 标签页切换 */
.tab-content{
  animation: fadeIn .4s var(--ease-out);
}
@keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } }

/* 弹窗入场（scale + translateY，柔和） */
.modal{
  animation: modalIn .35s var(--ease-out);
}
@keyframes modalIn{
  from{ opacity: 0; transform: scale(.94) translateY(-12px); }
  to{ opacity: 1; transform: scale(1) translateY(0); }
}

/* 今日卡片新布局 */
.today-new-layout{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.today-main{
  display: flex;
  align-items: center;
  gap: 20px;
}
.today-date-big{
  font-size: 3rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: 1;
  flex-shrink: 0;
}
.today-info{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.today-week-badge{
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-inverse);
  background: var(--accent-gold);
  padding: 4px 14px;
  border-radius: 6px;
  width: fit-content;
}
.today-lunar-new{
  font-size: 0.88rem;
  color: var(--text-secondary);
}
.today-lunar-new b{
  color: var(--accent-gold);
}
.today-bottom{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.progress-new{ width: 100%; }
.p-label-new{
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 5px;
}
.p-label-new b{ color: var(--accent-gold); }
.p-bar-new{
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,.08);
  border-radius: 3px;
  overflow: hidden;
}
.p-bar-new i{
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-rose));
  border-radius: 3px;
  width: 0;
  transition: width 1s var(--ease-out);
}
.countdown-new{
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-align: center;
  padding: 8px;
  background: rgba(255,255,255,.05);
  border-radius: 8px;
}
.countdown-new b{ color: var(--accent-gold); }

/* 天气卡片新布局 */
.weather-new-layout{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.weather-main-new{
  display: flex;
  align-items: center;
  gap: 20px;
}
.weather-icon-big{
  font-size: 3.2rem;
  line-height: 1;
  flex-shrink: 0;
}
.weather-info-new{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.weather-temp-big{
  font-size: 2.6rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: 1;
}
.weather-city-desc{
  font-size: 0.88rem;
  color: var(--text-secondary);
}
.weather-meta-new{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.meta-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  background: rgba(255,255,255,.05);
  border-radius: 8px;
}
.meta-label{
  font-size: 0.72rem;
  color: var(--text-tertiary);
}
.meta-value{
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.days-scroll-new{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 5px;
}
.days-scroll-new::-webkit-scrollbar{ height: 4px; }
.days-scroll-new::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 2px; }
.day-cell-new{
  flex-shrink: 0;
  width: 65px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  background: rgba(255,255,255,.05);
  border-radius: 8px;
  transition: var(--transition);
}
.day-cell-new:hover{
  background: rgba(255,255,255,.1);
  transform: translateY(-2px);
}
.d-name-new{
  font-size: 0.72rem;
  color: var(--text-tertiary);
  font-weight: 600;
}
.d-icon-new{ font-size: 1.4rem; line-height: 1; }
.d-temp-new{
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}
.d-temp-new i{
  font-style: normal;
  font-size: 0.7rem;
  color: var(--text-tertiary);
  margin-left: 3px;
}

/* ==================================================================
   内联样式类（保留原引用，夜航星图配色已升级）
   ================================================================== */
.inline-000{display:none;border:none !important;outline:none !important;appearance:none}
.inline-001{border:none !important;outline:none !important;appearance:none}
.inline-002{display:block;width:100%;text-align:left;padding:10px 12px;margin-bottom:6px;border:none;background:transparent;color:var(--text-primary);border-radius:8px;cursor:pointer;font-size:.9rem}
.inline-003{position:relative;display:inline-block;margin-right:8px}
.inline-004{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px 16px;margin:10px 0;font-size:.85rem;line-height:1.6;color:var(--text-secondary)}
.inline-005{color:var(--accent-gold)}
.inline-006{background:var(--accent-lilac);color:#fff}
.inline-007{background:var(--accent-teal);color:#fff}
.inline-008{background:var(--accent-sage);color:#fff}
.inline-009{background:var(--accent-alert);color:#fff}
.inline-010{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:12px;box-shadow:0 8px 32px rgba(0,0,0,.15);backdrop-filter:blur(12px);z-index:1000;min-width:180px}
.inline-011{display:none;align-items:center;gap:8px}
.inline-012{font-size:.8rem;font-weight:700;margin-bottom:8px;color:var(--text-primary)}
.inline-013{font-size:1rem;font-weight:600;margin:4px 0 8px;letter-spacing:2px;opacity:.9}
.inline-014{margin-top:4px}
.inline-015{display:none}
.inline-016{background:var(--accent-gold);color:#fff}
.inline-017{display:block;width:100%;text-align:left;padding:10px 12px;border:none;background:transparent;color:var(--text-primary);border-radius:10px;cursor:pointer;font-size:.9rem}

/* ========== 从settings.html抽离的内联style ========== */
.inline-018{text-align:center;padding:20px;color:var(--text-secondary)}
.inline-019{font-size:.8rem;color:var(--accent-alert);margin-left:28px;margin-top:4px;background:rgba(248,113,113,.08);padding:8px 12px;border-radius:8px}
.inline-020{text-align:center;padding:30px}
.inline-021{padding:10px 24px;font-size:.9rem;font-weight:600;border-radius:20px;border:1px solid var(--border);background:var(--surface);color:var(--text-primary);cursor:pointer;margin-right:10px}
.inline-022{background:linear-gradient(135deg,rgba(232,176,77,.1),rgba(199,123,139,.1));border:2px solid var(--accent-gold);max-width:600px;margin:0 auto 20px}
.inline-023{padding:15px 30px;border-radius:15px;border:2px solid var(--border);background:linear-gradient(135deg,rgba(199,123,139,.2),rgba(232,176,77,.2));color:var(--text-primary);cursor:pointer;font-size:.95rem;font-weight:600;transition:all .2s}
.inline-024{font-size:1.1rem}
.inline-025{margin-bottom:12px;font-size:.85rem;color:var(--text-secondary)}
.inline-026{padding:15px 30px;border-radius:15px;border:2px solid var(--border);background:linear-gradient(135deg,rgba(111,179,184,.2),rgba(143,184,159,.2));color:var(--text-primary);cursor:pointer;font-size:.95rem;font-weight:600;transition:all .2s}
.inline-027{color:' + statusColor[overallStatus] + '}
.inline-028{max-width:700px;margin:0 auto}
.inline-029{left:'+(Math.random()*100).toFixed(1)+'%;top:'+(Math.random()*100).toFixed(1)+'%;width:'+size+'px;height:'+size+'px;--t:'+t+'s;animation-delay:'+delay+'s}
.inline-030{padding:12px 32px;font-size:1rem;font-weight:700;border-radius:25px;border:none;background:linear-gradient(135deg,var(--accent-gold),var(--accent-rose));color:#fff;cursor:pointer;box-shadow:0 4px 16px rgba(232,176,77,.3)}
.inline-031{font-weight:600;font-size:.95rem}
.inline-032{display:flex;justify-content:center;margin-bottom:24px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.inline-033{font-size:.95rem;color:var(--text-secondary)}
.inline-034{max-width:700px;margin:20px auto 0}
.inline-035{padding:15px 30px;border-radius:15px;border:2px solid var(--border);background:linear-gradient(135deg,rgba(157,143,199,.2),rgba(143,184,159,.2));color:var(--text-primary);cursor:pointer;font-size:.95rem;font-weight:600;transition:all .2s}
.inline-036{padding:12px 24px;font-size:.95rem;font-weight:600;border:none;background:transparent;color:var(--accent-gold);cursor:pointer;border-bottom:3px solid var(--accent-gold);transition:all .2s;margin-right:8px}
.inline-037{border:2px solid ' + statusColor[overallStatus] + '}
.inline-038{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.inline-039{text-align:center;margin-bottom:16px}
.inline-040{font-size:1.3rem;font-weight:700;margin-bottom:8px}
.inline-041{color:var(--accent-gold)}
.inline-042{font-size:.95rem}
.inline-043{font-size:.85rem;color:var(--text-secondary);margin-left:28px}
.inline-044{text-align:center;padding:32px;color:var(--text-secondary)}
.inline-045{padding:12px 24px;font-size:.95rem;font-weight:600;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;border-bottom:3px solid transparent;transition:all .2s;margin-right:8px}
.inline-046{text-align:center;padding-top:16px;border-top:1px solid var(--border)}
.inline-047{margin-top:12px;font-size:.8rem;color:var(--text-secondary)}
.inline-048{display:none}
.inline-049{max-width:600px;margin:0 auto 20px}
.inline-050{display:flex;gap:10px;align-items:center}
.inline-051{margin-bottom:16px}
.inline-052{text-align:center;padding:16px 0;border-bottom:1px solid var(--border);margin-bottom:16px}
.inline-053{padding:12px 0}
.inline-054{width:0%;height:100%;background:linear-gradient(90deg,var(--accent-gold),var(--accent-rose));transition:width .3s}
.inline-055{padding:12px 0;border-bottom:1px solid var(--border)}
.inline-056{font-size:.8rem;color:var(--text-secondary)}
.inline-057{max-height:400px;overflow-y:auto;border:1px solid var(--border);border-radius:12px;padding:8px}
.inline-058{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.inline-059{font-size:48px;margin-bottom:12px}
.inline-060{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}
.inline-061{font-size:.75rem;color:'+statusColor+';font-weight:600}
.inline-062{font-size:.9rem;color:var(--text-secondary)}
.inline-063{padding:8px 16px;font-size:.85rem;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text-primary);cursor:pointer}
.inline-064{font-size:.8rem;font-weight:700;color:'+typeColor+'}
.inline-065{border-bottom:1px solid var(--border);padding-bottom:16px;margin-bottom:16px}
.inline-066{text-align:center;padding:8px 0}
.inline-067{font-size:1.2rem;font-weight:700;margin-bottom:8px;background:linear-gradient(135deg,var(--accent-gold),var(--accent-rose));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.inline-068{text-align:center;margin-bottom:20px}
.inline-069{font-size:1.1rem;font-weight:700;margin-bottom:4px}
.inline-070{font-size:2rem;margin-bottom:8px}
.inline-071{padding:10px 24px;font-size:.9rem;font-weight:600;border-radius:20px;border:none;background:linear-gradient(135deg,var(--accent-gold),var(--accent-rose));color:#fff;cursor:pointer}
.inline-072{text-align:center;padding:20px;color:var(--accent-alert)}
.inline-073{max-width:600px;margin:0 auto}
.inline-074{width:100%;height:8px;background:rgba(255,255,255,.1);border-radius:4px;margin-top:16px;overflow:hidden}
.inline-075{font-size:.8rem;color:var(--text-secondary);margin-bottom:16px}
.inline-076{color:var(--accent-alert)}
.inline-077{font-size:.85rem;margin-bottom:4px;word-break:break-all}
.inline-078{display:flex;gap:10px;margin-bottom:16px}
.inline-079{font-size:.75rem}
.inline-080{font-size:1.1rem;font-weight:600;margin-bottom:8px}
.inline-081{margin-left:auto;font-size:.75rem;padding:2px 8px;border-radius:10px;background:' + statusColor[r.status] + '22;color:' + statusColor[r.status] + '}
.inline-082{padding:8px 16px;font-size:.85rem;border-radius:12px;border:1px solid var(--border);background:linear-gradient(135deg,#ff6b6b,#ee5a5a);color:#fff;cursor:pointer}
.inline-083{padding:12px;margin-bottom:8px;background:rgba(0,0,0,.03);border-radius:8px;border-left:3px solid '+typeColor+'}
.inline-084{padding:8px 12px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text-primary);font-size:.85rem}
.inline-085{display:none;margin-top:20px;max-width:700px;margin-left:auto;margin-right:auto}
.inline-086{font-size:.75rem;color:var(--text-secondary)}
.inline-087{font-size:2rem;margin-bottom:16px}