/* SayEasy 内容后台 —— 浅色中文后台风格，无框架 */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #24292f;
  background: #f6f7f9;
}

a {
  color: #2f6fed;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code {
  padding: 1px 5px;
  background: #f0f1f3;
  border-radius: 4px;
  font-size: 12px;
}

/* ---- 顶部导航 ---- */

.topbar {
  background: #ffffff;
  border-bottom: 1px solid #e2e5e9;
}

.topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  font-size: 16px;
  font-weight: 600;
  color: #24292f;
}

.brand:hover {
  text-decoration: none;
}

.topnav {
  display: flex;
  gap: 18px;
}

.topnav a {
  color: #57606a;
}

.topnav a:hover {
  color: #2f6fed;
  text-decoration: none;
}

/* 导航栏「反馈」待处理数角标（数字由 app.js 填充，为 0 时保持 hidden） */
.nav-badge {
  display: inline-block;
  min-width: 18px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 9px;
  background: #d93f3f;
  color: #ffffff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

/* 导航栏右侧：当前用户 + 退出 */
.topbar-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

/* ---- 面包屑 ---- */

.breadcrumb {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 20px 0;
  color: #57606a;
  font-size: 13px;
}

.breadcrumb .sep {
  margin: 0 6px;
  color: #b0b6bd;
}

/* ---- 内容区 ---- */

.content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 20px 48px;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 16px;
}

.page-head h1 {
  margin: 0 0 4px;
  font-size: 20px;
}

.page-head p {
  margin: 0;
}

.page-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.card {
  background: #ffffff;
  border: 1px solid #e2e5e9;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.card-head h2 {
  margin: 0 0 4px;
  font-size: 16px;
}

.card-head p {
  margin: 0 0 8px;
}

.muted {
  color: #8a919a;
  font-size: 13px;
}

.empty {
  color: #8a919a;
  padding: 8px 0;
}

/* ---- 表格 ---- */

.table-wrap {
  overflow-x: auto;
  margin-top: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th,
td {
  padding: 8px 10px;
  border: 1px solid #e8eaee;
  text-align: left;
  vertical-align: middle;
}

th {
  background: #fafbfc;
  font-weight: 600;
  color: #57606a;
  white-space: nowrap;
}

tbody tr:hover {
  background: #f8fafd;
}

.row-title {
  font-weight: 500;
}

.col-id {
  width: 52px;
  text-align: center;
  white-space: nowrap;
}

.col-num {
  width: 90px;
  text-align: center;
  white-space: nowrap;
}

.col-ops {
  white-space: nowrap;
  width: 1%;
}

.sentence-table .cell-en {
  min-width: 220px;
}

.sentence-table .cell-zh {
  min-width: 160px;
}

/* /go/sentence 直达落点：URL 锚点命中的句子行背景轻微着色，一眼可见 */
.sentence-table tr:target > td {
  background: #fff6d6;
}

.cell-audio audio {
  height: 30px;
  width: 220px;
  vertical-align: middle;
}

/* ---- 状态徽标 ---- */

.badge {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
}

.badge-none {
  background: #f0f1f3;
  color: #6b7280;
}

/* 私有课程标记：只有所有者与管理员看得到这门课 */
.badge-private {
  background: #ede9fe;
  color: #5b21b6;
}

.badge-pending {
  background: #fff5cc;
  color: #8a6d00;
}

.badge-generating {
  background: #dceafe;
  color: #1257a0;
}

.badge-ready {
  background: #dcf5e1;
  color: #1c7d33;
}

.badge-failed {
  background: #fde3e3;
  color: #b32424;
  cursor: help;
}

/* 反馈状态（pending 复用上方 .badge-pending 的黄色） */
.badge-resolved {
  background: #dcf5e1;
  color: #1c7d33;
}

.badge-dismissed {
  background: #f0f1f3;
  color: #6b7280;
}

/* ---- 按钮 ---- */

.btn {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid #cfd4da;
  border-radius: 6px;
  background: #ffffff;
  color: #24292f;
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.btn:hover {
  background: #f3f4f6;
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: #2f6fed;
  border-color: #2f6fed;
  color: #ffffff;
}

.btn-primary:hover {
  background: #275ec9;
  border-color: #275ec9;
}

.btn-danger {
  color: #b32424;
  border-color: #e6b8b8;
}

.btn-danger:hover {
  background: #fdf0f0;
}

.btn-sm {
  padding: 2px 10px;
  font-size: 12px;
}

/* ---- 表单 ---- */

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-top: 8px;
}

.inline-form label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.inline-form label.grow {
  flex: 1 1 220px;
}

.inline-form label > span,
.field > span {
  font-size: 12px;
  color: #57606a;
}

input[type="text"],
input[type="number"],
input[type="password"],
select,
textarea {
  padding: 5px 9px;
  border: 1px solid #cfd4da;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: #ffffff;
  color: #24292f;
}

input[type="text"] {
  min-width: 200px;
}

input[type="number"] {
  width: 100px;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #2f6fed;
  box-shadow: 0 0 0 2px rgba(47, 111, 237, 0.15);
}

.stack-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  margin-top: 8px;
}

