/* 网盘全站主题：简约、专业、自适应 */

:root {
  --pan-bg: #0f1419;
  --pan-bg2: #1a2332;
  --pan-surface: #ffffff;
  --pan-surface2: rgba(255, 255, 255, 0.06);
  --pan-text: #e8eef5;
  --pan-text-dark: #1a2332;
  --pan-muted: #8b9cb3;
  --pan-accent: #3d9cf9;
  --pan-accent2: #5ad8a6;
  --pan-border: rgba(255, 255, 255, 0.08);
  --pan-radius: 12px;
  --pan-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  --pan-font: "Segoe UI", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.pan-body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--pan-font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--pan-text-dark);
  background: linear-gradient(165deg, #e8eef5 0%, #dce6f2 45%, #cfd9e8 100%);
  background-attachment: fixed;
}

body.pan-body--auth {
  background: linear-gradient(165deg, var(--pan-bg) 0%, var(--pan-bg2) 50%, #243044 100%);
  color: var(--pan-text);
}

.pan-main {
  min-height: calc(100vh - 56px);
}

.pan-main--plain {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.pan-topnav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(90deg, var(--pan-bg) 0%, #1a2535 100%);
  border-bottom: 1px solid var(--pan-border);
  box-shadow: var(--pan-shadow);
}

.pan-topnav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.pan-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--pan-text) !important;
  text-decoration: none !important;
  letter-spacing: 0.02em;
}

.pan-brand:hover {
  color: #fff !important;
  opacity: 0.95;
}

.pan-brand-mark {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--pan-accent), var(--pan-accent2));
  flex-shrink: 0;
}

.pan-nav-toggle {
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: 8px;
  padding: 0.35rem 0.65rem;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

@media (min-width: 768px) {
  .pan-nav-toggle {
    display: none !important;
  }
}

.pan-nav-links {
  display: none;
  width: 100%;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.5rem;
}

.pan-nav-links.is-open {
  display: flex;
}

@media (min-width: 768px) {
  .pan-nav-links {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    flex: 1;
    padding-top: 0;
    margin-left: 1rem;
    gap: 0.15rem;
  }
}

.pan-nav-a {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.82) !important;
  text-decoration: none !important;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}

.pan-nav-a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff !important;
}

.pan-nav-a.is-active {
  background: rgba(61, 156, 249, 0.25);
  color: #fff !important;
}

.pan-nav-muted {
  opacity: 0.75;
}

.pan-panel {
  background: var(--pan-surface);
  border-radius: var(--pan-radius);
  box-shadow: 0 4px 24px rgba(26, 35, 50, 0.08);
  border: 1px solid rgba(26, 35, 50, 0.06);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.pan-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pan-text-dark);
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
}

.pan-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}

.pan-toolbar .btn {
  border-radius: 8px;
  font-weight: 500;
}

.pan-table-wrap {
  border-radius: var(--pan-radius);
  overflow: hidden;
  border: 1px solid rgba(26, 35, 50, 0.08);
  background: var(--pan-surface);
  box-shadow: 0 2px 12px rgba(26, 35, 50, 0.06);
}

.table-responsive {
  margin-bottom: 0;
}

.pan-table-wrap .table {
  margin-bottom: 0;
  font-size: 0.875rem;
}

.pan-table-wrap .table thead th {
  background: #f0f4fa;
  color: #3d4f66;
  font-weight: 600;
  border-bottom: 2px solid #dde5ef;
  white-space: nowrap;
  padding: 0.65rem 0.5rem;
}

.pan-table-wrap .table tbody td {
  vertical-align: middle;
  padding: 0.55rem 0.5rem;
  border-color: #edf1f7;
}

.pan-table-wrap .table tbody tr:nth-child(even) {
  background: #fafbfd;
}

.pan-table-wrap .table .btn {
  border-radius: 6px;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

.original-name {
  max-width: 220px;
  word-break: break-word;
}

@media (max-width: 991px) {
  .original-name {
    max-width: 140px;
  }
}

.waveform-img {
  max-width: 100px;
  max-height: 48px;
  border-radius: 6px;
  object-fit: cover;
}

.pan-date-today {
  color: #c0392b;
  font-weight: 600;
}

.pagination {
  flex-wrap: wrap;
  gap: 0.25rem;
}

.page-link {
  border-radius: 8px;
  border: 1px solid #dde5ef;
  color: #2c5282;
}

.page-item.active .page-link {
  background: var(--pan-accent);
  border-color: var(--pan-accent);
}

.form-select,
.form-control {
  border-radius: 8px;
  border-color: #d0dae8;
}

.form-select:focus,
.form-control:focus {
  border-color: var(--pan-accent);
  box-shadow: 0 0 0 0.2rem rgba(61, 156, 249, 0.2);
}

.pan-auth-card {
  width: 100%;
  max-width: 420px;
  margin: 2rem auto;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.98);
  border-radius: var(--pan-radius);
  box-shadow: var(--pan-shadow);
}

