/* FileSync 前端样式 · 终端美学深色主题 */

/* === 移动端全局优化 === */
/* color-scheme: dark 让浏览器原生控件（滚动条/input/select）走暗色 */
html { color-scheme: dark; }
/* 移除移动端点击高亮（iOS/Android 默认灰色背景） */
body { -webkit-tap-highlight-color: transparent; }
/* 触摸优化：禁止双击缩放延迟（manipulation 允许 pan/zoom/pinch 但禁用双击） */
button, a, input, select, textarea, label, [role="button"] {
    touch-action: manipulation;
}

:root {
    /* 配色：深炭灰 + 电光青 + 终端绿 */
    --bg-0: #0a0e14;
    --bg-1: #0d1117;
    --bg-2: #161b22;
    --bg-3: #1c2128;
    --border: #30363d;
    --border-soft: #21262d;
    --fg-0: #e6edf3;
    --fg-1: #c9d1d9;
    --fg-2: #8b949e;
    --fg-3: #6e7681;
    --accent: #00d9ff;
    --accent-dim: rgba(0, 217, 255, 0.15);
    --accent-glow: rgba(0, 217, 255, 0.45);
    --ok: #3fb950;
    --warn: #d29922;
    --err: #f85149;
    --err-dim: rgba(248, 81, 73, 0.15);

    /* 字体 */
    --mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
    --sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* 尺寸 */
    --radius: 6px;
    --radius-sm: 4px;
    --topbar-h: 56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 确保所有 hidden 属性生效（防止 display:flex 等覆盖） */
[hidden] { display: none !important; }

html, body {
    height: 100%;
    background: var(--bg-0);
    color: var(--fg-1);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* 背景纹理：微弱的网格 + 顶部光晕 */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(var(--border-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: -1px -1px;
    opacity: 0.25;
    pointer-events: none;
    z-index: 0;
}

body::after {
    content: '';
    position: fixed;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 400px;
    background: radial-gradient(ellipse at center, var(--accent-dim) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

/* === 顶部状态栏 === */
.topbar {
    position: relative;
    z-index: 10;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* safe-area-inset 适配刘海屏/状态栏（env 在非移动端为 0） */
    padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
    padding-top: env(safe-area-inset-top);
    background: rgba(13, 17, 23, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { color: var(--accent); display: flex; filter: drop-shadow(0 0 8px var(--accent-glow)); }
.brand-mark img { display: block; }

/* === 品牌横幅（首页 topbar 下方装饰条，撑满屏幕宽度） === */
.brand-banner {
    position: relative;
    z-index: 5;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}
.brand-banner .banner-img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid var(--border);
}
.brand-text h1 {
    font-family: var(--mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--fg-0);
    letter-spacing: 0.5px;
}
.brand-sub {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--fg-3);
    letter-spacing: 2px;
}

.health {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 12px;
}
.health .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--warn);
    box-shadow: 0 0 0 0 currentColor;
    animation: pulse 2s infinite;
}
.health.healthy .dot { background: var(--ok); color: var(--ok); }
.health.unhealthy .dot { background: var(--err); color: var(--err); }
.health-text { color: var(--fg-1); }
.health-meta { color: var(--fg-3); font-size: 11px; }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    70% { box-shadow: 0 0 0 8px transparent; opacity: 0.7; }
    100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

/* === 主布局（两列：侧栏 + 主内容区）=== */
.layout {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    align-items: start;
}

/* === 左侧功能栏 === */
.sidebar {
    position: sticky;
    top: 24px;
    align-self: start;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: rgba(22, 27, 34, 0.7);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 12px;
    backdrop-filter: blur(8px);
}
.sidebar-group { display: flex; flex-direction: column; gap: 4px; }
.sidebar-group-label {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 8px;
}
.sidebar-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: none;
    border: 1px solid transparent;
    color: var(--fg-1);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-family: var(--sans);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}
.sidebar-btn:hover {
    background: var(--bg-3);
    border-color: var(--border);
    color: var(--accent);
}
.sidebar-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.sidebar-btn:active { transform: scale(0.97); }

/* === 面板通用 === */
.panel {
    background: rgba(22, 27, 34, 0.7);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    backdrop-filter: blur(8px);
    animation: panel-fade-in 0.3s ease-out;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
    background: linear-gradient(180deg, rgba(28, 33, 40, 0.6), transparent);
}
.panel-head h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--fg-0);
    letter-spacing: 0.3px;
}
.panel-head .idx {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    background: var(--accent-dim);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--accent-glow);
}