.stack-form textarea {
  width: 100%;
  resize: vertical;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ---- 登录 / 改密页 ---- */

.auth-card {
  max-width: 380px;
  margin: 48px auto 0;
}

.auth-form input {
  width: 100%;
  min-width: 0;
}

.auth-form .field {
  width: 100%;
}

.auth-form button[type="submit"] {
  align-self: stretch;
}

.form-error {
  margin: 0;
  color: #b32424;
  font-size: 13px;
}

/* ---- 导入页 ---- */

.file-picker {
  border: 1px solid #e2e5e9;
  border-radius: 6px;
  padding: 10px 14px;
  width: 100%;
  margin: 0;
}

.file-picker legend {
  font-size: 12px;
  color: #57606a;
  padding: 0 4px;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #8a919a;
}

.file-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #24292f;
  cursor: pointer;
}

.import-result .import-ok {
  color: #1c7d33;
  margin: 0 0 6px;
}

.import-result pre {
  margin: 0;
  padding: 10px;
  background: #f8f9fa;
  border: 1px solid #e8eaee;
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 12px;
}

/* 导入体检报告（E4）：可疑清单 */
.import-warn-head {
  margin: 10px 0 4px;
  color: #8a6d00;
}

.import-warnings {
  margin: 0;
  padding-left: 20px;
}

.import-warnings li {
  margin: 3px 0;
}

/* ---- 队列状态条 ---- */

.queue-status {
  margin: 8px 0 16px;
  padding: 8px 14px;
  border: 1px solid #e2e5e9;
  border-radius: 6px;
  background: #ffffff;
  color: #57606a;
  font-size: 13px;
}

.queue-status.busy {
  background: #fff5cc;
  border-color: #f0dd8f;
  color: #8a6d00;
}

.queue-status.dead {
  background: #fde3e3;
  border-color: #efb9b9;
  color: #b32424;
}

/* 本机没有 Kokoro 合成器（Linux 服务器的常态）：陈述事实，不是报警 */
.queue-status.unsupported {
  background: #f3f4f6;
  border-color: #e2e5e9;
  color: #6b7280;
}

/* ---- 知识 chips（纯标签 + 原子引用）---- */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  vertical-align: middle;
}

/* 纯标签：灰色（仅过滤用字符串，不可练习） */
.chip-tag {
  background: #f0f1f3;
  color: #57606a;
}

/* 五类原子按类型配色 */
.chip-word {
  background: #dceafe;
  color: #1257a0;
}

.chip-phrase {
  background: #d3f2ef;
  color: #0d7377;
}

.chip-pattern {
  background: #ffe8cc;
  color: #a05a00;
}

.chip-morpheme {
  background: #eadcfb;
  color: #6b2fb3;
}

.chip-phoneme {
  background: #fde3e3;
  color: #b32424;
}

/* chip 内的 × 移除按钮（解除句子 → 原子引用） */
.chip-remove {
  border: none;
  background: none;
  margin: 0;
  padding: 0 0 0 2px;
  color: inherit;
  opacity: 0.55;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.chip-remove:hover {
  opacity: 1;
}

/* ---- 表格行内展开编辑区（句子「知识」区 + 课程/章/节/句四级「编辑」区）---- */
/* 两者共用一套观感：同一张表里两种展开行长得不一样会让人以为是两种东西 */

.knowledge-row > td,
.edit-row > td {
  background: #fafbfd;
}

.knowledge-panel,
.edit-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 2px;
}

.knowledge-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.knowledge-label,
.edit-label {
  font-size: 12px;
  color: #57606a;
}

.knowledge-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.knowledge-line .grow {
  flex: 1 1 260px;
  min-width: 200px;
}

.check-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #24292f;
  cursor: pointer;
  white-space: nowrap;
}

/* ---- 原子库：类型筛选 + 搜索条 ---- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.type-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.type-filter a {
  padding: 3px 12px;
  border: 1px solid #e2e5e9;
  border-radius: 14px;
  color: #57606a;
  font-size: 13px;
}

.type-filter a:hover {
  text-decoration: none;
  border-color: #2f6fed;
  color: #2f6fed;
}

.type-filter a.active {
  background: #2f6fed;
  border-color: #2f6fed;
  color: #ffffff;
}

.search-form {
  display: flex;
  gap: 8px;
}

/* ---- 原子详情：信息卡 ---- */

.info-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 12px;
  margin: 8px 0 0;
}

.info-grid dt {
  color: #57606a;
  font-size: 13px;
}

.info-grid dd {
  margin: 0;
}


/* 句子行的双音轨状态：Kokoro 与付费各占一行，标签左对齐好扫读 */
.track-status {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.track-status + .track-status {
  margin-top: 4px;
}

.track-label {
  font-size: 11px;
  color: #9aa0a6;
  min-width: 42px;
}