/* TG 下载控制台 - 样式
   参考 TG-FF-4 的深色面板风格，纯手写 CSS，无外部依赖。 */

:root {
  --bg: #0f1115;
  --bg-soft: #161922;
  --card: #1a1e28;
  --card-2: #202533;
  --border: #2a3040;
  --border-soft: #232838;
  --text: #e6e9ef;
  --text-dim: #9aa3b2;
  --text-faint: #6b7484;
  --blue: #3b82f6;
  --blue-soft: rgba(59, 130, 246, 0.14);
  --teal: #14b8a6;
  --teal-soft: rgba(20, 184, 166, 0.14);
  --green: #22c55e;
  --amber: #f59e0b;
  --red: #ef4444;
  --radius: 12px;
}

* { box-sizing: border-box; }

[v-cloak] { display: none; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 16px; }
h2 { font-size: 15px; margin-bottom: 12px; }
h3 { font-size: 14px; }
code { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; }
.mono { font-family: Consolas, "Cascadia Mono", monospace; }
.muted { color: var(--text-dim); }
.small { font-size: 12px; }
.err { color: var(--red); }
.right { text-align: right; }
.pad { padding: 12px 0; }
.dim { opacity: 0.45; pointer-events: none; }

/* ---------------- 顶栏 ---------------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 20px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-faint); }
.dot-live { background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 1.8s infinite; }
.dot-idle { background: var(--text-faint); }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.tabs { display: flex; gap: 6px; margin-left: auto; }
.tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s;
}
.tab:hover { color: var(--text); background: var(--card); }
.tab.active { background: var(--card); color: var(--text); border-color: var(--border); }
.topright { display: flex; align-items: center; gap: 10px; }

/* ---------------- 布局 ---------------- */
main { padding: 18px 20px 40px; max-width: 1680px; margin: 0 auto; }
.grid { display: grid; grid-template-columns: 1fr 1fr 340px; gap: 16px; align-items: start; }
.span2 { grid-column: span 2; }
.col { display: flex; flex-direction: column; gap: 16px; }
.side { grid-row: span 10; }

@media (max-width: 1300px) {
  .grid { grid-template-columns: 1fr; }
  .span2, .col, .side { grid-column: span 1; }
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.card.running { border-color: var(--blue); box-shadow: 0 0 0 1px rgba(59,130,246,.2); }
.card-mode-teal.running { border-color: var(--teal); box-shadow: 0 0 0 1px rgba(20,184,166,.2); }
.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.card-head h2, .card-head h3 { margin: 0; }
.desc { color: var(--text-dim); font-size: 13px; margin: 4px 0 0; }

.tag {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--card-2); color: var(--text-dim); border: 1px solid var(--border);
}
.tag-teal { background: var(--teal-soft); color: var(--teal); border-color: rgba(20,184,166,.3); }
.hint { font-size: 12px; color: var(--text-faint); }
.arrow { color: var(--text-faint); }