/* === 上传控制区 === */
.upload-controls { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.chunk-size, .concurrency, .target-dir {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--fg-2);
}
.chunk-size select, .concurrency select {
    background: var(--bg-3);
    color: var(--fg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-family: var(--mono);
    font-size: 11px;
    cursor: pointer;
}
/* 上传目标目录显示：只读展示当前所在目录，跟随面包屑导航 */
.target-dir-display {
    background: var(--bg-3);
    color: var(--accent);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-family: var(--mono);
    font-size: 11px;
    min-width: 120px;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chunk-size select:focus, .concurrency select:focus {
    outline: none;
    border-color: var(--accent);
}

/* 配置摘要标签：显示当前分片/并发/存储，点击打开设置 modal */
.config-summary {
    background: var(--bg-3);
    border: 1px solid var(--border);
    color: var(--fg-2);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.config-summary:hover { border-color: var(--accent); color: var(--accent); }
.config-summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

/* === 选择文件按钮（普通按钮，不突出） === */
.pick-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--fg-1);
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pick-btn:hover { border-color: var(--accent); color: var(--accent); }
.pick-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

/* === 上传下拉菜单（悬停展开） === */
.upload-dropdown { position: relative; display: inline-block; }
.upload-trigger { white-space: nowrap; }
/* 允许下拉菜单溢出 .panel 的 overflow:hidden，并提升 upload-panel 层级
   避免 .files-panel（后置兄弟元素）覆盖下拉菜单 */
.upload-panel { overflow: visible; position: relative; z-index: 20; }
.upload-panel .panel-head { overflow: visible; }
.upload-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px;
    min-width: 160px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.upload-dropdown:hover .upload-menu,
.upload-dropdown:focus-within .upload-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.upload-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 11px;
    color: var(--fg-1);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.upload-menu-item:hover { background: var(--bg-3); color: var(--accent); }
.upload-menu-icon { flex-shrink: 0; opacity: 0.8; }
.upload-menu-item:hover .upload-menu-icon { opacity: 1; }

/* 拖拽高亮：绑定到 upload-panel，整个面板边框高亮 */
.upload-panel.dragover {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-glow);
}
.link-btn {
    background: none; border: none; color: var(--accent);
    font-family: var(--sans); font-size: 12px;
    cursor: pointer; padding: 0; text-decoration: underline;
}
.link-btn:hover { color: var(--fg-0); }

/* === 上传队列 === */
.queue { margin: 0 20px 20px; }
.queue-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0 12px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--fg-3);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.queue-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* 限制队列高度，100+ 文件时滚动而非撑开页面 */
    max-height: 400px;
    overflow-y: auto;
    padding-right: 4px; /* 滚动条留位 */
}
/* 滚动条样式（WebKit） */
.queue-list::-webkit-scrollbar { width: 6px; }
.queue-list::-webkit-scrollbar-track { background: var(--bg-3); border-radius: 3px; }
.queue-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.queue-list::-webkit-scrollbar-thumb:hover { background: var(--fg-3); }

.queue-item {
    background: var(--bg-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    transition: border-color 0.2s;
}
.queue-item.uploading { border-left: 2px solid var(--accent); }
.queue-item.done { border-left: 2px solid var(--ok); }
.queue-item.error { border-left: 2px solid var(--err); }
.queue-item.paused { border-left: 2px solid var(--warn); }

.qi-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.qi-name {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--fg-0);
    word-break: break-all;
}
.qi-status {
    font-family: var(--mono);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--bg-3);
    color: var(--fg-2);
}
.qi-status.uploading { color: var(--accent); background: var(--accent-dim); }
.qi-status.done { color: var(--ok); background: rgba(63, 185, 80, 0.15); }
.qi-status.error { color: var(--err); background: var(--err-dim); }

/* 进度条 */
.qi-progress {
    position: relative;
    height: 6px;
    background: var(--bg-3);
    border-radius: 3px;
    overflow: hidden;
}
.qi-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--ok));
    border-radius: 3px;
    transition: width 0.3s ease;
    position: relative;
}
.qi-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: scan 1.5s linear infinite;
}
@keyframes scan {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.qi-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--fg-3);
}
.qi-actions { display: flex; gap: 6px; }
.qi-actions button {
    background: none;
    border: 1px solid var(--border);
    color: var(--fg-2);
    padding: 2px 8px;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 10px;
    cursor: pointer;
    transition: all 0.15s;
}
.qi-actions button:hover { border-color: var(--accent); color: var(--accent); }

/* === 文件列表树形 === */
.files-tree-wrap { padding: 0 20px 20px; }

/* 面包屑导航 */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 0 14px;
    font-family: var(--mono);
    font-size: 12px;
    flex-wrap: wrap;
}
.crumb {
    color: var(--fg-2);
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 3px;
    transition: all 0.15s;
}
.crumb:hover { color: var(--accent); background: var(--accent-dim); }
.crumb.current { color: var(--fg-0); cursor: default; background: var(--bg-3); }
.crumb.current:hover { color: var(--fg-0); background: var(--bg-3); }
.crumb-sep { color: var(--fg-3); user-select: none; }

