/* 离线同步卡片 + 离线设置页样式（views.css 不动）。
 * 只使用 base.css 的 CSS 变量，便于后续深色模式统一适配。
 * 全部选择器限定在 .sync-* / .offline-*，不影响其它页面。 */

/* ================= 我的页：学习记录同步卡片 ================= */
.sync-body { gap: 8px; }
.sync-lead { font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.sync-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.sync-actions .btn { min-height: 46px; flex: 1 1 46%; }
.sync-file-input { display: none; }
.sync-status {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 2px;
}
.sync-hint {
  margin-top: 4px;
  padding: 9px 11px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 6%, var(--card));
  border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line));
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.6;
}
.sync-hint-offline {
  background: color-mix(in srgb, var(--warn) 8%, var(--card));
  border-color: color-mix(in srgb, var(--warn) 24%, var(--line));
  color: color-mix(in srgb, var(--warn) 70%, var(--ink));
}
@media (max-width: 360px) {
  .sync-actions .btn { flex: 1 1 100%; }
}

/* ================= 离线设置页 ================= */
.offlineview { max-width: 760px; margin-left: auto; margin-right: auto; }
.offline-lead { font-size: 15px; line-height: 1.7; color: var(--ink); }
.offline-online { gap: 10px; }
.offline-steps { display: grid; gap: 8px; margin: 4px 0; }
.offline-step {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 3%, var(--card));
  border: 1px solid var(--line);
}
.offline-step b { font-size: 13.5px; color: var(--ink); }
.offline-online .btn { margin-top: 6px; }

/* 加载 */
.offline-loading { display: grid; gap: 8px; padding: 10px 0; }
.offline-loading-bar {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--line), color-mix(in srgb, var(--brand) 20%, var(--line)), var(--line));
  background-size: 220% 100%;
  animation: offline-sk 1.2s ease-in-out infinite;
}
@keyframes offline-sk {
  0% { background-position: 0% 0; opacity: .7; }
  50% { background-position: 100% 0; opacity: 1; }
  100% { background-position: 0% 0; opacity: .7; }
}
.offline-error-msg {
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--bad) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--bad) 22%, var(--line));
  color: color-mix(in srgb, var(--bad) 70%, var(--ink));
  word-break: break-all;
}

/* 顶部版本 / 已下载概况 */
.offline-hero.p, .offline-hero.card { padding: 16px; }
.offline-hero-top { display: flex; align-items: flex-start; gap: 10px; }
.offline-hero-title { font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1.35; }
.offline-hero-top .pill { flex: none; margin-top: 2px; }
.offline-version { font-variant-numeric: tabular-nums; }
.offline-summary {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.offline-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.offline-summary-row b { font-size: 13.5px; color: var(--ink); }
.offline-summary-row span { font-variant-numeric: tabular-nums; }
.offline-summary-time { margin-top: 4px; }

/* 科目复选框列表 */
.offline-subjects { display: grid; gap: 8px; }
.offline-subject {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 13px;
  border: 1.5px solid var(--line);
  background: var(--card);
  cursor: pointer;
  min-height: 58px;
  -webkit-tap-highlight-color: transparent;
}
.offline-subject.is-checked {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  background: color-mix(in srgb, var(--brand) 4%, var(--card));
}
.offline-check {
  flex: none;
  width: 21px;
  height: 21px;
  accent-color: var(--brand);
  cursor: pointer;
}
.offline-subject-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.offline-subject-name { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.offline-subject-meta { font-variant-numeric: tabular-nums; }
.offline-badge {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--line);
  color: var(--ink-2);
  white-space: nowrap;
}
.offline-badge.ok { background: color-mix(in srgb, var(--ok) 12%, var(--card)); color: var(--ok); }
.offline-badge.warn { background: color-mix(in srgb, var(--warn) 14%, var(--card)); color: var(--warn); }
.offline-badge.gray { background: var(--line); color: var(--ink-3); }

/* 操作按钮 */
.offline-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.offline-actions .btn { min-height: 46px; }
.offline-actions .btn.primary { flex: 1 1 100%; }
.btn.danger {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 40%, var(--line));
}
.btn.danger:active { background: color-mix(in srgb, var(--bad) 8%, var(--card)); }

/* 下载进度 */
.offline-progress { padding: 14px; }
.offline-progress-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.offline-progress-track {
  height: 10px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.offline-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transition: width .2s ease;
}
.offline-progress-note { margin-top: 8px; }
.offline-note {
  margin-top: 6px;
  line-height: 1.6;
  padding: 9px 11px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 3%, var(--card));
  border: 1px dashed var(--line);
}

/* 桌面端排两列，手机单列 */
@media (min-width: 720px) {
  .offline-subjects { grid-template-columns: 1fr 1fr; }
  .offline-actions .btn.primary { flex: 0 0 auto; }
  .offline-actions .btn { min-height: 44px; }
}