/* admin 面板布局（复用 style.css 的令牌与 .btn/.card） */

/* 防御：任何 display 规则都不得覆盖 hidden 属性（曾因 hidden 失效
   导致未登录用户看到后台界面）。!important 压过一切 display 声明 */
[hidden] { display: none !important; }

.admin-wrap {
  min-height: 100vh;
  background: var(--q-window-bg);
  padding: 32px 0 64px;
  transition: background var(--duration-normal) var(--ease-out),
              color var(--duration-normal) var(--ease-out);
}
.admin-container { max-width: 760px; margin: 0 auto; padding: 0 24px; }

.admin-head { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.admin-head .brand-mark { width: 32px; height: 32px; }
.admin-head h1 { font-size: 1.25rem; font-weight: 700; }

.card {
  background: var(--q-card-bg);
  border: 1px solid var(--q-border-soft);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
}
.card h2 { font-size: 1.0625rem; font-weight: 700; margin-bottom: 16px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 0.8125rem; font-weight: 600; color: var(--q-text-secondary); }
.field .hint { font-size: 0.75rem; color: var(--q-text-disabled); }
.field input {
  font: inherit;
  padding: 9px 12px;
  border: 1px solid var(--q-border);
  border-radius: var(--radius-sm);
  background: var(--q-window-bg);
  color: var(--q-text-primary);
}
.field input:focus {
  outline: none;
  border-color: var(--q-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-accent) 22%, transparent);
}

.platform-block {
  border: 1px solid var(--q-border-soft);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 16px;
  background: var(--q-view-bg);
}
.platform-block > h3 {
  font-size: 1rem; font-weight: 700; margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.platform-block .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .platform-block .grid2 { grid-template-columns: 1fr; } }

/* ── 平台子 Tab：三平台整合到一个区域，块常驻只显隐 ──
   保存时从 DOM 逐平台取值，所以这里绝不能重渲染，只切 hidden */
.plat-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.plat-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--q-border-soft); background: var(--q-view-bg);
  cursor: pointer; font-size: 0.875rem; font: inherit; color: var(--q-text-secondary);
}
.plat-tab:hover { color: var(--q-text-primary); }
.plat-tab.is-active { color: var(--q-text-primary); border-color: var(--q-accent); font-weight: 600; }
.plat-state { font-size: 0.6875rem; color: var(--q-text-disabled); }
.plat-state-warn { color: var(--q-danger-fg); }

.upload-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.upload-row input[type=file] { font-size: 0.8125rem; max-width: 220px; }
.url-row { margin-top: 10px; }

.alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 0.875rem; }
.alert-error { background: var(--q-danger-bg); color: var(--q-danger-fg); border: 1px solid var(--q-danger-border); }
.alert-ok    { background: var(--q-success-bg); color: var(--q-success-fg); border: 1px solid var(--q-success-border); }

.muted { color: var(--q-text-secondary); font-size: 0.875rem; }
.spacer { flex: 1; }

.file-list { list-style: none; }
.file-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--q-border-soft);
  font-size: 0.875rem;
}
.file-list .fsize { color: var(--q-text-secondary); margin-left: auto; font-family: var(--font-mono); font-size: 0.75rem; }
/* 内容哈希前 8 位：与大小同排，弱化处理只作核对用 */
.file-list .sha { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--q-text-disabled); }

/* ── 版本历史行：固定三列（名字 / 时间戳 / 动作区）────────
   .fsize/.badge/.tag-ok 都带 margin-left:auto，混在一行会互相抢空间，
   导致有 badge 和没 badge 的行布局不同。这里用 grid 固定列，
   每行恒 3 个子元素（badge 藏在动作区内），列宽取各行最宽者 → 垂直对齐 */
#history-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
}
#history-list li .fsize { margin-left: 0; }
#history-list li .hist-actions { display: flex; align-items: center; gap: 8px; }
#history-list li .tag-ok { margin-left: 0; }

.login-card { max-width: 360px; margin: 120px auto 0; }

/* ── 通用两列栅格（所有卡片可用，不只平台区块）────────── */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }

/* ── 卡片头部：标题 + 右侧状态 ───────────────────────── */
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.card-head h2 { margin-bottom: 0; }
.badge {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--q-view-bg);
  border: 1px solid var(--q-border-soft);
  color: var(--q-text-secondary);
  font-size: 0.75rem;
}
/* 告警变体：文件缺失 / 未被引用等需要引起注意的状态 */
.badge-warn {
  background: var(--q-danger-bg);
  border-color: var(--q-danger-border);
  color: var(--q-danger-fg);
}
/* 列表内联告警：不要 .badge 的 margin-left:auto，否则会和 .fsize 抢空间 */
.badge.tag-inline { margin-left: 0; }
.sub-head {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--q-text-secondary);
  margin: 0 0 8px;
}
.tag-ok {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--q-success-fg);
}

/* ── 首页轮播图网格：缩略图回显 + 排序 + 移出 ─────────── */
.shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.shot-tile {
  border: 1px solid var(--q-border-soft);
  border-radius: var(--radius-md);
  padding: 8px;
  background: var(--q-view-bg);
}
.shot-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--q-window-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-thumb img.is-broken { object-fit: contain; padding: 8px; opacity: 0.45; }
.shot-order {
  position: absolute;
  top: 6px;
  left: 6px;
  min-width: 20px;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-align: center;
}
.tile-actions { display: flex; gap: 6px; margin-top: 8px; }
.tile-actions .btn { flex: 1; padding: 4px 0; }
.shot-name {
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--q-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Tab 栏（概览 / 发布 / 版本 / 官网 / 设置）───────── */
.tabs {
  display: flex;
  flex-wrap: wrap; /* 窄屏下五个 Tab 允许换行，不横向溢出 */
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--q-border-soft);
}
.tab {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 9px 16px;
  margin-bottom: -1px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  color: var(--q-text-secondary);
  cursor: pointer;
}
.tab:hover { color: var(--q-text-primary); background: var(--q-view-bg); }
.tab.is-active {
  color: var(--q-text-primary);
  background: var(--q-view-bg);
  border-bottom-color: var(--q-accent);
}
.tab-panel { margin-bottom: 4px; }
/* Tab 顶部工具行：说明 + 右侧操作 */
.tab-tools { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }

/* ── 概览仪表盘（只读）：标签 / 内容 的行式两栏 ────── */
.ov-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--q-border-soft);
  font-size: 0.875rem;
}
.ov-line:last-child { border-bottom: none; }
.ov-label { flex: 0 0 8.5em; color: var(--q-text-secondary); font-weight: 600; }
.ov-line a { color: var(--q-accent); word-break: break-all; }

/* ── 未保存提示条：跨 Tab 可见（放在面板外） ────────── */
.dirty-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid var(--q-danger-border);
  border-radius: var(--radius-md);
  background: var(--q-danger-bg);
  font-size: 0.8125rem;
}
.dirty-bar .muted { color: var(--q-danger-fg); }

/* ── 危险操作按钮 ───────────────────────────────────── */
.btn-danger {
  background: var(--q-danger-bg);
  color: var(--q-danger-fg);
  border: 1px solid var(--q-danger-border);
}

/* ── 底部固定操作栏：主操作始终可见 ──────────────────── */
.action-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border: 1px solid var(--q-border-soft);
  border-radius: var(--radius-md);
  background: var(--q-card-bg);
  box-shadow: var(--shadow-modal);
}
.action-bar .muted { flex: 1; }