/* 树形容器（固定高度，文件多时滚动而非撑开页面） */
.file-tree {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--bg-1);
    max-height: 60vh;      /* 视口高度的 60%，避免文件多时撑开页面 */
    overflow-y: auto;      /* 超出滚动 */
    overflow-x: hidden;    /* 横向隐藏，文件名超长用 ellipsis */
}
/* 目录切换淡入动画：掩盖缓存渲染与后台刷新之间的视觉跳变 */
@keyframes tree-fade-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* 骨架屏 shimmer 动画 */
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* 面板入场动画 */
@keyframes panel-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* 尊重 reduced-motion 偏好 */
@media (prefers-reduced-motion: reduce) {
    .tree-skeleton, .skel-icon, .skel-name, .skel-meta { animation: none; }
    .panel, .tree-row { animation: none; }
}
/* 文件列表滚动条样式（与队列滚动条一致） */
.file-tree::-webkit-scrollbar { width: 6px; }
.file-tree::-webkit-scrollbar-track { background: var(--bg-3); border-radius: 3px; }
.file-tree::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.file-tree::-webkit-scrollbar-thumb:hover { background: var(--fg-3); }
.tree-empty {
    padding: 48px 16px;
    text-align: center;
    color: var(--fg-3);
    font-family: var(--mono);
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.tree-empty svg { color: var(--fg-3); opacity: 0.5; }
.tree-empty-text { color: var(--fg-2); font-size: 14px; font-family: var(--sans); }
.tree-empty-hint { color: var(--fg-3); font-size: 11px; }

/* 骨架屏：shimmer 加载动画 */
.tree-skeleton {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-soft);
}
.skel-icon, .skel-name, .skel-meta {
    background: linear-gradient(90deg, var(--bg-3) 25%, var(--border) 50%, var(--bg-3) 75%);
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: shimmer 1.4s ease-in-out infinite;
}
.skel-icon { width: 18px; height: 18px; border-radius: 3px; }
.skel-name { height: 12px; width: var(--w, 45%); min-width: 60px; }
.skel-meta { height: 10px; width: 50px; }
.skel-meta:nth-of-type(3) { width: 72px; }

/* 树形行（目录 / 文件）：grid 列 = 图标 + 名称 + 大小 + 日期 + 存储 + checkbox */
.tree-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto auto auto 22px;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13px;
    transition: background 0.15s, transform 0.08s;
    animation: tree-fade-in 0.18s ease-out;
    position: relative;
}
.tree-row:last-child { border-bottom: none; }
.tree-row.dir {
    cursor: pointer;
    color: var(--fg-0);
}
.tree-row.dir:hover { background: rgba(0, 217, 255, 0.05); }
.tree-row.dir:active { transform: scale(0.995); }
.tree-row.dir:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.tree-row.file { color: var(--fg-1); }
.tree-row.file:hover { background: rgba(0, 217, 255, 0.04); }
.tree-row.file:active { transform: scale(0.995); }

/* 选中状态：左边框高亮 + 背景着色 */
.tree-row.selected {
    background: var(--accent-dim);
    border-left: 2px solid var(--accent);
    padding-left: 12px;
}
.tree-row.selected:hover { background: rgba(0, 217, 255, 0.22); }

/* 文件类型图标（SVG sprite 引用） */
.tree-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--accent);
}
.tree-row.file .tree-icon { color: var(--fg-3); }
/* 不同文件类型的图标颜色（按类型区分） */
.tree-icon.icon-image { color: #79c0ff; }
.tree-icon.icon-video { color: #f0883e; }
.tree-icon.icon-audio { color: #a371f7; }
.tree-icon.icon-pdf { color: #f85149; }
.tree-icon.icon-code { color: #3fb950; }
.tree-icon.icon-text { color: #d29922; }
.tree-icon.icon-archive { color: #bc8cff; }
.tree-icon.icon-file { color: var(--fg-3); }

/* 行多选 checkbox（目录/文件统一） */
.row-check {
    margin: 0;
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--accent);
    justify-self: center;
}
/* 非多选模式隐藏 checkbox，多选模式显示 */
.file-tree:not(.selection-mode) .row-check { display: none; }
.file-tree.selection-mode .row-check { display: inline-block; }

.tree-name {
    font-family: var(--mono);
    color: var(--fg-0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tree-row.dir .tree-name { color: var(--accent); font-weight: 500; }

.tree-meta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--fg-3);
    white-space: nowrap;
}
.tree-meta.num { text-align: right; min-width: 72px; }

/* 存储类型标签（在树形中复用） */
.fstore {
    font-family: var(--mono);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--bg-3);
    color: var(--fg-2);
}

/* 下载按钮（在树形中复用） */
.dl-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--accent);
    padding: 4px 10px;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 11px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
}
.dl-btn:hover { background: var(--accent-dim); border-color: var(--accent); }

/* 紧凑操作按钮（用于分享管理对话框等，非树形行） */
.op-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--fg-1);
    padding: 3px 8px;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}
.op-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.op-btn.danger { color: var(--err); border-color: rgba(248, 81, 73, 0.4); }
.op-btn.danger:hover { background: var(--err-dim); border-color: var(--err); color: var(--err); }

/* 文件库头部操作按钮组：default-ops 和 selection-ops 互斥 */
.files-head-ops { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.default-ops { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* 选择操作栏（选中 ≥1 项时显示） */
.selection-ops {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 2px 8px;
    border: 1px dashed var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent-dim);
}
.selection-count {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    white-space: nowrap;
    margin-right: 4px;
}

/* 上下文菜单（右键弹出） */
.ctx-menu {
    position: fixed;
    z-index: 150;
    min-width: 160px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 4px 0;
    overscroll-behavior: contain;
}
.ctx-item {
    display: block;
    width: 100%;
    padding: 8px 16px;
    background: none;
    border: none;
    color: var(--fg-1);
    font-family: var(--mono);
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
}
.ctx-item:hover { background: var(--accent-dim); color: var(--accent); }
.ctx-item.danger { color: var(--err); }
.ctx-item.danger:hover { background: var(--err-dim); color: var(--err); }
.ctx-item:disabled { color: var(--fg-3); cursor: not-allowed; }
.ctx-item:disabled:hover { background: none; color: var(--fg-3); }
.ctx-separator { height: 1px; background: var(--border-soft); margin: 4px 0; }

/* === 按钮 === */
.ghost-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--fg-2);
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}
.ghost-btn:hover { border-color: var(--accent); color: var(--accent); }

