:root {
  --primary: #2f6fed;
  --primary-600: #2459d6;
  --primary-50: #eef3fe;
  --bg: #eef1f8;
  --surface: #ffffff;
  --text: #1f2430;
  --text-2: #5b6068;
  --muted: #8a90a2;
  --border: #e8ebf2;
  --danger: #e5484d;
  --danger-bg: #fff1f0;
  --danger-border: #ffccc7;
  --radius: 14px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-md: 0 6px 24px rgba(16, 24, 40, .08);
  --shadow-lg: 0 16px 48px rgba(16, 24, 40, .16);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: linear-gradient(180deg, #f4f6fc 0%, #eaeef8 100%);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--primary-50); }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.error {
  color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger-border);
  padding: 10px 14px; border-radius: 10px; margin-top: 12px; font-size: 13px;
}

/* ---------- 登录 ---------- */
#login-view {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1200px 600px at 20% 0%, #5b78f0 0%, transparent 60%),
              linear-gradient(135deg, #3b6ef5 0%, #2f6fed 45%, #5b54e8 100%);
}
.login-card {
  width: 380px; max-width: calc(100vw - 32px); margin: 0; padding: 36px 32px;
  background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-lg); text-align: center;
}
.login-card .login-logo {
  width: 76px; height: 76px; margin: 0 auto 16px; object-fit: contain; border-radius: 18px;
}
.login-card h1 { font-size: 21px; margin: 0 0 6px; font-weight: 700; letter-spacing: .3px; }
.login-card .sub { color: var(--muted); font-size: 13px; margin: 0 0 22px; }
.login-card input {
  width: 100%; padding: 12px 14px; margin: 10px 0; border: 1px solid var(--border);
  border-radius: 10px; font-size: 14px; background: #fafbff; transition: border-color .15s, box-shadow .15s;
}
.login-card input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, .15); background: #fff;
}
.login-card button {
  width: 100%; padding: 12px; margin-top: 14px; border: none; border-radius: 10px;
  background: linear-gradient(135deg, #3b6ef5, #2f6fed); color: #fff; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: transform .08s ease, box-shadow .15s ease;
  box-shadow: 0 6px 16px rgba(47, 111, 237, .3);
}
.login-card button:hover { box-shadow: 0 8px 22px rgba(47, 111, 237, .4); }
.login-card button:active { transform: translateY(1px); }

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px; background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: .2px; }
.brand-logo { display: block; height: 30px; width: auto; flex: none; border-radius: 8px; }
.brand::before { display: none; }

