/* Copyright (c) Microsoft Corporation.
Licensed under the MIT license.

主题色（明亮科技风）：
  深色文字   #000028
  深蓝强调   #04145E
  浅灰底     #ECECF0
  米色暖调   #F5DCBE
  青绿主色   #3CC8BE
*/

:root {
    --ink: #000028;
    --navy: #04145E;
    --mist: #ECECF0;
    --sand: #F5DCBE;
    --teal: #3CC8BE;
    --teal-soft: rgba(60, 200, 190, 0.18);
    --text-2: rgba(0, 0, 40, 0.55);
    --text-3: rgba(0, 0, 40, 0.35);
    --line: rgba(0, 0, 40, 0.08);
    /* Android/部分飞书 WebView 未暴露 env() 时，由 JS 以 visualViewport 补偿顶部状态栏。 */
    --runtime-safe-top: 0px;
}

@property --theme-x {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 50%;
}

@property --theme-y {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 40%;
}

/* 服务端签名水印：低透明度、不可交互，不阻断报表 iframe 操作。 */
#watermark-overlay { display:none; position:fixed; inset:0; z-index:20; pointer-events:none; overflow:hidden; }
#watermark-overlay.is-visible { display:block; }
.watermark-tile { position:absolute; box-sizing:border-box; display:flex; align-items:center; justify-content:center; padding:12px; border:1px solid transparent; border-radius:10px; background:transparent; overflow:hidden; overflow-wrap:anywhere; text-align:center; transform:rotate(-24deg); color:var(--navy); opacity:var(--watermark-opacity,.08); font:500 clamp(10px,1vw,12px)/1.45 system-ui,-apple-system,"Microsoft YaHei",sans-serif; letter-spacing:.04em; user-select:none; }
.watermark-tile.wm-style-soft { background:rgba(255,255,255,.22); box-shadow:0 2px 10px rgba(4,20,94,.04); }
.watermark-tile.wm-style-outline { border-color:currentColor; border-radius:8px; }
.watermark-tile.wm-layout-single { transform:rotate(0deg); }
.watermark-tile.wm-layout-diagonal { transform:rotate(-24deg); }
@media (prefers-color-scheme:dark) { .watermark-tile { color:#9de9e1; } }

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    overscroll-behavior-x: none;
    font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    background: var(--mist);
    color: var(--ink);
}

/* 全部 Power BI 容器共用同一安全区：动态创建的 desktop/fit/landscape 也必须覆盖。 */
#embed-container,
#embed-container-desktop,
#embed-container-fit,
#embed-container-landscape {
    box-sizing: border-box;
    /* 飞书顶部/底部导航栏隐藏后，webview 延伸到系统状态栏与 Home 指示条：
       给报表 iframe 留出安全区，避免报表内容与系统导航重叠 */
    padding-top: max(env(safe-area-inset-top, 0px), var(--runtime-safe-top, 0px));
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    background: var(--mist);
}

/* 报表主容器：100dvh 跟随移动端动态视口；100vh 作为旧 WebView 回退。 */
#embed-container {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    position: relative;
}

/* 去掉 Power BI iframe 的 UA 默认 2px 边框（会在报表四周形成细边） */
#embed-container iframe,
#embed-container-desktop iframe,
#embed-container-fit iframe,
#embed-container-landscape iframe {
    border: 0;
    outline: none;
}

/* 进入页面加载遮罩：流动渐变背景 + 悬浮玻璃卡片 + 双环图标 + 流光进度条 */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    padding-top: max(env(safe-area-inset-top, 0px), var(--runtime-safe-top, 0px));
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f2f6f8, #eefaf9, #fbf3e4, #f2f6f8);
    background-size: 300% 300%;
    animation: ps-bgshift 14s ease-in-out infinite;
    color: var(--text-2);
    font-size: 14px;
    text-align: center;
    transition: opacity 0.5s ease, visibility 0s 0.5s;
}

#loading.done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes ps-bgshift {
    0%,
    100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* 悬浮玻璃卡片 */
.ps-loading-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 38px 52px 30px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    backdrop-filter: blur(24px) saturate(1.5);
    box-shadow: 0 24px 60px rgba(4, 20, 94, 0.12);
    animation: ps-cardfloat 3.2s ease-in-out infinite;
}

@keyframes ps-cardfloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-7px);
    }
}

/* 双环旋转 + 盾牌图标 */
.ps-ring-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    animation: ps-glow 2.2s ease-in-out infinite;
}

.ps-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        var(--lt-a, var(--teal)) 0deg,
        var(--lt-b, var(--navy)) 120deg,
        var(--lt-a, var(--teal)) 240deg,
        var(--lt-a, var(--teal)) 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 1px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 1px));
    animation: ps-ringspin 1.2s linear infinite;
}

@keyframes ps-ringspin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ps-glow {
    0%,
    100% {
        filter: drop-shadow(0 0 6px var(--glow-la, rgba(60, 200, 190, 0.35)));
    }
    50% {
        filter: drop-shadow(0 0 18px var(--glow-lb, rgba(4, 20, 94, 0.4)));
    }
}

.ps-shield {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-shield svg {
    width: 34px;
    height: 34px;
}

/* 渐变百分比数字 */
.ps-loading-pct {
    margin-top: 18px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(90deg, var(--lt-b, var(--navy)), var(--lt-a, var(--teal)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 流光进度条 */
.ps-loading-bar {
    position: relative;
    width: 240px;
    height: 6px;
    margin-top: 18px;
    border-radius: 3px;
    background: rgba(0, 0, 40, 0.08);
    overflow: hidden;
}

.ps-loading-bar i {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    /* 进度用 transform: scaleX 驱动（合成器线程），Power BI iframe 渲染抢占主线程时不再卡死 */
    transform: scaleX(0);
    transform-origin: left;
    will-change: transform;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--lt-a, var(--teal)), var(--lt-b, var(--navy)));
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 光效独立于填充：整条轨道恒宽、动画恒定，不随 scaleX 进度压缩 */
.ps-loading-bar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 48px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    transform: translateX(-60px);
    animation: ps-shimmer 1.3s ease-in-out infinite;
}

@keyframes ps-shimmer {
    0% {
        transform: translateX(-60px);
    }
    100% {
        /* 终点由 JS 按轨道实际宽度注入（--shimmer-end），宽屏/自定义主题进度条也能跑满 */
        transform: translateX(var(--shimmer-end, 420px));
    }
}

.ps-loading-text {
    margin-top: 12px;
    color: var(--text-2);
    letter-spacing: 0.3px;
}

.ps-text-swap {
    animation: ps-textin 0.35s ease;
}

@keyframes ps-textin {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    .ps-loading-card {
        padding: 26px 30px 22px;
    }
    .ps-loading-bar {
        width: 200px;
    }
}

#error-container {
    position: fixed;
    top: 24px;
    left: 16px;
    right: 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    color: #b02a37;
    background: #fdeeee;
    border: 1px solid #f5c2c2;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.6;
    word-break: break-word;
    white-space: pre-wrap;
    z-index: 1000000;
}

#error-container .error-close {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-left: auto;
    padding: 0;
    border: 1px solid rgba(176, 42, 55, 0.35);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    color: #b02a37;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* 目录视图：按工作区分组的报表卡片（明亮科技风） */
#directory-view {
    box-sizing: border-box;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    padding: 0 16px calc(48px + env(safe-area-inset-bottom));
    background: linear-gradient(160deg, #f2f6f8, #fbf6ec 45%, #eefaf9);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* 顶部固定区：保持原头部布局，滚动时吸顶 */
.dir-sticky {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 -16px;
    /* 飞书顶部导航栏隐藏后，内容区上探到系统状态栏：顶部留安全区（Android 为 0，无副作用） */
    padding: max(env(safe-area-inset-top, 0px), var(--runtime-safe-top, 0px)) 16px 4px;
    background: linear-gradient(160deg, #f2f6f8, #fbf6ec 45%, #eefaf9);
}

.dir-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 auto;
    max-width: 1080px;
    margin: 0 auto;
    padding: 22px 4px 10px;
}

.dir-header-left {
    min-width: 0;
}

.dir-greeting {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.dir-dept {
    margin: -2px 0 6px;
    color: var(--text-3);
    font-size: 12px;
    letter-spacing: 0.2px;
}

.dir-header-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    backdrop-filter: blur(12px) saturate(1.3);
    color: var(--ink);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(4, 20, 94, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.theme-toggle:active {
    transform: scale(0.94);
}

#theme-debug-anchor {
    position: fixed;
    z-index: 1000002;
    display: none;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 2px solid #ff4f7b;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    filter: drop-shadow(0 0 3px rgba(255, 79, 123, 0.75));
}

#theme-debug-anchor::before,
#theme-debug-anchor::after {
    content: "";
    position: absolute;
    background: #ff4f7b;
}

#theme-debug-anchor::before {
    top: 7px;
    right: -6px;
    left: -6px;
    height: 2px;
}

#theme-debug-anchor::after {
    top: -6px;
    bottom: -6px;
    left: 7px;
    width: 2px;
}

#theme-debug-anchor.is-visible {
    display: block;
}

#theme-debug-panel {
    position: fixed;
    bottom: 14px;
    left: 14px;
    z-index: 1000001;
    display: block;
    max-width: min(390px, calc(100vw - 28px));
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(255, 79, 123, 0.68);
    border-radius: 10px;
    background: rgba(12, 17, 43, 0.9);
    box-shadow: 0 10px 28px rgba(4, 20, 94, 0.26);
    color: #fff5f8;
    font: 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: pre-wrap;
    pointer-events: none;
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
}

.theme-icon-moon {
    display: none;
}

.dir-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: linear-gradient(90deg, var(--navy), var(--teal));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

@media (max-width: 480px) {
    .dir-header {
        padding-top: 16px;
    }
    .dir-greeting {
        font-size: 12px;
    }
}

.dir-subtitle {
    margin-top: 6px;
    color: var(--text-2);
    font-size: 14px;
}

.dir-group {
    max-width: 1080px;
    margin: 26px auto 0;
}

/* 工作区分隔元素：渐变细线 + 菱形标识 */
.dir-ws-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 4px 16px;
}

.dir-ws-divider::before,
.dir-ws-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--teal-soft));
}

.dir-ws-divider::after {
    background: linear-gradient(90deg, var(--teal-soft), transparent);
}

.dir-ws-divider i {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    border: 1px solid var(--teal);
    border-radius: 1px;
    background: rgba(60, 200, 190, 0.25);
}

.dir-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.dir-card {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 8px 24px rgba(4, 20, 94, 0.08);
    color: var(--ink);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

.dir-card:active {
    transform: scale(0.97);
}

.dir-card-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--teal), var(--navy));
    color: #ffffff;
}

.dir-card-icon svg {
    width: 18px;
    height: 18px;
}

.dir-card-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dir-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dir-card-badges {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.dir-card-meta {
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dir-badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(4, 20, 94, 0.14);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.dir-badge.top {
    background: linear-gradient(135deg, var(--teal), var(--navy));
    color: #ffffff;
}

.dir-badge.new {
    background: var(--teal-soft);
    color: #0b7f77;
}

/* 有角标时给标题留出右上角空间，减少遮挡；new 更窄，单独出现时占位更小 */
.dir-card-badge-top .dir-card-name {
    padding-right: 56px;
}

.dir-card-badge-new:not(.dir-card-badge-top) .dir-card-name {
    padding-right: 40px;
}

.dir-card-chevron {
    color: var(--text-3);
    font-size: 20px;
}

/* ---- 首页分页滑动（工作区名称栏 / 滑动区 / 翻页控制） ---- */

.dir-workspace-bar {
    max-width: 1080px;
    margin: 0 auto;
    text-align: left;
    padding: 2px 4px 8px;
    color: var(--navy);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.4px;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.dir-workspace-bar.ws-fade-out {
    opacity: 0;
}

.dir-workspace-bar.ws-fade-in {
    opacity: 1;
}


.dir-empty {
    max-width: 1080px;
    margin: 40px auto 0;
    padding: 32px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--text-2);
    font-size: 14px;
    text-align: center;
}

/* 目录页脚容器：统一底标（.brand-* 见 scenes.css，主页与 admin 同款） */
.dir-footer {
    position: relative;
    max-width: 1080px;
    margin: 34px auto 10px;
    padding: 18px 20px 20px;
    overflow: hidden;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(236, 236, 240, 0.42));
    box-shadow: 0 10px 30px rgba(4, 20, 94, 0.08);
}

.dir-footer .df-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--teal), var(--navy), var(--teal), transparent);
    background-size: 200% 100%;
    animation: dfLineFlow 3.2s linear infinite;
    opacity: 0.9;
}

@keyframes dfLineFlow {
    to { background-position: 200% 0; }
}

html[data-theme="dark"] .dir-footer {
    border-color: rgba(236, 236, 240, 0.12);
    background: linear-gradient(160deg, rgba(10, 15, 35, 0.82), rgba(7, 11, 34, 0.55));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

/* 报表页左上角悬浮按钮组（首页键 / 导出 / 书签 / 隐藏UI / 展开收起）。
   创新聊天按钮独立放在右下角，避免占用左上角操作位。 */
#report-back-btn,
#report-share-btn,
#export-data-btn,
#data-agent-btn,
#capture-btn,
#bookmark-add-btn,
#bookmark-list-btn,
#reset-filters-btn,
#float-ui-toggle,
#more-actions-btn {
    position: fixed;
    top: calc(12px + max(env(safe-area-inset-top, 0px), var(--runtime-safe-top, 0px)));
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
    box-shadow: 0 6px 18px rgba(4, 20, 94, 0.14);
    color: var(--navy);
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    opacity: 0.65;
    transition: left 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#report-back-btn {
    left: 14px;
}

#export-data-btn {
    left: 60px;
}

#data-agent-btn {
    top: auto;
    left: auto;
    right: calc(18px + env(safe-area-inset-right, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: 48px;
    height: 48px;
    border-color: rgba(14, 143, 135, 0.45);
    background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(223,250,246,.9));
    color: #087f78;
    opacity: .9;
    box-shadow: 0 10px 26px rgba(4, 77, 85, .22), 0 0 0 4px rgba(14,143,135,.08);
}

#data-agent-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(4, 77, 85, .28), 0 0 0 5px rgba(14,143,135,.12); }

#bookmark-add-btn {
    left: 106px;
}

#bookmark-list-btn {
    left: 152px;
}

#reset-filters-btn {
    left: 198px;
}

#capture-btn {
    left: 244px;
}

#float-ui-toggle {
    left: 336px;
}

#report-share-btn {
    left: 290px;
}

/* 飞书移动端专用“更多操作”：位置独立，视觉完全复用其它悬浮控件。 */
#more-actions-btn {
    left: auto;
    right: calc(14px + env(safe-area-inset-right, 0px));
}

/* 收起态：隐藏导出，home 与 隐藏UI 相邻，切换钮移到第三位 */
body.float-ui-collapsed #export-data-btn {
    display: none;
}

body.float-ui-collapsed #report-share-btn { display: none; }

body.float-ui-collapsed #data-agent-btn {
    display: none;
}

body.float-ui-collapsed #bookmark-add-btn,
body.float-ui-collapsed #bookmark-list-btn,
body.float-ui-collapsed #reset-filters-btn {
    display: none;
}

body.float-ui-collapsed #capture-btn {
    left: 60px;
}

body.float-ui-collapsed #float-ui-toggle {
    left: 106px;
}

/* 共享链接屏蔽全部功能类按钮：无展开/收起钮，隐藏UI键紧贴首页键 */
body.share-no-features #capture-btn {
    left: 60px;
}

#report-back-btn svg,
#report-share-btn svg,
#export-data-btn svg,
#data-agent-btn svg,
#capture-btn svg,
#bookmark-add-btn svg,
#bookmark-list-btn svg,
#reset-filters-btn svg,
#float-ui-toggle svg,
#more-actions-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}

#report-back-btn:active,
#report-share-btn:active,
#export-data-btn:active,
#data-agent-btn:active,
#capture-btn:active,
#bookmark-add-btn:active,
#bookmark-list-btn:active,
#reset-filters-btn:active,
#float-ui-toggle:active,
#more-actions-btn:active {
    transform: scale(0.95);
    opacity: 1;
}

#report-back-btn:hover,
#report-share-btn:hover,
#export-data-btn:hover,
#data-agent-btn:hover,
#capture-btn:hover,
#bookmark-add-btn:hover,
#bookmark-list-btn:hover,
#reset-filters-btn:hover,
#float-ui-toggle:hover,
#more-actions-btn:hover {
    opacity: 1;
}

/* 悬浮按钮名称提示：PC 悬停 / 移动端长按浮现 */
.float-tip {
    position: fixed;
    z-index: 500;
    display: none;
    max-width: min(280px, calc(100vw - 24px));
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(4, 20, 94, 0.92);
    box-shadow: 0 8px 24px rgba(0, 0, 40, 0.35);
    color: #ffffff;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, 4px) scale(0.985);
    transition:
        opacity 190ms ease,
        transform 190ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 190ms;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.float-tip.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    transition-delay: 0s;
}

.float-tip.is-leaving {
    visibility: visible;
    opacity: 0;
    transform: translate(-50%, -2px) scale(0.985);
}

/* 导出数据视觉对象选择浮层 */
.export-sheet-mask {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 40, 0.45);
    animation: exportMaskFade 0.22s ease both;
}

.export-sheet {
    width: min(420px, 100%);
    max-height: 72vh;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(0, 0, 40, 0.3);
    overflow: hidden;
    animation: exportSheetIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.export-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(0, 0, 40, 0.08);
    color: #04145E;
    font-size: 15px;
    font-weight: 700;
}

.export-sheet-hint {
    padding: 8px 18px 0;
    color: rgba(0, 0, 40, 0.45);
    font-size: 12px;
}

.export-sheet-close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(236, 236, 240, 0.8);
    color: rgba(0, 0, 40, 0.55);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.export-sheet-body {
    padding: 8px;
    overflow-y: auto;
}

/* 报表书签浮窗（复用 export-sheet 结构） */
.bookmark-sheet-body {
    padding: 8px;
    overflow-y: auto;
}

.bookmark-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 40, 0.08);
    border-radius: 12px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: background 0.2s ease;
}

.bookmark-item:hover {
    background: rgba(60, 200, 190, 0.1);
}

.bookmark-item-main {
    flex: 1;
    min-width: 0;
}