/* === 冲突对话框 === */
/* overscroll-behavior: contain 防止模态框内滚动"链式"传播到背景 */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; overscroll-behavior: contain; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); }
.modal-card {
    position: relative;
    width: 480px;
    max-width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    animation: modal-in 0.2s ease;
}
@keyframes modal-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.modal-head h3 { font-size: 16px; font-weight: 600; color: var(--fg-0); }
.modal-tag {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--warn);
    background: rgba(210, 153, 34, 0.15);
    padding: 2px 8px;
    border-radius: 3px;
}
.modal-desc { color: var(--fg-2); font-size: 13px; margin-bottom: 16px; }
.modal-opts { display: flex; flex-direction: column; gap: 8px; }
.opt-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 14px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}
.opt-btn:hover { border-color: var(--accent); background: var(--accent-dim); }
.opt-btn strong { font-size: 13px; color: var(--fg-0); font-weight: 600; }
.opt-btn span { font-family: var(--mono); font-size: 10px; color: var(--fg-3); }
.modal-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.apply-all { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-2); cursor: pointer; }
.modal-foot-right { display: flex; justify-content: flex-end; gap: 8px; border-top: none; padding-top: 0; margin-top: 20px; }

/* 设置对话框行：label + select 横向排列 */
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
}
.settings-row:last-of-type { border-bottom: none; }
.settings-label { font-size: 13px; color: var(--fg-1); }
.settings-row select {
    background: var(--bg-3);
    color: var(--fg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-family: var(--mono);
    font-size: 12px;
    cursor: pointer;
}
.settings-row select:focus { outline: none; border-color: var(--accent); }
.settings-row select:disabled { opacity: 0.5; cursor: not-allowed; }

/* 对话框输入框 */
.modal-input-wrap { margin: 8px 0 4px; }
.modal-input {
    width: 100%;
    background: var(--bg-1);
    color: var(--fg-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-family: var(--mono);
    font-size: 13px;
    transition: border-color 0.15s;
}
.modal-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }

/* 主要按钮（确认操作） */
.primary-btn {
    background: var(--accent-dim);
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 6px 16px;
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.primary-btn:hover { background: var(--accent); color: var(--bg-0); }

/* === 文件预览 Modal === */
.preview-modal { z-index: 200; }
.preview-card {
    position: relative;
    width: 90vw;
    max-width: 1400px;
    height: 90vh;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modal-in 0.2s ease;
}
.preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-1);
    flex-shrink: 0;
}
.preview-name {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50%;
}
.preview-toolbar { display: flex; align-items: center; gap: 8px; }
.preview-toolbar select {
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--fg-1);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-family: var(--mono);
    font-size: 12px;
}
.preview-body {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-0);
    position: relative;
}
.preview-body img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform 0.15s;
}
.preview-body img.zoomed { cursor: zoom-out; transform: scale(2); }
.preview-body iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
}
.preview-body pre {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 20px;
    overflow: auto;
    background: #1e1e1e;
    color: #d4d4d4;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
    display: block;
    white-space: pre;
}
.preview-body pre code { background: transparent; padding: 0; font-family: var(--mono); }
.preview-body audio { width: 80%; max-width: 600px; }
.preview-body video { max-width: 100%; max-height: 100%; }
.preview-empty {
    color: var(--fg-3);
    font-size: 14px;
    text-align: center;
    padding: 40px;
}
.preview-loading {
    color: var(--fg-2);
    font-family: var(--mono);
    font-size: 13px;
}
.preview-loading::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: -2px;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* === 视频转码进度条样式 === */
/* video-preview-wrap 作为定位容器，进度条绝对定位居中覆盖 */
.video-preview-wrap {
    position: relative;
    display: inline-block;
}
/* 转码进度覆盖层：黑色半透明背景，绝对定位居中 */
.transcode-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 24px 32px;
    border-radius: 8px;
    text-align: center;
    z-index: 10;
    min-width: 220px;
}
/* spinner 圆环：复用 spin 动画 */
.transcode-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    margin: 0 auto 14px;
    animation: spin 0.8s linear infinite;
}
.transcode-text {
    font-size: 16px;
    margin-bottom: 6px;
    font-weight: 500;
}
.transcode-hint {
    font-size: 12px;
    opacity: 0.7;
}