body.pan-body--auth .pan-auth-card {
  background: rgba(30, 40, 55, 0.92);
  border: 1px solid var(--pan-border);
  color: var(--pan-text);
}

body.pan-body--auth .pan-auth-card .form-control {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

body.pan-body--auth .pan-auth-card .form-label {
  color: rgba(255, 255, 255, 0.85);
}

body.pan-body--auth .pan-page-title {
  color: #fff;
}

#uploadTabs {
  border-bottom-color: #dde5ef;
}

#uploadTabs .nav-link {
  border: none;
  border-radius: 8px 8px 0 0;
  color: #5a6d85;
  font-weight: 500;
  padding: 0.6rem 1rem;
}

#uploadTabs .nav-link:hover {
  color: var(--pan-accent);
}

#uploadTabs .nav-link.active {
  color: #fff;
  background: linear-gradient(135deg, var(--pan-accent), #2b7fd4);
}

#uploadTabContent {
  border-radius: 0 0 var(--pan-radius) var(--pan-radius) !important;
  border-color: #dde5ef !important;
  box-shadow: 0 4px 20px rgba(26, 35, 50, 0.06);
}

#progressBar {
  width: 100%;
  background: #edf1f7;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 0.75rem;
  position: relative;
  height: 34px;
}

#progressBarInner {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #5ad8a6, var(--pan-accent));
  transition: width 0.25s ease;
  position: relative;
}

#progressText {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #1a2332;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  pointer-events: none;
}

#uploadStatus {
  margin-top: 1rem;
  font-size: 0.9rem;
}

#uploadStatus p {
  margin-bottom: 0.35rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  background: #f6f8fc;
}

.tab-list-panel {
  max-height: min(52vh, 480px);
  overflow: auto;
  font-size: 0.875rem;
}

.tab-list-panel table {
  margin-bottom: 0;
}

.tab-list-panel .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.badge-status-pending {
  background-color: #6c757d !important;
}
.badge-status-processing {
  background-color: var(--pan-accent) !important;
}
.badge-status-failed {
  background-color: #dc3545 !important;
}

.pan-hint {
  font-size: 0.9rem;
  color: #b45309;
  background: #fff8f0;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

.pan-body--embed .pan-main,
.pan-body--embed .pan-main--plain {
  min-height: auto;
}

.pan-player-wrapper-embed {
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 12px;
  position: relative;
}

.pan-player-wrapper-embed .player-container {
  background: transparent;
  position: relative;
  z-index: 1;
}

.pan-player-wrapper-embed #cover-image-container,
.pan-player-wrapper-embed #waveform-container {
  background: transparent !important;
}

.player-container {
  margin-top: 1rem;
}

.alert {
  border-radius: 8px;
}

/* 列表：保持真实表格布局；窄屏横向滚动，避免 flex/卡片导致错位 */
.table-responsive.pan-table-wrap,
.pan-table-wrap.table-responsive {
  -webkit-overflow-scrolling: touch;
}

.pan-file-list .table thead th,
.pan-admin-list .table thead th {
  white-space: nowrap;
}

/* 电脑/平板：标题列单行省略 */
@media (min-width: 768px) {
  .pan-file-list td[data-pan="title"],
  .pan-file-list td.original-name,
  .pan-admin-list td[data-pan="title"] {
    max-width: 18rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal !important;
    vertical-align: middle;
  }
}

@media (max-width: 991.98px) {
  .pan-file-list .table,
  .pan-admin-list .table {
    min-width: 920px;
  }

  .pan-table-wrap.pan-file-list .table thead th,
  .pan-table-wrap.pan-file-list .table tbody td,
  .pan-table-wrap.pan-admin-list .table thead th,
  .pan-table-wrap.pan-admin-list .table tbody td {
    padding: 0.5rem 0.45rem;
    font-size: 0.8125rem;
  }
}