.bookmark-item-name {
    font-size: 14px;
    font-weight: 600;
    color: #04145E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bookmark-item-meta {
    margin-top: 3px;
    font-size: 11px;
    color: rgba(0, 0, 40, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bookmark-item.shared-bookmark {
    border-color: rgba(32, 168, 165, .35);
    background: linear-gradient(110deg, rgba(60, 200, 190, .16), rgba(255, 255, 255, .82));
    box-shadow: inset 3px 0 0 #3CC8BE;
}
.bookmark-item.shared-bookmark .bookmark-item-name { display:flex; align-items:center; gap:7px; }
.bookmark-item-badge { display:inline-flex; align-items:center; padding:2px 6px; border-radius:999px; background:#d9f7f3; color:#087b75; font-size:10px; font-weight:700; }
.bookmark-item-share-expiry { color:#087b75; font-weight:600; }
.bookmark-item-shared-lock { flex:0 0 auto; font-size:11px; color:#087b75; opacity:.75; }

.bookmark-item-ops {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
}

.bookmark-item-ops .bookmark-op {
    min-height: 28px;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 40, 0.12);
    background: rgba(255, 255, 255, 0.8);
    color: rgba(0, 0, 40, 0.6);
    cursor: pointer;
}

.bookmark-item-ops .bookmark-op:hover {
    border-color: #3CC8BE;
    color: #04145E;
}

.export-sheet-loading,
.export-sheet-empty {
    padding: 26px 12px;
    text-align: center;
    color: rgba(0, 0, 40, 0.45);
    font-size: 13px;
}

/* 书签/收藏轻提示 */
#float-toast {
    position: fixed;
    left: 50%;
    bottom: calc(28px + env(safe-area-inset-bottom));
    transform: translate(-50%, 12px);
    z-index: 700;
    max-width: 82vw;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(4, 20, 94, 0.92);
    color: #fff;
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

#float-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.export-sheet-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #000028;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* 长按定位时屏蔽 iOS/Android 文本选择菜单与触摸呼出（复制/更多选项） */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    transition: background 0.15s ease;
}

.export-sheet-item-name,
.export-sheet-item-type {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.export-sheet-item:hover {
    background: rgba(60, 200, 190, 0.08);
}

.export-sheet-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
}

.export-sheet-item-type {
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(4, 20, 94, 0.06);
    color: rgba(0, 0, 40, 0.55);
    font-size: 11px;
}

/* 列表项导出状态：正在导出 / 导出成功 / 导出失败 */
.export-sheet-item-status {
    flex: 0 0 auto;
    min-width: 56px;
    text-align: right;
    font-size: 11px;
    color: rgba(0, 0, 40, 0.45);
    white-space: nowrap;
}

.export-sheet-item-status.exporting {
    color: #3CC8BE;
}

.export-sheet-item-status.ok {
    color: #0a9e63;
    font-weight: 700;
}

.export-sheet-item-status.err {
    color: #b02a37;
    font-weight: 700;
}

.export-sheet-item.exporting {
    cursor: progress;
    opacity: 0.75;
}

.export-sheet-empty {
    padding: 26px 16px;
    color: rgba(0, 0, 40, 0.45);
    font-size: 13px;
    text-align: center;
}

/* 共享链接专用提示 */
.export-sheet-notice .export-sheet-body {
    padding: 26px 22px 30px;
    text-align: center;
}

.export-notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(60, 200, 190, 0.16), rgba(4, 20, 94, 0.1));
    color: #3CC8BE;
    font-size: 26px;
}

.export-notice-title {
    color: #04145E;
    font-size: 16px;
    font-weight: 700;
}

.export-notice-text {
    margin-top: 10px;
    color: rgba(0, 0, 40, 0.6);
    font-size: 13px;
    line-height: 1.7;
}

/* 导出预览面板：同一浮窗内以表格形式预览将导出的数据 */
.export-sheet-item.active {
    background: rgba(60, 200, 190, 0.14);
    box-shadow: inset 3px 0 0 #3CC8BE;
}

.export-preview {
    margin-top: 10px;
    border-top: 1px dashed rgba(0, 0, 40, 0.12);
    padding-top: 8px;
    max-height: 72vh;
    overflow: hidden;
    /* 收起过渡：淡出 + 高度折叠 */
    transition: opacity 0.18s ease, max-height 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        padding-top 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.export-preview.collapsing {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    margin-top: 0;
    border-top-width: 0;
}

.export-preview-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px 8px;
}

.export-preview-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #04145E;
    font-size: 13px;
    font-weight: 700;
}

.export-preview-meta {
    flex: 0 0 auto;
    color: rgba(0, 0, 40, 0.45);
    font-size: 11px;
}

.export-preview-refresh,
.export-preview-close {
    flex: 0 0 auto;
    padding: 3px 10px;
    border: 1px solid rgba(0, 0, 40, 0.12);
    border-radius: 999px;
    background: transparent;
    color: rgba(0, 0, 40, 0.55);
    font-size: 11px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.export-preview-refresh:hover,
.export-preview-close:hover {
    background: rgba(60, 200, 190, 0.1);
    color: #0e8f87;
}

.export-preview-scroll {
    max-height: 42vh;
    overflow: auto;
    border: 1px solid rgba(0, 0, 40, 0.08);
    border-radius: 10px;
    background: #fcfcfe;
    -webkit-overflow-scrolling: touch;
}

.export-preview-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
}

.export-preview-table th,
.export-preview-table td {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(0, 0, 40, 0.06);
    text-align: left;
    white-space: nowrap;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.export-preview-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(236, 236, 240, 0.92);
    color: rgba(0, 0, 40, 0.7);
    font-weight: 600;
}

.export-preview-table tbody tr:nth-child(even) {
    background: rgba(236, 236, 240, 0.25);
}

.export-preview-loading,
.export-preview-error,
.export-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 90px;
    padding: 18px;
    color: rgba(0, 0, 40, 0.5);
    font-size: 13px;
    text-align: center;
}

.export-preview-error {
    color: #c0392b;
}

.export-preview-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(60, 200, 190, 0.25);
    border-top-color: #3CC8BE;
    border-radius: 50%;
    animation: exportPreviewSpin 0.7s linear infinite;
}

@keyframes exportPreviewSpin {
    to {
        transform: rotate(360deg);
    }
}

/* 导出结果轻提示 */
.export-toast {
    position: fixed;
    left: 50%;
    bottom: calc(28px + env(safe-area-inset-bottom));
    z-index: 700;
    transform: translateX(-50%) translateY(8px);
    max-width: 86vw;
    padding: 11px 18px;
    border-radius: 999px;
    background: rgba(0, 0, 40, 0.86);
    color: #ffffff;
    font-size: 13px;
    text-align: center;
    box-shadow: 0 10px 26px rgba(0, 0, 40, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.export-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.export-toast.err {
    background: rgba(176, 42, 55, 0.92);
}

@keyframes exportMaskFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes exportSheetIn {
    from {
        transform: translateY(16px) scale(0.96);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* 手机端左下角页面切换卡片（移动布局下 Power BI 不支持内置页面导航栏）
   明亮科技风：青绿主色 + 深蓝强调 */
#page-switcher {
    position: fixed;
    left: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 300;
    font-family: inherit;
}

/* 收起态：毛玻璃胶囊 */
#page-switcher .ps-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 82vw;
    padding: 9px 10px 9px 15px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(1.8);
    backdrop-filter: blur(18px) saturate(1.8);
    box-shadow: 0 8px 24px rgba(4, 20, 94, 0.14),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.7);
    color: var(--ink);
    font-size: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.25s ease;
}

#page-switcher .ps-trigger:active {
    transform: scale(0.96);
}

#page-switcher .ps-current {
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 提示标签：青绿→深蓝渐变胶囊 */
#page-switcher .ps-hint {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 6px 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--teal), var(--navy));
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(60, 200, 190, 0.4);
}

#page-switcher .ps-chevron {
    display: inline-block;
    font-style: normal;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

#page-switcher.open .ps-chevron {
    transform: rotate(180deg);
}

/* 展开面板：迷你底部弹层 */
#page-switcher .ps-panel {
    position: absolute;
    left: 0;
    bottom: calc(100% + 12px);
    width: 272px;
    max-height: 52vh;
    overflow-y: auto;
    padding: 10px 8px 8px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    backdrop-filter: blur(24px) saturate(1.8);
    box-shadow: 0 20px 50px rgba(4, 20, 94, 0.18),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.8);
    opacity: 0;
    transform: translateY(16px) scale(0.92);
    transform-origin: bottom left;
    pointer-events: none;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-overflow-scrolling: touch;
}

#page-switcher.open .ps-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* 开合动画/切页窗口内暂停毛玻璃实时合成（动画结束/切换完成后恢复原外观） */
#page-switcher.ps-busy .ps-trigger,
#page-switcher.ps-busy .ps-panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: none;
}

/* 弹层顶部抓手与标题 */
#page-switcher .ps-grip {
    width: 36px;
    height: 4px;
    margin: 2px auto 8px;
    border-radius: 2px;
    background: rgba(0, 0, 40, 0.14);
}

#page-switcher .ps-title {
    padding: 2px 12px 8px;
    color: var(--text-2);
    font-size: 12px;
    letter-spacing: 0.5px;
}

#page-switcher .ps-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--ink);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s ease;
}

#page-switcher .ps-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cfd8dc;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

#page-switcher .ps-item.active {
    background: linear-gradient(135deg, #e6faf8, #f1fbfa);
    color: var(--navy);
    font-weight: 600;
}

#page-switcher .ps-item.active .ps-dot {
    background: var(--teal);
    box-shadow: 0 0 0 3px rgba(60, 200, 190, 0.25);
}

/* 面板展开时页面标签的悬停响应（PC 鼠标经过） */
#page-switcher .ps-item:hover {
    background: rgba(0, 0, 40, 0.05);
}

#page-switcher .ps-item:hover .ps-dot {
    background: var(--teal);
}

#page-switcher .ps-item.active:hover {
    background: linear-gradient(135deg, #d9f7f4, #eafaf8);
}

#page-switcher .ps-item:active {
    background: rgba(0, 0, 40, 0.06);
}

/* 页面切换器深色自适应（报表/主题为深色时，data-tone="dark"） */
#page-switcher[data-tone="dark"] .ps-trigger {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(13, 18, 40, 0.78);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
    color: #ECECF0;
}

#page-switcher[data-tone="dark"] .ps-panel {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(13, 18, 40, 0.9);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
}

#page-switcher[data-tone="dark"] .ps-grip {
    background: rgba(236, 236, 240, 0.22);
}

#page-switcher[data-tone="dark"] .ps-title {
    color: rgba(236, 236, 240, 0.6);
}

#page-switcher[data-tone="dark"] .ps-item {
    color: #ECECF0;
}

#page-switcher[data-tone="dark"] .ps-item.active {
    background: linear-gradient(135deg, rgba(60, 200, 190, 0.22), rgba(4, 20, 94, 0.45));
    color: #9BE6E0;
}

#page-switcher[data-tone="dark"] .ps-item.active .ps-dot {
    background: var(--teal);
    box-shadow: 0 0 0 3px rgba(60, 200, 190, 0.28);
}

#page-switcher[data-tone="dark"] .ps-item:hover {
    background: rgba(255, 255, 255, 0.07);
}

#page-switcher[data-tone="dark"] .ps-item:hover .ps-dot {
    background: var(--teal);
}

#page-switcher[data-tone="dark"] .ps-item.active:hover {
    background: linear-gradient(135deg, rgba(60, 200, 190, 0.28), rgba(4, 20, 94, 0.52));
}

#page-switcher[data-tone="dark"] .ps-item:active {
    background: rgba(255, 255, 255, 0.08);
}

#page-switcher[data-tone="dark"] .ps-dot {
    background: rgba(236, 236, 240, 0.25);
}

/* 减少动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
    #page-switcher .ps-panel,
    #page-switcher .ps-chevron,
    #page-switcher .ps-trigger,
    #loading,
    .ps-loading-card,
    .ps-ring-wrap,
    .ps-loading-bar i::after,
    .ps-text-swap {
        transition: none;
        animation: none;
    }
}

/* Fabric Data Agent 实验性悬浮对话框 */
.data-agent-sheet-mask {
    position: fixed;
    inset: 0;
    z-index: 650;
    pointer-events: none;
}