/* === 压缩包预览样式 === */
.archive-list {
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 0;
    background: rgba(0,0,0,0.2);
}
.archive-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 13px;
    cursor: default;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.archive-row:hover {
    background: rgba(255,255,255,0.04);
}
.archive-dir-row {
    cursor: pointer;
    font-weight: 500;
    color: var(--fg-1);
}
.archive-dir-row:hover {
    background: rgba(0, 212, 170, 0.08);
}
.archive-arrow {
    display: inline-block;
    width: 14px;
    text-align: center;
    color: var(--fg-3);
    font-size: 10px;
    transition: transform 0.15s;
}
.archive-arrow-placeholder {
    visibility: hidden;
}
.archive-icon {
    font-size: 14px;
    line-height: 1;
}
.archive-name {
    flex: 1;
    color: var(--fg-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.archive-dir-row .archive-name {
    color: var(--fg-1);
}
.archive-size {
    color: var(--fg-3);
    font-family: var(--mono);
    font-size: 11px;
    min-width: 70px;
    text-align: right;
}
.archive-ops {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.archive-op-btn {
    padding: 2px 8px !important;
    font-size: 11px !important;
}
.archive-sub {
    /* 折叠的子节点容器，hidden 属性控制显隐 */
}
.archive-footer {
    margin-top: 8px;
    padding: 8px 12px;
    font-size: 11px;
    color: var(--fg-3);
    font-family: var(--mono);
    text-align: center;
    border-top: 1px solid var(--border);
}
.archive-preview-back {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}
.archive-preview-name {
    color: var(--fg-2);
    font-family: var(--mono);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.archive-preview-iframe {
    width: 100%;
    height: calc(85vh - 60px);
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
}


/* Markdown 渲染样式（marked.js 输出） */
.markdown-body {
    max-width: 100%;
    max-height: 85vh;
    overflow: auto;
    padding: 24px 32px;
    color: var(--fg-1);
    line-height: 1.6;
    text-align: left;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
    margin: 16px 0 8px;
    color: var(--fg-1);
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
}
.markdown-body h1 { font-size: 1.6em; }
.markdown-body h2 { font-size: 1.4em; }
.markdown-body h3 { font-size: 1.2em; }
.markdown-body p { margin: 8px 0; }
.markdown-body ul, .markdown-body ol { margin: 8px 0; padding-left: 24px; }
.markdown-body li { margin: 4px 0; }
.markdown-body code {
    background: var(--bg-2);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.9em;
}
.markdown-body pre {
    background: var(--bg-2);
    padding: 12px 16px;
    border-radius: 6px;
    overflow: auto;
    margin: 8px 0;
}
.markdown-body pre code {
    background: none;
    padding: 0;
}
.markdown-body blockquote {
    border-left: 3px solid var(--accent);
    padding-left: 16px;
    margin: 8px 0;
    color: var(--fg-3);
}
.markdown-body table {
    border-collapse: collapse;
    margin: 8px 0;
}
.markdown-body th, .markdown-body td {
    border: 1px solid var(--border);
    padding: 6px 12px;
}
.markdown-body a {
    color: var(--accent);
    text-decoration: none;
}
.markdown-body a:hover { text-decoration: underline; }

/* CSV 表格样式 */
.csv-table-wrap {
    max-width: 100%;
    max-height: 85vh;
    overflow: auto;
}
.csv-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
}
.csv-table th, .csv-table td {
    border: 1px solid var(--border);
    padding: 6px 12px;
    text-align: left;
    white-space: nowrap;
}
.csv-table th {
    background: var(--bg-2);
    color: var(--fg-1);
    position: sticky;
    top: 0;
    z-index: 1;
}
.csv-table tr:nth-child(even) td {
    background: var(--bg-1);
}

/* 危险按钮（删除等不可逆操作） */
.danger-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--fg-2);
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.danger-btn:hover { border-color: var(--err); color: var(--err); background: var(--err-dim); }

/* 批量移动目录选择器 */
.batch-move-selector {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px;
    margin-bottom: 12px;
    background: var(--bg-1);
}
.batch-move-path {
    padding: 6px 8px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--fg-2);
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 4px;
}
.batch-move-path strong { color: var(--accent); }
.batch-move-item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: none;
    color: var(--fg-1);
    font-family: var(--mono);
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}
.batch-move-item:hover { background: var(--accent-dim); color: var(--accent); }
.batch-move-loading { padding: 16px; text-align: center; color: var(--fg-3); font-size: 12px; }
.batch-move-empty { padding: 16px; text-align: center; color: var(--fg-3); font-size: 12px; }

/* === Toast === */
.toast-wrap {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.toast {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    font-size: 13px;
    color: var(--fg-1);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    animation: toast-in 0.25s ease;
    min-width: 240px;
}
.toast.ok { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--err); }
.toast.warn { border-left-color: var(--warn); }
@keyframes toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* === 用户信息区（顶部栏右侧） === */
.topbar-right { display: flex; align-items: center; gap: 12px; }
.user-info {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 12px;
}
.user-info .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 6px var(--ok);
}
.user-info .name { color: var(--fg-1); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-info .role { color: var(--accent); font-size: 10px; padding: 1px 6px; background: var(--accent-dim); border-radius: 3px; }

.logout-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--fg-2);
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}
.logout-btn:hover {
    border-color: var(--err);
    color: var(--err);
    background: var(--err-dim);
}

/* === 分享功能 === */

