/* ============================================================
   网盘前台页面样式（页头页脚来自主站，本文件只管主内容区）
   ============================================================ */
:root { --nd-primary:#0F5EA8; --nd-success:#0F6E56; --nd-warning:#B87514; }

.pan-page { padding: 24px 0 48px; min-height: calc(100vh - 340px); }
.pan-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ===== 面包屑与工具条 ===== */
.nd-crumbs { display:flex; align-items:center; flex-wrap:wrap; gap:4px; font-size:14px; margin-bottom:14px; color:#5a6a7d; }
.nd-crumbs a { color: var(--nd-primary); text-decoration:none; }
.nd-crumbs a:hover { text-decoration:underline; }
.nd-crumbs .sep { color:#b6c2cf; }
.nd-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.nd-storage-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.nd-storage-tab { padding:7px 16px; border:1px solid #dde4ec; border-radius:8px; background:#fff; color:#33414f; font-size:13.5px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.nd-storage-tab:hover { border-color: var(--nd-primary); color: var(--nd-primary); }
.nd-storage-tab.active { background: var(--nd-primary); border-color: var(--nd-primary); color:#fff; }
.nd-storage-tab .ro-tag { font-size:11px; padding:0 6px; border-radius:4px; background:rgba(255,255,255,.25); }
.nd-storage-tab:not(.active) .ro-tag { background:#f1f4f8; color:#98a4b3; }

/* ===== 文件列表 ===== */
.nd-list-card { background:#fff; border:1px solid #e3e8ee; border-radius:12px; overflow:hidden; box-shadow:0 6px 20px rgba(15,32,52,.05); }
.nd-list-head, .nd-row { display:grid; grid-template-columns: 46px minmax(0,1fr) 110px 150px 210px; align-items:center; }
.nd-list-head { background:#f7f9fc; border-bottom:1px solid #e9eef4; font-size:12.5px; color:#7b8a9c; height:40px; padding:0 14px; }
.nd-row { border-bottom:1px solid #f0f3f7; min-height:52px; padding:6px 14px; font-size:14px; cursor:pointer; transition:background .12s; }
.nd-row:hover { background:#f8fbff; }
.nd-row.selected { background:var(--nd-primary-soft, #e8f1fa); }
.nd-row .nd-name { display:flex; align-items:center; gap:9px; min-width:0; }
.nd-row .nd-name .fname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#22303f; }
.nd-row .nd-name .fname.dir { color:var(--nd-primary); font-weight:600; }
.nd-row .nd-size, .nd-row .nd-time { color:#6b7a8c; font-size:13px; }
.nd-row .nd-ops { display:flex; gap:6px; justify-content:flex-end; opacity:0; transition:opacity .15s; }
.nd-row:hover .nd-ops, .nd-row.selected .nd-ops { opacity:1; }
.nd-op { border:none; background:transparent; color:var(--nd-primary); font-size:12.5px; cursor:pointer; padding:3px 7px; border-radius:6px; }
.nd-op:hover { background:var(--nd-primary-soft,#e8f1fa); }
.nd-op.warn { color:var(--nd-warning); }
.nd-op.danger { color:#c0392b; }
.nd-empty { padding:60px 0; text-align:center; color:#93a1b1; font-size:14px; }

/* ===== 提示条 ===== */
.nd-banner { padding:10px 16px; border-radius:10px; font-size:13.5px; margin-bottom:14px; }
.nd-banner.readonly { background:var(--nd-warning-soft,#faf3e6); color:var(--nd-warning,#B87514); border:1px solid #efd9ad; }
.nd-banner.info { background:#e8f1fa; color:#0F5EA8; border:1px solid #bcd6ef; }

/* ===== Readme 卡片 ===== */
.nd-readme { background:#fff; border:1px solid #e3e8ee; border-radius:12px; padding:18px 22px; margin-top:18px; font-size:14px; line-height:1.8; }
.nd-readme h3 { margin:10px 0 8px; font-size:16px; }

/* ===== 上传页 ===== */
.nd-upload-drop { border:2px dashed #c7d3e0; border-radius:14px; background:#fff; padding:46px 20px; text-align:center; color:#6b7a8c; transition:border-color .2s, background .2s; }
.nd-upload-drop.dragover { border-color:var(--nd-primary); background:#f2f8ff; }
.nd-task { background:#fff; border:1px solid #e3e8ee; border-radius:10px; padding:12px 16px; margin-top:12px; font-size:13.5px; }
.nd-task .t-row { display:flex; align-items:center; gap:12px; }
.nd-task .t-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nd-task .t-state { color:#6b7a8c; }
.nd-task .t-state.ok { color:var(--nd-success); }
.nd-task .t-state.err { color:#c0392b; }
.nd-task .el-progress { flex:2; }
.nd-task .t-err { margin-top:6px; color:#c0392b; font-size:12.5px; }
.nd-task-summary { display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding:10px 16px;
  background:#f4f8fd; border:1px solid #dce8f5; border-radius:10px; font-size:13px; color:#33506f; }
.nd-task-summary .ops { display:flex; gap:14px; }
.nd-task-summary .ops a { color:var(--nd-primary); text-decoration:none; }
.nd-task-summary .ops a:hover { text-decoration:underline; }

/* ===== 预览页 ===== */
.nd-preview-stage { background:#141a22; border-radius:14px; min-height:520px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.nd-preview-stage img { max-width:100%; max-height:78vh; }
.nd-preview-bar { display:flex; align-items:center; gap:12px; margin:14px 0; color:#5a6a7d; font-size:13.5px; flex-wrap:wrap; }
#pdf-canvas-box canvas { margin:0 auto 8px; display:block; box-shadow:0 4px 18px rgba(0,0,0,.4); background:#fff; }
.nd-code-view { background:#fff; border-radius:12px; padding:18px; overflow:auto; max-height:76vh; font-size:13px; }
.nd-code-view code { font-family:Consolas, Menlo, monospace; }
/* 图片预览：单张原图居中展示（不缩放裁切、不铺缩略图） */
.nd-image-stage { background:#141a22; border-radius:14px; min-height:min(520px, 62vh); display:flex; align-items:center; justify-content:center; padding:16px; overflow:auto; }
.nd-image-stage .nd-image-full { max-width:100%; max-height:min(78vh, 900px); width:auto; height:auto; object-fit:contain; display:block; cursor:zoom-in; border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.45); }
.nd-image-tip { margin:10px 0 0; text-align:center; font-size:12.5px; color:#8a97a8; }

/* ===== 直链落地页 ===== */
.nd-landing { max-width:560px; margin:48px auto; background:#fff; border:1px solid #e3e8ee; border-radius:16px; padding:38px 40px; text-align:center; box-shadow:0 12px 34px rgba(15,32,52,.07); }
.nd-landing .f-icon { font-size:46px; }
.nd-landing h1 { font-size:19px; margin:12px 0 6px; color:#22303f; word-break:break-all; }
.nd-landing .meta { color:#7b8a9c; font-size:13px; margin-bottom:22px; }
.nd-landing .err { color:#c0392b; }

/* ===== 表单/个人中心 ===== */
.nd-panel { background:#fff; border:1px solid #e3e8ee; border-radius:12px; padding:22px 26px; }
.nd-panel h2 { font-size:17px; margin:0 0 16px; color:#22303f; }
.nd-quota-line { display:flex; align-items:center; gap:12px; font-size:13.5px; color:#5a6a7d; }

/* 移动端适配（文件列表/上传/落地页三个关键页面） */
@media (max-width: 760px) {
  .nd-list-head { display:none; }
  .nd-row { grid-template-columns: 34px minmax(0,1fr) auto; }
  .nd-row .nd-size, .nd-row .nd-time { display:none; }
  .nd-wrap { padding:0 12px; }
  .nd-landing { margin:20px 12px; padding:26px 20px; }
}

/* ============================================================
   首页图版布局（左侧栏 + 横幅 + 文件表格），深色面板融入主站底色
   ============================================================ */
.pan-home { width:min(1055px, calc(100% - 72px)); margin:0 auto; padding:10px 0 56px; display:flex; gap:18px; align-items:flex-start; }

/* ---- 左侧栏 ---- */
.ph-side { width:232px; flex:0 0 232px; display:flex; flex-direction:column; gap:14px; position:sticky; top:84px; }
.ph-side-card { background:rgba(9,20,34,.86); border:1px solid rgba(80,130,195,.22); border-radius:14px; padding:14px 12px; backdrop-filter:blur(6px); }
.ph-side-title { font-size:11.5px; letter-spacing:.12em; color:#7d90a8; padding:8px 10px 6px; }
.ph-nav { padding-top:8px; }
.ph-nav-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; color:#c3d0e0; font-size:13.5px; text-decoration:none; transition:background .15s,color .15s; }
.ph-nav-item:hover { background:rgba(53,140,220,.14); color:#eaf3fd; }
.ph-nav-item.active { background:linear-gradient(90deg, rgba(53,163,255,.24), rgba(53,163,255,.06)); color:#fff; box-shadow:inset 2px 0 0 #35a3ff; }
.ph-nav-item .ph-nav-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ph-nav-empty { padding:6px 10px 4px; color:#5d7089; font-size:12.5px; }
.ph-ic { width:16px; height:16px; flex:0 0 16px; }

/* 存储空间环形进度 */
.ph-quota { display:flex; align-items:center; gap:12px; padding:4px 8px 6px; }
.ph-ring { width:64px; height:64px; flex:0 0 64px; }
.ph-ring-num { fill:#eaf3fd; font-size:15px; font-weight:600; }
.ph-ring-pct { font-size:8px; fill:#93a5bb; }
.ph-quota-txt { display:flex; flex-direction:column; gap:2px; font-size:12.5px; color:#93a5bb; }
.ph-quota-txt strong { color:#eaf3fd; font-weight:600; font-size:13px; }

/* 快捷操作按钮 */
.ph-act { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:9px 0; margin:4px 0; border-radius:9px; border:0; font-size:13.5px; cursor:pointer; text-decoration:none; color:#fff; transition:filter .15s,transform .05s; }
.ph-act:active { transform:translateY(1px); }
.ph-act:hover { filter:brightness(1.12); }
.ph-act-primary { background:linear-gradient(135deg,#1f7fd6,#35a3ff); }
.ph-act-violet { background:linear-gradient(135deg,#5a54e8,#7f6bff); }

/* ---- 主区横幅 ---- */
.ph-main { flex:1; min-width:0; }
.ph-hero { position:relative; overflow:hidden; border-radius:16px; border:1px solid rgba(80,130,195,.26); background:linear-gradient(90deg,rgba(3,10,20,.95) 0%,rgba(4,12,24,.88) 32%,rgba(4,12,24,.5) 66%,rgba(4,12,24,.34) 100%),radial-gradient(70% 120% at 92% -10%,rgba(46,104,190,.32),transparent 58%),url('/static/site/img/banner-1.jpg') center right/cover no-repeat; padding:24px 34px 26px; margin-bottom:10px; }
.ph-hero .breadcrumb { padding:0 0 10px; }
.ph-hero-body { position:relative; }
.ph-hero-title { margin:0 0 6px; font-size:30px; font-weight:800; letter-spacing:.02em; color:#fff; }
.ph-hero-sub { margin:0 0 4px; color:#c9d7e8; font-size:15px; }
.ph-hero-tag { margin:0 0 20px; color:#8296ae; font-size:13px; }
.ph-stats { display:flex; gap:34px; flex-wrap:wrap; }
.ph-stat { display:flex; align-items:center; gap:10px; color:#35a3ff; }
.ph-stat .ph-ic { width:20px; height:20px; flex:0 0 20px; }
.ph-stat div { display:flex; flex-direction:column; line-height:1.3; }
.ph-stat strong { color:#eef5fd; font-size:17px; font-weight:600; }
.ph-stat strong.ph-stat-sm { font-size:13px; }
.ph-stat span { color:#8296ae; font-size:12px; }

/* ---- 文件表格 ---- */
.ph-table { background:rgba(9,20,34,.86); border:1px solid rgba(80,130,195,.22); border-radius:14px; overflow:hidden; backdrop-filter:blur(6px); outline:none; }
.ph-thead, .ph-row { display:grid; grid-template-columns: 46px minmax(0,1fr) 170px 110px 210px; align-items:center; }
.ph-thead { background:rgba(18,34,54,.9); border-bottom:1px solid rgba(80,130,195,.2); font-size:12.5px; color:#8ba0b9; height:42px; padding:0 14px; }
.ph-th.sort { cursor:pointer; user-select:none; }
.ph-th.sort:hover { color:#d5e3f2; }
.ph-th.sort.on { color:#35a3ff; }
.ph-th .arr { margin-left:3px; font-size:10px; opacity:.8; }
.ph-row { border-bottom:1px solid rgba(80,130,195,.12); min-height:52px; padding:6px 14px; font-size:14px; cursor:pointer; transition:background .12s; }
.ph-row:hover { background:rgba(53,140,220,.08); }
.ph-row.selected { background:rgba(53,163,255,.14); box-shadow:inset 2px 0 0 #35a3ff; }
.ph-row .nd-name { display:flex; align-items:center; gap:9px; min-width:0; }
.ph-row .nd-name .fname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#dbe6f3; }
.ph-row .nd-name .fname.dir { color:#4fc3ff; }
.ph-time { color:#8ba0b9; font-size:13px; }
.ph-size { color:#a9bbcf; font-size:13px; }
.ph-ops { display:flex; gap:6px; justify-content:flex-start; flex-wrap:nowrap; align-items:center; white-space:nowrap; }
.ph-ops .nd-op { display:inline-flex; align-items:center; line-height:1.4; }

/* 首页聚合列表（无复选框列，多「所属分类」列） */
.ph-grid-home { grid-template-columns: minmax(0,1fr) 130px 150px 90px 132px; }
.ph-row-static { cursor:default; }
.ph-src { color:#8ba0b9; font-size:13px; }
.ph-src a { color:#4fc3ff; text-decoration:none; }
.ph-src a:hover { text-decoration:underline; }
.pan-home .vd-pagination a, .pan-home .vd-pagination span { background:rgba(18,34,54,.9); border-color:rgba(80,130,195,.22); color:#c3d0e0; }
.pan-home .vd-pagination a:hover { border-color:#35a3ff; color:#4fc3ff; }

/* 首页提醒弹窗（底部居中，可关闭，10 秒自动消失） */
.nd-toast { position:fixed; left:0; right:0; bottom:32px; margin:0 auto; width:fit-content; max-width:min(86vw,480px); z-index:1200; display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; background:rgba(18,34,54,.96); border:1px solid rgba(80,130,195,.38); color:#d5e3f2; font-size:13.5px; line-height:1.6; box-shadow:0 10px 32px rgba(0,0,0,.4); animation:nd-toast-in .3s ease; transition:opacity .45s, transform .45s; }
.nd-toast-txt { min-width:0; }
.nd-toast-x { flex:none; border:none; background:transparent; color:#8ba0b9; font-size:18px; cursor:pointer; line-height:1; padding:0 2px; }
.nd-toast-x:hover { color:#fff; }
.nd-toast.hide { opacity:0; transform:translateY(10px); pointer-events:none; }
@keyframes nd-toast-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

/* 首页内工具条 / 面包屑深色化 */
/* 侧栏存储源项：只读角标 + 分组间距（存储源已由横排 tab 迁入侧栏） */
.ph-storage-item { margin-bottom:1px; }
.ph-storage-item .ph-ro { margin-left:auto; font-style:normal; font-size:10.5px; line-height:1; padding:2px 6px; border-radius:6px; background:rgba(184,117,20,.2); color:#e8c98f; }
.ph-nav .ph-side-title:first-of-type { padding-top:12px; }
.pan-home .nd-crumbs { color:#7d90a8; }
.pan-home .nd-crumbs a { color:#4fc3ff; }
.pan-home .nd-crumbs strong { color:#e6eef8; }
.pan-home .nd-banner.readonly { background:rgba(184,117,20,.12); border:1px solid rgba(184,117,20,.4); color:#e8c98f; border-radius:10px; padding:9px 14px; font-size:13px; margin-bottom:12px; }
.pan-home .nd-empty { padding:44px 0; text-align:center; color:#5d7089; font-size:13.5px; }
.pan-home .nd-readme { background:rgba(9,20,34,.86); border:1px solid rgba(80,130,195,.22); border-radius:14px; padding:18px 22px; margin-top:16px; color:#c3d0e0; }

/* 移动端：侧栏折叠到顶部 */
@media (max-width: 960px) {
  .pan-home { flex-direction:column; }
  .ph-side { position:static; width:100%; flex:none; flex-direction:row; flex-wrap:wrap; }
  .ph-side-card { flex:1 1 220px; }
}
@media (max-width: 760px) {
  .ph-hero { padding:22px 18px; }
  .ph-hero-title { font-size:22px; }
  .ph-stats { gap:18px; }
  .ph-thead { display:none; }
  .ph-row { grid-template-columns: 34px minmax(0,1fr) auto; }
  .ph-row .ph-time, .ph-row .ph-size { display:none; }
  .ph-row .ph-ops { grid-column: 2 / 4; justify-content:flex-start; }
}