.data-agent-sheet {
    position: absolute;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: min(430px, calc(100vw - 36px));
    max-height: min(72vh, 640px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    border: 1px solid rgba(4, 20, 94, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 70px rgba(0, 0, 40, 0.28);
    animation: dataAgentIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.data-agent-sheet-mask.closing .data-agent-sheet {
    animation: dataAgentOut 0.16s ease both;
}

.data-agent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 16px 13px;
    border-bottom: 1px solid rgba(4, 20, 94, 0.08);
    background: linear-gradient(135deg, rgba(4, 20, 94, 0.04), rgba(60, 200, 190, 0.08));
}

.data-agent-header h2 {
    margin: 0;
    color: #04145E;
    font-size: 16px;
    line-height: 1.3;
}

.data-agent-subtitle {
    display: block;
    margin-top: 3px;
    color: rgba(0, 0, 40, 0.48);
    font-size: 11px;
}

.data-agent-close {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(236, 236, 240, 0.8);
    color: rgba(0, 0, 40, 0.55);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.data-agent-messages {
    min-height: 150px;
    max-height: 52vh;
    padding: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.data-agent-empty {
    padding: 22px 10px;
    color: rgba(0, 0, 40, 0.5);
    font-size: 12px;
    line-height: 1.65;
    text-align: center;
}

.data-agent-message {
    max-width: 88%;
    margin: 0 0 10px;
    padding: 9px 11px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.data-agent-message.user {
    margin-left: auto;
    background: #04145E;
    color: #fff;
}

.data-agent-message.assistant {
    margin-right: auto;
    background: rgba(60, 200, 190, 0.12);
    color: #04145E;
}

.data-agent-message.assistant.pending {
    color: rgba(0, 0, 40, 0.48);
}

.data-agent-message.assistant.error {
    background: rgba(200, 60, 81, 0.1);
    color: #9b2639;
}

.data-agent-input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 11px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(4, 20, 94, 0.08);
}

.data-agent-input {
    box-sizing: border-box;
    min-height: 42px;
    flex: 1;
    resize: none;
    padding: 10px 11px;
    border: 1px solid rgba(4, 20, 94, 0.16);
    border-radius: 11px;
    outline: 0;
    background: #fff;
    color: #000028;
    font: inherit;
    font-size: 13px;
}

.data-agent-input:focus {
    border-color: #3CC8BE;
    box-shadow: 0 0 0 3px rgba(60, 200, 190, 0.14);
}

.data-agent-send {
    min-width: 62px;
    min-height: 42px;
    padding: 8px 12px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, #04145E, #3CC8BE);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.data-agent-send:disabled {
    opacity: 0.6;
    cursor: wait;
}

@keyframes dataAgentIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dataAgentOut {
    to { opacity: 0; transform: translateY(8px) scale(0.985); }
}

html[data-theme="dark"] .data-agent-sheet {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(17, 22, 43, 0.98);
}
html[data-theme="dark"] #data-agent-btn { background: linear-gradient(145deg, rgba(17,44,58,.96), rgba(10,91,91,.94)); color: #8ef0df; border-color: rgba(142,240,223,.42); }

html[data-theme="dark"] .data-agent-header {
    border-color: rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(60, 200, 190, 0.08));
}

html[data-theme="dark"] .data-agent-header h2,
html[data-theme="dark"] .data-agent-message.assistant {
    color: #ECECF0;
}

html[data-theme="dark"] .data-agent-subtitle,
html[data-theme="dark"] .data-agent-empty,
html[data-theme="dark"] .data-agent-message.assistant.pending {
    color: rgba(236, 236, 240, 0.58);
}

html[data-theme="dark"] .data-agent-input-row {
    border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .data-agent-input {
    border-color: rgba(255, 255, 255, 0.15);
    background: #0F142A;
    color: #ECECF0;
}

@media (max-width: 520px) {
    .data-agent-sheet {
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 78vh;
        border-radius: 18px 18px 0 0;
    }
}

/* ---- 报表页统一输入/确认弹窗 ---- */
.report-dialog-mask {
    position: fixed;
    inset: 0;
    z-index: 660;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 40, 0.48);
    backdrop-filter: blur(5px);
    animation: exportMaskFade 0.2s ease both;
}

.report-dialog-mask.closing {
    animation: exportMaskOut 0.2s ease both;
}

.report-dialog-mask.closing .report-dialog {
    animation: reportDialogOut 0.2s ease both;
}

.report-dialog {
    position: relative;
    width: min(400px, 100%);
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 40, 0.34);
    animation: reportDialogIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.report-dialog-x {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(236, 236, 240, 0.8);
    color: rgba(0, 0, 40, 0.52);
    font-size: 18px;
    cursor: pointer;
}

.report-dialog-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: rgba(60, 200, 190, 0.14);
    color: #0E8F87;
    font-size: 18px;
    font-weight: 800;
}

.report-dialog-mark.danger {
    background: rgba(200, 60, 81, 0.12);
    color: #B02A37;
}

.report-dialog h2 {
    margin: 0;
    padding-right: 28px;
    color: #04145E;
    font-size: 19px;
    line-height: 1.35;
}

.report-dialog-message {
    margin: 8px 0 18px;
    color: rgba(0, 0, 40, 0.58);
    font-size: 13px;
    line-height: 1.65;
}

.report-dialog-label {
    display: block;
    margin-bottom: 7px;
    color: rgba(0, 0, 40, 0.7);
    font-size: 12px;
    font-weight: 700;
}

.report-dialog-input {
    box-sizing: border-box;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid rgba(4, 20, 94, 0.16);
    border-radius: 11px;
    outline: 0;
    background: #fff;
    color: #000028;
    font: inherit;
    font-size: 14px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.report-dialog-input:focus {
    border-color: #3CC8BE;
    box-shadow: 0 0 0 3px rgba(60, 200, 190, 0.14);
}

.report-dialog-input.invalid {
    border-color: #C83C51;
    box-shadow: 0 0 0 3px rgba(200, 60, 81, 0.1);
}

.report-dialog-error {
    min-height: 18px;
    margin-top: 5px;
    color: #B02A37;
    font-size: 11px;
}

.report-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

.report-dialog-cancel,
.report-dialog-confirm {
    min-width: 94px;
    min-height: 42px;
    padding: 9px 16px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

.report-dialog-cancel {
    border: 1px solid rgba(4, 20, 94, 0.14);
    background: #fff;
    color: #04145E;
}

.report-dialog-confirm {
    border: 0;
    background: linear-gradient(135deg, #04145E, #3CC8BE);
    box-shadow: 0 7px 18px rgba(4, 20, 94, 0.18);
    color: #fff;
}

.report-dialog-confirm.danger {
    background: linear-gradient(135deg, #8F1F34, #D85A6B);
}

@keyframes reportDialogIn {
    from { opacity: 0; transform: translateY(12px) scale(0.975); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes reportDialogOut {
    to { opacity: 0; transform: translateY(8px) scale(0.98); }
}

@media (max-width: 520px) {
    .report-dialog-mask {
        align-items: flex-end;
        padding: 0;
    }

    .report-dialog {
        width: 100%;
        padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
        border-radius: 20px 20px 0 0;
    }

    .report-dialog-actions {
        display: grid;
        grid-template-columns: 1fr 1.25fr;
    }
}

html[data-theme="dark"] .report-dialog {
    border-color: rgba(255, 255, 255, 0.1);
    background: #11162B;
}

html[data-theme="dark"] .report-dialog h2,
html[data-theme="dark"] .report-dialog-label {
    color: #ECECF0;
}

html[data-theme="dark"] .report-dialog-message {
    color: rgba(236, 236, 240, 0.65);
}

html[data-theme="dark"] .report-dialog-input,
html[data-theme="dark"] .report-dialog-cancel {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #ECECF0;
}

/* ---- 飞书访问门禁 ---- */
.fs-gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(900px 460px at 88% -12%, rgba(60, 200, 190, 0.20), transparent 60%),
        radial-gradient(760px 420px at -12% 112%, rgba(245, 220, 190, 0.40), transparent 60%),
        linear-gradient(160deg, #ffffff 0%, #ECECF0 100%);
}

.fs-gate::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 40, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 40, 0.04) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(circle at 50% 42%, rgba(0, 0, 0, 0.85), transparent 72%);
    mask-image: radial-gradient(circle at 50% 42%, rgba(0, 0, 0, 0.85), transparent 72%);
    pointer-events: none;
}

.fs-gate-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 42px 32px 30px;
    text-align: center;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 40, 0.06);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 40, 0.12), 0 4px 16px rgba(4, 20, 94, 0.06);
    animation: fs-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fs-gate-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 22px;
    border-radius: 22px;
    color: #3CC8BE;
    background: linear-gradient(135deg, #04145E, #0b2a8f);
    box-shadow: 0 14px 30px rgba(4, 20, 94, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

.fs-gate-icon svg {
    width: 38px;
    height: 38px;
}

.fs-gate-title {
    margin: 0 0 12px;
    color: #000028;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.fs-gate-desc {
    margin: 0 0 24px;
    color: rgba(0, 0, 40, 0.72);
    font-size: 14px;
    line-height: 1.75;
}

.fs-gate-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 13px;
    text-align: left;
    color: rgba(0, 0, 40, 0.58);
    font-size: 12px;
    line-height: 1.55;
    background: #ECECF0;
    border-radius: 12px;
}

.fs-gate-hint svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: #3CC8BE;
}

@keyframes fs-fade-up {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fs-gate-card {
        animation: none;
    }
}

/* ---- 飞书免登门禁（2026-08-22） ---- */
.fs-gate-spinner {
    display: none;
    width: 34px;
    height: 34px;
    margin: 4px auto 18px;
    border-radius: 50%;
    border: 3px solid rgba(60, 200, 190, 0.22);
    border-top-color: #3CC8BE;
    animation: fs-spin 0.85s linear infinite;
}

.fs-gate-btn {
    display: none;
    margin: 4px auto 18px;
    padding: 10px 28px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    background: linear-gradient(135deg, #04145E, #0b2a8f);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(4, 20, 94, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fs-gate-btn:active {
    transform: scale(0.97);
    box-shadow: 0 6px 14px rgba(4, 20, 94, 0.22);
}

.fs-gate-icon.fs-error {
    color: #F5DCBE;
    background: linear-gradient(135deg, #04145E, #0b2a8f);
}

@keyframes fs-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fs-gate-spinner {
        animation: none;
    }

    .dir-footer .df-line {
        animation: none;
    }
}

/* ============================================================
   深色模式（2026-08-22）：html[data-theme="dark"]
   主题色延续：深蓝 #04145E / 青绿 #3CC8BE / 米色 #F5DCBE
   ============================================================ */
html[data-theme="dark"] {
    --ink: #ECECF0;
    --navy: #3CC8BE;
    --mist: #060A1F;
    --sand: #F5DCBE;
    --teal: #3CC8BE;
    --teal-soft: rgba(60, 200, 190, 0.16);
    --text-2: rgba(236, 236, 240, 0.62);
    --text-3: rgba(236, 236, 240, 0.38);
    --line: rgba(236, 236, 240, 0.10);
    color-scheme: dark;
}

/* 目录页 */
html[data-theme="dark"] #directory-view {
    background:
        radial-gradient(900px 480px at 88% -12%, rgba(60, 200, 190, 0.12), transparent 60%),
        radial-gradient(760px 420px at -12% 112%, rgba(245, 220, 190, 0.08), transparent 60%),
        linear-gradient(160deg, #070B22 0%, #0A1230 48%, #071019 100%);
}

html[data-theme="dark"] .dir-greeting {
    color: var(--text-2);
}

html[data-theme="dark"] .dir-title {
    background: linear-gradient(90deg, #3CC8BE, #8FE3DC);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

html[data-theme="dark"] .dir-subtitle {
    color: var(--text-2);
}

html[data-theme="dark"] .dir-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.055);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    color: var(--ink);
}

html[data-theme="dark"] .dir-card:hover {
    border-color: rgba(60, 200, 190, 0.45);
    background: rgba(60, 200, 190, 0.10);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .dir-card-icon {
    background: rgba(60, 200, 190, 0.14);
    color: var(--teal);
    box-shadow: inset 0 0 0 1px rgba(60, 200, 190, 0.20);
}

html[data-theme="dark"] .dir-card-name {
    color: var(--ink);
}

html[data-theme="dark"] .dir-card-chevron {
    color: var(--text-3);
}

html[data-theme="dark"] .dir-workspace-bar {
    color: var(--teal);
}

html[data-theme="dark"] .dir-sticky {
    background:
        radial-gradient(900px 480px at 88% -12%, rgba(60, 200, 190, 0.12), transparent 60%),
        radial-gradient(760px 420px at -12% 112%, rgba(245, 220, 190, 0.08), transparent 60%),
        linear-gradient(160deg, #070B22 0%, #0A1230 48%, #071019 100%);
}

html[data-theme="dark"] .dir-empty {
    color: var(--text-2);
    border: 1px dashed var(--line);
    background: rgba(255, 255, 255, 0.03);
}

/* 主题切换按钮 */
html[data-theme="dark"] .theme-toggle {
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30);
}

html[data-theme="dark"] .theme-toggle .theme-icon-sun {
    display: none;
}

html[data-theme="dark"] .theme-toggle .theme-icon-moon {
    display: block;
}

/* 报表页悬浮按钮组：深色模式统一 */
html[data-theme="dark"] #report-back-btn,
html[data-theme="dark"] #report-share-btn,
html[data-theme="dark"] #export-data-btn,
html[data-theme="dark"] #capture-btn,
html[data-theme="dark"] #bookmark-add-btn,
html[data-theme="dark"] #bookmark-list-btn,
html[data-theme="dark"] #reset-filters-btn,
html[data-theme="dark"] #float-ui-toggle,
html[data-theme="dark"] #more-actions-btn {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(10, 15, 35, 0.85);
    color: var(--ink);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}


html[data-theme="dark"] .export-sheet {
    background: #10172F;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .export-sheet-head {
    border-bottom-color: rgba(236, 236, 240, 0.1);
    color: var(--ink);
}

html[data-theme="dark"] .export-sheet-hint {
    color: var(--text-3);
}

html[data-theme="dark"] .export-sheet-close {
    background: rgba(236, 236, 240, 0.12);
    color: var(--text-2);
}

html[data-theme="dark"] .bookmark-item {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(236, 236, 240, 0.1);
}

html[data-theme="dark"] .bookmark-item-name {
    color: var(--ink);
}

html[data-theme="dark"] .bookmark-item-meta {
    color: var(--text-3);
}

html[data-theme="dark"] .bookmark-item-ops .bookmark-op {
    background: rgba(236, 236, 240, 0.1);
    border-color: rgba(236, 236, 240, 0.12);
    color: rgba(236, 236, 240, 0.7);
}

/* Report-level public/enterprise share sheet */
.report-share-mask { position: fixed; inset: 0; z-index: 680; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(4,20,94,.28); backdrop-filter: blur(8px); }
.report-share-sheet { width: min(560px, 100%); max-height: min(86vh, 760px); overflow: auto; border: 1px solid rgba(4,20,94,.12); border-radius: 20px; background: var(--surface, #fff); box-shadow: 0 24px 70px rgba(0,0,40,.28); color: var(--ink, #10204a); }
.report-share-sheet > header { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid rgba(4,20,94,.1); background:linear-gradient(135deg,rgba(4,20,94,.04),rgba(60,200,190,.08)); }
.report-share-sheet h2,.report-share-sheet h3 { margin:0; color:#04145E; }
.report-share-sheet header p { margin:4px 0 0; font-size:12px; opacity:.62; }
.report-share-close { border:0; background:transparent; font-size:26px; cursor:pointer; color:inherit; }
.report-share-form,.report-share-mine { padding:16px 20px; display:grid; gap:12px; }
.report-share-form label { display:grid; gap:6px; font-size:13px; font-weight:600; }
.report-share-kind-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.report-share-kind-option { display:flex; align-items:flex-start; gap:8px; min-height:42px; padding:10px 11px; border:1px solid rgba(4,20,94,.14); border-radius:10px; background:rgba(255,255,255,.72); cursor:pointer; font-size:12px; font-weight:500; line-height:1.4; }
.report-share-kind-option:has(input:checked) { border-color:#3CC8BE; background:rgba(60,200,190,.12); box-shadow:0 0 0 2px rgba(60,200,190,.12); }
.report-share-kind-option input { width:auto; margin-top:2px; accent-color:#087b75; }
.report-share-form input,.report-share-form select,.report-share-card input { box-sizing:border-box; width:100%; padding:10px 11px; border:1px solid rgba(4,20,94,.16); border-radius:10px; background:rgba(255,255,255,.8); color:inherit; }
.report-share-groups { display:grid; gap:8px; padding:10px; border:1px solid rgba(4,20,94,.1); border-radius:12px; background:rgba(60,200,190,.05); }
.report-share-groups > div { display:flex; flex-wrap:wrap; gap:8px 14px; font-size:12px; font-weight:400; }
.report-share-note { margin:0; font-size:12px; line-height:1.55; opacity:.68; }
.report-share-card { display:grid; gap:8px; margin:0 20px 12px; padding:16px; border:1px solid rgba(60,200,190,.28); border-radius:16px; background:linear-gradient(145deg,rgba(245,252,255,.96),rgba(230,250,247,.92)); }
.report-share-card strong { font-size:18px; color:#04145E; }
.report-share-card span { font-size:12px; opacity:.7; }
.report-share-qr { justify-self:center; background:#fff; border-radius:10px; padding:8px; }
.report-share-preview-mask { position:fixed; inset:0; z-index:760; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(4,20,94,.34); backdrop-filter:blur(10px); }
.report-share-preview-sheet { width:min(460px,100%); max-height:90vh; overflow:auto; border:1px solid rgba(4,20,94,.14); border-radius:20px; background:var(--surface,#fff); color:var(--ink,#10204a); box-shadow:0 26px 80px rgba(0,0,40,.32); }
.report-share-preview-sheet > header { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid rgba(4,20,94,.1); background:linear-gradient(135deg,rgba(4,20,94,.04),rgba(60,200,190,.08)); }
.report-share-preview-sheet h2 { margin:0; color:#04145E; font-size:20px; }
.report-share-preview-sheet header p { margin:4px 0 0; font-size:12px; opacity:.62; }
.report-share-preview-close { border:0; background:transparent; font-size:26px; color:inherit; cursor:pointer; }
.report-share-preview-sheet .report-share-card { margin:18px 20px 14px; text-align:center; align-items:center; }
.report-share-card-line { width:100%; height:3px; border-radius:4px; background:linear-gradient(90deg,transparent,#3CC8BE,#04145E,#F5DCBE,#3CC8BE,transparent); }
.report-share-preview-qr { display:flex; justify-content:center; align-items:center; margin:8px auto 2px; padding:10px; border-radius:14px; background:#fff; box-shadow:0 6px 16px rgba(4,20,94,.08); }
.report-share-preview-qr canvas { display:block; width:240px; height:240px; max-width:100%; }
.report-share-preview-powered { margin-top:5px; font-size:12px; font-weight:600; color:#04145E; opacity:.72; }
.report-share-preview-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0 20px 20px; }
.report-share-preview-actions button { min-height:40px; border:0; border-radius:10px; background:#04145E; color:#fff; font-size:13px; cursor:pointer; }
.report-share-preview-actions button:nth-child(2) { background:#1664C0; }
.report-share-preview-actions button:nth-child(3),.report-share-preview-actions button:nth-child(4) { background:rgba(4,20,94,.08); color:#04145E; }
.report-share-result-hint { margin:0 20px 12px; font-size:12px; opacity:.7; }
.report-share-copy,.report-share-item button { justify-self:start; padding:7px 12px; border:0; border-radius:8px; background:#04145E; color:#fff; cursor:pointer; }
.report-share-item { display:flex; align-items:center; gap:8px; padding:9px 10px; border:1px solid rgba(4,20,94,.1); border-radius:10px; font-size:12px; }
.report-share-item-main { flex:1; min-width:0; cursor:pointer; }
.report-share-item-main strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#04145E; }
.report-share-item-main small { display:block; margin-top:3px; opacity:.62; }
.report-share-item small { flex:1; opacity:.6; }
.report-share-expiry-mask { position:fixed; inset:0; z-index:820; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(4,20,94,.3); backdrop-filter:blur(8px); }
.report-share-expiry-dialog { width:min(390px,100%); padding:20px; border-radius:18px; background:var(--surface,#fff); box-shadow:0 22px 60px rgba(0,0,40,.28); }
.report-share-expiry-dialog h3 { margin:0 0 5px; color:#04145E; }
.report-share-expiry-dialog p { margin:0 0 15px; font-size:12px; opacity:.64; }
.report-share-expiry-dialog label { display:grid; gap:6px; margin-bottom:11px; font-size:13px; font-weight:600; }
.report-share-expiry-dialog input[type=number] { box-sizing:border-box; width:100%; padding:10px; border:1px solid rgba(4,20,94,.16); border-radius:10px; background:rgba(255,255,255,.8); color:inherit; }
.report-share-expiry-dialog .permanent-row { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:500; }
.report-share-expiry-dialog .actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.report-share-error { margin:0 20px 12px; color:#b42318; font-size:12px; }
html[data-theme="dark"] .report-share-sheet { background:#10172F; color:#ECECF0; }
html[data-theme="dark"] .report-share-sheet h2,html[data-theme="dark"] .report-share-sheet h3,html[data-theme="dark"] .report-share-card strong { color:#9BE6E0; }
html[data-theme="dark"] .report-share-form input,html[data-theme="dark"] .report-share-form select,html[data-theme="dark"] .report-share-card input { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#ECECF0; }
html[data-theme="dark"] .report-share-preview-sheet { background:#10172F; color:#ECECF0; }
html[data-theme="dark"] .report-share-preview-sheet h2,html[data-theme="dark"] .report-share-preview-powered { color:#9BE6E0; }
html[data-theme="dark"] .report-share-preview-actions button:nth-child(3),html[data-theme="dark"] .report-share-preview-actions button:nth-child(4) { background:rgba(255,255,255,.1); color:#ECECF0; }
html[data-theme="dark"] .bookmark-item.shared-bookmark { background:linear-gradient(110deg,rgba(60,200,190,.2),rgba(255,255,255,.04)); border-color:rgba(60,200,190,.35); }
html[data-theme="dark"] .bookmark-item-badge { background:rgba(60,200,190,.2); color:#9BE6E0; }
html[data-theme="dark"] .bookmark-item-share-expiry,html[data-theme="dark"] .bookmark-item-shared-lock { color:#9BE6E0; }
html[data-theme="dark"] .report-share-kind-option { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
html[data-theme="dark"] .report-share-kind-option:has(input:checked) { background:rgba(60,200,190,.16); }
html[data-theme="dark"] .report-share-expiry-dialog { background:#10172F; }
html[data-theme="dark"] .report-share-expiry-dialog h3 { color:#9BE6E0; }
html[data-theme="dark"] .report-share-expiry-dialog input[type=number] { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#ECECF0; }

html[data-theme="dark"] .export-sheet-loading,
html[data-theme="dark"] .export-sheet-empty {
    color: var(--text-3);
}

html[data-theme="dark"] .export-sheet-item {
    color: var(--ink);
}

html[data-theme="dark"] .export-sheet-item:hover {
    background: rgba(60, 200, 190, 0.12);
}

html[data-theme="dark"] .export-sheet-item-type {
    background: rgba(236, 236, 240, 0.1);
    color: var(--text-2);
}

html[data-theme="dark"] .export-sheet-item-status {
    color: var(--text-3);
}

html[data-theme="dark"] .export-sheet-item-status.exporting {
    color: #5fd8cf;
}

html[data-theme="dark"] .export-sheet-item-status.ok {
    color: #3ddc97;
}

html[data-theme="dark"] .export-sheet-item-status.err {
    color: #ff7b88;
}

html[data-theme="dark"] .export-sheet-empty {
    color: var(--text-3);
}

html[data-theme="dark"] .export-notice-icon {
    background: rgba(60, 200, 190, 0.14);
}

html[data-theme="dark"] .export-notice-title {
    color: var(--ink);
}

html[data-theme="dark"] .export-notice-text {
    color: var(--text-2);
}

/* 深色模式导出预览面板：补齐可读性（此前刷新/收起文字融入背景） */
html[data-theme="dark"] .export-preview {
    border-top-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .export-preview-title {
    color: #ECECF0;
}

html[data-theme="dark"] .export-preview-meta {
    color: rgba(236, 236, 240, 0.55);
}

html[data-theme="dark"] .export-preview-refresh,
html[data-theme="dark"] .export-preview-close {
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.07);
    color: rgba(236, 236, 240, 0.9);
}

html[data-theme="dark"] .export-preview-refresh:hover,
html[data-theme="dark"] .export-preview-close:hover {
    background: rgba(60, 200, 190, 0.2);
    border-color: rgba(60, 200, 190, 0.5);
    color: #8FE8E0;
}

html[data-theme="dark"] .export-preview-scroll {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .export-preview-table th {
    background: rgba(16, 22, 48, 0.95);
    color: rgba(236, 236, 240, 0.75);
}

html[data-theme="dark"] .export-preview-table th,
html[data-theme="dark"] .export-preview-table td {
    border-bottom-color: rgba(255, 255, 255, 0.07);
    color: #D9DCE6;
}

html[data-theme="dark"] .export-preview-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}

html[data-theme="dark"] .export-preview-loading,
html[data-theme="dark"] .export-preview-error,
html[data-theme="dark"] .export-preview-empty {
    color: rgba(236, 236, 240, 0.6);
}

html[data-theme="dark"] .export-toast {
    background: rgba(236, 236, 240, 0.92);
    color: #071019;
}

html[data-theme="dark"] .export-toast.err {
    background: rgba(232, 90, 100, 0.92);
    color: #ffffff;
}

/* 加载遮罩 */
html[data-theme="dark"] #loading {
    background: linear-gradient(135deg, #070B22, #0A1230, #101A3A, #070B22);
    background-size: 300% 300%;
}

html[data-theme="dark"] .ps-loading-card {
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(16, 22, 48, 0.72);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    backdrop-filter: blur(24px) saturate(1.4);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .ps-loading-text,
html[data-theme="dark"] .ps-loading-pct {
    color: var(--ink);
}

html[data-theme="dark"] .ps-loading-bar {
    background: rgba(236, 236, 240, 0.12);
}

/* 深色模式加载屏：与浅色模式同样的渐变处理（深色下 --navy 与 --teal 同色，需独立配色） */
html[data-theme="dark"] .ps-ring {
    background: conic-gradient(
        from 0deg,
        var(--dt-a, #3CC8BE) 0deg,
        var(--dt-b, #62D4FF) 120deg,
        var(--dt-a, #3CC8BE) 240deg,
        var(--dt-a, #3CC8BE) 360deg
    );
}

html[data-theme="dark"] .ps-loading-pct {
    background: linear-gradient(90deg, var(--dt-b, #7FE0FF), var(--dt-a, #3CC8BE));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

html[data-theme="dark"] .ps-loading-bar i {
    background: linear-gradient(90deg, var(--dt-a, #3CC8BE), var(--dt-b, #62D4FF));
}

html[data-theme="dark"] .ps-ring-wrap {
    animation: ps-glow-dark 2.2s ease-in-out infinite;
}

@keyframes ps-glow-dark {
    0%,
    100% {
        filter: drop-shadow(0 0 6px var(--glow-da, rgba(60, 200, 190, 0.5)));
    }
    50% {
        filter: drop-shadow(0 0 18px var(--glow-db, rgba(98, 212, 255, 0.55)));
    }
}

/* 首页列表元素滑入/滑出动画 */
@keyframes dirCardIn {
    from {
        transform: translateX(-28px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes dirCardOut {
    to {
        transform: translateX(-28px);
        opacity: 0;
    }
}

@keyframes dirLeave {
    to {
        transform: translateX(-36px);
        opacity: 0;
    }
}

#directory-view.dir-leave {
    animation: dirLeave 0.28s ease forwards;
}

/* 报表 iframe 上禁用父页面手势（原生捏合由页面级缩放接管；iframe 内部交互不受影响） */
#embed-container iframe,
#embed-container-desktop iframe {
    touch-action: none;
}

/* 滚动进出视口时反复滑入/滑出：进入触发滑入动画，离开触发滑出动画，结束后落定 */
#directory-view.animate-cards .dir-card,
#directory-view.animate-cards .dir-ws-divider,
#directory-view.animate-cards .dir-footer {
    transform: translateX(-28px);
    opacity: 0;
}

#directory-view.animate-cards .dir-card.in,
#directory-view.animate-cards .dir-ws-divider.in,
#directory-view.animate-cards .dir-footer.in {
    animation: dirCardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#directory-view.animate-cards .dir-card.out,
#directory-view.animate-cards .dir-ws-divider.out,
#directory-view.animate-cards .dir-footer.out {
    animation: dirCardOut 0.35s ease both;
}

#directory-view.animate-cards .dir-card.settled,
#directory-view.animate-cards .dir-ws-divider.settled,
#directory-view.animate-cards .dir-footer.settled {
    transform: none;
    opacity: 1;
}

html[data-theme="dark"] .dir-ws-divider i {
    border-color: var(--teal);
    background: rgba(60, 200, 190, 0.2);
}

html[data-theme="dark"] .dir-badge.new {
    color: var(--teal);
}

html[data-theme="dark"] .dir-card-meta {
    color: var(--text-2);
}

/* ---- 问候区天气图标与小动画 ---- */

.wx-icon {
    position: relative;
    display: inline-flex;
    width: 20px;
    height: 20px;
    margin-right: 2px;
    vertical-align: -4px;
    color: var(--teal);
}

.wx-icon svg {
    width: 100%;
    height: 100%;
}

.wx-icon.weather-location-ready {
    cursor: pointer;
    border-radius: 999px;
    outline: none;
}

.wx-icon.weather-location-ready:focus-visible {
    box-shadow: 0 0 0 3px rgba(60, 200, 190, 0.22);
}

.wx-icon.weather-location-ready.is-locating {
    animation: wxLocate 900ms ease-in-out infinite;
}

.wx-attribution {
    display: block;
    margin-top: 7px;
    color: rgba(4, 20, 94, 0.42);
    font-size: 9px;
    letter-spacing: 0.04em;
}

.wx-attribution[hidden] {
    display: none;
}

html[data-theme="dark"] .wx-attribution {
    color: rgba(205, 244, 240, 0.45);
}

.wx-sun {
    animation: wxPulse 3s ease-in-out infinite;
}

.wx-moon {
    animation: wxPulse 4s ease-in-out infinite;
}

.wx-cloud {
    animation: wxDrift 6s ease-in-out infinite;
}

.wx-rain svg,
.wx-thunder svg,
.wx-snow svg {
    animation: wxDrift 6s ease-in-out infinite;
}

.wx-drop,
.wx-flake {
    position: absolute;
    top: 14px;
    width: 2px;
    height: 5px;
    border-radius: 1px;
    background: currentColor;
    opacity: 0;
    animation: wxDrop 1.1s linear infinite;
}

.wx-drop:nth-of-type(2) {
    animation-delay: 0.35s;
}

.wx-drop:nth-of-type(3) {
    animation-delay: 0.7s;
}

.wx-flake {
    top: 13px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    animation-name: wxFall;
}

.wx-flake:nth-of-type(2) {
    animation-delay: 0.4s;
}

.wx-flake:nth-of-type(3) {
    animation-delay: 0.8s;
}

.wx-bolt {
    position: absolute;
    right: 0;
    top: 4px;
    width: 9px;
    height: 9px;
    animation: wxFlash 2s ease-in-out infinite;
}

@keyframes wxPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.85;
    }
    50% {
        transform: scale(1.12);
        opacity: 1;
    }
}

@keyframes wxLocate {
    0%, 100% { box-shadow: 0 0 0 0 rgba(60, 200, 190, 0.08); opacity: 0.72; }
    50% { box-shadow: 0 0 0 6px rgba(60, 200, 190, 0.22); opacity: 1; }
}

@keyframes wxDrift {
    0%, 100% {
        transform: translateX(-1px);
    }
    50% {
        transform: translateX(1px);
    }
}

@keyframes wxDrop {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    20% {
        opacity: 0.9;
    }
    100% {
        transform: translateY(6px);
        opacity: 0;
    }
}

@keyframes wxFall {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    25% {
        opacity: 0.9;
    }
    100% {
        transform: translateY(7px);
        opacity: 0;
    }
}

@keyframes wxFlash {
    0%, 100% {
        opacity: 0;
    }
    45%, 55% {
        opacity: 1;
    }
}

/* ---- 节气专属加载场景 ---- */

.ps-loading-card.term {
    padding: 26px 30px 24px;
}

.term-scene svg {
    display: block;
    width: 240px;
    height: 180px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(4, 20, 94, 0.14);
}

.term-title {
    margin-top: 16px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 10px;
}

.ps-loading-card.term .ps-loading-pct {
    margin-top: 14px;
}

.ps-loading-card.term .ps-loading-bar {
    margin-top: 12px;
}

.ps-loading-card.term .ps-loading-text {
    margin-top: 10px;
}

.term-quote {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-2);
    letter-spacing: 1px;
    text-align: center;
    max-width: 280px;
}

/* 主题切换：动画规则必须预置于主样式表；JS 提交圆心变量后预热一帧再创建快照。 */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-new(root) {
    z-index: 9999;
    clip-path: circle(0px at var(--theme-x, 50%) var(--theme-y, 40%));
    animation: theme-circle-reveal 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes theme-circle-reveal {
    0% {
        clip-path: circle(0px at var(--theme-x, 50%) var(--theme-y, 40%));
    }
    20% {
        clip-path: circle(4vmax at var(--theme-x, 50%) var(--theme-y, 40%));
    }
    70% {
        clip-path: circle(5vmax at var(--theme-x, 50%) var(--theme-y, 40%));
    }
    100% {
        clip-path: circle(160vmax at var(--theme-x, 50%) var(--theme-y, 40%));
    }
}

/* ---- 导出工作台 v2：选择、命名、格式、预览与发送集中完成 ---- */
.export-sheet-mask.closing {
    animation: exportMaskOut 0.2s ease both;
}

.export-sheet-mask.closing .export-sheet {
    animation: exportSheetOut 0.2s ease both;
}

.export-sheet:not(.export-sheet-notice) {
    width: min(780px, 100%);
    max-height: min(82vh, 760px);
}

.export-sheet-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 0.82fr);
    min-height: 0;
    overflow: hidden;
}

.export-sheet-layout > .export-sheet-body {
    min-height: 260px;
    padding: 12px;
    border-right: 1px solid rgba(0, 0, 40, 0.08);
}

.export-sheet-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 7px;
}

.export-sheet-row .export-sheet-item {
    min-width: 0;
    border: 1px solid transparent;
}

.export-sheet-item-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(4, 20, 94, 0.18);
    border-radius: 50%;
    color: transparent;
    font-size: 11px;
}

.export-sheet-item.selected {
    border-color: rgba(60, 200, 190, 0.55);
    background: rgba(60, 200, 190, 0.1);
    box-shadow: 0 5px 16px rgba(4, 20, 94, 0.08);
}

.export-sheet-item.selected .export-sheet-item-check {
    border-color: #3CC8BE;
    background: #3CC8BE;
    color: #04145E;
}

.export-row-preview {
    flex: 0 0 auto;
    padding: 0 11px;
    border: 1px solid rgba(4, 20, 94, 0.12);
    border-radius: 11px;
    background: #fff;
    color: #04145E;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

.export-row-preview:hover {
    border-color: #3CC8BE;
    background: rgba(60, 200, 190, 0.08);
}

.export-compose {
    min-width: 0;
    padding: 18px;
    overflow-y: auto;
    background: linear-gradient(160deg, rgba(236, 236, 240, 0.45), rgba(60, 200, 190, 0.06));
}

.export-compose[hidden] {
    display: none;
}

.export-compose-kicker {
    color: #0E8F87;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.export-compose-title {
    margin: 4px 0 18px;
    color: #04145E;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.export-field-label,
.export-format legend {
    display: block;
    margin-bottom: 7px;
    color: rgba(0, 0, 40, 0.68);
    font-size: 12px;
    font-weight: 700;
}

.export-file-field {
    display: flex;
    align-items: center;
    border: 1px solid rgba(4, 20, 94, 0.16);
    border-radius: 11px;
    background: #fff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.export-file-field:focus-within {
    border-color: #3CC8BE;
    box-shadow: 0 0 0 3px rgba(60, 200, 190, 0.14);
}

.export-file-field:has(.export-file-input.invalid) {
    border-color: #C83C51;
}

.export-file-input {
    min-width: 0;
    flex: 1;
    padding: 11px 4px 11px 12px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #000028;
    font: inherit;
    font-size: 13px;
}

.export-file-extension {
    flex: 0 0 auto;
    padding: 0 12px 0 5px;
    color: rgba(0, 0, 40, 0.48);
    font-size: 12px;
    font-weight: 700;
}

.export-field-help {
    margin: 6px 0 16px;
    color: rgba(0, 0, 40, 0.45);
    font-size: 11px;
    line-height: 1.5;
}

.export-format {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.export-format legend {
    grid-column: 1 / -1;
}

.export-format label {
    position: relative;
    cursor: pointer;
}

.export-format input {
    position: absolute;
    opacity: 0;
}

.export-format label > span {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid rgba(4, 20, 94, 0.12);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.8);
    color: #04145E;
    transition: all 0.18s ease;
}

.export-format input:checked + span {
    border-color: #3CC8BE;
    background: rgba(60, 200, 190, 0.12);
    box-shadow: inset 0 0 0 1px #3CC8BE;
}

.export-format small {
    color: rgba(0, 0, 40, 0.46);
    font-size: 10px;
}

.export-compose-note {
    display: flex;
    gap: 7px;
    margin-top: 15px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(4, 20, 94, 0.055);
    color: rgba(0, 0, 40, 0.56);
    font-size: 11px;
    line-height: 1.5;
}

.export-compose-actions {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 8px;
    margin-top: 16px;
}

.export-preview-action,
.export-submit-action {
    min-height: 42px;
    padding: 9px 12px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

.export-preview-action {
    border: 1px solid rgba(4, 20, 94, 0.16);
    background: rgba(255, 255, 255, 0.82);
    color: #04145E;
}

.export-submit-action {
    border: 0;
    background: linear-gradient(135deg, #04145E, #3CC8BE);
    box-shadow: 0 8px 20px rgba(4, 20, 94, 0.18);
    color: #fff;
}

.export-submit-action:disabled {
    cursor: wait;
    opacity: 0.65;
}

.export-compose-status {
    min-height: 18px;
    margin-top: 9px;
    color: rgba(0, 0, 40, 0.52);
    font-size: 11px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.export-compose-status.working { color: #0E8F87; }
.export-compose-status.ok { color: #087A4D; }
.export-compose-status.err { color: #B02A37; }

.export-sheet-layout .export-preview {
    grid-column: 1 / -1;
}

@keyframes exportMaskOut {
    to { opacity: 0; }
}

@keyframes exportSheetOut {
    to { opacity: 0; transform: translateY(10px) scale(0.98); }
}

@media (max-width: 680px) {
    .export-sheet-mask {
        align-items: flex-end;
        padding: 0;
    }

    .export-sheet:not(.export-sheet-notice) {
        width: 100%;
        max-height: min(91dvh, 820px);
        border-radius: 20px 20px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .export-sheet-layout {
        display: block;
        overflow-y: auto;
    }

    .export-sheet-layout > .export-sheet-body {
        min-height: 0;
        max-height: 32vh;
        border-right: 0;
        border-bottom: 1px solid rgba(0, 0, 40, 0.08);
    }

    .export-compose {
        overflow: visible;
        padding: 15px 16px 18px;
    }

    .export-sheet-item-type {
        display: none;
    }
}

html[data-theme="dark"] .export-compose {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(60, 200, 190, 0.07));
}

html[data-theme="dark"] .export-sheet-layout > .export-sheet-body {
    border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .export-row-preview,
html[data-theme="dark"] .export-file-field,
html[data-theme="dark"] .export-format label > span,
html[data-theme="dark"] .export-preview-action {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #ECECF0;
}

html[data-theme="dark"] .export-compose-title,
html[data-theme="dark"] .export-file-input,
html[data-theme="dark"] .export-format label > span {
    color: #ECECF0;
}

html[data-theme="dark"] .export-field-label,
html[data-theme="dark"] .export-format legend,
html[data-theme="dark"] .export-field-help,
html[data-theme="dark"] .export-file-extension,
html[data-theme="dark"] .export-format small,
html[data-theme="dark"] .export-compose-note,
html[data-theme="dark"] .export-compose-status {
    color: rgba(236, 236, 240, 0.62);
}

@media (prefers-reduced-motion: reduce) {
    .export-sheet-mask,
    .export-sheet,
    .export-sheet-mask.closing,
    .export-sheet-mask.closing .export-sheet {
        animation-duration: 0.01ms !important;
    }
}

/* 共享创建弹窗：强调主动作，并为深色模式提供独立的高对比度文本层级。 */
#user-share-sheet .report-share-sheet {
    overflow: hidden auto;
    border-color: rgba(60, 200, 190, 0.24);
    box-shadow: 0 28px 90px rgba(4, 20, 94, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.35);
}

#user-share-sheet .report-share-sheet > header {
    position: relative;
    overflow: hidden;
    padding: 24px 24px 20px;
    background:
        radial-gradient(220px 120px at 100% 0%, rgba(60, 200, 190, 0.2), transparent 72%),
        linear-gradient(135deg, rgba(4, 20, 94, 0.06), rgba(60, 200, 190, 0.12));
}

#user-share-sheet .report-share-sheet > header::before {
    content: "SHARE";
    display: block;
    margin-bottom: 8px;
    color: #0E8F87;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

#user-share-sheet .report-share-sheet > header::after {
    content: "";
    position: absolute;
    right: 24px;
    bottom: 0;
    left: 24px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #3CC8BE, #04145E 52%, transparent);
    opacity: 0.72;
}

#user-share-sheet .report-share-sheet h2 {
    font-size: 22px;
    letter-spacing: 0.01em;
}

#user-share-sheet .report-share-form {
    gap: 14px;
    padding: 20px 24px 22px;
}

#user-share-sheet .report-share-form > label {
    color: #10204A;
    font-size: 13px;
    letter-spacing: 0.01em;
}

#user-share-sheet .report-share-kind-options {
    gap: 10px;
}

#user-share-sheet .report-share-kind-option {
    min-height: 62px;
    padding: 12px 13px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.86);
    color: #10204A;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#user-share-sheet .report-share-kind-option:hover {
    transform: translateY(-1px);
    border-color: rgba(14, 143, 135, 0.45);
}

#user-share-sheet .report-share-kind-option span {
    display: block;
}

#user-share-sheet .report-share-kind-option small {
    display: inline-block;
    margin-top: 3px;
    color: rgba(16, 32, 74, 0.6);
    font-size: 11px;
    font-weight: 500;
}

#user-share-sheet .report-share-form input,
#user-share-sheet .report-share-form select {
    min-height: 44px;
    padding: 0 13px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    color: #10204A;
    font-size: 13px;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#user-share-sheet .report-share-form input:focus,
#user-share-sheet .report-share-form select:focus {
    border-color: #3CC8BE;
    box-shadow: 0 0 0 3px rgba(60, 200, 190, 0.16);
}

#user-share-sheet .report-share-note {
    padding: 10px 12px;
    border: 1px solid rgba(60, 200, 190, 0.16);
    border-radius: 11px;
    background: rgba(60, 200, 190, 0.06);
    color: rgba(16, 32, 74, 0.66);
    opacity: 1;
}

#user-share-sheet #user-share-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin-top: 2px;
    padding: 0 18px 0 14px;
    overflow: hidden;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(110deg, #04145E 0%, #1664C0 48%, #0E8F87 100%);
    box-shadow: 0 10px 22px rgba(4, 20, 94, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

#user-share-sheet #user-share-submit::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 7px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}

#user-share-sheet #user-share-submit::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -34%;
    width: 22%;
    transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    transition: left 0.55s ease;
}

#user-share-sheet #user-share-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 14px 28px rgba(4, 20, 94, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

#user-share-sheet #user-share-submit:hover:not(:disabled)::after {
    left: 118%;
}

#user-share-sheet #user-share-submit:active:not(:disabled) {
    transform: translateY(1px) scale(0.99);
}

#user-share-sheet #user-share-submit:disabled {
    cursor: wait;
    opacity: 0.72;
}

html[data-theme="dark"] #user-share-sheet .report-share-sheet {
    border-color: rgba(60, 200, 190, 0.32);
    background: #10172F;
    color: #F2F5FA;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] #user-share-sheet .report-share-sheet > header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    background:
        radial-gradient(240px 140px at 100% 0%, rgba(60, 200, 190, 0.2), transparent 72%),
        linear-gradient(135deg, rgba(7, 11, 34, 0.8), rgba(17, 38, 69, 0.96));
}

html[data-theme="dark"] #user-share-sheet .report-share-sheet > header::before {
    color: #7FE0FF;
}

html[data-theme="dark"] #user-share-sheet .report-share-form > label {
    color: #F5F7FC;
}

html[data-theme="dark"] #user-share-sheet .report-share-kind-option {
    border-color: rgba(236, 236, 240, 0.18);
    background: rgba(255, 255, 255, 0.07);
    color: #F5F7FC;
}

html[data-theme="dark"] #user-share-sheet .report-share-kind-option:hover {
    border-color: rgba(127, 224, 255, 0.65);
}

html[data-theme="dark"] #user-share-sheet .report-share-kind-option:has(input:checked) {
    border-color: #3CC8BE;
    background: rgba(60, 200, 190, 0.18);
    box-shadow: 0 0 0 2px rgba(60, 200, 190, 0.16), 0 8px 22px rgba(0, 0, 0, 0.16);
}

html[data-theme="dark"] #user-share-sheet .report-share-kind-option small {
    color: #B9C8DC;
    opacity: 1;
}

html[data-theme="dark"] #user-share-sheet .report-share-form input,
html[data-theme="dark"] #user-share-sheet .report-share-form select {
    border-color: rgba(236, 236, 240, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: #F5F7FC;
}

html[data-theme="dark"] #user-share-sheet .report-share-form select option {
    background: #10172F;
    color: #F5F7FC;
}

html[data-theme="dark"] #user-share-sheet .report-share-note {
    border-color: rgba(60, 200, 190, 0.22);
    background: rgba(60, 200, 190, 0.1);
    color: #C7D3E4;
}

html[data-theme="dark"] #user-share-sheet .report-share-item {
    border-color: rgba(236, 236, 240, 0.14);
    background: rgba(255, 255, 255, 0.035);
    color: #EAF0F8;
}

html[data-theme="dark"] #user-share-sheet .report-share-item-main strong {
    color: #F2FFFD;
}

html[data-theme="dark"] #user-share-sheet .report-share-item-main small,
html[data-theme="dark"] #user-share-sheet .report-share-item small {
    color: #B9C8DC;
    opacity: 1;
}

html[data-theme="dark"] #user-share-sheet .report-share-item button {
    background: rgba(60, 200, 190, 0.16);
    color: #DFFFFB;
}

html[data-theme="dark"] #user-share-sheet .report-share-close {
    color: #EAF0F8;
}

html[data-theme="dark"] #user-share-sheet .report-share-close:hover {
    color: #7FE0FF;
}

@media (max-width: 560px) {
    #user-share-sheet .report-share-sheet > header {
        padding: 20px 18px 17px;
    }

    #user-share-sheet .report-share-form {
        padding: 17px 18px 20px;
    }

    #user-share-sheet .report-share-kind-options {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    #user-share-sheet .report-share-kind-option,
    #user-share-sheet #user-share-submit {
        transition: none;
    }
}

.fs-gate-icon.fs-expired {
    color: #FFE6B8;
    background: linear-gradient(135deg, #5C2B12, #8B4A1E);
    box-shadow: 0 14px 30px rgba(112, 57, 20, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .fs-gate-icon.fs-expired {
    color: #FFE5B1;
    background: linear-gradient(135deg, #5A2B19, #8E4B25);
}

/* 分享方式：将原生 radio 收敛为一致的选择卡片，避免宽度继承导致的大圆环与悬停外框。 */
#user-share-sheet .report-share-kind-option {
    position: relative;
    display: block;
    min-height: 92px;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    cursor: pointer;
}

#user-share-sheet .report-share-kind-option input[type="radio"] {
    position: absolute;
    width: 1px !important;
    min-width: 0;
    min-height: 0;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    opacity: 0;
    appearance: none;
    border: 0 !important;
    box-shadow: none !important;
}

#user-share-sheet .report-share-kind-option span {
    position: relative;
    display: block;
    min-height: 92px;
    box-sizing: border-box;
    padding: 18px 48px 15px 17px;
    color: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

#user-share-sheet .report-share-kind-option span::before {
    content: "";
    position: absolute;
    top: 18px;
    right: 16px;
    width: 17px;
    height: 17px;
    box-sizing: border-box;
    border: 2px solid rgba(16, 32, 74, 0.42);
    border-radius: 50%;
    background: transparent;
}

#user-share-sheet .report-share-kind-option input:checked + span::before {
    border-color: #0E8F87;
    background: radial-gradient(circle, #0E8F87 0 42%, transparent 47%);
}

#user-share-sheet .report-share-kind-option small {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.35;
}

#user-share-sheet .report-share-kind-option:hover {
    transform: none;
    border-color: rgba(4, 20, 94, 0.14);
    box-shadow: none;
}

#user-share-sheet .report-share-kind-option:has(input:checked),
#user-share-sheet .report-share-kind-option:has(input:checked):hover {
    border-color: #21BDB4;
    background: rgba(60, 200, 190, 0.12);
    box-shadow: inset 0 0 0 1px rgba(60, 200, 190, 0.2);
}

#user-share-sheet .report-share-kind-option input:focus-visible + span {
    outline: 3px solid rgba(60, 200, 190, 0.34);
    outline-offset: -3px;
}

html[data-theme="dark"] #user-share-sheet .report-share-kind-option:hover {
    border-color: rgba(236, 236, 240, 0.18);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: none;
}

html[data-theme="dark"] #user-share-sheet .report-share-kind-option span::before {
    border-color: rgba(236, 236, 240, 0.58);
}

html[data-theme="dark"] #user-share-sheet .report-share-kind-option input:checked + span::before {
    border-color: #8FE8E0;
    background: radial-gradient(circle, #8FE8E0 0 42%, transparent 47%);
}

html[data-theme="dark"] #user-share-sheet .report-share-kind-option:has(input:checked),
html[data-theme="dark"] #user-share-sheet .report-share-kind-option:has(input:checked):hover {
    border-color: #3CC8BE;
    background: rgba(60, 200, 190, 0.18);
    box-shadow: inset 0 0 0 1px rgba(60, 200, 190, 0.32);
}

/* 分享名片预览固定为下载名片的浅色纸卡，不继承深色模式的正文颜色。 */
#user-share-preview .report-share-card {
    border-color: #D0ECEA;
    background: linear-gradient(145deg, #F7FCFF, #E8FAF7);
    color: #10204A;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 12px 28px rgba(4, 20, 94, 0.1);
}

#user-share-preview .report-share-card strong {
    color: #04145E;
}

#user-share-preview .report-share-card span {
    color: #4B607C;
    line-height: 1.45;
    opacity: 1;
}

#user-share-preview .report-share-card > span:nth-of-type(2) {
    color: #10204A;
    font-size: 13px;
    font-weight: 700;
}

#user-share-preview .report-share-card > span:last-of-type {
    color: #087B75;
    font-weight: 700;
}

#user-share-preview .report-share-preview-powered {
    color: #04145E;
    opacity: 0.76;
}

#user-share-preview .report-share-preview-qr {
    border: 1px solid rgba(4, 20, 94, 0.07);
    background: #FFFFFF;
    box-shadow: 0 8px 20px rgba(4, 20, 94, 0.12);
}

html[data-theme="dark"] #user-share-preview .report-share-card {
    color: #10204A;
    border-color: #D0ECEA;
    background: linear-gradient(145deg, #F7FCFF, #E8FAF7);
}

html[data-theme="dark"] #user-share-preview .report-share-card strong {
    color: #04145E;
}

html[data-theme="dark"] #user-share-preview .report-share-card span {
    color: #4B607C;
}

html[data-theme="dark"] #user-share-preview .report-share-card > span:nth-of-type(2) {
    color: #10204A;
}

html[data-theme="dark"] #user-share-preview .report-share-card > span:last-of-type {
    color: #087B75;
}