/* 分享创建对话框 */
.share-expiry-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--fg-2);
}
.share-expiry-label select {
    background: var(--bg-1);
    color: var(--fg-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-family: var(--mono);
    font-size: 12px;
}
.share-result {
    margin-top: 16px;
    padding: 12px;
    background: var(--bg-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
}
.share-link-wrap {
    display: flex;
    gap: 8px;
}
.share-link-wrap .modal-input {
    flex: 1;
    font-size: 11px;
}
.share-hint {
    margin-top: 8px;
    font-size: 11px;
    color: var(--fg-3);
    font-family: var(--mono);
}

/* 分享管理对话框 */
.share-manage-card {
    width: 640px;
    max-height: 80vh;
    overflow-y: auto;
}
.share-manage-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}
.share-manage-list .loading,
.share-manage-list .empty,
.share-manage-list .error {
    padding: 24px;
    text-align: center;
    color: var(--fg-3);
    font-size: 13px;
}
.share-manage-list .error { color: var(--err); }

.share-item {
    padding: 12px;
    background: var(--bg-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
}
.share-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.share-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--fg-0);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.share-item-type {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--fg-3);
    padding: 1px 6px;
    background: var(--bg-2);
    border-radius: 3px;
}
.share-status {
    font-family: var(--mono);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
}
.share-status.active { color: var(--ok); background: var(--ok-dim); }
.share-status.expired { color: var(--err); background: var(--err-dim); }

.share-item-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--fg-3);
}
.share-item-link {
    display: flex;
    gap: 6px;
    align-items: center;
}
.share-link-input {
    flex: 1;
    background: var(--bg-2);
    color: var(--fg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    font-family: var(--mono);
    font-size: 11px;
}
.share-link-input:focus { outline: none; border-color: var(--accent); }

/* === 独立分享页面（share.html）专用样式 === */

/* 简化顶栏：仅保留品牌标识，无右侧健康状态/用户信息 */
.share-topbar {
    justify-content: flex-start;
}

/* 居中布局容器 */
.share-layout {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
    padding: 48px 24px;
}

/* 分享卡片（复用 .panel 基础样式，覆盖内边距） */
.share-panel {
    padding: 32px;
}

/* 状态容器：加载中 / 错误 */
.share-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 48px 16px;
    text-align: center;
}

/* 加载旋转动画 */
.share-spinner {
    width: 32px;
    height: 32px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: share-spin 0.8s linear infinite;
}
@keyframes share-spin {
    to { transform: rotate(360deg); }
}

.share-state-text {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--fg-3);
    letter-spacing: 0.5px;
}

/* 错误状态 */
.share-error-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--err-dim);
    border: 2px solid var(--err);
    color: var(--err);
    font-family: var(--mono);
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.share-error-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--fg-0);
}
.share-error-msg {
    font-size: 13px;
    color: var(--fg-2);
    max-width: 360px;
}

/* 密码门状态 */
.share-lock-icon {
    color: var(--accent);
    opacity: 0.8;
}
.share-lock-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--fg-0);
}
.share-lock-msg {
    font-size: 13px;
    color: var(--fg-2);
    max-width: 360px;
}
.share-lock-form {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 360px;
    margin-top: 8px;
}
.share-lock-form .modal-input {
    flex: 1;
}
.share-lock-error {
    font-size: 12px;
    color: var(--err);
    font-family: var(--mono);
}

/* 分享管理列表中的密码标识 */
.share-status.locked {
    background: var(--warn-dim, rgba(255, 193, 7, 0.15));
    color: var(--warn, #ffc107);
    border: 1px solid var(--warn, #ffc107);
}

/* 正常内容区 */
.share-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 标题区：类型徽章 + 名称 */
.share-info-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-soft);
}
.share-type-badge {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    background: var(--accent-dim);
    border: 1px solid var(--accent-glow);
    padding: 3px 10px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.share-name {
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 600;
    color: var(--fg-0);
    word-break: break-all;
    margin: 0;
}

/* 元信息网格：大小 / 文件数 / 下载次数 / 有效期 */
.share-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.share-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: var(--bg-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
}
.share-meta-label {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--fg-3);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.share-meta-value {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--fg-0);
    font-weight: 500;
}

/* 下载操作区：预览按钮在上、下载按钮在下，垂直堆叠并保留间距 */
.share-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
}
.share-download-btn {
    min-width: 160px;
    padding: 10px 24px;
    font-size: 14px;
}

/* 提示文字 */
.share-hint {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--fg-3);
    text-align: center;
    margin: 0;
}

/* === 分享页目录浏览（阶段5新增） === */

/* 目录浏览容器 */
.share-browser {
    border-top: 1px solid var(--border-soft);
    padding: 16px 20px;
    margin-top: 12px;
}

/* 工具栏：全选 + 批量下载 + 转存 */
.share-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.share-select-all {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--fg-1);
    cursor: pointer;
    user-select: none;
}
.share-select-all input { cursor: pointer; }
.share-toolbar-actions { display: flex; gap: 8px; }

/* 面包屑导航 */
.share-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 12px;
    color: var(--fg-2);
    margin-bottom: 12px;
    font-family: var(--mono);
}
.crumb {
    color: var(--accent);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}