.nav-links { display: flex; gap: 4px; margin-left: 8px; }
.nav-links a {
  padding: 7px 14px; border-radius: 10px; font-size: 13px; font-weight: 500;
  color: var(--text-2); text-decoration: none; cursor: pointer; transition: background .15s, color .15s;
}
.nav-links a:hover { background: #f1f3f9; color: var(--text); }
.nav-links a.active { background: var(--primary-50); color: var(--primary); }
.ghost {
  background: transparent; border: 1px solid var(--border); color: var(--text-2);
  padding: 7px 16px; border-radius: 10px; cursor: pointer; font-size: 13px; transition: background .15s, color .15s;
}
.ghost:hover { background: #f1f3f9; color: var(--text); }

/* ---------- 面包屑 ---------- */
.breadcrumb { padding: 16px 24px 4px; font-size: 13px; color: var(--muted); }
.breadcrumb > span:last-child { color: var(--text); font-weight: 600; }
.breadcrumb .sep { margin: 0 8px; color: #c4c9d4; }
.breadcrumb a.bc-link { color: var(--primary); cursor: pointer; text-decoration: none; font-weight: 500; }
.breadcrumb a.bc-link:hover { text-decoration: underline; }

/* ---------- 内容容器 ---------- */
.tab-pane { padding-bottom: 48px; }

/* ---------- 工具栏 ---------- */
.toolbar { display: flex; align-items: center; gap: 16px; padding: 16px 24px; }
.toolbar input {
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; min-width: 260px; font-size: 14px;
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.toolbar input:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47, 111, 237, .15);
}

/* ---------- 表格 ---------- */
.grid {
  width: calc(100% - 48px); margin: 0 24px 24px; border-collapse: separate; border-spacing: 0;
  background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  border: 1px solid var(--border); table-layout: fixed;
}
.grid th, .grid td { text-align: left; padding: 13px 16px; font-size: 14px; border-bottom: 1px solid #f1f3f8; }
.grid th {
  background: #f7f9fd; color: var(--text-2); font-weight: 600; font-size: 12.5px; letter-spacing: .3px; white-space: nowrap;
}
.grid td { white-space: nowrap; }
.grid tbody tr:last-child td { border-bottom: none; }
.grid tbody tr { transition: background .12s; }
.grid tr:hover td { background: #f7f9ff; }
.grid a.link { color: var(--primary); cursor: pointer; text-decoration: none; font-weight: 500; }
.grid a.link:hover { text-decoration: underline; }
.actions { white-space: nowrap; }
.mini {
  border: 1px solid var(--border); background: #fff; border-radius: 6px; padding: 3px 8px;
  margin-right: 6px; cursor: pointer; font-size: 12px; color: var(--text-2); transition: background .15s, color .15s, border-color .15s;
}
.mini:hover { background: #f1f3f9; color: var(--text); }
.mini.danger { color: var(--danger); border-color: var(--danger-border); }
.mini.danger:hover { background: var(--danger-bg); }

/* 用户名：占剩余并截断；其余列固定宽度不换行 */
.grid td:nth-child(1) { overflow: hidden; text-overflow: ellipsis; }
.grid th:nth-child(2), .grid td:nth-child(2) { width: 90px; }
.grid th:nth-child(3), .grid td:nth-child(3) { width: 200px; overflow: hidden; text-overflow: ellipsis; }
.grid th:nth-child(4), .grid td:nth-child(4) { width: 180px; }

/* ---------- 主从布局：左列表 + 右详情 ---------- */
.rec-layout { display: flex; gap: 20px; padding: 0 24px 24px; align-items: flex-start; }
.rec-list { flex: 0 0 520px; max-width: 520px; }
.rec-list .grid { width: 100%; margin: 0; }
.rec-list tbody tr { cursor: pointer; }
.rec-list tbody tr.active td { background: var(--primary-50); }
.rec-detail {
  flex: 1 1 auto; min-width: 0; background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); border: 1px solid var(--border); min-height: 60vh;
}

/* ---------- 记录列表：按分组折叠 ---------- */
.rec-groups { display: flex; flex-direction: column; gap: 12px; }
.rec-group {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.rec-group-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer;
  background: #f7f9fd; font-weight: 600; user-select: none; transition: background .15s;
}
.rec-group-head:hover { background: #eef2f8; }
.rec-group-head .caret {
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--muted);
  transition: transform .15s ease;
  display: inline-block; vertical-align: middle;
  margin-right: 6px;
}
.rec-group.collapsed .caret { transform: rotate(-90deg); }
.rec-group-head .g-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-group-head .g-count { flex: none; background: #e9edf5; color: var(--muted); border-radius: 999px; padding: 1px 9px; font-size: 12px; }
.rec-group-head .group-del-btn { margin-left: auto; font-size: 11px; padding: 2px 8px; }
.rec-group.collapsed .caret { transform: rotate(-90deg); }
.rec-group.collapsed .rec-group-body { display: none; }
.rec-group-body { display: flex; flex-direction: column; }
.rec-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 40px;
  cursor: pointer; border-top: 1px solid var(--border); transition: background .12s;
}
.rec-row:first-child { border-top: none; }
.rec-row:hover { background: #f5f7fb; }
.rec-row.active { background: var(--primary-50); }
.rec-row .r-title { flex: 1 1 auto; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-row .r-type, .rec-row .r-count, .rec-row .r-time { flex: none; color: var(--text-2); font-size: 13px; }
.rec-row .r-time { width: 140px; }
.rec-row .rec-del-btn { font-size: 11px; padding: 2px 8px; }
@media (max-width: 940px) {
  .rec-layout { flex-direction: column; }
  .rec-list { flex: none; max-width: 100%; width: 100%; }
}

/* ---------- 详情 ---------- */
.rec-detail h3 { margin: 0; padding: 20px 24px 4px; font-size: 17px; font-weight: 700; }
.rec-detail h3.rec-title { padding: 22px 24px 8px; font-size: 19px; letter-spacing: .2px; }
.meta { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 24px 20px; }
.meta > div {
  background: #f5f7fb; padding: 8px 14px; border-radius: 10px; min-width: 64px;
}
.meta .k { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; letter-spacing: .3px; }
.meta > div:not(.k) { font-size: 14px; font-weight: 600; }
.sentences { padding: 4px 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.sentence {
  display: flex; gap: 16px; background: #fff; padding: 16px; border-radius: var(--radius);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: box-shadow .18s, transform .18s, border-color .18s;
}
.sentence:hover { box-shadow: var(--shadow-md); border-color: #dde3f0; transform: translateY(-1px); }
.sentence .thumb {
  width: 76px; flex: none; align-self: stretch; object-fit: cover;
  border-radius: 12px; background: #eef0f5; min-height: 76px;
}
.sentence .thumb.placeholder {
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12px; letter-spacing: .5px; user-select: none;
}
.thumb.zoomable { cursor: zoom-in; transition: transform .15s ease; }
.thumb.zoomable:hover { transform: scale(1.06); }
.s-text { flex: 1 1 auto; min-width: 0; }
.s-text .en { font-size: 15.5px; font-weight: 600; line-height: 1.5; color: var(--text); }
.s-text .cn { font-size: 14px; color: var(--text-2); margin-top: 5px; line-height: 1.5; }
.s-text .small {
  display: inline-block; margin-top: 8px; padding: 2px 8px;
  background: #f1f3f9; color: var(--muted); border-radius: 999px; font-size: 11px; letter-spacing: .3px;
}

/* ---------- 文章模式：逐句卡片 ---------- */
.art-idx {
  flex: none; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-50); color: var(--primary); font-weight: 700; font-size: 12px;
  border-radius: 8px; align-self: flex-start; margin-top: 2px;
}
.s-timings { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.s-time {
  display: inline-block; padding: 2px 8px;
  background: #eef7ee; color: #3a8a3a; border-radius: 999px;
  font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- 图片放大（lightbox） ---------- */
.lightbox {
  position: fixed; inset: 0; background: rgba(15, 18, 30, .86); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 1000; cursor: zoom-out;
  animation: fade .18s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox img {
  max-width: 92vw; max-height: 92vh; border-radius: 12px; box-shadow: var(--shadow-lg);
  animation: pop .2s ease;
}
@keyframes pop { from { transform: scale(.94); opacity: .4; } to { transform: scale(1); opacity: 1; } }

/* ---------- 按语速试听 ---------- */
.sp-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.sp-row.article-audio {
  padding: 16px 20px; margin: 4px 24px 16px;
  background: linear-gradient(135deg, #eef3fe 0%, #f5f7fb 100%);
  border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.sp-label { font-size: 12px; color: var(--muted); margin-right: 2px; }
.sp-row.article-audio .sp-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.sp-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 6px 14px;
  cursor: pointer; font-size: 13px; color: var(--primary); font-weight: 600;
  transition: background .15s, color .15s, border-color .15s, transform .08s, box-shadow .15s;
}
.sp-chip:hover { background: var(--primary-50); border-color: #cdd9f7; }
.sp-chip:active { transform: scale(.96); }
.sp-chip.playing {
  background: linear-gradient(135deg, #3b6ef5, #2f6fed); color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(47, 111, 237, .35);
}
/* 播放/暂停图标（随 .playing 切换） */
.sp-ic {
  display: inline-block; flex: none;
  width: 0; height: 0; border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent currentColor;
}
.sp-chip.playing .sp-ic {
  width: 4px; height: 11px; box-sizing: content-box;
  border-width: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}

/* ---------- 数据库浏览（只读） ---------- */
.db-layout { display: flex; gap: 20px; padding: 16px 24px 24px; align-items: flex-start; }
.db-tables {
  flex: 0 0 240px; max-width: 240px; align-self: stretch;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.db-tables-head { padding: 12px 16px; font-weight: 600; background: #f7f9fd; border-bottom: 1px solid var(--border); }
.db-table-list { max-height: 72vh; overflow: auto; }
.db-table-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 16px; cursor: pointer; border-bottom: 1px solid #f1f3f8; transition: background .12s;
}
.db-table-item:last-child { border-bottom: none; }
.db-table-item:hover { background: #f5f7fb; }
.db-table-item.active { background: var(--primary-50); }
.db-table-item .t-name { flex: 1 1 auto; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-table-item .t-count { flex: none; font-size: 12px; color: var(--muted); background: #eef1f8; border-radius: 999px; padding: 1px 8px; }

.db-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.db-query { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px; }
.db-query textarea {
  width: 100%; min-height: 84px; resize: vertical; padding: 12px 14px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.6; background: #fafbff; color: var(--text); transition: border-color .15s, box-shadow .15s;
}
.db-query textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47,111,237,.15); background: #fff; }
.db-query-bar { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.db-query-bar .mini.primary { background: linear-gradient(135deg, #3b6ef5, #2f6fed); color: #fff; border-color: transparent; }
.db-query-bar .mini.primary:hover { filter: brightness(1.05); }

.db-result {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 16px 20px; min-height: 40vh;
}
.db-h { margin: 6px 0 12px; font-size: 15px; font-weight: 700; }
.db-grid-wrap { overflow: auto; max-height: 64vh; border: 1px solid var(--border); border-radius: var(--radius); }
.db-grid {
  width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); table-layout: auto;
}
.db-grid th, .db-grid td {
  text-align: left; padding: 9px 12px; font-size: 13px; border-bottom: 1px solid #f1f3f8; white-space: nowrap;
}
.db-grid th {
  position: sticky; top: 0; background: #f7f9fd; color: var(--text-2); font-weight: 600; font-size: 12px; z-index: 1;
}
.db-grid tbody tr:last-child td { border-bottom: none; }
.db-grid tbody tr:hover td { background: #f7f9ff; }
.db-grid td { max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.db-cell { cursor: pointer; }
.db-cell:hover { color: var(--primary); text-decoration: underline dotted; }

@media (max-width: 940px) {
  .db-layout { flex-direction: column; }
  .db-tables { flex: none; max-width: 100%; width: 100%; }
}

/* ---------- 弹窗 ---------- */
.modal { position: fixed; inset: 0; background: rgba(15, 18, 30, .45); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1100; }
.modal-card { background: #fff; padding: 26px; border-radius: 16px; width: 340px; box-shadow: var(--shadow-lg); animation: pop .18s ease; }
.modal-card h3 { margin: 0 0 16px; font-size: 17px; font-weight: 700; }
.modal-card input {
  width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.modal-card input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47, 111, 237, .15); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.modal-actions button { padding: 8px 18px; border-radius: 10px; border: none; cursor: pointer; font-size: 14px; }
.modal-actions .ghost { border: 1px solid var(--border); color: var(--text-2); }
.modal-actions #modal-ok { background: linear-gradient(135deg, #3b6ef5, #2f6fed); color: #fff; box-shadow: 0 4px 12px rgba(47, 111, 237, .3); }
.modal-actions #modal-ok:hover { filter: brightness(1.05); }

/* 单元格完整内容弹窗 */
.cell-card { width: min(900px, 95vw); max-height: 84vh; display: flex; flex-direction: column; }

/* 确认弹窗 */
.confirm-card { width: 380px; max-width: calc(100vw - 32px); }
.confirm-msg { margin: 0 0 20px; font-size: 14px; line-height: 1.7; color: var(--text-2); white-space: pre-line; }
.danger-btn { background: var(--danger) !important; color: #fff !important; border: none !important; }
.danger-btn:hover { filter: brightness(1.08); }

/* 提示弹窗 */
.toast-card { width: 340px; max-width: calc(100vw - 32px); }
.toast-msg { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: var(--text); }
.cell-card h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; word-break: break-all; }
.cell-text {
  margin: 0; padding: 14px 16px; background: #f7f9fd; border: 1px solid var(--border); border-radius: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6;
  color: var(--text); white-space: pre-wrap; word-break: break-all; overflow: auto; flex: 1 1 auto; min-height: 120px;
}

/* 学习统计 */
.stat-cards { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px 24px 4px; align-items: flex-start; }
.stat-cards-spacer { flex: 1 1 auto; min-width: 8px; }
.stat-cards .mini.danger { padding: 6px 14px; font-size: 13px; align-self: flex-start; margin-top: 0; }
.stat-card {
  flex: 1; min-width: 120px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.stat-card .stat-k { font-size: 12px; color: var(--muted); }
.stat-card .stat-v { font-size: 20px; font-weight: 700; margin-top: 4px; }
.chart-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  margin: 12px 24px; padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.chart-card .chart-head { display: flex; align-items: center; justify-content: space-between; }
.chart-card .chart-title { font-size: 14px; font-weight: 600; }
.chart-legend { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.chart-legend .lg { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.chart-legend .lg.a { background: var(--primary); margin-left: 10px; }
.chart-legend .lg.b { background: #f2994a; margin-left: 10px; }
canvas.chart { display: block; width: 100%; }
/* 设备列表 */
.dev-list { display: flex; flex-direction: column; margin-top: 8px; }
.dev-item { border-top: 1px solid var(--border); }
.dev-item:first-child { border-top: none; }
.dev-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 4px; cursor: pointer;
  user-select: none;
}
.dev-icon { font-size: 16px; flex: none; }
.dev-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.dev-arrow {
  display: inline-block;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--muted);
  transition: transform .15s ease;
  flex: none;
}
.dev-item.active .dev-arrow { transform: rotate(180deg); }
.dev-name { font-weight: 500; font-size: 14px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-sub { color: var(--muted); font-size: 12px; }
.dev-body { padding: 0 4px 8px; }

/* 学习统计入口按钮 */
.study-stats-entry {
  border: none;
  background: linear-gradient(135deg, #3b6ef5, #2f6fed);
  color: #fff;
  border-radius: 10px;
  padding: 8px 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(47, 111, 237, .3);
  transition: transform .08s ease, box-shadow .15s ease;
}
.study-stats-entry:hover {
  box-shadow: 0 6px 16px rgba(47, 111, 237, .4);
  filter: brightness(1.05);
}
.study-stats-entry:active {
  transform: translateY(1px);
}

/* ---------- 版本管理 ---------- */
.badge-force {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border);
  font-size: 12px; font-weight: 600;
}
.badge-optional {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: #f0f5ee; color: #3a8a3a; border: 1px solid #d4e8d4;
  font-size: 12px; font-weight: 600;
}
.rel-notes { white-space: normal !important; word-break: break-all; min-width: 160px; }

/* 版本表格列宽：覆盖 .grid 通用 nth-child 规则 */
#release-table th:nth-child(1), #release-table td:nth-child(1) { width: 110px; }
#release-table th:nth-child(2), #release-table td:nth-child(2) { width: 90px; }
#release-table th:nth-child(3), #release-table td:nth-child(3) { width: 90px; }
#release-table th:nth-child(4), #release-table td:nth-child(4) { width: auto; overflow: hidden; text-overflow: ellipsis; }
#release-table th:nth-child(5), #release-table td:nth-child(5) { width: 90px; }
#release-table th:nth-child(6), #release-table td:nth-child(6) { width: 180px; }
#release-table th:nth-child(7), #release-table td:nth-child(7) { width: 140px; }
/* 版本统计与上传按钮靠右 */
#release-count { margin-left: auto; }

/* 上传 / 编辑版本弹窗表单 */
.release-card { width: 460px; max-width: calc(100vw - 32px); }
.form-row { display: flex; align-items: flex-start; gap: 12px; margin: 12px 0; }
.form-label {
  flex: none; width: 72px; padding-top: 8px;
  font-size: 13px; color: var(--text-2); font-weight: 500;
}
.form-row input[type="file"] {
  flex: 1 1 auto; min-width: 0; padding: 8px 10px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 10px; background: #fafbff;
}
.form-row input[type="password"], .form-row textarea { flex: 1 1 auto; min-width: 0; margin: 0; }
.form-row textarea {
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 14px; font-family: inherit; line-height: 1.6; resize: vertical;
  transition: border-color .15s, box-shadow .15s;
}
.form-row textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47, 111, 237, .15);
}
.radio-group { display: flex; gap: 18px; padding-top: 8px; }
.radio-group label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
/* 覆盖 .modal-card input 的 width:100%/padding，恢复单选/复选框原生尺寸 */
.modal-card input[type="radio"], .modal-card input[type="checkbox"] { width: auto; padding: 0; margin: 0; }
.checkbox-row { padding-left: 84px; }
.checkbox-row label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.modal-actions .primary-btn {
  background: linear-gradient(135deg, #3b6ef5, #2f6fed); color: #fff;
  box-shadow: 0 4px 12px rgba(47, 111, 237, .3);
}
.modal-actions .primary-btn:hover { filter: brightness(1.05); }
.modal-actions .primary-btn:disabled { opacity: .6; cursor: not-allowed; filter: none; }

/* 上传进度条（版本发布弹窗） */
.upload-progress {
  height: 8px; border-radius: 4px; background: var(--border);
  overflow: hidden; margin: 4px 0 6px;
}
.upload-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(135deg, #3b6ef5, #2f6fed);
  border-radius: 4px; transition: width .2s ease;
}
.upload-progress-text { font-size: 13px; color: var(--text-2); margin-bottom: 8px; }