html[data-theme="dark"] #user-share-preview .report-share-preview-powered {
    color: #04145E;
}

/* 20260903h · 正式与测试目录城市天气环境
   固定在目录内容之后的视觉层级，完全不接收交互；仅使用 opacity/transform 动画。 */
#directory-view {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    touch-action: pan-y pinch-zoom;
}

#directory-view > .dir-group,
#directory-view > .dir-empty,
#directory-view > .dir-footer {
    position: relative;
    z-index: 1;
}

.wx-summary {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    margin-left: 4px;
    padding: 2px 9px;
    border: 1px solid rgba(12, 138, 130, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.54);
    color: #39706D;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: help;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.wx-summary:focus-visible {
    outline: 2px solid rgba(60, 200, 190, 0.5);
    outline-offset: 2px;
}

.wx-summary[hidden] {
    display: none;
}

html[data-theme="dark"] .wx-summary {
    border-color: rgba(143, 232, 224, 0.18);
    background: rgba(255, 255, 255, 0.055);
    color: rgba(205, 244, 240, 0.76);
}

.weather-ambient {
    --wa-cyan: 60, 200, 190;
    --wa-blue: 61, 124, 233;
    --wa-warm: 245, 188, 105;
    /* 20260903k：氛围层并入 .dir-sticky 顶部条带，absolute 铺满条带盒子；雨雪下落行程按此高度折算 */
    --wa-band-h: 190px;
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100vw;
    z-index: 0;
    overflow: hidden;
    overflow: clip;
    contain: layout paint style;
    pointer-events: none;
    opacity: 0;
    transition: opacity 700ms ease;
}