.pill { font-size: 11px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); }
.pill-run { background: var(--green); color: #05210f; border-color: transparent; font-weight: 600; }
.pill-idle { background: var(--card-2); color: var(--text-dim); }
.pill-warn { background: rgba(245,158,11,.18); color: var(--amber); border-color: rgba(245,158,11,.35); }
.pill-ok { background: rgba(34,197,94,.18); color: var(--green); border-color: rgba(34,197,94,.35); }
.pill-bad { background: rgba(239,68,68,.18); color: var(--red); border-color: rgba(239,68,68,.35); }

/* ---------------- 按钮 / 表单 ---------------- */
.btn {
  background: var(--card-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: all .15s;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: #262c3c; border-color: #37405a; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-lg { padding: 10px 22px; font-size: 14px; font-weight: 600; }
.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-primary:hover:not(:disabled) { background: #2563eb; border-color: #2563eb; }
.btn-blue { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-teal { background: var(--teal); border-color: var(--teal); color: #032620; }
.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #dc2626; }
.btn-ghost { background: transparent; }

.input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
}
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.input-sm { width: 110px; }
.input-xs { width: 100px; }
select.input { cursor: pointer; }

.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row .input { flex: 1; min-width: 90px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .two { grid-template-columns: 1fr; } }

.field { display: block; margin-bottom: 14px; }
.field .lbl { display: block; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.field .hintline { display: block; font-size: 11px; color: var(--text-faint); margin-bottom: 6px; }
.req { color: var(--red); }
.subrow { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

.fs {
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 14px 16px 6px;
  margin: 0 0 16px;
  background: rgba(255,255,255,.012);
}
.fs legend {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 0 6px;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card-2); border: 1px solid var(--border);
  padding: 3px 9px; border-radius: 999px; font-size: 12px;
}
.chip b { color: var(--text-dim); font-weight: 600; }
.chip a { color: var(--red); text-decoration: none; font-weight: 700; }
.chip-check { cursor: pointer; user-select: none; }
.chip-check input { display: none; }
.chip-check.on { background: rgba(99,102,241,.2); border-color: rgba(99,102,241,.5); color: #a5b4fc; }
.chip-var { cursor: pointer; }
.chip-var:hover { border-color: var(--blue); color: var(--blue); }

.varlist { margin: 6px 0 10px; }
.preview {
  background: var(--bg); border: 1px dashed var(--border);
  border-radius: 8px; padding: 8px 10px; font-size: 12px;
  color: var(--text-dim); word-break: break-all;
}

.actions { display: flex; gap: 10px; align-items: center; }

/* ---------------- 进度 / 统计 ---------------- */
.bar { flex: 1; height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; border: 1px solid var(--border-soft); }
.bar-thin { height: 5px; }
.bar-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #60a5fa); transition: width .4s ease; }
.bar-ok { background: linear-gradient(90deg, #16a34a, #22c55e); }
.bar-teal { background: linear-gradient(90deg, #0d9488, #14b8a6); }
.bar-warn { background: linear-gradient(90deg, #d97706, #f59e0b); }

.progress-line { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pct { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 62px; text-align: right; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.stats-tight { grid-template-columns: 1fr 1fr; margin-bottom: 12px; }
.stat { background: var(--bg); border: 1px solid var(--border-soft); border-radius: 9px; padding: 9px 11px; }
.stat .k { font-size: 11px; color: var(--text-faint); }
.stat .v { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat .u { font-size: 11px; color: var(--text-faint); font-weight: 400; margin-left: 4px; }

.disk { margin-bottom: 14px; }
.disk-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; }

.runlist { display: flex; flex-direction: column; gap: 8px; }
.runrow { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--border-soft); border-radius: 9px; padding: 9px 12px; }
.notice { margin-top: 10px; font-size: 12px; color: var(--amber); background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); border-radius: 8px; padding: 8px 10px; }

.modebox { border-radius: 9px; padding: 9px 11px; margin-bottom: 12px; border: 1px solid var(--border); }
.mode-blue { background: var(--blue-soft); border-color: rgba(59,130,246,.35); }
.mode-teal { background: var(--teal-soft); border-color: rgba(20,184,166,.35); }
.modeline { display: flex; justify-content: space-between; align-items: baseline; }

/* ---------------- 下载列表 ---------------- */
.dl-list { display: flex; flex-direction: column; gap: 9px; max-height: 340px; overflow-y: auto; }
.dl-item { background: var(--bg); border: 1px solid var(--border-soft); border-radius: 9px; padding: 9px 11px; }
.dl-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dl-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-meta { margin: 3px 0 6px; }

/* ---------------- 日志 ---------------- */
.logbox {
  background: #0b0d11; border: 1px solid var(--border-soft); border-radius: 9px;
  padding: 10px; max-height: 260px; overflow-y: auto;
  font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; line-height: 1.65;
}
.logbox-tall { max-height: 420px; }
.logline { color: #b8c0cf; word-break: break-all; }
.log-err { color: #fca5a5; }
.logts { color: var(--text-faint); margin-right: 8px; }

.histrow { display: flex; flex-direction: column; gap: 2px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); }
.histrow:last-child { border-bottom: none; }

/* ---------------- 表格 ---------------- */
.tbl { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12.5px; }
.tbl th {
  text-align: left; font-size: 11px; color: var(--text-faint); font-weight: 600;
  padding: 8px 10px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--card);
}
.tbl td { padding: 6px 10px; border-bottom: 1px solid var(--border-soft); }
.tbl tr:hover td { background: rgba(255,255,255,.025); }

/* ---------------- 提示 ---------------- */
.toast {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  padding: 10px 22px; border-radius: 10px; z-index: 100; font-size: 13px;
  box-shadow: 0 8px 26px rgba(0,0,0,.45); max-width: 76vw;
}
.toast-info { background: var(--blue); color: #fff; }
.toast-ok { background: var(--green); color: #04230f; }
.toast-warn { background: var(--amber); color: #241500; }
.toast-err { background: var(--red); color: #fff; }

.foot { padding: 16px 20px; border-top: 1px solid var(--border); text-align: center; }

/* 滚动条 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333a4d; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #434c63; }

/* ---------------- 保存结构示意 ---------------- */
.tree {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 10px 0;
}
.tree-row {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding-left: 22px;
}
/* 层级连线 */
.tree-row::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}
.tree-row:first-child::before { top: 50%; }
.tree-row:last-child::before { bottom: 50%; }
.tree-row::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--border);
}
.tree-row:first-child::before,
.tree-row:first-child::after { display: none; }
.tree-row:first-child { padding-left: 0; }

.tree-lv {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tree-path { color: var(--text); font-size: 12.5px; }
.tree-note { color: var(--text-faint); font-size: 11.5px; }

/* 高级折叠区 */
details.adv {
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, .012);
}
details.adv > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-dim);
  user-select: none;
  list-style: none;
}
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::before {
  content: "▸ ";
  color: var(--text-faint);
}
details.adv[open] > summary::before { content: "▾ "; }
details.adv > summary:hover { color: var(--text); }

/* ---------------- 去重（已跳过）说明 ---------------- */
.dedupe {
  background: var(--teal-soft);
  border: 1px solid rgba(20, 184, 166, .3);
  border-radius: 9px;
  padding: 9px 11px;
  margin-bottom: 12px;
}
.dedupe-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
}
.dedupe-k { color: var(--text-dim); }
.dedupe-v { font-weight: 600; color: var(--teal); font-variant-numeric: tabular-nums; }

/* ---------------- 频道浏览 ---------------- */
.browse-actions {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--border-soft);
  margin-bottom: 10px;
}
.msg-list { display: flex; flex-direction: column; gap: 8px; max-height: 68vh; overflow-y: auto; }
.msg {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--bg); border: 1px solid var(--border-soft);
  border-radius: 10px; padding: 10px 12px; transition: border-color .15s;
}
.msg:hover { border-color: #37405a; }
.msg.sel { border-color: var(--blue); background: var(--blue-soft); }
.msg-check { padding-top: 4px; flex-shrink: 0; }
.msg-thumb {
  width: 84px; height: 112px; flex-shrink: 0; border-radius: 8px; overflow: hidden;
  background: #0b0d11; border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
}
.msg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg-nothumb { font-size: 11px; color: var(--text-faint); text-align: center; }
.msg-body { min-width: 0; flex: 1; }
.msg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.msg-id { font-family: Consolas, monospace; font-size: 12px; color: var(--blue); }
.msg-caption {
  font-size: 13px; color: var(--text); margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-word;
}
.msg-meta { word-break: break-all; }
.chip-mini { font-size: 11px; padding: 1px 8px; }

/* ---------------- 频道选择器 ---------------- */
.chat-picker {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding: 12px; margin-bottom: 10px;
  background: var(--bg); border: 1px solid var(--border-soft); border-radius: 10px;
}

/* 概览里的下载条目行 */
.runrow-item { gap: 8px; }
.runrow-item .bar { min-width: 80px; }

/* 代理状态灯 */
.dot-warn { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.dot-bad { background: var(--red); box-shadow: 0 0 8px var(--red); }

/* 配额生成结果 */
.quota-info {
  margin-top: 8px; padding: 8px 10px;
  background: var(--bg); border: 1px dashed var(--border);
  border-radius: 8px; font-size: 12px; color: var(--text-dim);
  word-break: break-all;
}

/* ---------------- 克隆/上传 方案选择 ---------------- */
.plan-pick { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.plan {
  flex: 1; min-width: 280px; display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); cursor: pointer; transition: all .15s;
}
.plan:hover { border-color: #37405a; }
.plan.on { border-color: var(--blue); background: var(--blue-soft); }
.plan input { margin-top: 3px; }
.plan .hintline { display: block; margin-top: 4px; }

/* ---------------- 移动端全面优化 (Screen <= 768px) ---------------- */
@media (max-width: 768px) {
  html, body {
    font-size: 13px;
  }

  /* 顶栏移动端重排 */
  .topbar {
    padding: 10px 12px;
    gap: 8px 12px;
  }
  .brand {
    gap: 8px;
    flex: 1;
    min-width: 0;
  }
  .brand h1 {
    font-size: 14.5px;
    white-space: nowrap;
  }
  .brand .tag {
    max-width: 105px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .brand .small {
    display: none; /* 隐藏冗余频道ID，腾出顶部空间 */
  }

  .topright {
    gap: 6px;
    font-size: 11.5px;
  }
  .topright .btn {
    padding: 4px 8px;
    font-size: 11.5px;
  }

  /* 选项卡移动端横向丝滑滑块 */
  .tabs {
    order: 3;
    width: 100%;
    margin-left: 0;
    margin-top: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    padding-bottom: 2px;
  }
  .tabs::-webkit-scrollbar {
    display: none;
  }
  .tab {
    padding: 6px 12px;
    font-size: 12.5px;
    flex-shrink: 0;
  }

  /* 主内容区边距压缩 */
  main {
    padding: 12px 10px 50px;
  }
  .grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .card {
    padding: 14px 12px;
    border-radius: 10px;
  }

  /* 进度与统计卡片 (2x2 对齐) */
  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .stat {
    padding: 8px 10px;
  }
  .stat .v {
    font-size: 14.5px;
  }

  /* 表单与交互按钮优化 */
  .input, select.input {
    font-size: 16px; /* 防止 iOS Safari 触焦时整页强制放大 */
  }
  .row {
    gap: 6px;
  }
  .row .input {
    min-width: 70px;
  }
  .two {
    grid-template-columns: 1fr;
  }
  .actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .btn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 表格横向滚动包裹 */
  .tbl {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  /* 浏览消息与缩略图卡片 */
  .msg {
    padding: 8px 10px;
    gap: 8px;
  }
  .msg-thumb {
    width: 64px;
    height: 86px;
  }
  .msg-caption {
    font-size: 12px;
    -webkit-line-clamp: 2;
  }

  /* 方案选择单选卡 */
  .plan-pick {
    flex-direction: column;
  }
  .plan {
    min-width: 0;
  }

  /* 日志框 */
  .logbox {
    max-height: 220px;
    font-size: 11px;
  }
  .logbox-tall {
    max-height: 300px;
  }

  /* 运行条目行 */
  .runrow {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
  }
}