.crumb:hover { background: var(--accent-dim); }
.crumb-root { font-weight: 500; }
.crumb-sep { color: var(--fg-3); }

/* 文件列表 */
.share-filelist {
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--bg-1);
    min-height: 80px;
    max-height: 480px;
    overflow-y: auto;
}

/* 树行（目录/文件通用） */
.tree-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13px;
}
.tree-row:last-child { border-bottom: none; }
.tree-dir {
    cursor: pointer;
    color: var(--fg-0);
}
.tree-dir:hover { background: var(--bg-2); }
.tree-file { color: var(--fg-1); }
.tree-file:hover { background: var(--bg-2); }

.tree-cb { cursor: pointer; flex-shrink: 0; }
.tree-icon { width: 18px; text-align: center; flex-shrink: 0; }
.tree-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-meta {
    font-size: 11px;
    color: var(--fg-3);
    font-family: var(--mono);
    flex-shrink: 0;
}
.tree-download-btn {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--fg-1);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
}
.tree-download-btn:hover { border-color: var(--accent); color: var(--accent); }

/* 文件行预览按钮（参考 tree-download-btn，accent 色调突出预览入口） */
.tree-preview-btn {
    border: 1px solid var(--accent);
    background: var(--accent-dim);
    color: var(--accent);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
}
.tree-preview-btn:hover { background: var(--accent); color: #fff; }

/* 浏览状态提示 */
.share-browser-loading,
.share-browser-error,
.share-browser-empty {
    padding: 24px;
    text-align: center;
    color: var(--fg-3);
    font-size: 13px;
}
.share-browser-error { color: var(--err); }

/* 转存对话框额外样式 */
.modal-label {
    display: block;
    font-size: 12px;
    color: var(--fg-2);
    margin: 12px 0 6px;
}
.modal-result {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
}
.modal-result-loading { background: var(--accent-dim); color: var(--accent); }
.modal-result-success { background: var(--ok-dim); color: var(--ok); }
.modal-result-error { background: var(--err-dim); color: var(--err); }

/* === CodeMirror 6 在线编辑器样式（暗色主题适配）=== */
/* 注意：CodeMirror 6 默认主题通过 <style> 注入 .cm-gutters{background:#f5f5f5} 等
   浅色样式，优先级高于普通类选择器。使用 .cm-editor .cm-gutters 后代选择器
   + !important 确保暗色主题生效，修复编辑器左侧白条竖线问题。 */
.cm-editor { height: 100%; background: #0d1117; color: #c9d1d9; font-size: 13px; }
.cm-editor.cm-focused { outline: none; }
.cm-scroller { font-family: 'JetBrains Mono', 'Consolas', monospace; line-height: 1.6; overflow: auto; }
.cm-editor .cm-gutters { background: #0d1117 !important; border-right: 1px solid rgba(255,255,255,.08); color: #6e7681; }
.cm-editor .cm-activeLine { background: rgba(255,255,255,.04); }
.cm-editor .cm-activeLineGutter { background: rgba(255,255,255,.04); color: #c9d1d9; }
.cm-editor .cm-selectionBackground { background: rgba(88,166,255,.3); }
.cm-editor.cm-focused .cm-selectionBackground { background: rgba(88,166,255,.4); }
.cm-editor .cm-cursor { border-left-color: #58a6ff; border-left-width: 2px; }
.cm-editor .cm-matchingBracket { background: rgba(255,255,255,.1); outline: 1px solid rgba(255,255,255,.2); }
.cm-editor .cm-foldPlaceholder { background: rgba(255,255,255,.1); border: none; color: #8b949e; font-size: 11px; }

/* === 响应式 === */
@media (max-width: 720px) {
    .topbar { padding: 0 16px; }
    .layout {
        grid-template-columns: 1fr;
        padding: 16px;
    }
    .upload-controls { flex-wrap: wrap; gap: 8px; }
    .panel-head { flex-wrap: wrap; gap: 8px; }
    .target-dir-display { min-width: 100px; max-width: 160px; }
    /* 窄屏下侧栏转顶部横栏 */
    .sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
    .sidebar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px;
    }
    .sidebar-group { flex-direction: row; align-items: center; gap: 4px; }
    .sidebar-group-label { display: none; }
    .sidebar-btn { width: auto; padding: 6px 10px; font-size: 12px; }
    /* 窄屏下隐藏树形行中的"上传时间"和"存储"列，避免拥挤 */
    .tree-row { grid-template-columns: 24px minmax(0, 1fr) auto 22px; gap: 8px; padding: 8px 10px; }
    .tree-row .tree-meta:nth-of-type(2),
    .tree-row .tree-meta:nth-of-type(3) { display: none; }
    /* 窄屏下隐藏角色标签，用户名截断 */
    .user-info .role { display: none; }
    .user-info .name { max-width: 80px; }
}

/* 手机断点（< 480px）：触摸目标 ≥44px、input 字体 16px 防 iOS 自动缩放 */
@media (max-width: 480px) {
    /* input/textarea/select 字体 ≥16px，防止 iOS Safari 聚焦时自动放大页面 */
    input, textarea, select {
        font-size: 16px;
    }
    /* 触摸目标提升到 ≥44px（iOS HIG 最低标准） */
    .primary-btn, .ghost-btn, .pick-btn, .dl-btn, .link-btn, .sidebar-btn,
    .qi-actions button, .tree-download-btn, .share-download-btn {
        min-height: 44px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    /* 复选框触摸目标放大 */
    .row-check, .tree-cb, #select-all-cb {
        width: 22px;
        height: 22px;
    }
    /* topbar 紧凑化 */
    .brand-text h1 { font-size: 15px; }
    .brand-sub { display: none; }
    /* layout 缩小边距 */
    .layout { padding: 12px; gap: 12px; }
    .panel-head { padding: 12px 14px; }
    .queue, .files-tree-wrap { margin: 0 14px 14px; }
    /* 模态框占满宽度，留 16px 边距 */
    .modal-card {
        width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
        padding: 16px;
    }
    /* 树形行紧凑化：仅保留 icon + name + checkbox */
    .tree-row {
        grid-template-columns: 24px minmax(0, 1fr) 22px;
        gap: 6px;
        padding: 8px 8px;
    }
    /* 隐藏所有 meta 列（大小/日期/存储） */
    .tree-row .tree-meta { display: none; }
    /* 分享页工具栏堆叠 */
    .share-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .share-toolbar-actions {
        display: flex;
        gap: 8px;
    }
    .share-toolbar-actions button {
        flex: 1;
    }
    /* 分享元信息网格单列 */
    .share-meta-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    /* 健康指示器隐藏 meta 文本 */
    .health-meta { display: none; }
}

/* === 无障碍：尊重用户的减少动画偏好 === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* 关闭进度条扫描动画 */
    .qi-progress-fill::after { display: none; }
    /* 关闭健康指示器脉冲 */
    .health .dot { animation: none; }
}

/* === 分享预览 Modal（大尺寸，支持图片/PDF/文本/音频/视频） === */
.share-preview-card {
    width: 900px;
    max-width: 95vw;
    max-height: 90vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.share-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
    flex-shrink: 0;
}
.share-preview-head h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--fg-0);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 40px);
}
.modal-close {
    background: transparent;
    border: none;
    color: var(--fg-2);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0 8px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.modal-close:hover { color: var(--err); background: var(--err-dim); }
.share-preview-body {
    flex: 1;
    overflow: auto;
    overscroll-behavior: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    min-height: 300px;
}
/* 图片预览：自适应容器，保持比例 */
.share-preview-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}
/* PDF 预览：iframe 占满容器 */
.share-preview-pdf {
    width: 100%;
    height: 75vh;
    border: none;
    border-radius: 4px;
    background: #fff;
}
/* 音频预览：居中显示播放器 */
.share-preview-audio {
    width: 100%;
    max-width: 600px;
}
/* 视频预览：最大化显示，保持比例 */
.share-preview-video {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 4px;
    background: #000;
}
/* 媒体容器：包裹 video/audio + loading/error 覆盖层 */
.share-preview-media-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    max-height: 80vh;
}
/* 音频容器：覆盖层不叠在控件上，放在下方 */
.share-preview-media-wrap-audio {
    display: block;
    width: 100%;
    max-width: 600px;
}
/* loading/error 覆盖层：绝对定位居中叠在视频上 */
.share-preview-loading-overlay,
.share-preview-error-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
    pointer-events: none;
    max-width: 90%;
}
.share-preview-error-overlay {
    background: rgba(220, 50, 50, 0.88);
}
/* spinner 旋转动画 */
.share-preview-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: share-preview-spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes share-preview-spin {
    to { transform: rotate(360deg); }
}
/* 音频覆盖层：放在控件下方，不遮挡控件 */
.share-preview-media-wrap-audio .share-preview-loading-overlay,
.share-preview-media-wrap-audio .share-preview-error-overlay {
    position: static;
    transform: none;
    margin: 10px auto 0;
    display: inline-flex;
}
/* 文本预览：等宽字体，深色背景，可滚动 */
.share-preview-text {
    width: 100%;
    margin: 0;
    padding: 16px;
    background: var(--bg-1);
    color: var(--fg-0);
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
    overflow: auto;
    border-radius: 4px;
    text-align: left;
    align-self: stretch;
}
.share-preview-text code { font-family: inherit; background: none; }
/* 截断提示 */
.share-preview-truncated {
    width: 100%;
    padding: 10px 16px;
    background: var(--accent-dim);
    color: var(--accent);
    font-size: 12px;
    text-align: center;
    border-radius: 4px;
    margin-top: 8px;
}
/* 加载中 / 错误状态 */
.share-preview-loading,
.share-preview-error {
    color: var(--fg-2);
    font-size: 14px;
    padding: 40px;
    text-align: center;
}
.share-preview-error { color: var(--err); }

/* 手机断点：预览 Modal 接近全屏 */
@media (max-width: 480px) {
    .share-preview-card {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }
    .share-preview-pdf { height: 85vh; }
    .share-preview-body { padding: 8px; }
}

/* === 底部安全区域（fixed 定位元素需手动留位） === */
/* 例：底部固定工具栏可加 padding-bottom: env(safe-area-inset-bottom) */