.weather-ambient.is-ready {
    opacity: 1;
}

.wa-aura,
.wa-orb,
.wa-cloud,
.wa-mist,
.wa-wind,
.wa-flash,
.wa-particles,
.wa-particles i {
    position: absolute;
    display: block;
    pointer-events: none;
}

.wa-aura {
    inset: 0;
    background:
        radial-gradient(52vw 38vw at 92% 8%, rgba(var(--wa-cyan), 0.12), transparent 68%),
        radial-gradient(42vw 32vw at 6% 92%, rgba(var(--wa-blue), 0.07), transparent 72%);
    opacity: 0.82;
    animation: waBreathe 9s ease-in-out infinite;
}

.wa-orb {
    top: calc(env(safe-area-inset-top, 0px) + 34px);
    right: clamp(48px, 7vw, 128px);
    width: clamp(46px, 6vw, 92px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 36%, rgba(255, 255, 255, 0.88), rgba(255, 222, 152, 0.36) 36%, rgba(245, 188, 105, 0.05) 70%, transparent 72%);
    box-shadow: 0 0 70px rgba(var(--wa-warm), 0.2);
    opacity: 0;
    animation: waOrb 10s ease-in-out infinite;
}

.wa-cloud {
    width: clamp(120px, 16vw, 260px);
    height: clamp(20px, 2.6vw, 42px);
    border-radius: 55% 48% 44% 52%;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0), rgba(174, 208, 223, 0.22), rgba(255, 255, 255, 0));
    opacity: 0;
}

.wa-cloud-a {
    top: 6%;
    left: -12%;
    animation: waCloudA 24s ease-in-out infinite;
}

.wa-cloud-b {
    top: 62%;
    right: -15%;
    transform: scale(0.72);
    animation: waCloudB 30s ease-in-out infinite;
}

.wa-mist {
    left: -8%;
    width: 116%;
    height: 1px;
    border-radius: 50%;
    background: linear-gradient(90deg, transparent 2%, rgba(119, 170, 178, 0.24) 28%, rgba(255, 255, 255, 0.34) 52%, transparent 94%);
    opacity: 0;
}

.wa-mist-a {
    top: 37%;
    animation: waMist 13s ease-in-out infinite;
}

.wa-mist-b {
    top: 72%;
    animation: waMist 16s -6s ease-in-out infinite reverse;
}

.wa-wind {
    left: -12%;
    width: 54%;
    height: 42px;
    border-top: 1px solid rgba(var(--wa-cyan), 0.24);
    border-radius: 50%;
    opacity: 0;
}

.wa-wind-a {
    top: 32%;
    animation: waWind 8s ease-in-out infinite;
}

.wa-wind-b {
    top: 68%;
    animation: waWind 10s -4s ease-in-out infinite;
}

.wa-flash {
    inset: 0;
    background: radial-gradient(42vw 46vw at 88% 8%, rgba(255, 242, 184, 0.24), transparent 64%);
    opacity: 0;
}

.wa-particles {
    inset: 0;
    opacity: 0;
}

.wa-particles i {
    left: var(--wx);
    top: -7%;
    width: 2px;
    height: 28px;
    border-radius: 99px;
    background: linear-gradient(to bottom, transparent, rgba(54, 153, 187, 0.48));
    opacity: 0;
    animation-delay: var(--wdelay);
}

/* 12 种天气语言：晴、间晴、多云、阴、雾、霾、毛毛雨、雨、雷暴、雪、风、极端天气。 */
.weather-clear .wa-orb,
.weather-partly .wa-orb {
    opacity: 0.72;
}

.weather-partly .wa-cloud-a,
.weather-cloudy .wa-cloud-a,
.weather-cloudy .wa-cloud-b,
.weather-overcast .wa-cloud-a,
.weather-overcast .wa-cloud-b,
.weather-thunder .wa-cloud-a,
.weather-thunder .wa-cloud-b,
.weather-extreme .wa-cloud-a,
.weather-extreme .wa-cloud-b {
    opacity: 0.8;
}

.weather-overcast .wa-aura,
.weather-extreme .wa-aura {
    background: linear-gradient(165deg, rgba(88, 111, 145, 0.14), transparent 52%, rgba(30, 71, 108, 0.08));
}

.weather-fog .wa-mist,
.weather-haze .wa-mist {
    opacity: 0.86;
}

.weather-fog .wa-particles,
.weather-haze .wa-particles {
    opacity: 1;
}

.weather-fog .wa-particles i,
.weather-haze .wa-particles i {
    left: -5%;
    top: var(--wx);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(176, 221, 222, 0.24);
    opacity: 0;
    animation: waFogMote 15s ease-in-out infinite;
    animation-delay: var(--wdelay);
}

.weather-haze .wa-particles i {
    background: rgba(199, 157, 102, 0.2);
    animation-duration: 18s;
}

.weather-fog .wa-particles i:nth-child(3n),
.weather-haze .wa-particles i:nth-child(3n) {
    width: 13px;
    height: 13px;
}

.weather-haze .wa-aura {
    background:
        radial-gradient(52vw 38vw at 92% 8%, rgba(224, 168, 104, 0.15), transparent 68%),
        linear-gradient(165deg, transparent, rgba(190, 151, 114, 0.06));
}

.weather-drizzle .wa-particles,
.weather-rain .wa-particles,
.weather-thunder .wa-particles,
.weather-extreme .wa-particles {
    inset: 0 0 auto;
    height: min(300px, 34vh);
    overflow: hidden;
    opacity: 1;
}

.weather-snow .wa-particles {
    opacity: 1;
}

.weather-drizzle .wa-particles i {
    height: 13px;
    opacity: 0.34;
    animation: waRain 2.7s linear infinite;
}

.weather-rain .wa-particles i,
.weather-thunder .wa-particles i,
.weather-extreme .wa-particles i {
    opacity: 0.48;
    animation: waRain 1.45s linear infinite;
}

.weather-thunder .wa-flash,
.weather-extreme .wa-flash {
    animation: waLightning 8s steps(1, end) infinite;
}

.weather-snow .wa-particles i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(151, 211, 224, 0.68);
    opacity: 0.62;
    animation: waSnow 8s ease-in infinite;
}

.weather-wind .wa-wind {
    opacity: 0.92;
}

.weather-extreme .wa-particles i:nth-child(3n) {
    height: 42px;
}

.weather-ambient.is-night .wa-orb {
    background: radial-gradient(circle at 38% 36%, rgba(238, 249, 255, 0.76), rgba(137, 197, 219, 0.16) 45%, transparent 70%);
    box-shadow: 0 0 72px rgba(114, 192, 225, 0.13);
}

html[data-theme="dark"] .weather-ambient {
    --wa-cyan: 73, 222, 209;
    --wa-blue: 77, 137, 255;
    --wa-warm: 251, 207, 134;
}

html[data-theme="dark"] .wa-aura {
    opacity: 0.66;
}

html[data-theme="dark"] .wa-cloud {
    background: linear-gradient(110deg, transparent, rgba(109, 149, 177, 0.16), rgba(206, 235, 240, 0.08), transparent);
}

html[data-theme="dark"] .wa-mist {
    background: linear-gradient(90deg, transparent 2%, rgba(88, 181, 188, 0.17) 28%, rgba(190, 229, 231, 0.15) 52%, transparent 94%);
}

@keyframes waBreathe {
    0%, 12%, 100% { transform: scale(0.985); opacity: 0; }
    24% { opacity: 0.58; }
    52% { transform: scale(1.025); opacity: 0.92; }
    74% { transform: scale(1.04); opacity: 0.34; }
    84% { opacity: 0; }
}

@keyframes waOrb {
    0%, 10%, 100% { transform: translate3d(4px, -2px, 0) scale(0.94); opacity: 0; }
    22% { opacity: 0.48; }
    52% { transform: translate3d(-8px, 5px, 0) scale(1.04); opacity: 0.76; }
    76% { transform: translate3d(-12px, 7px, 0) scale(1.07); opacity: 0.22; }
    84% { opacity: 0; }
}

@keyframes waCloudA {
    0%, 8%, 100% { transform: translate3d(-10vw, 0, 0) scale(0.96); opacity: 0; }
    20% { opacity: 0.42; }
    54% { transform: translate3d(46vw, 10px, 0) scale(1); opacity: 0.82; }
    76% { transform: translate3d(74vw, 13px, 0) scale(1.03); opacity: 0; }
}

@keyframes waCloudB {
    0%, 12%, 100% { transform: translate3d(12vw, 0, 0) scale(0.68); opacity: 0; }
    25% { opacity: 0.34; }
    56% { transform: translate3d(-42vw, -8px, 0) scale(0.72); opacity: 0.72; }
    78% { transform: translate3d(-70vw, -11px, 0) scale(0.75); opacity: 0; }
}

@keyframes waMist {
    0%, 14%, 100% { transform: translate3d(-4%, 0, 0) scaleX(0.82); opacity: 0; }
    28% { opacity: 0.34; }
    55% { transform: translate3d(4%, 4px, 0) scaleX(1.02); opacity: 0.68; }
    76% { transform: translate3d(7%, 5px, 0) scaleX(1.08); opacity: 0.18; }
    84% { opacity: 0; }
}

@keyframes waWind {
    0%, 16%, 100% { transform: translate3d(-18vw, 4px, 0) scaleX(0.45); opacity: 0; }
    25% { opacity: 0.2; }
    43% { transform: translate3d(28vw, -5px, 0) scaleX(0.92); opacity: 0.76; }
    64% { transform: translate3d(92vw, -18px, 0) scaleX(1.08); opacity: 0; }
}

@keyframes waRain {
    0%, 8%, 100% { transform: translate3d(5vw, -60px, 0) rotate(12deg); opacity: 0; }
    18% { opacity: 0.48; }
    70% { transform: translate3d(-4vw, 286px, 0) rotate(12deg); opacity: 0.46; }
    82% { transform: translate3d(-5vw, 350px, 0) rotate(12deg); opacity: 0; }
}

@keyframes waFogMote {
    0%, 12%, 100% { transform: translate3d(-6vw, 5px, 0) scale(0.62); opacity: 0; }
    24% { opacity: 0.28; }
    54% { transform: translate3d(50vw, -8px, 0) scale(1); opacity: 0.48; }
    78% { transform: translate3d(94vw, 2px, 0) scale(0.8); opacity: 0; }
}

@keyframes waSnow {
    0%, 10%, 100% { transform: translate3d(0, -10vh, 0) rotate(0deg) scale(0.72); opacity: 0; }
    22% { opacity: 0.62; }
    74% { transform: translate3d(var(--wd), 88vh, 0) rotate(190deg) scale(1); opacity: 0.54; }
    86% { transform: translate3d(var(--wd), 116vh, 0) rotate(240deg) scale(0.82); opacity: 0; }
}

@keyframes waLightning {
    0%, 76%, 80%, 84%, 100% { opacity: 0; }
    78%, 82% { opacity: 1; }
}

/* 12 类天气与目录顶部的语义互动：只作用于测试目录的非关键文字与背景装饰。 */
.dir-sticky::before,
.dir-sticky::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
}

.dir-sticky > * {
    position: relative;
    z-index: 1;
}

/* ---- 20260903k 顶栏条带天空 ----
   #weather-ambient 已并入 .dir-sticky 成为其首个子级：覆盖上面的 relative/z1，
   改为 absolute 铺满条带、压在问候语/标题内容（z1）之下，随吸顶条带停留，
   列表区不再有任何天气绘制。条带内降水减半、雾霾稀疏化，避免顶栏过密闪烁。 */
.dir-sticky > .weather-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    max-width: 100vw;
}

.weather-motion-v2.weather-drizzle .wa-particles i:nth-child(2n),
.weather-motion-v2.weather-rain .wa-particles i:nth-child(2n),
.weather-motion-v2.weather-thunder .wa-particles i:nth-child(2n),
.weather-motion-v2.weather-extreme .wa-particles i:nth-child(2n),
.weather-motion-v2.weather-snow .wa-particles i:nth-child(2n) {
    display: none;
}

.weather-motion-v2.weather-fog .wa-particles i:nth-child(3n),
.weather-motion-v2.weather-haze .wa-particles i:nth-child(3n) {
    display: none;
}

/* 01 晴：缓慢游移的自然光斑；夜间自动切换为冷色月光。 */
.weather-react-clear .dir-sticky::before {
    background:
        radial-gradient(42% 92% at 82% 8%, rgba(255, 220, 133, 0.3), transparent 66%),
        linear-gradient(112deg, transparent 18%, rgba(255, 255, 255, 0.28) 46%, transparent 72%);
    opacity: 0.74;
    animation: waClearLight 9s ease-in-out infinite;
}

.weather-react-clear.weather-is-night .dir-sticky::before {
    background:
        radial-gradient(38% 88% at 82% 7%, rgba(168, 218, 240, 0.24), transparent 66%),
        linear-gradient(112deg, transparent 22%, rgba(213, 239, 248, 0.14) 48%, transparent 72%);
    opacity: 0.58;
}

/* 02 晴间多云：光斑上掠过柔和云影。 */
.weather-react-partly .dir-sticky::before {
    background:
        radial-gradient(30% 90% at 79% 10%, rgba(255, 221, 143, 0.24), transparent 68%),
        radial-gradient(28% 42% at 18% 56%, rgba(104, 143, 158, 0.13), transparent 72%),
        radial-gradient(32% 46% at 52% 28%, rgba(127, 162, 174, 0.1), transparent 74%);
    opacity: 0.72;
    animation: waPartlyShadow 13s ease-in-out infinite;
}

.weather-react-partly.weather-is-night .dir-sticky::before {
    background:
        radial-gradient(30% 90% at 79% 10%, rgba(167, 216, 237, 0.18), transparent 68%),
        radial-gradient(28% 42% at 18% 56%, rgba(62, 95, 128, 0.18), transparent 72%),
        radial-gradient(32% 46% at 52% 28%, rgba(70, 104, 137, 0.14), transparent 74%);
}

/* 03 多云：双层云幕以不同速度掠过顶部。 */
.weather-react-cloudy .dir-sticky::before {
    background:
        radial-gradient(42% 52% at 12% 52%, rgba(126, 162, 177, 0.17), transparent 73%),
        radial-gradient(46% 58% at 72% 30%, rgba(151, 181, 191, 0.16), transparent 74%),
        linear-gradient(180deg, rgba(177, 204, 211, 0.08), transparent 82%);
    opacity: 0.78;
    animation: waCloudCeiling 16s ease-in-out infinite;
}

/* 04 阴：低空冷光呼吸，不做闪烁。 */
.weather-react-overcast .dir-sticky::before {
    background:
        linear-gradient(176deg, rgba(93, 119, 145, 0.17), rgba(150, 177, 187, 0.08) 54%, transparent 92%),
        radial-gradient(54% 28% at 66% 2%, rgba(255, 255, 255, 0.22), transparent 78%);
    opacity: 0.72;
    animation: waOvercastBreathe 11s ease-in-out infinite;
}

.weather-react-drizzle .dir-sticky::after,
.weather-react-rain .dir-sticky::after,
.weather-react-thunder .dir-sticky::after,
.weather-react-extreme .dir-sticky::after {
    background-image: repeating-linear-gradient(104deg, transparent 0 24px, rgba(54, 153, 187, 0.18) 25px 26px, transparent 27px 48px);
    background-size: 100% 48px;
    opacity: 0.38;
    animation: waHeaderRain 1.1s linear infinite;
}

.weather-react-drizzle .dir-sticky::after {
    opacity: 0.22;
    animation-duration: 2.1s;
}

/* 07/08 细雨与雨：顶部落雨之外，以底沿涟漪区分雨势。 */
.weather-react-drizzle .dir-sticky::before,
.weather-react-rain .dir-sticky::before {
    background:
        radial-gradient(ellipse 17px 4px at 14% 93%, transparent 40%, rgba(64, 153, 183, 0.24) 48%, transparent 58%),
        radial-gradient(ellipse 22px 5px at 48% 96%, transparent 40%, rgba(64, 153, 183, 0.21) 48%, transparent 58%),
        radial-gradient(ellipse 18px 4px at 82% 91%, transparent 40%, rgba(64, 153, 183, 0.2) 48%, transparent 58%);
    opacity: 0.42;
    animation: waRainSurface 2.3s ease-out infinite;
}

.weather-react-rain .dir-sticky::before {
    opacity: 0.68;
    animation-duration: 1.55s;
}

.weather-react-thunder .dir-sticky::after,
.weather-react-extreme .dir-sticky::after {
    background-image:
        radial-gradient(80% 120% at 82% 0%, rgba(255, 241, 173, 0.18), transparent 58%),
        repeating-linear-gradient(104deg, transparent 0 21px, rgba(51, 132, 177, 0.22) 22px 24px, transparent 25px 44px);
    animation: waHeaderStorm 5.6s linear infinite;
}

/* 09 雷暴：独立的云内闪光层，与雨幕错峰。 */
.weather-react-thunder .dir-sticky::before {
    background:
        radial-gradient(34% 82% at 76% 3%, rgba(255, 239, 168, 0.38), transparent 68%),
        linear-gradient(180deg, rgba(58, 80, 117, 0.12), transparent 78%);
    animation: waThunderGlow 7.2s steps(1, end) infinite;
}

.weather-react-fog .dir-sticky::after,
.weather-react-haze .dir-sticky::after {
    background:
        radial-gradient(44% 65% at 18% 64%, rgba(220, 239, 239, 0.46), transparent 72%),
        radial-gradient(48% 72% at 78% 34%, rgba(190, 220, 220, 0.32), transparent 76%);
    opacity: 0.68;
    animation: waHeaderFog 8s ease-in-out infinite;
}

