:root {
        --glass-bg: rgba(255, 255, 255, 0.10);
        --glass-bg-strong: rgba(255, 255, 255, 0.14);
        --glass-border: rgba(255, 255, 255, 0.22);
        --text-main: #f4f6ff;
        --text-sub: rgba(244, 246, 255, 0.62);
        --accent: #9db8ff;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { height: 100%; }
    body {
        font-family: 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', system-ui, sans-serif;
        overflow: hidden;
        color: var(--text-main);
        -webkit-font-smoothing: antialiased;
        background: #0b1026;
    }

    /* 背景层（支持幻灯片双层交叉过渡） */
    #bgWrap {
        position: fixed; inset: 0; z-index: -2;
        overflow: hidden;
    }
    .bg-layer {
        position: absolute; inset: 0;
        opacity: 0;
        will-change: opacity, transform, filter, clip-path;
    }
    .bg-layer.vis { opacity: 1; }
    .bg-img {
        position: absolute; inset: 0;
        background-size: var(--kb-from, cover); background-position: center;   /* cover 填充基准由 JS 按图/屏比例计算，缓慢反复缩放 */
        animation: bgSlow 30s ease-in-out infinite alternate;  /* Ken Burns 走 background-size，与切换动画的 transform/filter 互不干扰 */
    }
    @keyframes bgSlow { from { background-size: var(--kb-from, cover); } to { background-size: var(--kb-to, cover); } }
    /* 所有可见层的统一缩放基准：切换动画结束后落回该值，避免瞬间跳变 */
    .bg-layer.vis .bg-img { transform: scale(1.02); }

    /* —— 过渡动画（自然流畅，非瞬间切换） —— */
    /* 淡入淡出：in 类=起始态，+vis 触发过渡；out 类带 .bg-layer 前缀以胜过 .vis */
    .bg-fade-in  { opacity: 0; }
    .bg-fade-in.vis { opacity: 1; transition: opacity 2.4s ease; }
    .bg-layer.bg-fade-out { opacity: 0; transition: opacity 2.4s ease; }
    /* 滑动切换（旧图左移淡出，新图右滑淡入，结束落回统一基准） */
    .bg-slide-in  { opacity: 0; }
    .bg-slide-in .bg-img { transform: translateX(7%); }
    .bg-slide-in.vis { opacity: 1; transition: opacity 2.4s ease; }
    .bg-slide-in.vis .bg-img { transform: scale(1.02); transition: transform 2.4s cubic-bezier(.4, 0, .2, 1); }
    .bg-layer.bg-slide-out { opacity: 0; transform: translateX(-7%); transition: transform 2.4s cubic-bezier(.4, 0, .2, 1), opacity 2.4s ease; }
    .bg-slide-out .bg-img { transform: translateX(-7%); }
    /* 缩放推近 */
    .bg-zoom-in  { opacity: 0; }
    .bg-zoom-in .bg-img { transform: scale(1.14); }
    .bg-zoom-in.vis { opacity: 1; transition: opacity 2.4s ease; }
    .bg-zoom-in.vis .bg-img { transform: scale(1.02); transition: transform 3s cubic-bezier(.25, .1, .25, 1); }
    .bg-layer.bg-zoom-out { opacity: 0; transform: scale(1.04); transition: transform 2.4s ease, opacity 2.4s ease; }
    .bg-zoom-out .bg-img { transform: scale(1.06); }
    /* 模糊渐显 */
    .bg-blur-in  { opacity: 0; }
    .bg-blur-in .bg-img { filter: blur(14px); }
    .bg-blur-in.vis { opacity: 1; transition: opacity 2.6s ease; }
    .bg-blur-in.vis .bg-img { filter: blur(0); transform: scale(1.02); transition: filter 2.6s ease, transform 2.6s ease; }
    .bg-layer.bg-blur-out { opacity: 0; filter: blur(8px); transition: opacity 2.2s ease, filter 2.2s ease; }
    .bg-blur-out .bg-img { filter: blur(6px); }
    /* 圆形扩散：新层从圆心向外揭示覆盖，旧层（底图）全程保持不淡出、画面清晰，待新层完全覆盖后由 JS 移除。
       扩散动画由 JS 内联 transition 驱动（每次切换重新设置，可靠触发，避免 CSS animation 二次切换不重启） */
    .bg-circle-in { opacity: 0; }
    .bg-circle-in.vis { opacity: 1; }
    .bg-layer.bg-circle-out { opacity: 1; }   /* 旧层不淡出，避免扩散过程中露出底色遮罩 */

    #veil {
        position: fixed; inset: 0; z-index: -1;
        background:
            radial-gradient(120% 90% at 50% 110%, rgba(8, 10, 30, 0.55), transparent 60%),
            linear-gradient(180deg, rgba(8, 10, 30, 0.18) 0%, rgba(8, 10, 30, 0.38) 100%);
    }

    /* 居中布局 */
    #wrapper {
        position: relative; z-index: 2;
        min-height: 100vh;
        display: flex; flex-direction: column;
        justify-content: center; align-items: center;
        padding: 18px 16px;
        gap: 18px;
    }

    /* 顶部 LIVE 胶囊 */
    .live-pill {
        display: inline-flex; align-items: center; gap: 9px;
        padding: 8px 18px;
        border-radius: 999px;
        background: var(--glass-bg);
        backdrop-filter: blur(18px) saturate(1.4);
        -webkit-backdrop-filter: blur(18px) saturate(1.4);
        border: 1px solid var(--glass-border);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
        font-size: 13px; letter-spacing: 2px; color: var(--text-sub);
    }
    .live-dot {
        width: 8px; height: 8px; border-radius: 50%;
        background: #6ee7a0;
        box-shadow: 0 0 0 0 rgba(110, 231, 160, 0.7);
        animation: pulse 2s ease-out infinite;
    }
    @keyframes pulse {
        0%   { box-shadow: 0 0 0 0 rgba(110, 231, 160, 0.65); }
        70%  { box-shadow: 0 0 0 9px rgba(110, 231, 160, 0); }
        100% { box-shadow: 0 0 0 0 rgba(110, 231, 160, 0); }
    }
    /* 离线（未知）状态：红点 */
    .live-dot.off {
        background: #ff6b6b;
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7);
        animation: pulseRed 2s ease-out infinite;
    }
    @keyframes pulseRed {
        0%   { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.65); }
        70%  { box-shadow: 0 0 0 9px rgba(255, 107, 107, 0); }
        100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); }
    }

    /* 主玻璃卡片 */
    .glass-card {
        width: min(440px, 94vw);
        padding: 46px 34px 34px;
        border-radius: 30px;
        background: linear-gradient(155deg, var(--glass-bg-strong), var(--glass-bg));
        backdrop-filter: blur(26px) saturate(1.5);
        -webkit-backdrop-filter: blur(26px) saturate(1.5);
        border: 1px solid var(--glass-border);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            0 24px 60px rgba(0, 0, 0, 0.35);
        text-align: center;
        transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.45s ease;
        animation: cardIn 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    }
    .glass-card:hover {
        transform: scale(1.025);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            0 30px 70px rgba(0, 0, 0, 0.45);
    }
    @keyframes cardIn {
        from { opacity: 0; transform: translateY(26px) scale(0.96); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* 状态图标 */
    .icon-wrap { display: flex; justify-content: center; margin-bottom: 24px; }
    .icon-shell {
        width: 148px; height: 148px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 82px; line-height: 1;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.05));
        border: 1px solid rgba(255, 255, 255, 0.30);
        box-shadow:
            inset 0 0 34px rgba(255, 255, 255, 0.10),
            0 14px 40px rgba(0, 0, 0, 0.35);
        overflow: hidden;
        user-select: none; -webkit-user-select: none;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .icon-shell img {
        width: 100%; height: 100%; object-fit: cover;
        display: block;
        pointer-events: none;
    }
    .icon-shell.updating { animation: iconPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
    @keyframes iconPop {
        0% { transform: scale(0.82) rotate(-6deg); }
        60% { transform: scale(1.08) rotate(3deg); }
        100% { transform: scale(1) rotate(0); }
    }

    /* 状态名称 */
    .status-name {
        font-size: 30px; font-weight: 700; letter-spacing: 3px;
        background: linear-gradient(120deg, #ffffff, #cdd9ff);
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent; color: #fff;
        word-break: break-all;
        margin-bottom: 6px;
        transition: opacity 0.35s ease;
    }
    /* 状态详细说明（比名称小一号字，可关） */
    .status-detail {
        font-size: 15px; font-weight: 400; letter-spacing: 1px;
        color: rgba(244, 246, 255, 0.78);
        margin: 0 0 12px;
        word-break: break-all;
        line-height: 1.5;
    }
    .status-label {
        font-size: 12px; letter-spacing: 6px; color: var(--text-sub);
        margin-bottom: 22px; text-transform: uppercase;
    }

    /* 分隔线 */
    .divider {
        height: 1px; margin: 0 auto 20px; width: 72%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.30), transparent);
    }

    /* 主人信息行 */
    .owner-row {
        display: flex; align-items: center; justify-content: center; gap: 12px;
        font-size: 14px; color: var(--text-sub);
    }
    .owner-avatar-link {
        display: inline-block; line-height: 0;
        border-radius: 50%;
        cursor: pointer;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    }
    .owner-avatar-link:hover {
        transform: scale(1.12);
        box-shadow: 0 0 0 3px rgba(157, 184, 255, 0.45), 0 6px 20px rgba(0, 0, 0, 0.35);
    }
    .owner-avatar-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 50%; }
    .owner-avatar {
        width: 40px; height: 40px; border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.55);
        object-fit: cover;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
        pointer-events: none; user-select: none; -webkit-user-select: none;
    }
    .owner-name { color: var(--text-main); font-weight: 600; }

    /* 底部游客提示 */
    .footer-pill {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 7px 16px;
        border-radius: 999px;
        background: var(--glass-bg);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.16);
        font-size: 12px; color: var(--text-sub);
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.2);
    }
    #footer {
        position: fixed; bottom: 16px; left: 0; right: 0; z-index: 3;
        text-align: center; font-size: 12px;
        color: rgba(244, 246, 255, 0.45);
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        pointer-events: none;
    }
    /* 实时时钟：等宽数字，秒跳动时文字不抖动 */
    .ft-clock {
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.5px;
    }

    /* 更新提示 Toast */
    #toast {
        position: fixed; top: 22px; left: 50%; z-index: 99;
        transform: translateX(-50%) translateY(-80px);
        padding: 10px 22px;
        border-radius: 999px;
        background: rgba(20, 26, 52, 0.72);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.25);
        color: #fff; font-size: 13px; letter-spacing: 1px;
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
        opacity: 0;
        transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.35s ease;
        pointer-events: none;
    }
    #toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

    /* ===== 视图切换（状态页 / 信息窗页） =====
       新视图不做透明度淡入：opacity<1 会禁用 backdrop-filter 毛玻璃（浏览器规范行为）。
       旧视图淡出上移（消失中无妨），新视图以全不透明呈现、毛玻璃全程生效，
       动画感来自卡片阴影/背景"亮起"（box-shadow/background 动画不会禁用毛玻璃） */
    .view-status, .view-info {
        display: flex; flex-direction: column; align-items: center;
        width: 100%;
        transition: opacity 0.3s ease;
    }
    /* 信息窗模式（含桌面端）：允许页面纵向滚动，卡片内容全展开后可滚动查看 */
    body.info-mode { overflow-y: auto; }
    .view-status { gap: 18px; }
    .view-info { gap: 24px; padding-bottom: 40px; }
    .fading { opacity: 0; transform: translateY(-14px) scale(0.985); pointer-events: none; }

    /* 切换按钮（原底部文案改为可点击按钮，名称后台可自定义） */
    .toggle-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        padding: 11px 26px;
        border-radius: 999px;
        background: var(--glass-bg);
        backdrop-filter: blur(16px) saturate(1.35);
        -webkit-backdrop-filter: blur(16px) saturate(1.35);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: var(--text-sub);
        font-size: 13px; letter-spacing: 1px;
        font-family: inherit; cursor: pointer;
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.25);
        transition: all 0.25s ease;
        user-select: none; -webkit-user-select: none;
        max-width: 92vw;
    }
    .toggle-btn:hover { color: #fff; border-color: rgba(157, 184, 255, 0.65); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }
    .toggle-btn:active { transform: scale(0.97); }
    .toggle-btn.disabled { pointer-events: none; }  /* 关闭信息窗后：外观保持正常，仅无法点击 */

    /* ===== 信息窗 ===== */
    .info-slot { width: 100%; }
    .info-grid {
        display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
        gap: 24px;
        max-width: 1960px; width: 100%;
        margin: 0 auto;   /* 任意屏宽下网格整体居中 */
    }
    /* 自定义信息窗为空时的提示 */
    .info-empty {
        margin: 40px auto;
        padding: 26px 46px;
        border-radius: 30px;
        background: linear-gradient(155deg, var(--glass-bg-strong), var(--glass-bg));
        backdrop-filter: blur(26px) saturate(1.5);
        -webkit-backdrop-filter: blur(26px) saturate(1.5);
        border: 1px solid var(--glass-border);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 24px 60px rgba(0, 0, 0, 0.35);
        color: var(--text-sub);
        font-size: 15px; letter-spacing: 2px;
    }
    .info-card {
        width: 360px; height: 460px; flex: 0 0 360px;
        border-radius: 22px;
        background: linear-gradient(155deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
        backdrop-filter: blur(22px) saturate(1.4);
        -webkit-backdrop-filter: blur(22px) saturate(1.4);
        border: 1px solid var(--glass-border);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.16),
            0 18px 46px rgba(0, 0, 0, 0.3);
        display: flex; flex-direction: column;
        overflow: hidden;
        animation: infoCardIn 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    }
    /* 每日速递卡：单独保持"在线状态"主卡样式（大卡 + 30px 圆角 + 强毛玻璃），
       固定长度 650px（较图三参照版加长，与手机端 62vh 观感一致），内容超出时在卡片内部滚动浏览 */
    #infoFeed {
        width: min(440px, 94vw);
        height: 650px;
        flex: 0 0 auto;
        border-radius: 30px;
        background: linear-gradient(155deg, var(--glass-bg-strong), var(--glass-bg));
        backdrop-filter: blur(26px) saturate(1.5);
        -webkit-backdrop-filter: blur(26px) saturate(1.5);
        border: 1px solid var(--glass-border);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            0 24px 60px rgba(0, 0, 0, 0.35);
    }
    /* 整卡弹出（与在线状态卡同款上浮+缩放+淡入）：动画期间毛玻璃被浏览器禁用，
       故用不透明深色背景兜底避免透出背景发虚，动画结束恢复半透明毛玻璃 */
    @keyframes infoCardIn {
        from {
            opacity: 0;
            transform: translateY(26px) scale(0.96);
            background: rgba(40, 42, 66, 0.98);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
            background: linear-gradient(155deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
        }
    }
    /* 内容层跟随整卡弹出，不再单独播放动画 */
    .info-card-in {
        flex: 1; min-height: 0;
        display: flex; flex-direction: column;
    }
    .info-title {
        flex: none;
        padding: 16px 18px 13px;
        font-size: 16px; font-weight: 700; letter-spacing: 2px;
        color: var(--text-main);
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        word-break: break-all;
    }
    .info-body {
        flex: 1; min-height: 0;
        overflow-y: auto; overflow-x: hidden;
        padding: 14px 18px 18px;
        font-size: 13.5px; line-height: 1.75;
        color: rgba(244, 246, 255, 0.74);
        word-break: break-word;
    }
    .info-body::-webkit-scrollbar { width: 6px; }
    .info-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }
    .info-body h1, .info-body h2, .info-body h3, .info-body h4 {
        color: var(--text-main); margin: 12px 0 6px; line-height: 1.4; letter-spacing: 0.5px;
    }
    .info-body h1 { font-size: 19px; }
    .info-body h2 { font-size: 17px; }
    .info-body h3 { font-size: 15px; }
    .info-body h4 { font-size: 14px; }
    .info-body p { margin: 7px 0; }
    .info-body strong { color: var(--text-main); font-weight: 700; }
    .info-body em { font-style: italic; }
    .info-body ul, .info-body ol { margin: 7px 0; padding-left: 22px; }
    .info-body li { margin: 4px 0; }
    .info-body blockquote {
        margin: 9px 0; padding: 7px 12px;
        border-left: 3px solid var(--accent);
        background: rgba(157, 184, 255, 0.10);
        border-radius: 8px; color: rgba(244, 246, 255, 0.85);
    }
    .info-body code {
        background: rgba(255, 255, 255, 0.13); padding: 1px 6px;
        border-radius: 5px; font-size: 12.5px;
        font-family: Consolas, Menlo, monospace;
    }
    .info-body pre {
        background: rgba(0, 0, 0, 0.32); padding: 11px 13px; border-radius: 10px;
        overflow-x: auto; margin: 9px 0;
    }
    .info-body pre code { background: none; padding: 0; }
    .info-body a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(157, 184, 255, 0.4); }
    .info-body img { max-width: 100%; border-radius: 8px; display: block; margin: 6px 0; }

    /* 手机端：信息窗纵向排列、页面可滚动，底部文案固定不动 */
    @media (max-width: 760px) {
        body.info-mode { overflow-y: auto; scrollbar-width: none; scrollbar-gutter: stable both-edges; }   /* 手机端隐藏页面滚动条；不支持隐藏时用对称 gutter，保证信息窗左右间距一致 */
        body.info-mode::-webkit-scrollbar { display: none; }
        .view-info { gap: 18px; padding-bottom: 64px; }   /* 底部留白，避免滚动到底与固定底部文案重叠 */
        .info-slot { width: 100%; }
        .info-grid { flex-direction: column; align-items: center; width: 100%; margin: 0 auto; }
        /* 手机端信息窗卡统一固定高度：iPhone/安卓绝对一致（不再用 vh，避免 iOS 视口基准差异）；宽度用 100%+max-width 随容器走，
           不用 94vw——vw 含滚动条宽度会超出容器可用宽导致卡片右缘溢出贴屏 */
        .info-card { width: 100%; max-width: 430px; height: 460px; flex-basis: auto; margin-left: auto; margin-right: auto; }
        #infoFeed { width: 100%; max-width: 440px; height: 460px; margin-left: auto; margin-right: auto; }        .toggle-btn { font-size: 12px; padding: 10px 20px; }
    }

    @media (max-width: 480px) {
        .glass-card { padding: 38px 22px 28px; border-radius: 24px; }
        .icon-shell { width: 122px; height: 122px; font-size: 68px; }
        .status-name { font-size: 24px; letter-spacing: 2px; }
    }
    /* ==================== 前台设计（后台「前台设计」板块独立开关，body 类名作用域） ==================== */
    /* 层级：bgWrap(-3) < veil/dim(-1) < 内容(z2) < 氛围(5) < 浮层(9) */
    #bgWrap { z-index: -3; }
    #dim { position: fixed; inset: 0; z-index: -1; pointer-events: none;
        background: rgba(4, 7, 22, 0.38); opacity: 0; transition: opacity .5s ease; }

    /* —— 节日氛围（触发类 fx-snow / fx-spring，按日期自动或立即启用） —— */
    #fxLayer { position: fixed; inset: 0; z-index: 5; pointer-events: none; display: none; overflow: hidden; }
    .fx-snow #fxLayer { display: block; }
    .fx-snow .snow-flake { position: absolute; top: -26px; border-radius: 50%; background: #fff;
        opacity: .85; animation: snowFall linear infinite; }
    @keyframes snowFall { to { transform: translateY(112vh); opacity: .12; } }
    .fx-spring #fxLayer { display: block;
        background:
            radial-gradient(45% 30% at 10% 0%, rgba(255, 180, 120, .14), transparent 60%),
            radial-gradient(45% 30% at 90% 0%, rgba(255, 120, 120, .12), transparent 60%); }
    .fx-spring .spring-lantern { position: absolute; top: 0; font-size: 40px; opacity: .95;
        animation: swing 4s ease-in-out infinite; transform-origin: top center;
        filter: drop-shadow(0 0 8px rgba(255, 120, 80, .55));
        text-shadow: 0 0 14px rgba(255, 150, 90, .65); }
    @keyframes swing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

    /* —— 状态页信息层次（ds-status-hero）：顶部时钟/日期 → 透明毛玻璃（样式与底部状态卡一致） —— */
    .hero-glass, .hero-clock, .hero-date { display: none; }
    .ds-status-hero .hero-glass {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        margin-top: 8px; padding: 10px 38px 12px;
        border-radius: 22px;
        background: var(--glass-bg, rgba(255, 255, 255, 0.10));
        border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.22));
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
    .ds-status-hero .hero-clock {
        display: block;
        font-size: clamp(34px, 9vw, 56px); font-weight: 200; line-height: 1.12;
        letter-spacing: 3px; color: #fff;
        text-shadow: 0 0 28px rgba(157, 184, 255, .38);
    }
    .ds-status-hero .hero-date {
        display: block; margin-top: 2px;
        font-size: 13px; letter-spacing: 2px; color: var(--text-sub);
    }
    .ds-status-hero .status-name { text-shadow: 0 0 24px rgba(157, 184, 255, .45); }

    /* —— 时钟字体（ds-typography） —— */
    .ds-typography .hero-clock, .ds-typography .ft-clock {
        font-family: 'Cascadia Mono', 'SF Mono', 'JetBrains Mono', Consolas, 'Roboto Mono', monospace;
        font-variant-numeric: tabular-nums;
    }

    /* —— 信息窗分区化（ds-feed-sections）：板块标题变彩色标签卡 —— */
    .ds-feed-sections #infoFeed .info-body h2,
    .ds-feed-sections #infoFeed .info-body h3,
    .ds-feed-sections #infoFeed .info-body h4 {
        display: inline-block; margin: 12px 0 6px; padding: 4px 14px; border-radius: 999px;
        font-size: 14px; letter-spacing: 1px;
        background: linear-gradient(120deg, rgba(157, 184, 255, .22), rgba(255, 150, 190, .18));
        border: 1px solid rgba(255, 255, 255, .22); color: #fff;
        box-shadow: 0 2px 10px rgba(80, 120, 255, .12);
    }

    /* —— 按钮微交互（ds-btn-feedback） —— */
    .ds-btn-feedback .toggle-btn { position: relative; overflow: hidden; transition: box-shadow .3s ease, transform .15s ease; }
    .ds-btn-feedback .toggle-btn:hover { box-shadow: 0 6px 28px rgba(157, 184, 255, .35), 0 0 0 1px rgba(255, 255, 255, .25); }
    .ds-btn-feedback .toggle-btn:active { transform: scale(.96); }
    .ds-btn-feedback .ripple { position: absolute; border-radius: 50%; pointer-events: none;
        background: rgba(255, 255, 255, .4); transform: scale(0); animation: rippleFx .6s ease-out; }
    @keyframes rippleFx { to { transform: scale(2.4); opacity: 0; } }
    .ds-btn-feedback .live-dot { animation: livePulse 2s ease-out infinite; }
    @keyframes livePulse {
        0% { box-shadow: 0 0 0 0 rgba(94, 224, 152, .55); }
        70% { box-shadow: 0 0 0 9px rgba(94, 224, 152, 0); }
        100% { box-shadow: 0 0 0 0 rgba(94, 224, 152, 0); }
    }
    .ds-btn-feedback .live-dot.off { animation: none; }

    /* —— 过渡质感（ds-transition-fx） —— */
    .ds-transition-fx #dim { opacity: 1; }
    body:not(.info-mode).ds-transition-fx #dim { opacity: 0; }
    .ds-transition-fx .view-status, .ds-transition-fx .view-info { transition: opacity .3s ease, transform .3s ease; }

    /* —— 天气微件（ds-weather-widget）；top 下移避开顶部春节灯笼 —— */
    .weather-chip { display: none; }
    .ds-weather-widget .weather-chip {
        display: inline-flex; align-items: center; gap: 6px;
        position: fixed; top: 64px; right: 16px; z-index: 4;
        padding: 7px 14px; border-radius: 999px;
        background: rgba(18, 24, 48, 0.35); border: 1px solid rgba(255, 255, 255, .2);
        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        font-size: 12px; color: var(--text-main); letter-spacing: .5px;
        max-width: 56vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* —— FPS / 连接延迟（ds-perf-meter）：左上角，同款毛玻璃胶囊；top 下移避开顶部春节灯笼 —— */
    .perf-chip { display: none; }
    .ds-perf-meter .perf-chip {
        display: inline-flex; align-items: center; gap: 6px;
        position: fixed; top: 64px; left: 16px; z-index: 4;
        padding: 7px 14px; border-radius: 999px;
        background: rgba(18, 24, 48, 0.35); border: 1px solid rgba(255, 255, 255, .2);
        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        font-size: 12px; color: var(--text-main); letter-spacing: .5px;
        white-space: nowrap;
    }
    .perf-chip .pc-val { color: #8fe3b0; font-weight: 600; font-variant-numeric: tabular-nums; }

    /* —— 大图预览：信息窗图片点击放大；透明毛玻璃只包裹图片，空白处保持暗色透明可点击关闭 —— */
    .imgview { position: fixed; inset: 0; z-index: 12; display: none;
        align-items: center; justify-content: center;
        background: rgba(4, 7, 22, 0.55); cursor: zoom-out; }
    .imgview-box { position: relative; max-width: 92vw; max-height: 86vh;
        padding: 12px; border-radius: 18px;
        background: var(--glass-bg, rgba(255, 255, 255, 0.10));
        border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.22));
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 14px 48px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
    .imgview-box img { display: block; max-width: 90vw; max-height: 82vh;
        border-radius: 10px; object-fit: contain; }
    .imgview-close { position: absolute; top: -12px; right: -12px; width: 30px; height: 30px;
        border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); cursor: pointer;
        background: rgba(18, 24, 48, 0.85); color: #fff; font-size: 14px; line-height: 1;
        display: flex; align-items: center; justify-content: center; }
    .imgview-close:hover { background: rgba(157, 184, 255, 0.35); }