/* 手机：文件列表多行「表格」布局（仅 pan-file-list），无列标题文案，仅数据与按钮 */
@media (max-width: 767.98px) {
  .pan-table-wrap.pan-file-list {
    overflow-x: visible;
  }

  .pan-file-list .table {
    min-width: 0 !important;
    display: block;
    width: 100%;
    border: 0;
  }

  .pan-file-list thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .pan-file-list tbody {
    display: block;
  }

  .pan-file-list tbody tr {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0.4rem;
    row-gap: 0.25rem;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.55rem;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(26, 35, 50, 0.1);
    border-radius: 10px;
    background: var(--pan-surface);
    box-shadow: 0 1px 5px rgba(26, 35, 50, 0.05);
  }

  .pan-file-list tbody tr:nth-child(even) {
    background: var(--pan-surface);
  }

  .pan-file-list tbody td {
    display: block;
    border: none !important;
    padding: 0.1rem 0 !important;
    font-size: 0.8rem;
    text-align: center;
    vertical-align: middle;
  }

  .pan-file-list td[data-pan="id"],
  .pan-file-list td[data-pan="title"] {
    text-align: left;
  }

  .pan-file-list td[data-pan="key"],
  .pan-file-list td[data-pan="bpm"],
  .pan-file-list td[data-pan="conv"] {
    display: none !important;
  }

  /* 第 1 行：ID | 标题（单行，横向滑动看全文） */
  .pan-file-list td[data-pan="id"] {
    grid-column: 1;
    grid-row: 1;
    font-weight: 700;
    color: #64748b;
    font-size: 0.72rem;
    align-self: start;
    padding-top: 0.2rem !important;
  }

  .pan-file-list td[data-pan="title"] {
    grid-column: 2 / 5;
    grid-row: 1;
    font-weight: 600;
    line-height: 1.35;
    min-width: 0;
    white-space: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    text-overflow: clip !important;
    word-break: normal !important;
    max-width: none !important;
    font-size: 0.84rem;
    scrollbar-width: thin;
  }

  .pan-file-list td[data-pan="title"]::-webkit-scrollbar {
    height: 4px;
  }

  .pan-file-list td[data-pan="title"]::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.35);
    border-radius: 4px;
  }

  /* 第 2 行：大小 | 码率 | 时长 | 格式 */
  .pan-file-list td[data-pan="size"],
  .pan-file-list td[data-pan="bitrate"],
  .pan-file-list td[data-pan="duration"],
  .pan-file-list td[data-pan="format"] {
    border-top: 1px solid rgba(41, 65, 102, 0.1);
    padding-top: 0.35rem !important;
    margin-top: 0.15rem;
    font-size: 0.74rem;
    color: #334155;
  }

  .pan-file-list td[data-pan="size"] {
    grid-column: 1;
    grid-row: 2;
  }

  .pan-file-list td[data-pan="bitrate"] {
    grid-column: 2;
    grid-row: 2;
  }

  .pan-file-list td[data-pan="duration"] {
    grid-column: 3;
    grid-row: 2;
  }

  .pan-file-list td[data-pan="format"] {
    grid-column: 4;
    grid-row: 2;
  }

  /* 第 3 行：波图 | 上传者 | 时间（无时间列时用两格） */
  .pan-file-list--with-date td[data-pan="wave"],
  .pan-file-list--no-date td[data-pan="wave"] {
    border-top: 1px solid rgba(41, 65, 102, 0.1);
    padding-top: 0.35rem !important;
    margin-top: 0.1rem;
    grid-column: 1 / 3;
    grid-row: 3;
  }

  .pan-file-list--with-date td[data-pan="user"] {
    border-top: 1px solid rgba(41, 65, 102, 0.1);
    padding-top: 0.35rem !important;
    margin-top: 0.1rem;
    grid-column: 3;
    grid-row: 3;
    font-size: 0.72rem;
    align-self: center;
    word-break: break-all;
  }

  .pan-file-list--with-date td[data-pan="date"] {
    border-top: 1px solid rgba(41, 65, 102, 0.1);
    padding-top: 0.35rem !important;
    margin-top: 0.1rem;
    grid-column: 4;
    grid-row: 3;
    font-size: 0.72rem;
    align-self: center;
  }

  .pan-file-list--no-date td[data-pan="user"] {
    border-top: 1px solid rgba(41, 65, 102, 0.1);
    padding-top: 0.35rem !important;
    margin-top: 0.1rem;
    grid-column: 3 / 5;
    grid-row: 3;
    font-size: 0.72rem;
    align-self: center;
    word-break: break-all;
  }

  .pan-file-list td[data-pan="wave"] .waveform-img {
    max-width: 100%;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
  }

  /* 第 4 行：原件下载 | 播放 */
  .pan-file-list td[data-pan="orig"],
  .pan-file-list td[data-pan="play"] {
    border-top: 1px solid rgba(41, 65, 102, 0.1);
    padding-top: 0.4rem !important;
    margin-top: 0.1rem;
  }

  .pan-file-list td[data-pan="orig"] {
    grid-column: 1 / 3;
    grid-row: 4;
  }

  .pan-file-list td[data-pan="play"] {
    grid-column: 3 / 5;
    grid-row: 4;
  }

  .pan-file-list td[data-pan="orig"] .btn,
  .pan-file-list td[data-pan="play"] .btn {
    width: 100%;
    max-width: 9.5rem;
    margin-left: auto;
    margin-right: auto;
  }

  .tab-list-panel .upload-queue-table {
    min-width: 720px;
  }

  .tab-list-panel .upload-files-table {
    min-width: 420px;
  }

  .pagination {
    justify-content: center;
  }
}