/* 10 雪：顶部雪晶和霜边；主体雪粒仍在内容后缓慢落下。 */
.weather-react-snow .dir-sticky::before {
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.76) 0 1.5px, transparent 2px),
        radial-gradient(circle, rgba(150, 204, 224, 0.46) 0 1px, transparent 1.6px),
        linear-gradient(180deg, rgba(232, 247, 252, 0.28), transparent 54%);
    background-size: 44px 48px, 63px 58px, 100% 100%;
    background-position: 0 -16px, 20px -8px, 0 0;
    opacity: 0.72;
    animation: waHeaderSnow 10s linear infinite;
}

.weather-react-snow .dir-sticky::after {
    inset: auto 0 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(191, 229, 239, 0.62), transparent);
    opacity: 0.64;
    animation: waSnowEdge 5s ease-in-out infinite;
}

/* 11 风：风线只在独立背景层生成、运动和衰减，不再变换任何正文。 */
.weather-react-wind .dir-sticky::before {
    background:
        linear-gradient(174deg, transparent 33%, rgba(65, 168, 163, 0.16) 34%, transparent 35%),
        linear-gradient(178deg, transparent 58%, rgba(77, 139, 174, 0.13) 59%, transparent 60%);
    background-repeat: no-repeat;
    background-size: 58% 72%, 44% 54%;
    background-position: -72% 14%, -54% 72%;
    opacity: 0.78;
    animation: waHeaderWind 7.4s ease-in-out infinite;
}

.weather-react-haze .dir-sticky::after {
    background:
        radial-gradient(44% 65% at 18% 64%, rgba(231, 207, 165, 0.32), transparent 72%),
        radial-gradient(48% 72% at 78% 34%, rgba(213, 180, 136, 0.2), transparent 76%);
    opacity: 0.48;
}

.weather-react-wind .dir-greeting-text,
.weather-react-wind .dir-subtitle {
    animation: none;
    transform: none;
}

/* 12 强天气：斜向急雨、压低的环境光和边缘警示脉冲，不摇动内容。 */
.weather-react-extreme .dir-sticky::before {
    background:
        linear-gradient(165deg, rgba(44, 66, 104, 0.2), transparent 68%),
        radial-gradient(42% 120% at 100% 0%, rgba(255, 183, 112, 0.22), transparent 72%);
    opacity: 0.68;
    animation: waExtremePulse 5.2s ease-in-out infinite;
}

html[data-theme="dark"] .weather-react-drizzle .dir-sticky::after,
html[data-theme="dark"] .weather-react-rain .dir-sticky::after {
    opacity: 0.3;
}

html[data-theme="dark"] .weather-react-fog .dir-sticky::after {
    opacity: 0.34;
}

html[data-theme="dark"] .weather-react-clear .dir-sticky::before,
html[data-theme="dark"] .weather-react-partly .dir-sticky::before {
    opacity: 0.5;
}

html[data-theme="dark"] .weather-react-cloudy .dir-sticky::before,
html[data-theme="dark"] .weather-react-overcast .dir-sticky::before {
    opacity: 0.54;
}

html[data-theme="dark"] .weather-react-snow .dir-sticky::before {
    opacity: 0.48;
}

@keyframes waClearLight {
    0%, 12%, 100% { transform: translate3d(4px, -1px, 0) scale(0.96); opacity: 0; }
    26% { opacity: 0.5; }
    54% { transform: translate3d(-10px, 3px, 0) scale(1.035); opacity: 0.82; }
    76% { opacity: 0.22; }
    84% { opacity: 0; }
}

@keyframes waPartlyShadow {
    0%, 10%, 100% { transform: translate3d(-5%, 0, 0); opacity: 0; }
    24% { opacity: 0.42; }
    54% { transform: translate3d(3%, 2px, 0); opacity: 0.8; }
    78% { transform: translate3d(6%, 3px, 0); opacity: 0; }
}

@keyframes waCloudCeiling {
    0%, 12%, 100% { transform: translate3d(-5%, 1px, 0) scaleX(0.96); opacity: 0; }
    26% { opacity: 0.44; }
    56% { transform: translate3d(4%, -2px, 0) scaleX(1.06); opacity: 0.82; }
    80% { transform: translate3d(7%, -3px, 0) scaleX(1.1); opacity: 0; }
}

@keyframes waOvercastBreathe {
    0%, 14%, 100% { opacity: 0; }
    28% { opacity: 0.46; }
    56% { opacity: 0.82; }
    78% { opacity: 0.24; }
    86% { opacity: 0; }
}

@keyframes waHeaderRain {
    0%, 8%, 100% { background-position: 0 -48px; opacity: 0; }
    18% { opacity: 0.38; }
    72% { background-position: -15px 36px; opacity: 0.34; }
    84% { background-position: -18px 48px; opacity: 0; }
}

@keyframes waHeaderStorm {
    0%, 12%, 100% { background-position: 0 0, 0 -44px; opacity: 0; }
    24%, 68% { opacity: 0.34; }
    74% { background-position: 0 0, -12px 8px; opacity: 0.68; }
    78% { opacity: 0.2; }
    82% { background-position: 0 0, -22px 44px; opacity: 0.62; }
    90% { opacity: 0; }
}

@keyframes waRainSurface {
    0%, 12%, 100% { transform: scaleX(0.72); opacity: 0; }
    30% { opacity: 0.58; }
    70% { transform: scaleX(1.08); opacity: 0.3; }
    82% { transform: scaleX(1.16); opacity: 0; }
}

@keyframes waThunderGlow {
    0%, 72%, 76%, 82%, 100% { opacity: 0; }
    74%, 79% { opacity: 0.82; }
}

@keyframes waHeaderFog {
    0%, 14%, 100% { transform: translate3d(-14px, 0, 0) scaleX(0.96); opacity: 0; }
    28% { opacity: 0.34; }
    56% { transform: translate3d(10px, 3px, 0) scaleX(1.06); opacity: 0.7; }
    80% { transform: translate3d(16px, 4px, 0) scaleX(1.1); opacity: 0; }
}

@keyframes waHeaderSnow {
    0%, 10%, 100% { background-position: 0 -48px, 20px -58px, 0 0; opacity: 0; }
    22% { opacity: 0.5; }
    76% { background-position: 15px 34px, -2px 42px, 0 0; opacity: 0.62; }
    88% { background-position: 18px 48px, -6px 58px, 0 0; opacity: 0; }
}

@keyframes waSnowEdge {
    0%, 16%, 100% { transform: scaleX(0.58); opacity: 0; }
    34% { opacity: 0.28; }
    58% { transform: scaleX(1); opacity: 0.72; }
    78% { transform: scaleX(1.04); opacity: 0; }
}

@keyframes waHeaderWind {
    0%, 18%, 100% {
        background-position: -72% 14%, -54% 72%;
        opacity: 0;
    }
    30% { opacity: 0.24; }
    48% {
        background-position: 42% 8%, 30% 68%;
        opacity: 0.78;
    }
    68% {
        background-position: 156% 2%, 142% 62%;
        opacity: 0;
    }
}

@keyframes waExtremePulse {
    0%, 12%, 100% { opacity: 0; transform: scaleX(0.96); }
    26% { opacity: 0.38; }
    52% { opacity: 0.76; transform: scaleX(1.02); }
    74% { opacity: 0.24; transform: scaleX(1.04); }
    84% { opacity: 0; }
}

