/* ============================================================
   cristierra.com 主页主题 —— 「LUM · 五屏滚动页」
   版本 20260926o   （Sun-Panel /custom/index.css）
   架构：面板原生内容层整层隐藏（.app-icon 留在 DOM 里当跳转句柄），
        首页 + 四个整屏页由 custom/index.js 注入到 body 上，
        壁纸仍走面板自己的 .cover.wallpaper（它本来就不跟着滚）
   全部规则带 !important：custom/index.css 比主 CSS 先加载
   ============================================================ */

:root {
  --sp-ink: #0b3c66;
  --sp-cobalt: #2e7fd9;
  --sp-ice: #eaf6ff;
  --sp-sky: #9fd8f4;
  --sp-line: rgba(148, 196, 232, .5);
  /* 展示字：站酷小薇（OFL，自托管切片）统一拉丁+CJK 的书卷气细衬线；
     楷体已被用户否掉，不留。小字注记仍留等宽当"仪表声" */
  --sp-art: "ZCOOL XiaoWei", "Palatino Linotype", "Book Antiqua", Palatino,
    "Noto Serif CJK SC", "Source Han Serif SC", Georgia, serif;
}

html, body { background: #f5f8fb !important; overflow: hidden !important; }

/* ---------- 壁纸 ----------
   ⚠️ 壁纸 URL 的 ?v= 故意停在 20260926f：VPS 边缘缓存键含 ?v=（30d），
   图片内容没变就不要换串，换了就等于让所有访客重新过一遍隧道拉 116KB。
   index.html 里那行 preload 的 URL 必须和这里**逐字符一致**，否则变成下两遍。 */
.cover.wallpaper {
  background: url("/custom/wallpaper.jpg?v=20260926f") center / cover no-repeat !important;
  /* 支持 image-set 的先取 WebP（116KB），老浏览器留在上面那行 JPEG（289KB） */
  background-image: image-set(url("/custom/wallpaper.webp?v=20260926f") type("image/webp"),
                              url("/custom/wallpaper.jpg?v=20260926f") type("image/jpeg")) !important;
  background-size: cover !important; background-position: center !important;
  transform: none !important;
}
.cover.wallpaper::after { content: none !important; }
.mask { background: transparent !important; opacity: 0 !important; }
.mask::after, .mask::before { content: none !important; }

/* ---------- 面板原生内容层整层收起（卡片仍在 DOM 里，供注入页调用 click）---------- */
body.sp-lum .sun-main > .absolute.overflow-auto { display: none !important; }
/* 两层互斥，只由 sp-lum 决定：sp-lum 现在在脚本解析期就加（不等卡片），
   所以原生网格从第一帧起就不会露出来；会话过期跳登录页时守卫摘掉 sp-lum，两层对调 */
body:not(.sp-lum) .sp-pages, body:not(.sp-lum) .sp-rail, body:not(.sp-lum) .sp-clock { display: none !important; }
body.sp-lum .fixed-element { opacity: .35; }
body.sp-lum .fixed-element:hover { opacity: 1; }
.fixed-element .n-button {
  background: rgba(11, 49, 82, .78) !important;
  border: 1px solid var(--sp-line) !important;
  color: var(--sp-ice) !important;
  border-radius: 8px !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.fixed-element .n-button, .fixed-element .n-button * { color: var(--sp-ice) !important; }
*::-webkit-scrollbar { width: 0 !important; height: 0 !important; }

/* ---------- 整屏翻页：用位移驱动（不是 scrollTop），才有真正的上下动效和阻尼 ---------- */
.sp-pages {
  position: fixed; inset: 0; z-index: 5; overflow: hidden;
  --page: 0; --pull: 0;
}
.sp-track {
  transform: translate3d(0, calc(var(--page) * -100vh + var(--pull) * 1px), 0);
  transition: transform 600ms cubic-bezier(.18, .82, .24, 1);
  will-change: transform;
}
/* 到位后带一点过冲回弹 = 阻尼感；拉拽期间几乎无过渡，跟手 */
.sp-track.spring { transition-timing-function: cubic-bezier(.25, 1.12, .32, 1); }
.sp-track.drag { transition-duration: 70ms; transition-timing-function: linear; }
/* 没到阈值就松手：短曲线弹回，不跟着翻页的 600ms 走 */
.sp-track.relax { transition-duration: 280ms; transition-timing-function: cubic-bezier(.2, .92, .22, 1); }
/* 页内容做方向性视差：离开中心的页沿翻页方向压过去并淡出 */
.sp-fx {
  position: absolute; inset: 0;
  transform: translateY(calc(var(--d, 0) * 1px));
  opacity: var(--o, 1);
  transition: transform 600ms cubic-bezier(.18, .82, .24, 1), opacity 460ms ease;
}
.sp-pg { position: relative; height: 100vh; }
.sp-pg[data-clickable="1"] { cursor: pointer; }

/* ---------- 首页：品牌字 + 向下滚动提醒 ---------- */
.sp-brand { position: absolute; left: 0; right: 0; top: 36%; text-align: center; }
.sp-brand h1 {
  display: inline-block;
  font-family: var(--sp-art);
  font-weight: 400; font-size: 94px; letter-spacing: 12px; line-height: 1;
  padding-left: 15px; margin: 0;
  color: transparent;
  background: linear-gradient(180deg, #f4faff 0%, #a9cbe8 26%, #2e7fd9 56%, #0b3c66 100%);
  -webkit-background-clip: text; background-clip: text;
  text-shadow: 2.6px 0 rgba(126, 205, 242, .3), -2.6px 0 rgba(11, 60, 102, .14);
  filter: drop-shadow(0 0 20px rgba(246, 251, 254, .95)) drop-shadow(0 0 52px rgba(246, 251, 254, .85));
}
.sp-brand p {
  margin-top: 16px; font: 400 9px/1 ui-monospace, Menlo, monospace;
  letter-spacing: 5.5px; color: rgba(11, 60, 102, .62);
}
/* ---------- 首页底部：大号向下箭头（用户点名要的动效，全站唯一的循环动画） ----------
   原来那根 158px 细线 + 4 个小点太含蓄，翻不下去。现在换成底部居中的大号双 V 箭头，
   沿屏幕纵轴向下行进并淡出，两层错开 0.28s 制造"往下走"的方向感；
   用独立的 translate 属性做位移，所以 rotate(45deg) 的朝向不会被动画带偏。 */
.sp-down {
  position: absolute; left: 50%; bottom: 4.4%; transform: translateX(-50%);
  text-align: center; cursor: pointer;
}
.sp-down i, .sp-down b {
  display: block; margin: 0 auto; width: 42px; height: 42px;
  border-right: 2.6px solid rgba(11, 60, 102, .8); border-bottom: 2.6px solid rgba(11, 60, 102, .8);
  transform: rotate(45deg); filter: drop-shadow(0 0 6px rgba(250, 253, 255, .95));
  animation: sp-arrow 1.7s cubic-bezier(.45, 0, .25, 1) infinite;
}
.sp-down b {
  width: 27px; height: 27px; margin-top: -35px;
  border-right-width: 2.1px; border-bottom-width: 2.1px; animation-delay: .28s;
}
.sp-down s {
  text-decoration: none; display: block; margin-top: 24px; white-space: nowrap;
  font: 400 9px/1 ui-monospace, Menlo, monospace; letter-spacing: 3.6px;
  color: rgba(11, 60, 102, .68);
  text-shadow: 0 0 3px rgba(249, 252, 255, 1), 0 0 8px rgba(249, 252, 255, .95);
}
@keyframes sp-arrow {
  0% { opacity: 0; translate: 0 -11px; }
  32% { opacity: 1; }
  100% { opacity: 0; translate: 0 13px; }
}

/* ---------- 右侧导航：平时只是暗点，当前页才长出发光点和读数 ---------- */
.sp-rail {
  position: fixed; right: 19px; top: 50%; transform: translateY(-50%); z-index: 7;
  display: flex; flex-direction: column; align-items: flex-end; gap: 17px;
}
.sp-rail::before {
  content: ""; position: absolute; right: 1.5px; top: -6px; bottom: -6px; width: 1px;
  background: linear-gradient(180deg, rgba(46, 127, 217, 0), rgba(46, 127, 217, .26) 22%, rgba(46, 127, 217, .26) 78%, rgba(46, 127, 217, 0));
}
.sp-rail a {
  position: relative; cursor: pointer; display: flex; align-items: center; gap: 9px; text-decoration: none;
  font: 400 7.5px/1 ui-monospace, Menlo, monospace; letter-spacing: 1.8px; color: rgba(11, 60, 102, 0);
}
.sp-rail a i { font-style: normal; opacity: 0; }
.sp-rail a::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: rgba(11, 60, 102, .26); }
.sp-rail a.on { color: rgba(11, 60, 102, .7); }
.sp-rail a.on i { opacity: 1; }
.sp-rail a.on::after {
  background: var(--sp-cobalt); width: 5px; height: 5px;
  box-shadow: 0 0 0 3px rgba(46, 127, 217, .14), 0 0 10px rgba(46, 127, 217, .65);
}

/* ---------- 仪表时钟：只在下面四页出现 ---------- */
.sp-clock {
  position: fixed; left: 50%; top: 24px; transform: translateX(-50%);
  display: flex; align-items: flex-start; gap: 14px; z-index: 6;
  pointer-events: none; white-space: nowrap;
  opacity: 0; transition: opacity .34s;
}
.sp-clock.show { opacity: 1; }
.sp-clock .c-hh, .sp-clock .c-mm {
  font-family: var(--sp-art);
  font-weight: 700; font-size: 52px; line-height: .84; letter-spacing: 1px;
}
.sp-clock .c-hh {
  color: transparent;
  background: linear-gradient(180deg, #f4faff 0%, #a9cbe8 26%, #2e7fd9 56%, #0b3c66 100%);
  -webkit-background-clip: text; background-clip: text;
}
.sp-clock .c-mm { color: transparent; -webkit-text-stroke: 1.5px rgba(11, 60, 102, .6); }
.sp-clock .c-cln {
  font-family: var(--sp-art); font-weight: 300;
  font-size: 52px; line-height: .84; color: rgba(46, 127, 217, .75);
}
.sp-clock .c-side { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-top: 3px; }
.sp-clock .c-sec { font: 400 15px/1 Consolas, ui-monospace, monospace; letter-spacing: 1px; color: var(--sp-cobalt); }
.sp-clock .c-meter { width: 62px; height: 3px; background: rgba(11, 60, 102, .16); overflow: hidden; }
.sp-clock .c-meter i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #0b3c66, #2e7fd9 55%, #9fd8f4);
}
.sp-clock .c-date { font: 400 9px/1 ui-monospace, Menlo, monospace; letter-spacing: 2.6px; color: rgba(11, 60, 102, .62); }

/* ---------- 内页页头 ---------- */
.sp-hd { position: absolute; left: 7%; top: 15%; display: flex; align-items: flex-start; gap: 18px; }
.sp-hd .no {
  font-family: var(--sp-art); font-weight: 400; font-size: 104px;
  line-height: .8; color: transparent; -webkit-text-stroke: 1.6px rgba(11, 60, 102, .5);
}
.sp-hd h2 {
  font-family: var(--sp-art); font-weight: 400;
  font-size: 34px; letter-spacing: 2px; color: var(--sp-ink); margin: 8px 0 6px;
  text-shadow: 1.8px 0 rgba(126, 205, 242, .5);
}
.sp-hd p { font: 400 9px/1.7 ui-monospace, Menlo, monospace; letter-spacing: 2px; color: rgba(11, 60, 102, .62); }

/* ---------- 悬浮窗（= 背景里 FEED 视窗那套语言 + 故障缺口）---------- */
.sp-win {
  position: absolute; padding: 16px 20px 18px; color: var(--sp-ice);
  background: linear-gradient(172deg, rgba(19, 66, 105, .8), rgba(11, 49, 82, .86) 46%, rgba(5, 24, 42, .94));
  border: 1px solid var(--sp-line); border-radius: 9px;
  /* 不用 backdrop-filter：面板本身 80-94% 不透明，模糊省下来换合成开销 */
  box-shadow: 0 18px 40px rgba(5, 24, 42, .34), inset 0 1px 0 rgba(190, 228, 250, .2);
  filter: drop-shadow(3.6px 0 0 rgba(6, 28, 48, .45)) drop-shadow(-3px 0 0 rgba(126, 205, 242, .3));
  transform: rotate(var(--rot, 0deg));
}
/* 字下面垫一团椭圆软雾：亮度抬到 230+ 压住穿过笔画的暗缎带，但核心只到 .9 透明度、
   边缘用 blur 晕成雾，壁纸的缎带和颗粒还能透出来一点——读得清又不像贴了张白卡片。
   （纯径向渐变收不出无硬边的矩形：椭圆零点盖不住四角，盒边界会露直边。） */
.sp-win::after {
  content: ""; position: absolute; z-index: -1; inset: -22px -40px -30px -36px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 46%,
    rgba(250, 253, 255, .9), rgba(250, 253, 255, .74) 55%, rgba(248, 252, 255, .4) 80%,
    rgba(248, 252, 255, 0) 100%);
  filter: blur(16px);
}
.sp-win::before {
  content: ""; position: absolute; left: 5px; right: 5px; top: 0; height: 1.1px;
  background: linear-gradient(90deg, rgba(234, 246, 255, 0), #fff 14%, #fff 86%, rgba(234, 246, 255, 0));
  box-shadow: 0 0 9px rgba(126, 205, 242, .95), 0 0 18px rgba(46, 127, 217, .5);
}
.sp-win h3 {
  font: 700 11.5px/1 ui-monospace, Menlo, monospace; letter-spacing: 2.8px;
  color: rgba(159, 216, 244, .85); margin: 0 0 12px;
}
.sp-win .big {
  font-family: var(--sp-art); font-weight: 400; font-size: 27px;
  letter-spacing: 1px; color: #f2f9ff; text-shadow: 1.8px 0 rgba(126, 205, 242, .5);
}
.sp-win .sub {
  font: 500 12px/1.6 ui-monospace, Menlo, monospace; letter-spacing: 1.5px;
  color: rgba(215, 236, 250, .78); margin-top: 3px;
}
.sp-win ul { list-style: none; margin: 10px 0 0; padding: 0; }
.sp-win li {
  display: flex; gap: 10px; justify-content: space-between;
  font: 400 12px/2 ui-monospace, Menlo, monospace; letter-spacing: 1.3px;
  color: rgba(234, 246, 255, .86); border-bottom: 1px solid rgba(148, 196, 232, .16);
}
.sp-win li i { font-style: normal; color: rgba(159, 216, 244, .7); white-space: nowrap; }
/* 任务状态色：正常玉绿、异常冰蓝（守"禁红橙"纪律） */
.sp-win li.sp-ok i { color: #8fe0b4; }
.sp-win li.sp-warn i { color: #9fd8f4; }
.sp-win li b { font-weight: 400; color: rgba(234, 246, 255, .95); }
/* 名单行：单列省略号，不跟 .sp-win li 的 flex 两列布局混 */
.sp-list li {
  display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 600 12px/1.85 ui-monospace, Menlo, monospace; letter-spacing: .8px;
  border-bottom: 0;
}
.sp-kpi { display: flex; gap: 22px; margin-top: 14px; }
.sp-kpi div { font: 400 10px/1.5 ui-monospace, Menlo, monospace; letter-spacing: 1.7px; color: rgba(159, 216, 244, .72); }
.sp-kpi div b {
  display: block; font-family: var(--sp-art); font-size: 24px; font-weight: 400;
  letter-spacing: 1px; color: #f2f9ff;
}
.sp-bar { height: 3px; margin-top: 14px; background: rgba(234, 246, 255, .16); overflow: hidden; }
.sp-bar i {
  display: block; height: 100%; width: var(--v, 0%);
  background: linear-gradient(90deg, #2e7fd9, #7ecdf2 60%, #eaf6ff);
}
.sp-spec { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 12px; }
.sp-spec i {
  display: block; width: 4px; height: var(--h, 40%); opacity: .85;
  background: linear-gradient(180deg, #9fd8f4, #2e7fd9);
}
.sp-btn {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; padding: 9px 16px;
  font: 700 10px/1 ui-monospace, Menlo, monospace; letter-spacing: 2.4px; color: #041827;
  background: linear-gradient(180deg, #eaf6ff, #9fd8f4);
  clip-path: polygon(0 0, 100% 0, 100% 68%, calc(100% - 11px) 100%, 0 100%);
  box-shadow: 0 0 16px rgba(126, 205, 242, .5);
}
/* ---------- 读数直接写进画面，没有承载板 ----------
   实测九个窗口位下方背景 mean 174–208：现在的冰白字压在裸背景上只有 2.02:1，
   那块 80–94% 不透明的深板纯粹是给白字垫底。换成画面自己的墨色 #0b3c66 之后，
   最暗位也有 5.11:1，比"白字压深板"的 9.55:1 低但已经过正文线，于是板、边、角、
   旋转、外发光一起撤掉；穿过文字的暗色缎带用白色光晕（地图注记的 knockout halo）
   在字形周围几像素内顶开，而不是再糊一块矩形雾——所以读不出"框"。 */
 .sp-win {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  filter: none; transform: none; padding: 12px 6px 10px 15px;
  /* 小字一律实色：带 alpha 的墨色压在亮雾上会被底色再冲淡一档，11px 字直接糊掉 */
  color: #0e4a7a;
  text-shadow: 0 0 3px rgba(249, 252, 255, 1), 0 0 7px rgba(249, 252, 255, .98),
    0 0 15px rgba(249, 252, 255, .88), 0 0 26px rgba(249, 252, 255, .7);
}
/* 原来那条会发光的顶边换成左侧引导细线，锚点感保留但不围出盒子 */
 .sp-win::before {
  content: ""; left: 0; right: auto; top: 6px; width: 1px; height: calc(100% - 12px);
  background: linear-gradient(180deg, rgba(11, 60, 102, 0), rgba(11, 60, 102, .42) 16%,
    rgba(11, 60, 102, .42) 84%, rgba(11, 60, 102, 0));
  box-shadow: none;
}
 .sp-win h3 { color: #14507f; }
 .sp-win .big {
  color: #0b3c66;
  text-shadow: 0 0 5px rgba(246, 251, 255, .95), 1.6px 0 rgba(126, 205, 242, .5),
    -1.2px 0 rgba(46, 127, 217, .26);
}
 .sp-win .sub { color: #14507f; }
 .sp-win li { color: #0e4a7a; border-bottom: 1px solid rgba(11, 60, 102, .22); }
/* 有板子时 justify-content:space-between 靠边框把标签和值框在一起；板子没了之后
   那条关系就断了（值被推到 500px 外）。改成紧挨着排，下面一条细线收住整行。 */
 .sp-win li { justify-content: flex-start; gap: 14px; }
 .sp-win li i { color: #1d5c8f; }
 .sp-win li b { color: #0b3c66; }
 .sp-list li { color: #14507f; }
/* 状态色跟着压深，否则浅玉/浅冰在亮底上一样看不见（仍守禁红橙） */
 .sp-win li.sp-ok i { color: #146e4a; }
 .sp-win li.sp-warn i { color: #0f5fa8; }
 .sp-kpi div { color: #1d5c8f; }
 .sp-kpi div b {
  color: #0b3c66;
  text-shadow: 0 0 5px rgba(246, 251, 255, .95), 1.4px 0 rgba(126, 205, 242, .45);
}
 .sp-bar { background: rgba(11, 60, 102, .16); }
 .sp-bar i { background: linear-gradient(90deg, #0b3c66, #2e7fd9 62%, #7ecdf2); }
 .sp-spec i { background: linear-gradient(180deg, #2e7fd9, #0b3c66); opacity: .6; }

.sp-open {
  position: absolute; left: 7%; bottom: 8%;
  font: 400 8px/1 ui-monospace, Menlo, monospace; letter-spacing: 3px; color: rgba(11, 60, 102, .42);
}
.sp-back {
  position: absolute; right: 7%; bottom: 8%; z-index: 6; cursor: pointer;
  font: 400 9px/1 ui-monospace, Menlo, monospace; letter-spacing: 2.4px;
  color: rgba(11, 60, 102, .6); text-decoration: none;
}
.sp-back::before {
  content: ""; display: inline-block; width: 1px; height: 20px; margin: 0 9px -5px 0;
  background: linear-gradient(0deg, rgba(46, 127, 217, 0), #2e7fd9);
}

/* ---------- 窄屏紧凑版：1180 以下（含手机竖屏）一律单列，不再退回旧皮肤 ---------- */
/* ---------- 单列版式：所有屏宽统一纵向单列（2026-09-29 用户点名：桌面也要像手机版那样排齐）----------
   散布锚点那套作废：窗口进文档流左对齐堆叠，列在视口里居中、限宽 820px；
   比视口高时页内原生滚（滚动阀在 JS 的 fxScrollable），滚到底才翻页。 */
.sp-fx {
  display: flex; flex-direction: column; gap: 20px;
  padding: 5vh 0 4vh;
  overflow-y: auto; scrollbar-width: none;
}
.sp-fx::-webkit-scrollbar { display: none; }
/* 左起 20%：避开壁纸左侧烘焙注记列（M-0 / FEED-02 / ORB-03 文字都在 17% 以内） */
.sp-hd, .sp-win { margin-left: 20%; }
.sp-hd { position: static; display: flex; align-items: flex-start; gap: 14px; margin-bottom: 2px; }
.sp-hd .no { font-size: 60px; -webkit-text-stroke-width: 1.4px; }
.sp-win {
  position: relative !important; left: auto !important; top: auto !important;
  width: auto !important; max-width: 640px; transform: none; padding: 12px 16px 14px;
}

/* ---------- 矮桌面（>1180 宽且 <=900 高）：单列一屏优先，字号收一级 ---------- */
@media (min-width: 1181px) and (max-height: 900px) {
  .sp-fx { gap: 12px; padding: 3.5vh 6% 2.5vh; }
  .sp-hd .no { font-size: 48px; }
  .sp-hd h2 { font-size: 26px; }
  .sp-win { padding: 10px 14px 12px; }
  .sp-win h3 { font-size: 10.5px; margin-bottom: 8px; }
  .sp-win .big { font-size: 22px; }
  .sp-win .sub { font-size: 11px; }
  .sp-win li { font-size: 11px; }
  .sp-list li { font-size: 11px; line-height: 1.7; }
  .sp-kpi { margin-top: 8px; }
  .sp-kpi div { font-size: 9px; }
  .sp-kpi div b { font-size: 20px; }
  .sp-bar { margin-top: 10px; }
}

/* ---------- 超宽屏（>=1900）：字号跟屏幕物理尺寸走，12px 在 2559 宽上太小 ---------- */
@media (min-width: 1900px) {
  .sp-fx { gap: 34px; }
  .sp-win { max-width: 720px; }
  .sp-hd h2 { font-size: 40px; letter-spacing: 3.6px; }
  .sp-hd p { font-size: 10.5px; }
  .sp-win h3 { font-size: 13px; letter-spacing: 3.2px; }
  .sp-win .big { font-size: 32px; }
  .sp-win .sub { font-size: 13.5px; }
  .sp-win li { font-size: 13.5px; }
  .sp-list li { font-size: 13px; }
  .sp-kpi div { font-size: 11px; }
  .sp-kpi div b { font-size: 28px; }
}

@media (max-width: 1180px),
       (min-width: 620px) and (max-height: 640px) {
  .sp-fx { display: flex; flex-direction: column; gap: 12px; padding: 15vh 6% 11vh;
    /* 比视口高时（矮屏）页内原生滚，滚到底再翻页；滚动条藏掉 */
    overflow-y: auto; scrollbar-width: none; }
  .sp-fx::-webkit-scrollbar { display: none; }
  .sp-hd { position: static; display: flex; gap: 12px; margin-bottom: 4px; }
  .sp-hd, .sp-win { margin-left: 0; }
  .sp-hd .no { font-size: 58px; -webkit-text-stroke-width: 1.3px; }
  .sp-hd h2 { font-size: 22px; letter-spacing: 2px; margin: 4px 0; }
  .sp-hd p { font-size: 8px; letter-spacing: 1.4px; line-height: 1.6; }
  /* 窗口从绝对散布改成纵向单列，去掉旋转，只留发丝边和 ghost */
  .sp-win { position: relative !important; left: auto !important; top: auto !important;
    width: auto !important; max-width: none; transform: none; padding: 12px 14px 14px; }
  .sp-win h3 { font-size: 8.5px; letter-spacing: 2px; margin-bottom: 8px; }
  .sp-win .big { font-size: 16px; }
  .sp-win .sub { font-size: 8.5px; }
  .sp-win li { font-size: 9px; line-height: 1.9; }
  .sp-kpi { gap: 16px; margin-top: 9px; }
  .sp-kpi div b { font-size: 15px; }
  .sp-spec { height: 22px; }
  .sp-btn { margin-top: 9px; padding: 7px 12px; font-size: 9px; }
  .sp-brand { top: 33%; }
  .sp-brand h1 { font-size: 42px; letter-spacing: 8px; padding-left: 8px; }
  .sp-brand p { font-size: 7.5px; letter-spacing: 3.4px; margin-top: 10px; }
  .sp-down { bottom: 6.5%; }
  .sp-down i, .sp-down b { width: 30px; height: 30px; border-right-width: 2.1px; border-bottom-width: 2.1px; }
  .sp-down b { width: 20px; height: 20px; margin-top: -25px; }
  .sp-down s { margin-top: 17px; letter-spacing: 2.6px; }
  .sp-clock .c-hh, .sp-clock .c-mm, .sp-clock .c-cln { font-size: 34px; }
  .sp-clock .c-sec { font-size: 12px; }
  .sp-clock .c-meter { width: 44px; }
  .sp-clock .c-date { font-size: 8px; letter-spacing: 1.8px; }
  .sp-open, .sp-back { bottom: 5%; }
}

/* ---------- 手机竖屏：单列 + 翻页保留，整页压进一屏（360x640 是最小目标）---------- */
@media (max-width: 619px) and (min-height: 471px) {
  .sp-fx { padding: 9vh 5% 7vh; gap: 9px; }
  .sp-hd { margin-bottom: 2px; }
  .sp-hd .no { font-size: 34px; -webkit-text-stroke-width: 1px; }
  .sp-hd h2 { font-size: 19px; letter-spacing: 1.6px; margin: 3px 0; }
  .sp-hd p { font-size: 7.5px; letter-spacing: 1.2px; }
  .sp-win { padding: 9px 10px 10px; }
  .sp-win h3 { font-size: 8px; letter-spacing: 1.8px; margin-bottom: 6px; }
  .sp-win .big { font-size: 17px; }
  .sp-win .sub { font-size: 9px; }
  .sp-win li { font-size: 9.5px; line-height: 1.8; }
  .sp-list li { font-size: 9px; line-height: 1.75; }
  .sp-kpi { gap: 12px; margin-top: 7px; }
  .sp-kpi div { font-size: 7.5px; }
  .sp-kpi div b { font-size: 15px; }
  .sp-bar { margin-top: 8px; }
  .sp-spec { height: 18px; }
  .sp-btn { margin-top: 7px; padding: 6px 10px; font-size: 8.5px; }
  /* 时钟让到顶边，列头从 9vh 开始，两者不打架 */
  .sp-clock { top: 10px; gap: 8px; }
  .sp-clock .c-hh, .sp-clock .c-mm, .sp-clock .c-cln { font-size: 22px; }
  .sp-clock .c-sec { font-size: 9px; }
  .sp-clock .c-meter { width: 30px; }
  .sp-clock .c-date { font-size: 7px; letter-spacing: 1.4px; }
  /* 右侧导航只留圆点，活跃标签太占宽度 */
  .sp-rail { right: 8px; gap: 12px; }
  .sp-rail a i { display: none; }
  .sp-rail a.on { color: rgba(11, 60, 102, 0); }
  /* 底部三件（箭头 / 打开 / 返回）收进安全区 */
  .sp-down { bottom: calc(3% + env(safe-area-inset-bottom, 0px)); }
  .sp-down i, .sp-down b { width: 26px; height: 26px; border-right-width: 2px; border-bottom-width: 2px; }
  .sp-down b { width: 17px; height: 17px; margin-top: -21px; }
  .sp-down s { margin-top: 13px; letter-spacing: 2px; font-size: 7px; }
  .sp-open { left: 5%; bottom: calc(3.4% + env(safe-area-inset-bottom, 0px)); font-size: 7px; letter-spacing: 2px; }
  .sp-back { right: 5%; bottom: calc(3.4% + env(safe-area-inset-bottom, 0px)); font-size: 8px; }
  .sp-back::before { height: 14px; margin: 0 6px -3px 0; }
  .sp-brand h1 { font-size: 34px; letter-spacing: 6px; padding-left: 6px; }
  .sp-brand p { font-size: 7px; letter-spacing: 2.6px; margin-top: 8px; }
}

/* ---------- 矮横屏（含手机横握）：高度不够翻页，退回原生网格 ---------- */
@media (max-height: 470px) {
  .sp-pages, .sp-rail, .sp-clock { display: none !important; }
  body.sp-lum .sun-main > .absolute.overflow-auto { display: block !important; }
  .app-icon-info {
    color: var(--sp-ice) !important;
    background: linear-gradient(172deg, rgba(19, 66, 105, .8), rgba(11, 49, 82, .86) 46%, rgba(5, 24, 42, .94)) !important;
    border: 1px solid var(--sp-line) !important; border-radius: 9px !important;
    box-shadow: 0 18px 40px rgba(5, 24, 42, .34) !important;
  }
  .app-icon-info .text-shadow, .app-icon-info span, .app-icon-info div { color: var(--sp-ice) !important; }
  .logo .text-shadow {
    font-family: Bahnschrift, "Arial Narrow", sans-serif !important;
    letter-spacing: 9px !important; color: transparent !important;
    background: linear-gradient(180deg, #f4faff 0%, #a9cbe8 26%, #2e7fd9 56%, #0b3c66 100%);
    -webkit-background-clip: text; background-clip: text; text-shadow: none !important;
  }
  .divider, .group-title.text-shadow, .group-title.text-shadow::before,
  .group-title.text-shadow::after, .footer, .footer a { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-track, .sp-fx { transition-duration: 1ms !important; }
  .sp-fx { transform: none !important; }
  .sp-clock { transition: none !important; }
  .sp-down i, .sp-down b { animation: none !important; opacity: .85; }
}