/* 烟花网盘 - 全局样式（由 index.php 内联 <style> 抽出，2026-11-10）
   以后改样式只替换本文件，并把 index.php 里 style.css?v= 的版本号 +1 即可 */


:root{--primary-color:#1296DB;--gradient-color:linear-gradient(90deg,#00C6FF 0%,#0072FF 100%);--bg-color:#F6F6F6;--card-bg:#FFFFFF;--text-main:#333333;--text-sub:#888888;--border-color:#EBEBEB;--danger-color:#FF4D4F;--status-bar-height:0px}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html,body{max-width:100%;touch-action:pan-y;overscroll-behavior-x:none;overflow-x:clip}
/* 根画布显式底色：html 透明时 WebView 会透出自己的白色，切换窗口/重绘就白闪 */
html{background-color:var(--bg-color);color-scheme:light}
html.dark{color-scheme:dark}
body{font-family:-apple-system,BlinkMacSystemFont,sans-serif;background-color:var(--bg-color);color:var(--text-main);padding-bottom:80px;padding-top:var(--status-bar-height);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;overscroll-behavior-y:none;width:100%}
input,textarea{-webkit-user-select:auto!important;user-select:auto!important}

.batch-top-bar{position:fixed;top:calc(-100px - var(--status-bar-height));left:0;right:0;height:calc(60px + var(--status-bar-height));background:var(--card-bg);display:flex;align-items:center;justify-content:space-between;padding:0 16px;padding-top:var(--status-bar-height);z-index:300;transition:top .3s;border-bottom:1px solid var(--border-color)}.batch-top-bar.show{top:0}.batch-top-btn{cursor:pointer;font-weight:bold;padding:8px}.cancel{color:var(--danger-color)}.select-all{color:var(--primary-color)}
.batch-bottom-bar{position:fixed;bottom:-80px;left:0;right:0;height:70px;background:var(--card-bg);box-shadow:none !important;display:flex;align-items:center;justify-content:space-around;z-index:300;transition:bottom .3s;border-radius:20px 20px 0 0}.batch-bottom-bar.show{bottom:0}.batch-action{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;cursor:pointer}.batch-action svg{width:24px;height:24px;stroke:#111;stroke-width:2;fill:none}

.header-card{background:var(--card-bg);margin:16px 16px 8px;padding: 16px 20px 12px;border-radius:16px;box-shadow:0 8px 22px rgba(17,24,39,0.07),0 2px 6px rgba(17,24,39,0.04)}
.capacity-info{display:flex;justify-content:space-between;margin-bottom:12px}
.capacity-info-title{font-weight:800;font-size:16px}
.capacity-info-percent{background:#E1F0FF;color:var(--primary-color);padding:2px 6px;border-radius:6px;font-size:13px;font-weight:bold}
.capacity-info-right{font-size:15px;font-family:monospace}
.progress-bar-bg{height:8px;background:#E5E9F2;border-radius:4px;overflow:hidden}
.progress-bar-fill{height:100%;background:var(--gradient-color);width:0;border-radius:4px;transition:width .5s}

.breadcrumb-bar {
    display: none; align-items: center; padding: 12px 16px; 
    margin: 0 16px 8px; background: rgba(255,255,255,0.98);
    border-radius: 12px; position: sticky; top: var(--status-bar-height); 
    z-index: 990; overflow: visible; white-space: nowrap; 
    transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s; 
    box-sizing: border-box; border-bottom: 1px solid transparent;
    box-shadow: 0 4px 14px rgba(17,24,39,0.05);
}
/* 面包屑内层滚动区：只有它滚动；右侧上传箭头是它的兄弟节点，固定在栏最右边，
   不跟目录名移动，也不会盖住目录名（滚动区宽度已扣掉箭头占位） */
.breadcrumb-bar .bc-scroll { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.breadcrumb-bar .bc-scroll::-webkit-scrollbar { display: none; }
.breadcrumb-bar.is-pinned {
    margin-left: 0 !important; margin-right: 0 !important; border-radius: 0 !important; 
    width: 100% !important; background: rgba(255,255,255,0.98); border-bottom-color: var(--border-color);
    box-shadow: 0 4px 12px rgba(17,24,39,0.08);
}
body.batch-active .breadcrumb-bar { z-index: 200 !important; pointer-events: none; }
.breadcrumb-item{color:#999;font-size:15px;cursor:pointer;font-weight:500}.breadcrumb-item.active{color:#111;font-weight:bold;pointer-events:none}.breadcrumb-separator{color:#ccc;margin:0 8px;font-size:12px}

.toolbar{display:flex;justify-content:space-between;padding:0 16px 8px;gap:12px}.sort-btn,.icon-btn{background:var(--card-bg);border-radius:8px;box-shadow:0 2px 8px rgba(17,24,39,0.06);cursor:pointer;display:flex;align-items:center;justify-content:center}
.sort-btn{padding:0 12px;height:36px;font-size:14px;box-sizing:border-box} 
.icon-btn{width:36px;height:36px;border-radius:50%}

/* ===== 文件列表（2026-11-12 调整：取消白色卡片，恢复原来的通栏宽度） =====
   列表不再套白底卡片，宽度和以前一致；保留每行底部内缩分割线；
   文件名最多显示 3 行（设置中心可改为 1 行）；图标 40×40 浅底圆角 + 30px 图标（与改造前视觉尺寸一致） */
.file-list{margin:8px 0 16px;padding:0 4px}
.file-item{position:relative;display:flex;align-items:center;padding:11px 4px;margin:0;overflow:hidden;transition:background .15s ease}
.file-item::after{content:'';position:absolute;left:52px;right:4px;bottom:0;height:1px;background:var(--border-color);opacity:.65}
.file-item:last-child::after{display:none}
.file-item.removing{opacity:0;transform:scale(0.95) translateX(20px);max-height:0!important;padding:0!important;margin:0!important;transition:.3s}
.file-item:active{background:rgba(18,150,219,0.06);border-radius:12px}
.file-icon{width:40px;height:40px;border-radius:12px;background:#F4F6FA;display:flex;align-items:center;justify-content:center;margin:0 8px 0 0;flex-shrink:0;overflow:hidden}
.file-icon img{width:30px;height:30px;object-fit:contain}
.file-info{flex:1;min-width:0;overflow:hidden}
.file-name{font-size:14px;font-weight:500;color:var(--text-main);margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-all;line-height:1.35}
/* 设置中心「缩略文件名」开启后：只显示一行 */
html.name-compact .file-name{-webkit-line-clamp:1}
/* 文件夹名称比文件名称粗一档，方便一眼区分 */
.file-item.is-folder .file-name{font-weight:600}
.badge-pinned,.badge-new{font-size:10px;padding:2px 6px;border-radius:4px;font-weight:bold;margin-left:6px}.badge-pinned{background:#FFF4E6;color:#C3690B}.badge-new{background:#FFECE8;color:var(--danger-color)}
.size-badge{font-size:11px;background:#F1F4F9;color:#6B7280;padding:2px 6px;border-radius:5px;font-family:monospace}
.count-badge{font-size:11px;background:#F1F4F9;color:#6B7280;padding:2px 6px;border-radius:5px;font-family:monospace}
.file-meta{font-size:12px;color:var(--text-sub);display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;line-height:1.4}
.file-action{width:40px;height:38px;display:flex;justify-content:flex-end;align-items:center;cursor:pointer;color:#C4C9D2;flex-shrink:0}
/* 多选勾选框：原边框用 var(--border-color)（#EBEBEB）在白底上几乎看不见，
   改成和右侧三点图标一致的灰，深色模式再单独调亮 */
.checkbox{width:22px;height:22px;flex-shrink:0;border:2px solid #C4C9D2;border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:none}.checkbox.checked{background:var(--primary-color);border-color:var(--primary-color)}.checkbox.checked::after{content:'';width:10px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);margin-top:-2px}
html.dark .checkbox{border-color:#5A6270}

.fab-btn{position:fixed;bottom:24px;right:24px;width:56px;height:56px;background:var(--gradient-color);border-radius:50%;display:flex;justify-content:center;align-items:center;color:#fff;font-size:32px;box-shadow:0 8px 20px rgba(18,150,219,0.30),0 2px 6px rgba(18,150,219,0.18);z-index:995}
/* 🌟 电脑端适配：body 被限宽 720px 居中，但 position:fixed 相对的是视口，
   所以 + 按钮跑到了浏览器窗口右下角。这里把它拉回网盘页面（720px 容器）的右下角：
   容器右缘在 50%+360px，按钮宽56 + 右内边距24 → right = 50% - 336px。
   拖拽后由 JS 写入的 inline left 会覆盖 right（左+宽+右同时指定时浏览器忽略 right），拖拽不受影响。 */
@media screen and (min-width: 768px) and (hover: hover) and (pointer: fine){
    .fab-btn{right:calc(50% - 336px) !important}
    /* body 提升优先级：必须排在基础规则(280行)之前也能生效；不加 !important，
       让 JS 动态避让写入的 inline right 能覆盖它（防遮挡用） */
    body .back-top-btn{right:calc(50% - 336px)}
}
/* 🌟 回到顶部按钮：目录栏吸顶（back-bar.is-pinned）时淡入、回到顶部自动淡出。
   半透明毛玻璃圆底，位置放在右下角 FAB 悬浮按钮正上方（24+56+16=96px），不与 FAB 打架。
   z-index 994：低于遮罩(1000)/弹窗(1005)，弹层打开时自动被盖住，无需额外处理 */
.back-top-btn{position:fixed;right:24px;bottom:96px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.75);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 14px rgba(0,0,0,0.14);display:flex;align-items:center;justify-content:center;color:#555;z-index:994;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s ease, transform .25s ease, visibility .25s ease;pointer-events:none;cursor:pointer}
.back-top-btn.show{opacity:0.9;visibility:visible;transform:translateY(0);pointer-events:auto}
.back-top-btn:active{transform:scale(0.9);transition:transform .08s ease}
@keyframes spin{100%{transform:rotate(360deg)}}.spinner{display:inline-block;width:18px;height:18px;border:2.5px solid #E5E9F2;border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.loading-wrap{display:flex;align-items:center;justify-content:center;gap:8px;padding:40px 0;color:var(--text-sub);font-size:14px}.bottom-loading{padding:20px 0;border-top:1px solid var(--border-color)}

.context-menu{position:fixed;background:var(--card-bg);border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,0.15);padding:8px 0;z-index:1010;display:none;opacity:0;transform:scale(0.8);transition:opacity 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);transform-origin:top right;max-height:calc(100vh - 20px);max-width:calc(100vw - 20px);overflow-y:auto;overscroll-behavior:contain}.context-menu.show{display:block;opacity:1;transform:scale(1)}
.context-item{padding:12px 20px;display:flex;align-items:center;gap:12px;font-size:15px;cursor:pointer}.context-item svg{width:18px;height:18px;stroke:#111;stroke-width:2;fill:none}.context-item.danger{color:var(--danger-color)}.context-item.danger svg{stroke:var(--danger-color)}

.overlay,.invisible-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000}.overlay{background:rgba(0,0,0,0.45);opacity:0;visibility:hidden;transition:.3s}.overlay.show{opacity:1;visibility:visible}.invisible-overlay{z-index:1001;display:none}.invisible-overlay.show{display:block}

.bottom-sheet{position:fixed;bottom:0;left:0;right:0;background:var(--card-bg);border-radius:20px 20px 0 0;padding:20px 0;transform:translateY(100%);transition:.3s;z-index:1005;box-shadow:none !important}.bottom-sheet.show{transform:translateY(0)}.action-sheet-container{padding:0 16px 8px;display:flex;flex-direction:column;gap:12px}
.sheet-item{display:flex;justify-content:center;align-items:center;gap:10px;font-size:16px;font-weight:bold;background:#F4F6F9;padding:16px;border-radius:14px;cursor:pointer}.sheet-item svg{width:22px;height:22px;stroke:#111;stroke-width:2.2;fill:none}.sheet-cancel{margin-top:10px;padding:16px 0;text-align:center;font-size:16px;font-weight:bold;color:var(--text-sub);border-top:8px solid var(--bg-color)}

/* 🔧 优化：这里原来有一份完全重复的 .dialog / .dialog-close / .dialog-title 规则块
   （只是 border-radius 写成了 16px，随后又被下面 22px 的那份覆盖），属于死代码，已删除。
   下面这份 22px 的规则就是原本实际生效的版本，删除后渲染结果完全不变。 */
.dialog{position:fixed;top:45%;left:50%;transform:translate(-50%,-50%) scale(0.9);background:var(--card-bg);width:92%;max-width:380px;border-radius:22px;padding:24px;z-index:1005;opacity:0;visibility:hidden;transition:.3s;box-shadow:0 10px 30px rgba(0,0,0,0.2)}.dialog.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.dialog-close{position:absolute;top:16px;right:16px;cursor:pointer;color:#888}.dialog-close svg{width:22px;height:22px;stroke:#888;stroke-width:2.5;fill:none}
.dialog-title{font-size:18px;font-weight:bold;text-align:center;margin-bottom:20px}
/* 🌟 核心修复：去掉 .dialog-input 的 min-width:100%，加 min-width:0，防止在 flex 布局里把获取验证码按钮挤出弹窗外！ */
.dialog-input,.dialog-textarea{width:100%;max-width:100%;min-width:0;padding:14px 16px;border:none!important;border-radius:14px!important;font-size:15px;outline:none;margin-bottom:24px;background:#F3F4F6!important;color:#333;box-sizing:border-box}
/* 仅多行文本框禁止左右拉宽 */
.dialog-textarea{min-width:100%;resize:vertical!important;min-height:90px;max-height:50vh}
.dialog-input:focus,.dialog-textarea:focus{background:#EAECEF!important}


.dialog-actions{display:flex;justify-content:flex-end;gap:12px}

.btn-confirm,.btn-cancel{padding:12px 20px;border:none;border-radius:12px;font-weight:bold;font-size:16px;cursor:pointer}
.btn-confirm{background:var(--gradient-color);color:#fff;box-shadow:0 4px 12px rgba(18,150,219,0.3)}.btn-confirm.danger{background:var(--danger-color);box-shadow:0 4px 12px rgba(255,77,79,0.3)}.btn-cancel{background:transparent;color:var(--text-sub)}.btn-cancel.light-bg{background:#F0F2F5;color:#555}
.large-gradient{width:100%;padding:14px 20px;font-size:16px;border-radius:14px;background:var(--gradient-color);color:#fff;border:none;box-shadow:0 4px 16px rgba(18,150,219,0.3);cursor:pointer;font-weight:bold;}
.yh-code-btn{width:108px;flex-shrink:0;background:#E1F0FF;color:var(--primary-color);border:none;border-radius:12px;font-size:13px;font-weight:bold;cursor:pointer;padding:0 6px;white-space:nowrap;}
.yh-code-btn:disabled{background:#F0F2F5;color:#bbb;cursor:default;}
.yh-step-tip{text-align:center;font-size:12px;color:#999;margin-bottom:10px;line-height:1.6;}
.yh-step-tip b{color:#374151;font-family:monospace;}

.toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.8); color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 14px; z-index: 9999; display: none; }
.toast.show { display: block; }

.ptr-wrap { position: fixed; top: calc(210px + var(--status-bar-height)); left: 0; right: 0; height: 0; z-index: 995; display: flex; justify-content: center; overflow: visible; pointer-events: none; }
.ptr-box { width: 40px; height: 40px; background: #fff; border-radius: 50%; box-shadow: 0 2px 10px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; transform: translateY(-50px) scale(0.5); opacity: 0; z-index: 996; }
.ptr-box.refreshing { transform: translateY(60px) scale(1); opacity: 1; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.ptr-box.hiding { transform: translateY(-50px) scale(0.5); opacity: 0; transition: transform 0.3s, opacity 0.3s; }
.ptr-spinner-svg { width: 26px; height: 26px; fill: none; stroke-linecap: round; transform-origin: center; }
.ptr-box.refreshing .ptr-spinner-svg { animation: ptr-spin 0.8s linear infinite; }
@keyframes ptr-spin { 100% { transform: rotate(360deg); } }
.file-list { transition: opacity 0.2s ease; }
body.no-scroll { overflow: hidden !important; position: fixed; width: 100%; touch-action: none; }
.dialog.keyboard-up { top: 15% !important; transform: translateX(-50%) scale(1) !important; transition: all 0.3s ease; }

html.lock-scroll, body.lock-scroll { overflow: hidden !important; touch-action: none !important; }
.bottom-sheet.show, .dialog.show { touch-action: auto !important; }

/* 🔧 修复：快速预览层(#preview-sheet)用的是 z-index:100000，从预览里点“选择添加位置”
   弹出的目录选择器(#folder-select-sheet, 原本 z-index:1005)会被预览层整块盖住，无法操作。
   这里把目录选择器及其“新建目录”弹窗提到预览层之上；两者只会出现在预览/文件页之上，
   不会影响其它弹层的层级关系。 */
#folder-select-sheet { display: flex !important; flex-direction: column !important; height: 70vh !important; max-height: 70vh !important; padding: 0 !important; z-index: 100005 !important; }
#selector-folder-dialog { z-index: 100006 !important; }
#selector-list { flex: 1 1 auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 20px !important; }
#folder-select-sheet > div:last-child { flex: 0 0 auto !important; border-top: 1px solid var(--border-color) !important; background: var(--card-bg) !important; padding: 16px !important; }

@keyframes highlightNewFile {
    0% { transform: scale(0.85); opacity: 0; background-color: rgba(18,150,219,0.3); border-radius: 12px; }
    40% { transform: scale(1.02); opacity: 1; background-color: rgba(18,150,219,0.15); border-radius: 12px; }
    70% { transform: scale(0.99); background-color: rgba(18,150,219,0.05); }
    100% { transform: scale(1); background-color: transparent; border-radius: 0; }
}
.highlight-new-file { animation: highlightNewFile 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important; position: relative; z-index: 10; }

#yh-loading-spinner { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; background: rgba(0,0,0,0.8); color: white; padding: 20px 25px; border-radius: 12px; font-size: 14px; text-align: center; backdrop-filter: blur(5px); }
.yh-spinner-circle { width: 35px; height: 35px; border: 3px solid rgba(255,255,255,0.3); border-top: 3px solid #fff; border-radius: 50%; animation: yh-spin 1s linear infinite; margin: 0 auto 12px auto; }
@keyframes yh-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ================= 云加速加载框（高级版，仅加速请求使用） ================= */
#accel-loading { display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 9999;
    align-items: center; justify-content: center; padding: 0 26px; opacity: 0; transition: opacity 0.18s ease; }
#accel-loading.show { opacity: 1; }
.al-card { position: relative; width: 100%; max-width: 248px; border-radius: 24px; padding: 26px 20px 18px;
    text-align: center; overflow: hidden; transform: translateY(8px) scale(0.97);
    background: linear-gradient(165deg, #1B2030 0%, #12151F 58%, #0E1119 100%);
    box-shadow: 0 24px 60px rgba(8, 12, 24, 0.45), 0 4px 14px rgba(8, 12, 24, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); }
#accel-loading.show .al-card { transform: translateY(0) scale(1); }
/* 顶部冷光晕 + 细描边，做出玻璃质感 */
.al-card:before { content: ''; position: absolute; left: -40%; top: -62%; width: 180%; height: 122%; pointer-events: none;
    background: radial-gradient(circle at 50% 0%, rgba(96, 136, 255, 0.30), rgba(96, 136, 255, 0) 62%); }
.al-card:after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 24px; pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.09); }
/* 核心动画：双环反向旋转 + 呼吸光晕 + 云加速图标 */
.al-core { position: relative; width: 74px; height: 74px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center; }
.al-ring { position: absolute; left: 0; top: 0; width: 74px; height: 74px; border-radius: 50%;
    border: 2px solid rgba(120, 150, 255, 0.14); border-top-color: #6E8BFF; border-right-color: rgba(110, 139, 255, 0.55);
    animation: al-spin 1.15s linear infinite; will-change: transform; }
.al-ring2 { width: 58px; height: 58px; margin: 8px; border: 2px solid rgba(120, 150, 255, 0.10);
    border-bottom-color: rgba(150, 120, 255, 0.75); animation: al-spin 1.75s linear infinite reverse; }
.al-glow { position: absolute; width: 48px; height: 48px; border-radius: 50%;
    background: radial-gradient(circle, rgba(110, 139, 255, 0.45), rgba(110, 139, 255, 0) 70%);
    animation: al-pulse 1.8s ease-in-out infinite; will-change: transform, opacity; }
.al-ico { position: relative; width: 30px; height: 30px; color: #EAF0FF; }
.al-ico svg { width: 30px; height: 30px; stroke: currentColor; stroke-width: 1.7; fill: none;
    stroke-linecap: round; stroke-linejoin: round; }
@keyframes al-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes al-pulse { 0%, 100% { transform: scale(0.82); opacity: 0.6; } 50% { transform: scale(1.12); opacity: 1; } }
.al-title { position: relative; font-size: 15.5px; font-weight: 700; letter-spacing: 0.4px; color: #FFFFFF; }
.al-sub { position: relative; margin-top: 6px; min-height: 19px; font-size: 12.5px; line-height: 1.5;
    color: #9AA6C4; transition: opacity 0.18s ease; }
.al-sub.swap { opacity: 0; }
/* 四段流光进度：不谎报百分比，只表达「后台在跑」 */
.al-steps { position: relative; display: flex; margin: 16px 2px 0; }
.al-steps i { flex: 1; height: 3px; margin-right: 5px; border-radius: 3px; position: relative;
    background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.al-steps i:last-child { margin-right: 0; }
.al-steps i:after { content: ''; position: absolute; left: -100%; top: 0; bottom: 0; width: 100%; border-radius: 3px;
    background: linear-gradient(90deg, rgba(110, 139, 255, 0), #7D97FF, rgba(110, 139, 255, 0));
    animation: al-scan 1.8s ease-in-out infinite; }
.al-steps i:nth-child(2):after { animation-delay: 0.45s; }
.al-steps i:nth-child(3):after { animation-delay: 0.9s; }
.al-steps i:nth-child(4):after { animation-delay: 1.35s; }
@keyframes al-scan { 0% { left: -100%; } 55% { left: 100%; } 100% { left: 100%; } }
.al-foot { position: relative; margin-top: 12px; font-size: 11px; color: #6C7897; letter-spacing: 0.2px; }
/* 矮屏（横屏 / 小屏）：整体收紧，避免遮挡内容 */
@media screen and (max-height: 520px) {
    .al-card { padding: 18px 16px 13px; }
    .al-core { width: 62px; height: 62px; margin-bottom: 10px; }
    .al-ring { width: 62px; height: 62px; }
    .al-ring2 { width: 48px; height: 48px; margin: 7px; }
    .al-glow { width: 40px; height: 40px; }
    .al-ico, .al-ico svg { width: 26px; height: 26px; }
    .al-steps { margin-top: 12px; }
    .al-foot { margin-top: 9px; }
}

#preview-dialog.dialog { top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; transform: none !important; width: 100% !important; max-width: none !important; height: 100% !important; border-radius: 0 !important; background: rgba(0,0,0,0.6) !important; justify-content: center; align-items: flex-end; display: flex; padding: 0; box-shadow: none; }
.preview-content { background: #fff; width: 100%; height: 85vh; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.3s ease; }
#preview-dialog.show .preview-content { transform: translateY(0); }
.preview-header { padding: 15px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: center; align-items: center; flex-shrink: 0; position: relative; }
.preview-title { font-size: 18px; font-weight: 900; color: #333; }
.preview-close { font-size: 24px; color: #999; cursor: pointer; line-height: 1; padding: 10px; position: absolute; right: 10px; }
.preview-info { padding: 12px 20px; background: #fafafa; border-bottom: 1px solid #f0f0f0; text-align: left; flex-shrink: 0;}
.preview-filename { font-size: 14px; color: #333; font-weight: 500; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.preview-filesize { font-size: 12px; color: #888; font-family: monospace;}
.preview-list { overflow-y: auto; padding: 15px; flex: 1; background: #fff; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.preview-list img { width: 100%; border-radius: 8px; margin-bottom: 15px; display: block; object-fit: cover; box-shadow: 0 2px 8px rgba(0,0,0,0.1); cursor: zoom-in; }
.broken-img { width: 100%; height: 30px; background: #F6F6F6; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; margin-bottom: 15px; border: 1px dashed #ddd; }

#gallery-dialog.dialog { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; transform: none !important; margin: 0 auto !important; width: 100% !important; height: 100vh !important; max-width: 100% !important; border-radius: 0 !important; background: #000 !important; padding: 0 !important; box-shadow: none !important; display: flex; flex-direction: column; z-index: 99999 !important; }
.gallery-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; flex: 1; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;}
.gallery-slider::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; position: relative; overflow: hidden; }
.gallery-slide img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; }
.gallery-bottom-controls { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px 0 40px 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); display: flex; flex-direction: column; align-items: center; z-index: 3001; pointer-events: none; }
.gallery-indicator { color: white; font-size: 16px; letter-spacing: 2px; font-weight: bold; margin-bottom: 15px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.gallery-close-btn { pointer-events: auto; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4); color: white; padding: 8px 24px; border-radius: 20px; font-size: 14px; cursor: pointer; backdrop-filter: blur(5px); }

body.batch-active div[onclick="enterRecycleBin()"], body.batch-active #sort-trigger-btn, body.batch-active div[onclick*="search-dialog"] { opacity: 0.3 !important; pointer-events: none !important; }
/* 多选模式下 FAB 隐藏，回到顶部按钮也一并隐藏，避免误触打断框选（退出多选自动恢复） */
body.batch-active .back-top-btn { display: none !important; }

/* ===== 秒传上传（网页端） ===== */
.up-help-icon{width:17px;height:17px;border-radius:50%;border:1px solid #9AA5B1;color:#9AA5B1;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:bold;cursor:pointer;line-height:1}
/* 面包屑行右侧上传入口：没任务=圆形箭头；有任务=箭头+百分比 */
.up-indicator{display:none;align-items:center;justify-content:center;gap:3px;flex:0 0 auto;width:32px;height:32px;margin-left:8px;align-self:center;padding:0;border-radius:50%;background:linear-gradient(135deg,#3F83F8 0%,#2563EB 100%);color:#fff;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:0 4px 10px rgba(37,99,235,0.26);-webkit-tap-highlight-color:transparent}
.up-indicator.show{display:flex}
.up-indicator.busy{width:auto;padding:0 10px;border-radius:16px}
.up-indicator svg{width:15px;height:15px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
/* 容量卡右侧「个人中心」入口：图标+文字一体胶囊（低饱和底 + 深色字，不抢主色） */
.pf-entry{position:relative;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 4px;border-radius:15px;background:#F2F4F9;color:#333A48;font-size:12.5px;font-weight:600;line-height:1;-webkit-tap-highlight-color:transparent}
.pf-entry .pf-ico{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#6FA8FF 0%,#3B72E8 100%);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pf-entry .pf-ico svg{width:12px;height:12px;stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
#pf-entry-dot{display:none;position:absolute;top:-1px;right:-1px;width:8px;height:8px;border-radius:50%;background:#EF4444;box-shadow:0 0 0 2px #fff;pointer-events:none}
/* 胶囊右上角红点：未签到 或 未绑定手机 任一条件成立就显示（两者统一在右上角，不再单独放左侧） */
body.signin-undone #pf-entry-dot,body.phone-unbound #pf-entry-dot{display:block}
body.signin-undone #pf-signin-dot{display:block !important}
/* 固定高度 + flex 纵向布局：第一次打开就有完整高度，不会只露出标题栏 */
#up-task-sheet{padding:0;z-index:1006;display:flex;flex-direction:column;height:60vh;max-height:78vh}
/* 任务列表滚到底/到顶时不再把滚动传给下面的文件列表 */
#up-task-sheet #up-task-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
#up-task-sheet .up-task-bar{height:4px;background:#EEF1F4;border-radius:2px;margin:7px 0 5px;overflow:hidden}
#up-task-sheet .up-task-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#1296DB,#36C6FF);transition:width .18s}
#up-task-sheet .up-cancel-btn{flex:0 0 auto;margin-left:8px;padding:5px 10px;border-radius:10px;background:#F2F4F7;color:#606266;font-size:12px;line-height:1;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}


/* ================= 登录页（仅 html.login-mode 下生效） ================= */
        html.login-mode .header-card, html.login-mode .toolbar, html.login-mode .file-list, html.login-mode .fab-btn, html.login-mode .ptr-wrap, html.login-mode #back-bar, html.login-mode #back-bar-sentinel, html.login-mode #back-top-btn { display: none !important; }
        html.login-mode body { overflow: hidden !important; touch-action: none !important; }
        /* 🌟 统一顶部状态栏底色：body 有 padding-top:var(--status-bar-height)，
           这块露出的是全局底色 #F6F6F6，与登录页渐变首色 #EDF5FF 不一致 → 统一成 #EDF5FF */
        html.login-mode, html.login-mode body, html.login-mode #status-bar-bg { background-color: #EDF5FF !important; }

        /* 🌟 登录页美化：渐变底 + 光晕 + 玻璃卡片 + 输入框内嵌账号/密码图标 */
        .yh-login-page { min-height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 22px; box-sizing: border-box; position: relative; overflow: hidden; background: linear-gradient(165deg, #EDF5FF 0%, #F7FBFF 48%, #FFFFFF 100%); }
        .yh-login-blob { position: absolute; border-radius: 50%; pointer-events: none; }
        .yh-blob-1 { width: 240px; height: 240px; top: -90px; right: -80px; background: radial-gradient(circle, rgba(0,180,255,.20) 0%, rgba(0,180,255,0) 70%); }
        .yh-blob-2 { width: 280px; height: 280px; bottom: -120px; left: -110px; background: radial-gradient(circle, rgba(18,118,245,.14) 0%, rgba(18,118,245,0) 70%); }
        .yh-login-card { position: relative; z-index: 2; width: 100%; max-width: 340px; background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.9); border-radius: 26px; padding: 28px 22px 22px; box-shadow: 0 22px 55px rgba(24, 90, 170, .13), 0 2px 8px rgba(24, 90, 170, .06); }
        .yh-login-logo-wrap { display: flex; justify-content: center; margin-bottom: 14px; }
        .yh-login-logo { width: 74px; height: 74px; border-radius: 20px; background: linear-gradient(135deg, #1296DB 0%, #00C6FF 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 26px rgba(18, 150, 219, .32); }
        .yh-login-logo img { width: 40px; height: 40px; filter: brightness(0) invert(1); }
        .yh-login-name { font-size: 24px; font-weight: 800; color: #1F2A37; text-align: center; letter-spacing: 3px; margin-bottom: 6px; }
        .yh-login-sub { font-size: 14px; color: #93A0B4; text-align: center; letter-spacing: 2px; margin-bottom: 20px; }
        .yh-field { position: relative; margin-bottom: 12px; }
        .yh-field-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
        .yh-field-icon svg { width: 19px; height: 19px; stroke: #A0AEC0; fill: none; stroke-linecap: round; stroke-linejoin: round; }
        .yh-field input { width: 100%; height: 50px; padding: 0 16px 0 44px; border: 1.5px solid #E4EBF4; border-radius: 15px; background: #F8FAFD; font-size: 15px; color: #26313F; outline: none; -webkit-appearance: none; transition: border-color .18s, background .18s, box-shadow .18s; }
        .yh-field input::placeholder { color: #A9B4C4; }
        .yh-field input:focus { border-color: #1296DB; background: #FFFFFF; box-shadow: 0 0 0 4px rgba(18,150,219,.10); }
        .yh-login-btn { width: 100%; height: 50px; margin-top: 6px; font-size: 16px; letter-spacing: 5px; border-radius: 16px; border: none; color: #fff; font-weight: 700; cursor: pointer; background: linear-gradient(90deg, #00B4FF 0%, #1276F5 100%); box-shadow: 0 10px 24px rgba(18,118,245,.30); }
        .yh-login-btn:active { transform: scale(.985); opacity: .92; }
        .yh-code-link { text-align: center; margin-top: 12px; }
        .yh-code-link span { color: #1276F5; font-size: 14px; font-weight: 600; letter-spacing: 1px; cursor: pointer; padding: 6px 10px; }
        .yh-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; color: #B3BDCB; font-size: 12px; letter-spacing: 2px; }
        .yh-divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(227,234,243,0), #E3EAF3, rgba(227,234,243,0)); }
        .yh-third-row { display: flex; align-items: center; justify-content: center; gap: 44px; }
        .yh-third-item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: #8C99AC; font-size: 12px; cursor: pointer; }
        .yh-third-item:active { opacity: .75; }
        .yh-third-icon { width: 44px; height: 44px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 6px 16px rgba(30,70,130,.12); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
        .yh-third-icon.douyin-svg { background: #000000; border-radius: 50%; }

        /* ================= 🌙 登录页 · 深色模式 =================
           原来深色模式只改了 html.dark input（全局输入框变深），
           登录卡片的底色/文字/分隔线还是浅色的，就出现「白卡片上嵌两个黑框」的割裂感。
           这里给登录页整套深色皮肤，配色与网盘主页深色保持一致（#0E1014 / #171A21 / #5EA8FF）。 */
        html.dark.login-mode, html.dark.login-mode body, html.dark.login-mode #status-bar-bg { background-color: #0B0E13 !important; }
        html.dark .yh-login-page { background: linear-gradient(165deg, #0B0E13 0%, #0E1014 50%, #11151C 100%); }
        html.dark .yh-blob-1 { background: radial-gradient(circle, rgba(0,180,255,.22) 0%, rgba(0,180,255,0) 70%); }
        html.dark .yh-blob-2 { background: radial-gradient(circle, rgba(94,168,255,.16) 0%, rgba(94,168,255,0) 70%); }
        html.dark .yh-login-card { background: rgba(23,26,33,.94); border-color: rgba(255,255,255,.07); box-shadow: 0 22px 55px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4); }
        html.dark .yh-login-name { color: #E6E9F0; }
        html.dark .yh-login-sub { color: #96A0B2; }
        html.dark .yh-field input { background: #20242D; border-color: #2B3140; color: #E6E9F0; }
        html.dark .yh-field input::placeholder { color: #7C8494; }
        html.dark .yh-field input:focus { background: #262B36; border-color: #5EA8FF; box-shadow: 0 0 0 4px rgba(94,168,255,.14); }
        html.dark .yh-field-icon svg { stroke: #8A93A0; }
        html.dark .yh-login-btn { box-shadow: 0 10px 24px rgba(18,118,245,.38); }
        html.dark .yh-code-link span { color: #5EA8FF; }
        html.dark .yh-divider { color: #6E7789; }
        html.dark .yh-divider-line { background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.10), rgba(255,255,255,0)); }
        html.dark .yh-third-item { color: #8C95A5; }
        html.dark .yh-third-icon { background: #232833; box-shadow: 0 6px 16px rgba(0,0,0,.45); }
        html.dark .yh-third-icon.douyin-svg { background: #000000; border: 1px solid rgba(255,255,255,.10); }

        /* ================= ✅ 登录成功过渡层 =================
           登录成功后不再"闪一下 toast 就 reload"，而是：
           模糊遮罩 → 对勾画出来 → 停留约 0.9 秒 → 淡出 → 再真正跳转。
           跳转指令只在遮罩收掉之后发出，所以用户看到的是一次完整的过渡，不会白屏抖动。 */
        .yh-done-mask { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(237,245,255,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .22s ease; }
        .yh-done-mask.show { opacity: 1; }
        .yh-done-mask.hide { opacity: 0; }
        .yh-done-card { display: flex; flex-direction: column; align-items: center; padding: 30px 42px 26px; border-radius: 22px; background: rgba(255,255,255,.94); box-shadow: 0 24px 60px rgba(18,60,120,.18), 0 2px 10px rgba(18,60,120,.08); transform: scale(.94); transition: transform .28s cubic-bezier(.22,1.2,.36,1); }
        .yh-done-mask.show .yh-done-card { transform: scale(1); }
        .yh-done-ring { width: 76px; height: 76px; overflow: visible; }
        .yh-done-halo { fill: none; stroke: rgba(18,118,245,.20); stroke-width: 2; transform-origin: 36px 36px; animation: yhDoneHalo 1.8s ease-out infinite; }
        .yh-done-disc { fill: #1E86F8; transform-origin: 36px 36px; animation: yhDonePop .32s cubic-bezier(.2,1.3,.4,1) both; }
        .yh-done-check { fill: none; stroke: #FFFFFF; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: yhDoneCheck .34s .18s ease-out forwards; }
        .yh-done-title { margin-top: 14px; font-size: 17px; font-weight: 600; color: #1B1F27; letter-spacing: .2px; }
        .yh-done-sub { margin-top: 4px; font-size: 13px; color: #7C8698; }
        @keyframes yhDoneHalo { 0% { transform: scale(.92); opacity: .9; } 70%,100% { transform: scale(1.14); opacity: 0; } }
        @keyframes yhDonePop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        @keyframes yhDoneCheck { to { stroke-dashoffset: 0; } }
        html.dark .yh-done-mask { background: rgba(11,14,19,.72); }
        html.dark .yh-done-card { background: rgba(23,26,33,.95); box-shadow: 0 24px 60px rgba(0,0,0,.6); }
        html.dark .yh-done-title { color: #E6E9F0; }
        html.dark .yh-done-sub { color: #96A0B2; }
        html.dark .yh-done-halo { stroke: rgba(94,168,255,.24); }
        html.dark .yh-done-disc { fill: #2E9BFF; }
    

/* ================= PC 端底部 Tab 导航 ================= */
#pc-tabbar, #pc-tab-panel { display: none; }

/* 🌟 只按 UA（服务端给 <html> 加 .pc-mode）判断 PC 端，不再用窗口宽度 ——
   PC 上把浏览器窗口拖到 768 以下，导航栏依旧在；手机 APP 的 UA 带 Android/wv，永远不显示 */
html.pc-mode body { padding-bottom: 92px !important; }

/* 悬浮按钮跟着抬高，否则会被底部导航挡住 */
/* 🌟 网页端(PC)添加按钮贴住 720px 内容区的右侧，不再跑到主页外面；悬浮导航（60高+16底距）之上留 20px */
html.pc-mode .fab-btn { bottom: 96px !important; right: calc(50% - min(360px, 50vw) + 24px) !important; z-index: 1004 !important; }
html.pc-mode .back-top-btn { bottom: 168px !important; }

/* 🌟 PC 端滚动宿主换成 body：html 自己不再滚动（无滚动条、无槽位），
   → 布局视口宽度恒等于窗口宽度，fixed 的 #pc-tab-panel 才能铺到窗口最右边；
   → 文件页的滚动条由 body 承担，位置就在窗口最右边 [vw-8, vw]，
     和发现 / 下载页面板内的滚动条完全重合 → 三页一致贴边；
   → 视口宽度全程不变，底部悬浮导航（left:50%）切页签不抖动 */
html.pc-mode { height: 100%; overflow: hidden; scrollbar-gutter: auto; }
html.pc-mode body { height: 100vh; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; }
/* 🌟 PC 端统一滚动条：发现（iframe 内同样 8px）/ 文件 / 下载 三页粗细、颜色一致 */
html.pc-mode, html.pc-mode body { scrollbar-width: thin; scrollbar-color: rgba(17,24,39,.20) transparent; }
html.dark.pc-mode, html.dark.pc-mode body { scrollbar-color: rgba(255,255,255,.22) transparent; }
html.pc-mode::-webkit-scrollbar, html.pc-mode ::-webkit-scrollbar { width: 8px; height: 8px; }
html.pc-mode::-webkit-scrollbar-track, html.pc-mode ::-webkit-scrollbar-track { background: transparent; }
html.pc-mode::-webkit-scrollbar-thumb, html.pc-mode ::-webkit-scrollbar-thumb { background: rgba(17,24,39,.20); border-radius: 8px; }
html.dark.pc-mode::-webkit-scrollbar-thumb, html.dark.pc-mode ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); }

/* 🌟 PC 端多选操作栏会被底部导航挡住：抬到导航栏上方，层级低于弹窗(1005)
   原来是通栏白条（720 宽 / 70 高 / 只有上圆角），和悬浮胶囊导航风格不搭 →
   改成居中悬浮卡片：更矮、四角圆、细描边 + 柔和投影，图标与文字横排 */
html.pc-mode .batch-bottom-bar { bottom: -80px; }
html.pc-mode .batch-bottom-bar.show { bottom: 92px !important; z-index: 1004 !important; }
html.pc-mode .batch-bottom-bar {
    height: 62px !important;
    padding: 0 10px;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(17,24,39,.10) !important;
}
html.pc-mode .batch-bottom-bar .batch-action {
    flex: 1;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    padding: 11px 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    transition: background .15s;
}
html.pc-mode .batch-bottom-bar .batch-action:active { background: rgba(17,24,39,.05); }
html.pc-mode .batch-bottom-bar .batch-action + .batch-action { position: relative; }
html.pc-mode .batch-bottom-bar .batch-action + .batch-action::before {
    content: ''; position: absolute; left: -1px; top: 12px; bottom: 12px;
    width: 1px; background: var(--border-color);
}
html.pc-mode .batch-bottom-bar .batch-action svg { width: 22px; height: 22px; }

/* 🌟 「发现 / 下载」整页面板打开时，锁住网页本身滚动。
   #pc-tab-panel 是 fixed 盖在页面上，里面的 iframe / 下载列表自己滚，
   网页这边再留着滚动条就会在窗口右侧出现第二条竖条（截图 3/4 的问题） */
html.pc-mode.pc-tab-open,
html.pc-mode.pc-tab-open body { overflow: hidden !important; }
/* 🌟 面板打开时不再改动 scrollbar-gutter（保持 stable）：
   之前在这里改成 auto，切回文件页时槽位从无到有，布局视口差 8px，
   居中导航会左右晃一下。槽位常驻 + 面板铺满 → 视口宽度恒定，切页签零抖动。
   面板右侧那 8px 槽区用 html 背景填成面板同色，滚动条视觉上依然贴边 */
html.pc-mode.pc-tab-open { background: #F5F7FA; }
html.dark.pc-mode.pc-tab-open { background: #0E1014; }
/* 面板打开时，文件页的悬浮按钮/回到顶部不属于当前页面，一并隐藏，避免压在下载列表上 */
html.pc-mode.pc-tab-open .fab-btn,
html.pc-mode.pc-tab-open .back-top-btn { display: none !important; }

/* 🌟 PC 端多选顶栏/底栏与主页内容同宽（720px 居中），不再横跨整个屏幕 */
html.pc-mode .batch-top-bar {
    left: 50% !important;
    right: auto !important;
    width: min(720px, 100vw) !important;
    transform: translateX(-50%) !important;
}
/* 底栏只放两个操作，收窄成悬浮卡片，别铺满整条屏幕 */
html.pc-mode .batch-bottom-bar {
    left: 50% !important;
    right: auto !important;
    width: min(480px, calc(100vw - 32px)) !important;
    transform: translateX(-50%) !important;
}

/* PC 图片预览面板与网盘内容区同宽（720px 居中） */
html.pc-mode #preview-dialog .preview-content { width: min(720px, 100vw); }

html.pc-mode #pc-tabbar {
    display: flex;
    align-items: center;
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    /* 窗口窄于 520 时自动收缩，避免溢出出现横向滚动条 */
    width: min(520px, calc(100vw - 32px));
    height: 60px;
    padding: 0 8px;
    /* 悬浮胶囊：半透明玻璃质感 + 细描边 + 柔和投影 */
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 30px;
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.12), 0 2px 8px rgba(17, 24, 39, 0.06);
    /* 低于页面弹层（1005）/预览层（100000）/画廊（99999），弹层打开时导航栏会被盖住 */
    z-index: 1003;
}
html.pc-mode #pc-tabbar .pc-tab {
    flex: 1;
    height: 46px;
    margin: 0 3px;
    border-radius: 23px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    color: #8A93A0;
    font-size: 11.5px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease, background-color .18s ease;
}
html.pc-mode #pc-tabbar .pc-tab svg { width: 21px; height: 21px; display: block; }
html.pc-mode #pc-tabbar .pc-tab.active { color: #2C7DF6; font-weight: 600; background: rgba(44, 125, 246, 0.10); }

/* 发现 / 下载 的整页容器：固定覆盖在导航栏之上，内部自己滚动 */
html.pc-mode #pc-tab-panel {
    position: fixed;
    top: 0;
    /* 🌟 铺满整个视口：手机上用「电脑UA」打开时布局宽度是 980px、body 不再被限宽到 720 居中，
       原来固定 720 居中会让两侧露出网盘文件页（盖不住），改成 100% 覆盖。
       ⚠️ 这里必须用 100%，不能用 100vw：fixed 元素的裁剪边界是布局视口（不含滚动条），
       100vw 比它宽 8px → 面板右侧连带发现/下载页的滚动条一起被裁掉（滚动条“消失”）。
       贴边问题由下面 .pc-tab-open 取消常驻滚动条槽解决 */
    left: 0;
    width: 100%;
    height: 100vh;
    background: #F5F7FA;
    z-index: 999;
    overflow: hidden;
}
html.pc-mode #pc-tab-panel.pc-show { display: block; }
html.pc-mode #pc-tab-panel .pc-panel { display: none; width: 100%; height: 100%; }
html.pc-mode #pc-tab-panel .pc-panel.pc-on { display: block; }
html.pc-mode #pc-tab-panel iframe { width: 100%; height: 100%; border: 0; display: block; background: #FFFFFF; }
/* 深色下 iframe 底色也跟着变深：iframe 内滚动条轨道是透明的，白色底会在右边露一条白缝 */
html.dark.pc-mode #pc-tab-panel iframe { background: #0F1218; }

/* 下载 tab 的空页面（等原生客户端把本地 preview.html 叠加上来） */
html.pc-mode #pc-panel-download { background: #F5F7FA; }
html.pc-mode .pc-download-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #A7B0BD;
    font-size: 13px;
    gap: 8px;
}
html.pc-mode .pc-download-empty svg { width: 40px; height: 40px; opacity: .5; }

/* ============================================================
 * 深色模式：APP 调 setNetdiskTheme('dark' / 'light') 切换
 * 子页面（签到 / 抽奖）读同一个 localStorage，自动跟随
 * ============================================================ */
html.dark{--primary-color:#5EA8FF;--bg-color:#0E1014;--card-bg:#171A21;--text-main:#E6E9F0;--text-sub:#96A0B2;--border-color:#252A34}
html.dark body{background-color:#0E1014;color:#E6E9F0}
html.dark .header-card{box-shadow:0 8px 22px rgba(0,0,0,.5)}
html.dark .capacity-info-title{color:#E6E9F0}
html.dark #total-text{color:#F3F5F9!important}
html.dark .capacity-info-percent{background:rgba(94,168,255,.16);color:#8FC3FF}
html.dark .progress-bar-bg{background:#252A34}
html.dark .breadcrumb-bar{background:#15181F}
html.dark .breadcrumb-bar *{color:#E6E9F0!important}
html.dark .pf-entry{background:#232833;color:#E6E9F0}
html.dark #pf-entry-dot{box-shadow:0 0 0 2px #171A21}
html.dark .sort-btn,html.dark .icon-btn{background:#232833;box-shadow:0 2px 8px rgba(0,0,0,.4)}
/* 工具栏图标是内联 stroke="#333"，深色底上会糊成一片，必须显式提亮 */
html.dark .icon-btn svg{stroke:#E6E9F0}
html.dark .sort-btn{color:#E6E9F0}
/* 「已使用 28.6TB」的数字是内联 color:#000，深色下看不见 */
html.dark #used-text{color:#F3F5F9!important}
html.dark .file-item:active{background:rgba(94,168,255,.10)}
html.dark .file-name{color:#E6E9F0}
html.dark .file-item::after{background:#252A34}
html.dark .file-icon{background:#232833}
html.dark .size-badge{background:#232833;color:#96A0B2}
html.dark .count-badge{background:#232833;color:#96A0B2}
html.dark .file-action{color:#5A6373}
html.dark .badge-pinned{background:rgba(245,158,11,.16);color:#F0B36A}
/* 深色模式：PC 底部悬浮导航 */
html.dark.pc-mode #pc-tabbar{background:rgba(23,26,33,.88);border-color:rgba(255,255,255,.06);box-shadow:0 12px 30px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4)}
/* 深色模式：发现 / 下载整页面板的底色 */
html.dark.pc-mode #pc-tab-panel,
html.dark.pc-mode #pc-panel-download{background:#0E1014}
html.dark.pc-mode #pc-tabbar .pc-tab{color:#7C8494}
html.dark.pc-mode #pc-tabbar .pc-tab.active{color:#7FB6FF;background:rgba(94,168,255,.16)}
/* 深色模式：添加面板 / 底部按钮 / 弹窗输入框 */
html.dark .sheet-item{background:#232833;color:#E6E9F0}
html.dark .sheet-item svg{stroke:#E6E9F0}
html.dark .sheet-cancel{background:#171A21;border-top-color:#0E1014;color:#96A0B2}
html.dark .dialog-input,html.dark .dialog-textarea{background:#20242D!important;color:#E6E9F0}
html.dark .dialog-input:focus,html.dark .dialog-textarea:focus{background:#262B36!important}
html.dark .dialog-close,html.dark .dialog-close svg{color:#96A0B2;stroke:#96A0B2}
html.dark .btn-cancel.light-bg{background:#232833;color:#C7CEDA}
html.dark input,html.dark textarea{background:#20242D;color:#E6E9F0;border-color:#2B3140}
html.dark .batch-top-bar,html.dark .batch-bottom-bar{background:#171A21}
html.dark .batch-top-btn{color:#E6E9F0}
/* 深色模式下多选顶栏的「取消」用红色，和普通操作区分开，更醒目 */
html.dark .batch-top-bar .batch-top-btn.cancel{color:#FF6B6B}
html.dark .batch-action svg{stroke:#E6E9F0}
html.dark.pc-mode .batch-bottom-bar { box-shadow: 0 10px 28px rgba(0,0,0,.5) !important; }
html.dark.pc-mode .batch-bottom-bar .batch-action:active { background: rgba(255,255,255,.06); }

/* ============================================================
   对话框统一描边（原生质感）
   —— 四边描边 + 顶部内高光 + 外投影，深浅两套，集中维护
   ============================================================ */
.yh-surface,
.dialog,
.bottom-sheet{
  border:1px solid rgba(17,24,39,.06);
}
.dialog{box-shadow:0 10px 30px rgba(17,24,39,.10)}
html.dark .yh-surface,
html.dark .dialog,
html.dark .bottom-sheet{
  border-color:rgba(255,255,255,.14);
}
html.dark .dialog{
  box-shadow:0 0 0 1px rgba(0,0,0,.55),0 18px 44px rgba(0,0,0,.55),
             inset 0 1px 0 rgba(255,255,255,.07);
}
/* 底部弹出只保留上/左/右三边，底边贴屏幕；底部一律不投影（隐藏时也会漏出阴影） */
.bottom-sheet{border-bottom:0;box-shadow:none!important}
html.dark .bottom-sheet{border-bottom:0;box-shadow:none!important}
/* 全屏看图 / 全屏预览不加描边，否则像套了个框 */
#preview-dialog,#gallery-dialog{border:0!important;box-shadow:none!important}

/* 下拉菜单（排序 / 更多）：深色下图标是内联深色描边，几乎看不见 */
.context-menu{border:1px solid rgba(17,24,39,.06)}
html.dark .context-menu{background:#1B1F27;border-color:rgba(255,255,255,.14);box-shadow:0 2px 10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05)}
html.dark .context-menu svg{stroke:#E6E9F0}
html.dark .context-item{color:#E6E9F0}
html.dark .context-item.active{background:#262B36}

/* 图片预览（列表页弹出的半屏预览）：深色补齐 */
html.dark .preview-content{background:#15181F;border-top:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
html.dark .preview-header{border-bottom-color:#242A35}
html.dark .preview-title{color:#E6E9F0}
html.dark .preview-close{color:#8A93A0}
html.dark .preview-info{background:#1A1E26;border-bottom-color:#242A35}
html.dark .preview-filename{color:#E6E9F0}
html.dark .preview-filesize{color:#8A93A0}
html.dark .preview-list{background:#15181F}
html.dark .broken-img{background:#20242D;border-color:#2B3140;color:#8A93A0}

/* ---------- 具体弹层的深色补齐（内联白底/深字就地覆盖） ---------- */
/* 确认删除：三行操作按钮 */
html.dark #custom-delete-dialog [style*="background: #fff"]{background:#171A21!important}
html.dark #custom-delete-dialog [style*="color: #111"]{color:#E6E9F0!important}
html.dark #custom-delete-dialog [style*="color: #333"]{color:#B9C1D0!important}
html.dark #custom-delete-dialog [style*="border-top: 1px solid #F0F2F5"]{border-top-color:#262B36!important}
/* 添加链接：目标胶囊、粘贴按钮、清空按钮 */
html.dark #magnet-target-name{background:rgba(94,168,255,.16)!important;color:#8FC3FF!important}
html.dark #btn-paste-magnet{color:#E6E9F0!important}
html.dark #btn-paste-magnet svg{stroke:#E6E9F0!important}
html.dark #magnet-input~div{background:#2B3140!important;color:#98A0B2!important}
/* 快速预览（添加链接前解析） */
html.dark #preview-sheet [style*="background: #F0F2F5"]{background:#232833!important}
html.dark #preview-sheet [style*="background: #F4F6F9"]{background:#262B36!important}
html.dark #preview-sheet [style*="background: #FFF3E0"]{background:rgba(230,162,60,.16)!important;color:#F0B36A!important}
html.dark #preview-sheet [style*="stroke: #666"]{stroke:#E6E9F0!important}
/* 失败链接文本框 */
html.dark #fail-textarea{background-color:#20242D!important;color:#C7CEDA!important}
/* 文件夹选择列表：整行背景交给 CSS，避免深色下白底 */
.sel-row{background:var(--card-bg)}
.sel-row:active{background:var(--bg-color)}
html.dark .sel-row:active{background:#232833}
html.dark #selector-list svg{stroke:#5A6270}
/* 隐私协议弹窗 */
html.dark #privacy-dialog{background:#171A21!important}
html.dark #privacy-dialog [style*="color: #222"]{color:#E6E9F0!important}
html.dark #privacy-dialog [style*="background: #E1F0FF"]{background:rgba(94,168,255,.16)!important}