@media (max-width: 620px) {
    .dir-greeting {
        flex-wrap: wrap;
    }

    .wx-summary {
        max-width: calc(100vw - 92px);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .wa-orb {
        right: 8px;
        width: 58px;
        opacity: 0.6;
    }

    .wa-cloud {
        width: 150px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .weather-ambient,
    .weather-ambient *,
    .wx-icon,
    .wx-icon *,
    .dir-sticky::before,
    .dir-sticky::after,
    .weather-react-wind .dir-greeting-text,
    .weather-react-wind .dir-subtitle {
        animation: none !important;
        transition: none !important;
    }

    .weather-ambient.is-ready {
        opacity: 0.7;
    }
}

/* -------------------------------------------------------------------------
   Weather Motion V2 · 20260903i · /test only
   操作系统天气式分层：远景环境光、中景云雾、近景粒子。只驱动合成层属性，
   不参与目录排版和命中测试；系统“减少动态效果”下保留更慢、更淡的天气语义。
   ------------------------------------------------------------------------- */
.weather-ambient.weather-motion-v2 {
    transform: translateZ(0);
    backface-visibility: hidden;
    isolation: isolate;
}

.weather-motion-v2 .wa-aura,
.weather-motion-v2 .wa-orb,
.weather-motion-v2 .wa-cloud,
.weather-motion-v2 .wa-mist,
.weather-motion-v2 .wa-wind,
.weather-motion-v2 .wa-flash,
.weather-motion-v2 .wa-particles,
.weather-motion-v2 .wa-particles::before,
.weather-motion-v2 .wa-particles::after,
.weather-motion-v2 .wa-particles i {
    backface-visibility: hidden;
    will-change: transform, opacity;
    animation-play-state: running;
}

.weather-motion-v2 .wa-aura {
    animation: waAuraV2 8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* 20260903l 层互斥：orb/cloud/mist/wind 不再对所有天气无条件挂 V2 动画（其 keyframes
   直接驱动 opacity，会盖过按天气的静态 opacity:0 门控，造成雨天混入太阳/风/漂云）。
   先“默认关”覆盖这些元素基础规则自带的基础动画（特异性 (0,2,0) > 基础 (0,1,0)），
   再按天气白名单开——白名单与 3996-4105 静态门控语义一致；
   非白名单天气无动画且静态 opacity 为 0，天然隐藏，无需补 kill 规则。 */
.weather-motion-v2 .wa-orb,
.weather-motion-v2 .wa-cloud-a,
.weather-motion-v2 .wa-cloud-b,
.weather-motion-v2 .wa-mist-a,
.weather-motion-v2 .wa-mist-b,
.weather-motion-v2 .wa-wind-a,
.weather-motion-v2 .wa-wind-b {
    animation: none;
}

/* orb：仅晴 / 间晴 */
.weather-motion-v2.weather-clear .wa-orb,
.weather-motion-v2.weather-partly .wa-orb {
    animation: waOrbV2 11s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* 普通漂云：间晴 / 多云 / 阴 / 雷暴 / 极端（毛毛雨/雨不用普通漂云，改用 .wa-deck 暗云源） */
.weather-motion-v2.weather-partly .wa-cloud-a,
.weather-motion-v2.weather-cloudy .wa-cloud-a,
.weather-motion-v2.weather-overcast .wa-cloud-a,
.weather-motion-v2.weather-thunder .wa-cloud-a,
.weather-motion-v2.weather-extreme .wa-cloud-a {
    animation: waCloudAV2 20s linear infinite;
}

.weather-motion-v2.weather-cloudy .wa-cloud-b,
.weather-motion-v2.weather-overcast .wa-cloud-b,
.weather-motion-v2.weather-thunder .wa-cloud-b,
.weather-motion-v2.weather-extreme .wa-cloud-b {
    animation: waCloudBV2 27s linear infinite;
}

/* 雾带：仅雾 / 霾 */
.weather-motion-v2.weather-fog .wa-mist-a,
.weather-motion-v2.weather-haze .wa-mist-a {
    animation: waMistV2 11s ease-in-out infinite;
}

.weather-motion-v2.weather-fog .wa-mist-b,
.weather-motion-v2.weather-haze .wa-mist-b {
    animation: waMistV2 15s -7s ease-in-out infinite reverse;
}

/* 风线：仅风 */
.weather-motion-v2.weather-wind .wa-wind-a {
    animation: waWindV2 5.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.weather-motion-v2.weather-wind .wa-wind-b {
    animation: waWindV2 7.2s -3.1s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.weather-motion-v2.weather-drizzle .wa-particles,
.weather-motion-v2.weather-rain .wa-particles,
.weather-motion-v2.weather-thunder .wa-particles,
.weather-motion-v2.weather-snow .wa-particles,
.weather-motion-v2.weather-extreme .wa-particles {
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 1;
}

.weather-motion-v2.weather-drizzle .wa-particles::before,
.weather-motion-v2.weather-rain .wa-particles::before,
.weather-motion-v2.weather-thunder .wa-particles::before,
.weather-motion-v2.weather-extreme .wa-particles::before {
    content: "";
    position: absolute;
    inset: -24% -12%;
    background-image: repeating-linear-gradient(104deg, transparent 0 26px, rgba(69, 156, 190, 0.13) 27px 28px, transparent 29px 54px);
    background-size: 100% 72px;
    opacity: var(--wa-veil, 0.54);
    animation: waRainVeilV2 1.35s linear infinite;
}

.weather-motion-v2.weather-drizzle .wa-particles::before {
    opacity: var(--wa-veil, 0.28);
    animation-duration: 2.5s;
}

.weather-motion-v2.weather-drizzle .wa-particles i,
.weather-motion-v2.weather-rain .wa-particles i,
.weather-motion-v2.weather-thunder .wa-particles i,
.weather-motion-v2.weather-extreme .wa-particles i {
    left: var(--wx);
    top: -18px;
    width: 1.5px;
    height: var(--wlen);
    border-radius: 99px;
    background: linear-gradient(to bottom, transparent, rgba(57, 155, 194, 0.7));
    opacity: 0;
    transform: rotate(11deg) scale(var(--ws));
    animation: waRainImpactV2 var(--wdur) linear infinite;
    animation-delay: var(--wdelay);
}

.weather-motion-v2.weather-drizzle .wa-particles i {
    width: 1px;
    height: 14px;
    animation-duration: 2.45s;
    opacity: calc(var(--wo) * 0.72);
}

.weather-motion-v2.weather-thunder .wa-particles i,
.weather-motion-v2.weather-extreme .wa-particles i {
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(119, 197, 224, 0.78));
}

.weather-motion-v2.weather-thunder .wa-flash,
.weather-motion-v2.weather-extreme .wa-flash {
    animation: waLightningV2 6.8s linear infinite;
}

.weather-motion-v2.weather-snow .wa-particles::before {
    content: "";
    position: absolute;
    inset: -10% 0 0;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.45) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(160, 217, 232, 0.3) 0 1.3px, transparent 2px);
    background-size: 56px 64px, 83px 91px;
    opacity: 0.64;
    animation: waSnowFieldV2 15s linear infinite;
}

.weather-motion-v2.weather-snow .wa-particles i {
    left: var(--wx);
    top: -18px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(224, 247, 252, 0.82);
    box-shadow: 0 0 8px rgba(148, 210, 228, 0.24);
    opacity: 0;
    animation: waSnowV2 9.5s ease-in infinite;
    animation-delay: var(--wdelay);
}

.weather-motion-v2.weather-snow .wa-particles i:nth-child(3n) {
    animation-duration: 12.5s;
}

.weather-motion-v2.weather-snow .wa-particles i:nth-child(4n) {
    animation-duration: 15s;
}

.weather-motion-v2.weather-fog .wa-particles,
.weather-motion-v2.weather-haze .wa-particles {
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    overflow: hidden;
}

.weather-motion-v2.weather-fog .wa-particles::before,
.weather-motion-v2.weather-haze .wa-particles::before {
    content: "";
    position: absolute;
    inset: 8% -18%;
    background:
        radial-gradient(ellipse at 24% 42%, rgba(222, 240, 240, 0.26), transparent 34%),
        radial-gradient(ellipse at 74% 58%, rgba(187, 220, 220, 0.22), transparent 38%);
    opacity: 0.66;
    animation: waFogFieldV2 12s ease-in-out infinite;
}

.weather-motion-v2.weather-haze .wa-particles::before {
    background:
        radial-gradient(ellipse at 24% 42%, rgba(227, 198, 153, 0.2), transparent 34%),
        radial-gradient(ellipse at 74% 58%, rgba(199, 169, 128, 0.16), transparent 38%);
}

.weather-motion-v2.weather-fog .wa-particles i,
.weather-motion-v2.weather-haze .wa-particles i {
    left: -5vw;
    top: var(--wy);
    width: 9px;
    height: 9px;
    opacity: 0;
    animation: waFogMoteV2 14s ease-in-out infinite;
    animation-delay: var(--wdelay);
}

.weather-motion-v2.weather-fog .wa-particles i:nth-child(3n),
.weather-motion-v2.weather-haze .wa-particles i:nth-child(3n) {
    animation-duration: 18s;
}

.weather-motion-v2.weather-overcast .wa-aura {
    animation-duration: 6.8s;
}

.weather-motion-v2.weather-wind .wa-wind {
    opacity: 0.86;
}

.weather-motion-v2.weather-extreme .wa-aura {
    animation: waExtremeAtmosphereV2 4.8s ease-in-out infinite;
}

/* 目录顶部保留一层轻量天气反馈，正文、卡片和滚动容器不参与动画。 */
.weather-motion-v2.weather-react-clear .dir-sticky::before {
    animation: waClearV2 7.8s ease-in-out infinite;
}

.weather-motion-v2.weather-react-partly .dir-sticky::before,
.weather-motion-v2.weather-react-cloudy .dir-sticky::before {
    animation: waSkyDriftV2 12s ease-in-out infinite;
}

.weather-motion-v2.weather-react-overcast .dir-sticky::before {
    animation: waOvercastV2 7s ease-in-out infinite;
}

.weather-motion-v2.weather-react-drizzle .dir-sticky::after,
.weather-motion-v2.weather-react-rain .dir-sticky::after {
    animation: waHeaderRainV2 1.1s linear infinite;
}

.weather-motion-v2.weather-react-thunder .dir-sticky::after,
.weather-motion-v2.weather-react-extreme .dir-sticky::after {
    animation: waHeaderStormV2 4.9s linear infinite;
}

.weather-motion-v2.weather-react-fog .dir-sticky::after,
.weather-motion-v2.weather-react-haze .dir-sticky::after {
    animation: waHeaderFogV2 8s ease-in-out infinite;
}

.weather-motion-v2.weather-react-snow .dir-sticky::before {
    animation: waHeaderSnowV2 8.5s linear infinite;
}

.weather-motion-v2.weather-react-wind .dir-sticky::before {
    animation: waHeaderWindV2 5.8s ease-in-out infinite;
}

.weather-motion-v2.weather-react-extreme .dir-sticky::before {
    animation: waExtremeAtmosphereV2 4.8s ease-in-out infinite;
}

@keyframes waAuraV2 {
    0%, 100% { transform: translate3d(-0.5%, 0, 0) scale(0.99); opacity: 0.64; }
    48% { transform: translate3d(0.8%, -0.7%, 0) scale(1.035); opacity: 0.94; }
}

@keyframes waOrbV2 {
    0%, 100% { transform: translate3d(5px, -3px, 0) scale(0.96); opacity: 0.58; }
    50% { transform: translate3d(-10px, 7px, 0) scale(1.055); opacity: 0.82; }
}

@keyframes waCloudAV2 {
    0% { transform: translate3d(-16vw, 0, 0) scale(0.96); opacity: 0; }
    7%, 86% { opacity: 0.76; }
    100% { transform: translate3d(118vw, 12px, 0) scale(1.04); opacity: 0; }
}

@keyframes waCloudBV2 {
    0% { transform: translate3d(18vw, 0, 0) scale(0.68); opacity: 0; }
    8%, 88% { opacity: 0.56; }
    100% { transform: translate3d(-116vw, -10px, 0) scale(0.76); opacity: 0; }
}

@keyframes waMistV2 {
    0%, 100% { transform: translate3d(-3.5%, 0, 0) scaleX(0.92); opacity: 0.34; }
    50% { transform: translate3d(4%, 4px, 0) scaleX(1.08); opacity: 0.78; }
}

@keyframes waWindV2 {
    0% { transform: translate3d(-24vw, 7px, 0) scaleX(0.38); opacity: 0; }
    10%, 72% { opacity: 0.76; }
    100% { transform: translate3d(122vw, -18px, 0) scaleX(1.14); opacity: 0; }
}

/* 20260903l 雨滴触底：行程终点由 JS 实测的 --wa-fall-h（顶栏条带实际高度）决定，
   不再写死 band*1.3 穿出被裁。上段匀速下落、末段（78→88%）吃掉剩余高度——视觉上
   越近底沿越快；88% 落到底沿砸亮并 scaleY 压扁，100% 溅散熄灭。
   透明度经 --wa-drop-a（=--wo × 强度亮度系数）缩放，由尾新增强度接线计算。 */
@keyframes waRainImpactV2 {
    0% { transform: translate3d(4vw, -20px, 0) rotate(11deg) scale(var(--ws), 1); opacity: 0; }
    5% { opacity: var(--wa-drop-a, var(--wo)); }
    78% { transform: translate3d(-11vw, calc(var(--wa-fall-h, 150px) * 0.88), 0) rotate(11deg) scale(var(--ws), 1); opacity: var(--wa-drop-a, var(--wo)); }
    88% { transform: translate3d(-12vw, var(--wa-fall-h, 150px), 0) rotate(11deg) scale(calc(var(--ws) * 1.15), calc(var(--ws) * 0.55)); opacity: min(1, calc(var(--wa-drop-a, var(--wo)) + 0.25)); }
    100% { transform: translate3d(-12.5vw, calc(var(--wa-fall-h, 150px) + 2px), 0) rotate(11deg) scale(var(--ws), 0.6); opacity: 0; }
}

@keyframes waRainVeilV2 {
    from { transform: translate3d(3vw, -72px, 0); }
    to { transform: translate3d(-3vw, 72px, 0); }
}

@keyframes waSnowV2 {
    0% { transform: translate3d(0, -18px, 0) rotate(0deg) scale(var(--ws)); opacity: 0; }
    8%, 86% { opacity: var(--wo); }
    100% { transform: translate3d(var(--wd), calc(var(--wa-band-h, 190px) * 1.2 + 22px), 0) rotate(320deg) scale(var(--ws)); opacity: 0; }
}

@keyframes waSnowFieldV2 {
    from { transform: translate3d(0, -64px, 0); }
    to { transform: translate3d(-18px, 64px, 0); }
}

@keyframes waFogMoteV2 {
    0% { transform: translate3d(-8vw, 6px, 0) scale(0.7); opacity: 0; }
    9%, 86% { opacity: var(--wo); }
    100% { transform: translate3d(114vw, -8px, 0) scale(1.08); opacity: 0; }
}

@keyframes waFogFieldV2 {
    0%, 100% { transform: translate3d(-2%, 0, 0) scaleX(0.98); opacity: 0.44; }
    50% { transform: translate3d(3%, 4px, 0) scaleX(1.06); opacity: 0.76; }
}

@keyframes waLightningV2 {
    0%, 67%, 69%, 72%, 75%, 100% { opacity: 0; }
    68%, 73% { opacity: 0.9; }
    74% { opacity: 0.32; }
}

@keyframes waClearV2 {
    0%, 100% { transform: translate3d(4px, -1px, 0) scale(0.98); opacity: 0.56; }
    50% { transform: translate3d(-9px, 3px, 0) scale(1.035); opacity: 0.82; }
}

@keyframes waSkyDriftV2 {
    0%, 100% { transform: translate3d(-4%, 0, 0) scaleX(0.98); opacity: 0.46; }
    50% { transform: translate3d(5%, 2px, 0) scaleX(1.05); opacity: 0.78; }
}

@keyframes waOvercastV2 {
    0%, 100% { transform: translate3d(0, -1px, 0); opacity: 0.5; }
    50% { transform: translate3d(0, 3px, 0); opacity: 0.78; }
}

@keyframes waHeaderRainV2 {
    from { background-position: 8px -48px; opacity: 0.26; }
    to { background-position: -14px 48px; opacity: 0.44; }
}

@keyframes waHeaderStormV2 {
    0%, 100% { background-position: 0 0, 4px -44px; opacity: 0.28; }
    68% { background-position: 0 0, -12px 22px; opacity: 0.42; }
    70% { opacity: 0.78; }
    74% { opacity: 0.3; }
}

@keyframes waHeaderFogV2 {
    0%, 100% { transform: translate3d(-12px, 0, 0) scaleX(0.97); opacity: 0.42; }
    50% { transform: translate3d(14px, 3px, 0) scaleX(1.06); opacity: 0.72; }
}

@keyframes waHeaderSnowV2 {
    from { background-position: 0 -48px, 20px -58px, 0 0; opacity: 0.48; }
    to { background-position: 18px 48px, -6px 58px, 0 0; opacity: 0.72; }
}

@keyframes waHeaderWindV2 {
    0% { background-position: -72% 14%, -54% 72%; opacity: 0; }
    12%, 72% { opacity: 0.72; }
    100% { background-position: 156% 2%, 142% 62%; opacity: 0; }
}

@keyframes waExtremeAtmosphereV2 {
    0%, 100% { transform: scale(0.99); opacity: 0.5; }
    50% { transform: scale(1.025); opacity: 0.82; }
}

@media (max-width: 620px) {
    .weather-motion-v2 .wa-particles i:nth-child(3n) {
        display: none;
    }

    .weather-motion-v2.weather-rain .wa-particles::before,
    .weather-motion-v2.weather-thunder .wa-particles::before,
    .weather-motion-v2.weather-extreme .wa-particles::before {
        opacity: 0.38;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* 不完全冻结天气：保留低速度、低位移的气象语义，避免用户看到静态贴图。 */
    .weather-motion-v2 .wa-aura {
        animation: waAuraV2 18s ease-in-out infinite !important;
    }

    /* 20260903l：与 motion-v2 白名单同表收口。块1 已全 kill；此处只把白名单天气的
       对应远层挂回慢速——非白名单天气不在此列，块1 的 animation:none !important 对其
       仍是唯一生效，reduced 模式下不再泄漏太阳/云/风/雾。 */
    .weather-motion-v2.weather-clear .wa-orb,
    .weather-motion-v2.weather-partly .wa-orb {
        animation: waOrbV2 22s ease-in-out infinite !important;
    }

    .weather-motion-v2.weather-partly .wa-cloud-a,
    .weather-motion-v2.weather-cloudy .wa-cloud-a,
    .weather-motion-v2.weather-overcast .wa-cloud-a,
    .weather-motion-v2.weather-thunder .wa-cloud-a,
    .weather-motion-v2.weather-extreme .wa-cloud-a {
        animation: waCloudAV2 42s linear infinite !important;
    }

    .weather-motion-v2.weather-cloudy .wa-cloud-b,
    .weather-motion-v2.weather-overcast .wa-cloud-b,
    .weather-motion-v2.weather-thunder .wa-cloud-b,
    .weather-motion-v2.weather-extreme .wa-cloud-b {
        animation: waCloudBV2 54s linear infinite !important;
    }

    .weather-motion-v2.weather-fog .wa-mist-a,
    .weather-motion-v2.weather-haze .wa-mist-a,
    .weather-motion-v2.weather-fog .wa-mist-b,
    .weather-motion-v2.weather-haze .wa-mist-b {
        animation: waMistV2 24s ease-in-out infinite !important;
    }

    .weather-motion-v2.weather-wind .wa-wind-a,
    .weather-motion-v2.weather-wind .wa-wind-b {
        animation: waWindV2 13s ease-in-out infinite !important;
    }

    .weather-motion-v2.weather-drizzle .wa-particles i,
    .weather-motion-v2.weather-rain .wa-particles i,
    .weather-motion-v2.weather-thunder .wa-particles i,
    .weather-motion-v2.weather-extreme .wa-particles i {
        animation: waRainImpactV2 3.2s linear infinite !important;
        animation-delay: var(--wdelay) !important;
    }

    .weather-motion-v2.weather-snow .wa-particles i {
        animation: waSnowV2 18s ease-in infinite !important;
        animation-delay: var(--wdelay) !important;
    }

    .weather-motion-v2.weather-fog .wa-particles i,
    .weather-motion-v2.weather-haze .wa-particles i {
        animation: waFogMoteV2 28s ease-in-out infinite !important;
        animation-delay: var(--wdelay) !important;
    }

    .weather-motion-v2.weather-thunder .wa-flash,
    .weather-motion-v2.weather-extreme .wa-flash {
        animation: waLightningV2 12s linear infinite !important;
    }

    .weather-motion-v2.weather-extreme .wa-aura {
        animation: waExtremeAtmosphereV2 12s ease-in-out infinite !important;
    }

    .weather-motion-v2 .wa-particles::before {
        animation-duration: 5s !important;
        opacity: 0.22;
    }
}

/* =========================================================================
   20260903l · 雨族单层收敛 + 拟真雨（雨打顶栏底沿，按强度增强/减弱）
   1) 关掉 react 层的重复雨幕 / 旧底沿涟漪（ambient veil 与下方新溅层取而代之），
      消除“静止雨滴 + 太阳/风”杂陈的重复动画调用；
   2) .wa-deck 暗云源：雨从顶栏上沿的暗云下浮现，替代普通漂云；
   3) .wa-particles::after 溅层 + 底沿水线：雨滴触底溅起、汇成微亮水流；
   4) 强度接线：JS 在 #weather-ambient 写 data-wx-rain="1..5"（仅雨族 drizzle/rain/
      thunder/extreme），CSS 变量表在默认档（≈中雨3）上按档覆盖，无需改 keyframes；
   5) 第三个 prefers-reduced-motion 块：给 deck/溅层慢速保底（块1 的 .weather-ambient *
      animation:none 只作用于元素、不作用于伪元素，但会 kill 元素级 deck 动画）。
   ------------------------------------------------------------------------- */

/* 1) 收敛：dir-sticky::after 雨幕与 drizzle/rain 的 ::before 底沿涟漪不再绘制。
    thunder/extreme 的 ::before 闪光保留（deck 之下的前平面泛亮，与 ambient 互补）。 */
.weather-motion-v2.weather-react-drizzle .dir-sticky::after,
.weather-motion-v2.weather-react-rain .dir-sticky::after,
.weather-motion-v2.weather-react-thunder .dir-sticky::after,
.weather-motion-v2.weather-react-extreme .dir-sticky::after {
    background-image: none !important;
    opacity: 0 !important;
    animation: none !important;
}

.weather-motion-v2.weather-react-drizzle .dir-sticky::before,
.weather-motion-v2.weather-react-rain .dir-sticky::before {
    background-image: none !important;
    opacity: 0 !important;
    animation: none !important;
}

/* 2) 暗云源 .wa-deck：默认隐藏，仅雨族显示；底部 mask 羽化让雨滴从云下浮现。 */
.weather-ambient .wa-deck {
    position: absolute;
    left: -8%;
    right: -8%;
    top: calc(env(safe-area-inset-top, 0px) - 8px);
    height: clamp(58px, 11vh, 96px);
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: opacity 500ms ease;
    background:
        radial-gradient(120% 90% at 20% 20%, rgba(44, 58, 84, var(--wa-deck-con, 0.9)), transparent 60%),
        radial-gradient(140% 90% at 78% 12%, rgba(28, 40, 64, var(--wa-deck-con, 0.95)), transparent 62%),
        linear-gradient(180deg, rgba(16, 26, 46, var(--wa-deck-con, 0.85)), rgba(40, 52, 74, 0.55) 70%, transparent);
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
    mask-image: linear-gradient(180deg, #000 55%, transparent);
}

.weather-drizzle .wa-deck,
.weather-rain .wa-deck,
.weather-thunder .wa-deck,
.weather-extreme .wa-deck {
    opacity: 1;
}

.weather-motion-v2.weather-drizzle .wa-deck,
.weather-motion-v2.weather-rain .wa-deck,
.weather-motion-v2.weather-thunder .wa-deck,
.weather-motion-v2.weather-extreme .wa-deck {
    animation: waDeckDriftV2 34s ease-in-out infinite;
}

@keyframes waDeckDriftV2 {
    0%, 100% { transform: translate3d(-1.6%, 0, 0); opacity: 1; }
    50% { transform: translate3d(2.4%, 3px, 0); opacity: 0.88; }
}

.weather-motion-v2.weather-thunder .wa-deck,
.weather-motion-v2.weather-extreme .wa-deck {
    --wa-deck-con: 1;
    height: clamp(72px, 13vh, 116px);
}

.weather-motion-v2.weather-drizzle .wa-deck {
    --wa-deck-con: 0.6;
}

html[data-theme="dark"] .wa-deck,
.weather-ambient.is-night .wa-deck {
    filter: brightness(0.82) saturate(0.85);
}

/* 3) 底沿水线（static inset 阴影，位于条带底沿） + 溅层（.wa-particles::after 上跳回落） */
.weather-motion-v2.weather-drizzle .wa-particles,
.weather-motion-v2.weather-rain .wa-particles,
.weather-motion-v2.weather-thunder .wa-particles,
.weather-motion-v2.weather-extreme .wa-particles {
    box-shadow: inset 0 -2px 1px -1px rgba(120, 205, 224, calc(var(--wa-splash-a, 0.5) * 0.55));
}

.weather-motion-v2.weather-drizzle .wa-particles::after,
.weather-motion-v2.weather-rain .wa-particles::after,
.weather-motion-v2.weather-thunder .wa-particles::after,
.weather-motion-v2.weather-extreme .wa-particles::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: calc(var(--wa-splash-h, 10px) + 14px);
    pointer-events: none;
    background:
        radial-gradient(2.2px 3.4px at 9% 100%, rgba(205, 242, 250, 0.9), transparent 72%),
        radial-gradient(1.7px 2.4px at 27% 100%, rgba(200, 240, 248, 0.75), transparent 72%),
        radial-gradient(2.3px 3.4px at 45% 100%, rgba(205, 242, 250, 0.85), transparent 72%),
        radial-gradient(1.6px 2.2px at 62% 100%, rgba(200, 240, 248, 0.7), transparent 72%),
        radial-gradient(2.2px 3.2px at 78% 100%, rgba(205, 242, 250, 0.85), transparent 72%),
        radial-gradient(1.8px 2.6px at 91% 100%, rgba(200, 240, 248, 0.8), transparent 72%);
    background-repeat: no-repeat;
    background-position: 0 100%, 0 100%, 0 100%, 0 100%, 0 100%, 0 100%;
    opacity: 0;
    animation: waSplashFieldV2 calc(1.05s / var(--wa-speed, 1)) linear infinite;
}

@keyframes waSplashFieldV2 {
    0%, 100% { transform: translateY(0); opacity: 0; }
    10% { opacity: var(--wa-splash-a, 0.6); }
    26% { transform: translateY(calc(-1 * var(--wa-splash-h, 10px))); opacity: var(--wa-splash-a, 0.6); }
    46% { transform: translateY(calc(-0.25 * var(--wa-splash-h, 10px))); opacity: 0.5; }
    60% { transform: translateY(0); opacity: var(--wa-splash-a, 0.6); }
}

/* 4) 强度接线：默认档（中雨≈3、毛毛雨弱档），雨滴亮度/长度/节奏由变量缩放 */
.weather-ambient.weather-motion-v2.weather-rain,
.weather-ambient.weather-motion-v2.weather-thunder,
.weather-ambient.weather-motion-v2.weather-extreme {
    --wa-speed: 1;
    --wa-len-scale: 1;
    --wa-bright: 0.5;
    --wa-veil: 0.54;
    --wa-deck-con: 0.9;
    --wa-splash-a: 0.6;
    --wa-splash-h: 10px;
}

.weather-ambient.weather-motion-v2.weather-drizzle {
    --wa-speed: 0.5;
    --wa-len-scale: 0.75;
    --wa-bright: 0.34;
    --wa-veil: 0.28;
    --wa-deck-con: 0.6;
    --wa-splash-a: 0.32;
    --wa-splash-h: 6px;
}

.weather-ambient.weather-motion-v2.weather-rain .wa-particles i,
.weather-ambient.weather-motion-v2.weather-thunder .wa-particles i,
.weather-ambient.weather-motion-v2.weather-extreme .wa-particles i {
    --wa-drop-a: calc(var(--wo, 0.48) * var(--wa-bright, 0.5));
    height: calc(var(--wlen, 24px) * var(--wa-len-scale, 1));
    animation-duration: calc(var(--wdur, 1.4s) / var(--wa-speed, 1));
}

.weather-ambient.weather-motion-v2.weather-drizzle .wa-particles i {
    --wa-drop-a: calc(var(--wo, 0.34) * var(--wa-bright, 0.34));
    height: calc(14px * var(--wa-len-scale, 0.75));
    animation-duration: calc(var(--wdur, 2.45s) / var(--wa-speed, 0.5));
}

/* 小雨/毛毛雨更稀：在 2n 减半（18 颗）基础上 drizzle 再砍一档到 ~12 颗 */
.weather-ambient.weather-motion-v2.weather-drizzle .wa-particles i:nth-child(6n + 2),
.weather-ambient.weather-motion-v2.weather-drizzle .wa-particles i:nth-child(6n + 5) {
    display: none;
}

/* 档位覆盖（data-wx-rain 由 JS 写、仅雨族）：1/2 弱、3 基准、4/5 猛 */
.weather-ambient.weather-motion-v2.weather-rain[data-wx-rain="1"],
.weather-ambient.weather-motion-v2.weather-rain[data-wx-rain="2"] {
    --wa-speed: 0.78;
    --wa-len-scale: 0.85;
    --wa-bright: 0.36;
    --wa-veil: 0.3;
    --wa-splash-a: 0.34;
    --wa-splash-h: 6px;
}

.weather-ambient.weather-motion-v2.weather-rain[data-wx-rain="4"],
.weather-ambient.weather-motion-v2.weather-thunder[data-wx-rain="4"],
.weather-ambient.weather-motion-v2.weather-extreme[data-wx-rain="4"] {
    --wa-speed: 1.4;
    --wa-len-scale: 1.12;
    --wa-bright: 0.72;
    --wa-veil: 0.6;
    --wa-splash-a: 0.8;
    --wa-splash-h: 13px;
    --wa-deck-con: 1;
}

.weather-ambient.weather-motion-v2.weather-rain[data-wx-rain="5"],
.weather-ambient.weather-motion-v2.weather-thunder[data-wx-rain="5"],
.weather-ambient.weather-motion-v2.weather-extreme[data-wx-rain="5"] {
    --wa-speed: 1.8;
    --wa-len-scale: 1.25;
    --wa-bright: 0.9;
    --wa-veil: 0.72;
    --wa-splash-a: 1;
    --wa-splash-h: 16px;
    --wa-deck-con: 1;
}

/* 移动端：deck 收窄、veil 比例降 */
@media (max-width: 620px) {
    .weather-motion-v2.weather-drizzle .wa-particles::before,
    .weather-motion-v2.weather-rain .wa-particles::before,
    .weather-motion-v2.weather-thunder .wa-particles::before,
    .weather-motion-v2.weather-extreme .wa-particles::before {
        opacity: calc(var(--wa-veil, 0.54) * 0.7);
    }

    .wa-deck {
        height: clamp(44px, 8vh, 64px);
    }
}

/* 5) reduced-motion 慢速保底：deck 缓慢漂移、溅层保留慢速语义，不被冻成静态贴图 */
@media (prefers-reduced-motion: reduce) {
    .weather-motion-v2.weather-drizzle .wa-deck,
    .weather-motion-v2.weather-rain .wa-deck,
    .weather-motion-v2.weather-thunder .wa-deck,
    .weather-motion-v2.weather-extreme .wa-deck {
        animation: waDeckDriftV2 60s ease-in-out infinite !important;
    }

    .weather-motion-v2.weather-drizzle .wa-particles::after,
    .weather-motion-v2.weather-rain .wa-particles::after,
    .weather-motion-v2.weather-thunder .wa-particles::after,
    .weather-motion-v2.weather-extreme .wa-particles::after {
        animation: waSplashFieldV2 4.5s ease-out infinite !important;
        opacity: 0.55;
    }
}

/* ============================================================
   20260903o · 天气第三主题沉浸段（/test 灰度专属，data-immersive="weather"）
   引擎每帧把缓动后的 18 槽色板格式化为 6 个 CSS 变量写在 #directory-view 行内
   （--wx-c1/c2/c3 三渐变停 + --wx-ga/--wx-gb 双辉光 + --wx-vig 边角压暗）。
   本段 fallback 全部 = 今日像素：引擎首写前/离开天气态后页面与既有观感一致，
   无"深基座闪浅/浅基座闪深"窗口。渐变几何沿用深色页原双辉光位（88% -12% /
   -12% 112%），只换色源 → 同族观感、无版式位移。动效范围仍是顶部条带；
   此处仅色彩随天气呼吸（中档·玻璃吸入）。
   注意：浅族规则须排除 [data-theme="dark"]（天气态基座可自动翻转），
   深族另起一对，避免浅 fallback 压掉深基座。
   ============================================================ */

/* —— 底色双族：#directory-view（滚动容器背景不随内容滚动，永远垫底） —— */
html[data-immersive="weather"]:not([data-theme="dark"]) #directory-view {
    background:
        radial-gradient(120% 100% at 50% 40%, transparent 58%, rgba(4, 8, 24, var(--wx-vig, 0)) 100%),
        radial-gradient(900px 480px at 88% -12%, var(--wx-ga, rgba(255, 255, 255, 0)), transparent 60%),
        radial-gradient(760px 420px at -12% 112%, var(--wx-gb, rgba(255, 255, 255, 0)), transparent 60%),
        linear-gradient(160deg, var(--wx-c1, #f2f6f8) 0%, var(--wx-c2, #fbf6ec) 45%, var(--wx-c3, #eefaf9) 100%);
}

html[data-immersive="weather"][data-theme="dark"] #directory-view {
    background:
        radial-gradient(120% 100% at 50% 40%, transparent 58%, rgba(4, 8, 24, var(--wx-vig, 0)) 100%),
        radial-gradient(900px 480px at 88% -12%, var(--wx-ga, rgba(60, 200, 190, 0.12)), transparent 60%),
        radial-gradient(760px 420px at -12% 112%, var(--wx-gb, rgba(245, 220, 190, 0.08)), transparent 60%),
        linear-gradient(160deg, var(--wx-c1, #070B22) 0%, var(--wx-c2, #0A1230) 48%, var(--wx-c3, #071019) 100%);
}

/* —— 同双族给 .dir-sticky：吸顶条自身底色与下方 wash 连续，防边缘断层 —— */
html[data-immersive="weather"]:not([data-theme="dark"]) .dir-sticky {
    background:
        radial-gradient(120% 100% at 50% 40%, transparent 58%, rgba(4, 8, 24, var(--wx-vig, 0)) 100%),
        radial-gradient(900px 480px at 88% -12%, var(--wx-ga, rgba(255, 255, 255, 0)), transparent 60%),
        radial-gradient(760px 420px at -12% 112%, var(--wx-gb, rgba(255, 255, 255, 0)), transparent 60%),
        linear-gradient(160deg, var(--wx-c1, #f2f6f8) 0%, var(--wx-c2, #fbf6ec) 45%, var(--wx-c3, #eefaf9) 100%);
}

html[data-immersive="weather"][data-theme="dark"] .dir-sticky {
    background:
        radial-gradient(120% 100% at 50% 40%, transparent 58%, rgba(4, 8, 24, var(--wx-vig, 0)) 100%),
        radial-gradient(900px 480px at 88% -12%, var(--wx-ga, rgba(60, 200, 190, 0.12)), transparent 60%),
        radial-gradient(760px 420px at -12% 112%, var(--wx-gb, rgba(245, 220, 190, 0.08)), transparent 60%),
        linear-gradient(160deg, var(--wx-c1, #070B22) 0%, var(--wx-c2, #0A1230) 48%, var(--wx-c3, #071019) 100%);
}

/* —— 玻璃吸入（中档）：卡片更透、天气底色渗入，文字仍压在中性基座上 —— */
html[data-immersive="weather"]:not([data-theme="dark"]) .dir-card {
    border-color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.62);
}

html[data-immersive="weather"]:not([data-theme="dark"]) .dir-card:hover {
    background: rgba(255, 255, 255, 0.72);
}

html[data-immersive="weather"]:not([data-theme="dark"]) .dir-empty {
    background: rgba(255, 255, 255, 0.5);
}

html[data-immersive="weather"][data-theme="dark"] .dir-card {
    border-color: rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.045);
}

html[data-immersive="weather"][data-theme="dark"] .dir-card:hover {
    border-color: rgba(60, 200, 190, 0.5);
    background: rgba(60, 200, 190, 0.11);
}

html[data-immersive="weather"][data-theme="dark"] .dir-empty {
    background: rgba(255, 255, 255, 0.025);
}

/* —— 主题切换钮三态图标：默认太阳；深色显月；天气态显云 —— */
.theme-icon-wx {
    display: none;
}

html[data-immersive="weather"] .theme-toggle .theme-icon-sun,
html[data-immersive="weather"] .theme-toggle .theme-icon-moon {
    display: none;
}

html[data-immersive="weather"] .theme-toggle .theme-icon-wx {
    display: block;
}

/* —— 自动基座翻转文字交叉淡化：仅天气态注册/过渡（生产从不带 data-immersive，
   规则与 @property 均不生效，深浅切换保持既有瞬时行为）——
   若飞书 WebView 掉帧，整段删除即可（wash 已在翻转瞬间快照对齐，删后瞬时翻转也协调）。 */
@property --ink {
    syntax: "<color>";
    inherits: true;
    initial-value: #000028;
}

@property --text-2 {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(0, 0, 40, 0.55);
}

@property --text-3 {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(0, 0, 40, 0.35);
}

html[data-immersive="weather"] {
    transition: --ink 0.7s ease, --text-2 0.7s ease, --text-3 0.7s ease;
}

/* ============================================================
   20260904a · 天气沉浸连续对比度消费段（/test 灰度专属）
   o 版用"data-theme 自动翻转 + @property 交叉淡化"实现沉浸文字双态；本版基座翻转已废弃
   （引擎按天气每帧推导连续暗度 darkA，色彩连续自适应，见 weather-canvas.js 头注）。
   引擎把 33 槽缓动色板直写为 CSS 变量：底色 6（--wx-c1/c2/c3/ga/gb/vig，o 已消费）+
   内容 8（--wx-ink/--wx-brand/--wx-text2/--wx-text3/--wx-line/--wx-card/--wx-pill/
   --wx-pillText）+ <html data-wx-polar=light|dark>。本段把内容变量接到页面元素上。
   约束：
   · 一律前缀 html[data-immersive="weather"] → 深/浅模式（无 immersive）完全不受影响，
     天气摘药丸等走族值照旧；
   · fallback = 各基座族值 / o 沉浸像素 → 引擎首写前与进入天气前逐像素一致，无闪窗；
   · 引擎变量缺席（天气数据未到 / 画布未挂）时靠基座 fallback 别名取当前基座观感。
   ============================================================ */

/* —— 基座 fallback 别名：深/浅族各一份（引擎变量缺席时页面 = 当前基座观感） —— */
:root {
    --wx-ink-base: #000028;
    --wx-text2-base: rgba(0, 0, 40, 0.55);
    --wx-text3-base: rgba(0, 0, 40, 0.35);
    --wx-brand-base: #3CC8BE;
    --wx-card-base: rgba(255, 255, 255, 0.62);
    --wx-line-base: rgba(255, 255, 255, 0.65);
    --wx-pill-base: rgba(255, 255, 255, 0.54);
    --wx-pillT-base: #39706D;
}
html[data-theme="dark"] {
    --wx-ink-base: #ECECF0;
    --wx-text2-base: rgba(236, 236, 240, 0.62);
    --wx-text3-base: rgba(236, 236, 240, 0.38);
    --wx-brand-base: #8FE3DC;
    --wx-card-base: rgba(255, 255, 255, 0.045);
    --wx-line-base: rgba(255, 255, 255, 0.06);
    --wx-pill-base: rgba(255, 255, 255, 0.055);
    --wx-pillT-base: rgba(205, 244, 240, 0.76);
}

/* —— 家族文字令牌接管：所有 var(--ink/--text-2/--text-3) 消费点随引擎连续（含深浅族）——
   关闭 o 段的 @property 交叉淡化（引擎已在帧级缓动内容变量，避免二次缓动拖尾）。 */
html[data-immersive="weather"] {
    transition: none;
    --ink: var(--wx-ink, var(--wx-ink-base));
    --text-2: var(--wx-text2, var(--wx-text2-base));
    --text-3: var(--wx-text3, var(--wx-text3-base));
}

/* —— 标题渐变：首停随内容墨色、第二停随强调青（昼夜连续；替代 navy→teal / teal→teal 二值坍缩）。
   20260904d：头部文字走引擎保证的 head 独立载荷（--wx-head*，见下"头部令牌分流"注释）。
   卡内文字仍走 wx-ink/wx-brand/wx-text2（引擎按卡片玻璃底保证）—— .dir-title 落在吸顶条裸
   wash 上，故取 headLow/headBrand（条带中下段 bgLow 锚）；引擎 head 缺席时 fallback = 现族值。 —— */
html[data-immersive="weather"] .dir-title {
    background: linear-gradient(90deg, var(--wx-headLow, var(--wx-ink, var(--wx-ink-base))), var(--wx-headBrand, var(--wx-brand, var(--wx-brand-base))));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 工作区名称栏强调 → headBrand（bgLow 锚，与标题二停同源） */
html[data-immersive="weather"] .dir-workspace-bar {
    color: var(--wx-headBrand, var(--wx-brand, var(--wx-brand-base)));
}

/* —— 20260904d · .dir-sticky 头部文字独立令牌分流 ——
   头部文本无卡片、直压吸顶条自身 wash 渐变（≈ 条带 c1→c2 段）；卡内文字垫 --wx-card 白玻璃
   （浅 .62/深 .045）。同一套 --wx-ink/--wx-text2/--wx-text3 无法同时服务"裸 wash 顶"与"玻璃卡"
   两种实际底 —— 这正是傍晚/黄昏文字失效的根因。引擎每发射期按两条锚独立闭环并发射：
     headTop/bgTop = 条带顶部天光（c1）→ 欢迎语(文本原属 text2)/部门(text3)/天气图标(3:1)；
     headLow/bgLow = 条带中下段 c1→c2 行程 → 标题/副标题/工作区。
   傍晚顶部天光先暗 → 头部上段行先翻浅、下段仍亮处保持深字 = 用户确认的混合极。 —— */
html[data-immersive="weather"] .dir-greeting {
    color: var(--wx-headTopG, var(--wx-text2, var(--wx-text2-base)));
}
html[data-immersive="weather"] .dir-dept {
    color: var(--wx-headTopA, var(--wx-text3, var(--wx-text3-base)));
}
html[data-immersive="weather"] .wx-icon {
    color: var(--wx-headIcon, var(--wx-brand, var(--wx-brand-base)));
}
html[data-immersive="weather"] .dir-subtitle {
    color: var(--wx-headLowA, var(--wx-text2, var(--wx-text2-base)));
}

/* —— 卡片玻璃/边框：极性键接管（data-theme 已不翻转，派生明暗由 data-wx-polar 表达）——
   data-theme=深 & polar=明 等跨基座组合也能命中正确一极（引擎同帧写 polar 与 wx 变量）。 */
html[data-immersive="weather"][data-wx-polar="light"] .dir-card {
    border-color: var(--wx-line, rgba(255, 255, 255, 0.65));
    background: var(--wx-card, rgba(255, 255, 255, 0.62));
}
html[data-immersive="weather"][data-wx-polar="dark"] .dir-card {
    border-color: var(--wx-line, rgba(255, 255, 255, 0.06));
    background: var(--wx-card, rgba(255, 255, 255, 0.045));
}
html[data-immersive="weather"][data-wx-polar="light"] .dir-card:hover {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(255, 255, 255, 0.85);
}
html[data-immersive="weather"][data-wx-polar="dark"] .dir-card:hover {
    background: rgba(60, 200, 190, 0.11);
    border-color: rgba(60, 200, 190, 0.5);
}

/* 空态提示 */
html[data-immersive="weather"][data-wx-polar="light"] .dir-empty {
    background: var(--wx-card, rgba(255, 255, 255, 0.5));
    border-color: transparent;
}
html[data-immersive="weather"][data-wx-polar="dark"] .dir-empty {
    background: var(--wx-card, rgba(255, 255, 255, 0.025));
    border-color: rgba(255, 255, 255, 0.06);
}

/* 卡片图标瓦：明 = brand→ink 渐变白标；暗 = 玻璃青（延续深色族观感） */
html[data-immersive="weather"][data-wx-polar="light"] .dir-card-icon {
    background: linear-gradient(135deg, var(--wx-brand, var(--wx-brand-base)), var(--wx-ink, var(--wx-ink-base)));
    color: #ffffff;
    box-shadow: none;
}
html[data-immersive="weather"][data-wx-polar="dark"] .dir-card-icon {
    background: rgba(60, 200, 190, 0.14);
    color: var(--wx-brand, var(--wx-brand-base));
    box-shadow: inset 0 0 0 1px rgba(60, 200, 190, 0.2);
}

/* 主题切换钮玻璃随光 */
html[data-immersive="weather"] .theme-toggle {
    border-color: var(--wx-line, var(--wx-line-base));
    background: var(--wx-card, var(--wx-card-base));
    color: var(--wx-ink, var(--wx-ink-base));
}

/* 目录页脚玻璃（首停随卡片玻璃，末停弱化叠底） */
html[data-immersive="weather"][data-wx-polar="light"] .dir-footer {
    border-color: var(--wx-line, rgba(255, 255, 255, 0.65));
    background: linear-gradient(160deg, var(--wx-card, rgba(255, 255, 255, 0.72)), rgba(236, 236, 240, 0.42));
}
html[data-immersive="weather"][data-wx-polar="dark"] .dir-footer {
    border-color: var(--wx-line, rgba(255, 255, 255, 0.06));
    background: linear-gradient(160deg, var(--wx-card, rgba(255, 255, 255, 0.045)), rgba(10, 15, 35, 0.4));
}

/* 摘要药丸：沉浸下玻璃/文字随光（深/浅模式无 immersive 前缀 → 仍走族值，不受影响） */
html[data-immersive="weather"] .wx-summary {
    background: var(--wx-pill, var(--wx-pill-base));
    color: var(--wx-pillText, var(--wx-pillT-base));
}

/* —— 20260904e · 目录列表文字接线：家族接管移到真源元素（CSS 自定义属性作用域根因修复）——
   引擎把活值 --wx-* 内联写在 #directory-view（wash 回调同帧写该元素 style，见 report-app.js
   wxWashHandler），而家族接管此前声明在 <html>：CSS 规定自定义属性声明内的 var() 在"声明该自定义
   属性的元素"上解析，<html> 永远看不到后代的 --wx-ink → 列表文字冻结基座别名（light=#000028 静态
   近黑 → 夜间玻璃转暗后文字仍深字压暗 = 用户所见"列表文字还没改"）。把同一接管改在 #directory-view
   上声明：与 --wx-* 同元素解析 → 卡名(.dir-card color:var(--ink))/meta(.dir-card-meta)/chevron/
   空态(.dir-empty)/页脚 .brand-sep 等全部后代消费点一并随引擎实时连续，无需逐点枚举。
   <html> 层接管保留作 view 外消费点兜底。 */
html[data-immersive="weather"] #directory-view {
    --ink: var(--wx-ink, var(--wx-ink-base));
    --text-2: var(--wx-text2, var(--wx-text2-base));
    --text-3: var(--wx-text3, var(--wx-text3-base));
}

/* —— 20260904e · 页脚品牌常量接线（.brand-* 非族令牌、scenes.css 常量冻结，须各自路由）——
   .brand-version 恒 --navy / .brand-powered 恒 teal-sand 渐变文字：night 深玻璃底下不可读。
   base 规则仍服务 admin/登录页（无 immersive 前缀不受影响）。brand-sep 走 --text-3，Tier-1
   已自动接活；这里再给足不透明度（叠 opacity:.5 会二次稀释引擎抬升的 α）。 */
html[data-immersive="weather"] .dir-footer .brand-version {
    color: var(--wx-ink, var(--wx-ink-base));
}
html[data-immersive="weather"] .dir-footer .brand-sep {
    color: var(--wx-text2, var(--wx-text2-base));
    opacity: 0.9;
}
/* night（dark 极）：品牌行文字换活令牌渐变（仅换 background-image，保留 200% 尺寸/shimmer 动画）；
   light 极保留 scenes.css 原 teal/sand shimmer 常量观感（日间玻璃亮、装饰渐变既有设计）。 */
html[data-immersive="weather"][data-wx-polar="dark"] .dir-footer .brand-powered {
    background-image: linear-gradient(90deg, var(--wx-brand, var(--wx-brand-base)), var(--wx-pillText, var(--wx-pillT-base)), var(--wx-brand, var(--wx-brand-base)));
}

/* —— 20260904e · .dir-badge.new 极性安全底 ——
   半透 teal-soft 底（rgba 60,200,190,.18）叠暗玻璃 → 文字 #0b7f77(L~.166) 仅 ~1.1 失效。
   light 极：近不透明白底保 #0b7f77 ≥4.5（白 1.0 → 4.86）；dark 极：不透明白字底，文字走 night
   亮青 wx-brand（L~.666）→ ≥6.4（覆盖暖霞抬卡边值 .19-.25）。base（无 immersive）观感不变。 */
html[data-immersive="weather"][data-wx-polar="light"] .dir-badge.new {
    background: rgba(255, 255, 255, 0.95);
    color: #0b7f77;
}
html[data-immersive="weather"][data-wx-polar="dark"] .dir-badge.new {
    background: rgba(8, 40, 38, 0.85);
    color: var(--wx-brand, var(--wx-brand-base));
}

/* 20260905p · /test sky-to-directory transition.
   Fade the header's own sky into the continuous directory wash underneath.
   Only decorative layers are masked: text, hit targets and sticky geometry stay intact.
   The shared mask keeps precipitation inside the original canvas bounds. */
html[data-immersive="weather"] .dir-sticky {
    --wx-seam-depth: clamp(64px, 9vh, 104px);
    --wx-seam-mask: linear-gradient(to bottom,
        #000 0%, #000 calc(100% - var(--wx-seam-depth)),
        rgba(0, 0, 0, 0.90) calc(100% - var(--wx-seam-depth) * 0.75),
        rgba(0, 0, 0, 0.50) calc(100% - var(--wx-seam-depth) * 0.45),
        rgba(0, 0, 0, 0.12) calc(100% - var(--wx-seam-depth) * 0.18),
        transparent 100%);
    background: transparent;
}
html[data-immersive="weather"] .dir-sticky::before {
    opacity: 1;
    animation: none;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    background:
        radial-gradient(120% 100% at 50% 40%, transparent 58%, rgba(4, 8, 24, var(--wx-vig, 0)) 100%),
        radial-gradient(900px 480px at 88% -12%, var(--wx-ga, transparent), transparent 60%),
        radial-gradient(760px 420px at -12% 112%, var(--wx-gb, transparent), transparent 60%),
        linear-gradient(160deg, var(--wx-c1, #f2f6f8) 0%, var(--wx-c2, #fbf6ec) 45%, var(--wx-c3, #eefaf9) 100%);
    -webkit-mask-image: var(--wx-seam-mask);
    mask-image: var(--wx-seam-mask);
}
html[data-immersive="weather"][data-theme="dark"] .dir-sticky::before {
    background:
        radial-gradient(120% 100% at 50% 40%, transparent 58%, rgba(4, 8, 24, var(--wx-vig, 0)) 100%),
        radial-gradient(900px 480px at 88% -12%, var(--wx-ga, rgba(60, 200, 190, 0.12)), transparent 60%),
        radial-gradient(760px 420px at -12% 112%, var(--wx-gb, rgba(245, 220, 190, 0.08)), transparent 60%),
        linear-gradient(160deg, var(--wx-c1, #070B22) 0%, var(--wx-c2, #0A1230) 48%, var(--wx-c3, #071019) 100%);
}
html[data-immersive="weather"] .dir-sticky > .weather-ambient {
    -webkit-mask-image: var(--wx-seam-mask);
    mask-image: var(--wx-seam-mask);
}

/* 20260905u production: accepted scrollport below the entire header.
   No opaque sky overlay; overflow clips content/hit targets on the compositor.
   Header height follows its content, wrapping and the runtime safe area. */
body #directory-view.wx-scroll-split {
    display: flex;
    flex-direction: column;
    /* Do not let the legacy 100vh minimum defeat 100dvh in mobile browsers. */
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0;
}
html[data-immersive="weather"] body #directory-view.wx-scroll-split > .dir-sticky {
    flex: 0 0 auto;
    background: transparent;
}
html[data-immersive="weather"] body #directory-view.wx-scroll-split > .dir-sticky::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body #directory-view.wx-scroll-split > .wx-directory-scroll {
    flex: 1 1 0%;
    min-height: 0;
    min-width: 0;
    margin: 0 -16px;
    padding: 0 16px calc(48px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
    /* Clip beyond the scrollport even during accelerated momentum scrolling. */
    clip-path: inset(0);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 24px);
}
.wx-directory-scroll > .dir-group,
.wx-directory-scroll > .dir-footer,
.wx-directory-scroll > .dir-empty {
    position: relative;
    z-index: 1;
}