/* ============================================================
   口语陪练 · PC 网页端样式
   配色与移动端保持一致（主色 #4facfe），布局用两栏工作台。
   ============================================================ */

:root {
  --bg: #f2f6fb;
  --card: #ffffff;
  --line: #e4eaf2;
  --line-soft: #f0f4f9;
  --text: #1e293b;
  --muted: #7b8794;
  --brand: #4facfe;
  --brand-deep: #2b8ae0;
  --brand-soft: #eaf5ff;
  --ok: #1d9e75;
  --warn: #ba7517;
  --err: #c0392b;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

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

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 14px; color: var(--text); }

/* ==================== 登录 ==================== */

.login-layer {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #eaf5ff 0%, #f2f6fb 55%, #f7fbff 100%);
  padding: 20px;
}

.login-card {
  width: 372px; padding: 34px 30px 26px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 10px 34px rgba(26, 62, 105, .10);
}

.login-card .brand { font-size: 19px; font-weight: 600; letter-spacing: .3px; }
.login-card .sub { color: var(--muted); font-size: 13px; margin: 7px 0 24px; }
.login-card label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 15px; }
.login-card input {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 9px; background: #fbfcfe; outline: none;
}
.login-card input:focus { border-color: var(--brand); background: #fff; }
.login-card button[type="submit"] {
  width: 100%; margin-top: 10px; padding: 11px 0;
  border: none; border-radius: 9px; background: var(--brand); color: #fff;
  font-size: 15px; font-weight: 500;
}
.login-card button[type="submit"]:hover { background: var(--brand-deep); }
.login-card button[type="submit"]:disabled { background: #a9cfe8; cursor: default; }
.login-card .err { margin-top: 12px; color: var(--err); font-size: 13px; min-height: 20px; }
.login-card .err.ok { color: var(--ok); }
.login-card .mic-note { color: var(--muted); font-size: 12px; line-height: 1.7; }

/* 登录页签：账号登录 / 手机号登录 / 注册 */
.login-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.login-tabs button {
  flex: 1; padding: 8px 0; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--muted); font-size: 13px;
}
.login-tabs button.on {
  background: var(--brand-soft); border-color: var(--brand);
  color: var(--brand-deep); font-weight: 600;
}
/* 验证码行：输入框 + 「获取验证码」按钮并排 */
.login-card .sms-row { display: flex; gap: 8px; }
.login-card .sms-row input { flex: 1; min-width: 0; }
.login-card .sms-row button {
  flex-shrink: 0; padding: 0 12px; border: 1px solid var(--brand); border-radius: 8px;
  background: var(--brand-soft); color: var(--brand-deep); font-size: 13px; white-space: nowrap;
}
.login-card .sms-row button:hover:not(:disabled) { background: #dcf0ff; }
.login-card .sms-row button:disabled {
  border-color: var(--line); background: var(--line-soft); color: var(--muted); cursor: default;
}

.tag {
  margin-left: 7px; padding: 2px 8px; border-radius: 20px;
  background: var(--brand-soft); color: var(--brand-deep); font-size: 12px; font-weight: 400;
}

/* ==================== 顶栏 ==================== */

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 58px; padding: 0 22px;
  background: #fff; border-bottom: 1px solid var(--line);
}
.topbar .brand { font-size: 16px; font-weight: 600; }

.tabs { display: flex; gap: 4px; }
.tabs button {
  padding: 7px 16px; border: none; border-radius: 8px;
  background: transparent; color: var(--muted); font-size: 14px;
}
.tabs button.on { background: var(--brand-soft); color: var(--brand-deep); font-weight: 500; }

.tools { display: flex; align-items: center; gap: 12px; }
.who { color: var(--muted); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.who:hover .who-name { color: var(--brand); }
.who .lv { font-size: 11px; padding: 1px 6px; }
.who .lock { font-size: 11px; }
.u-head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.u-av {
  width: 52px; height: 52px; border-radius: 50%; background: #eef4fb;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.u-name { font-size: 16px; font-weight: 600; color: var(--text); }
.u-tags { display: flex; gap: 6px; margin-top: 5px; align-items: center; }
.u-rows { margin-top: 12px; }
.u-row {
  display: flex; justify-content: space-between; padding: 9px 0;
  border-bottom: 1px dashed var(--line); font-size: 13.5px;
}
.u-row span { color: var(--muted); }
.u-row b { font-weight: 500; color: var(--text); }
.u-tip { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.ghost {
  padding: 6px 14px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--text); font-size: 13px;
}
.ghost:hover { border-color: var(--brand); color: var(--brand-deep); }

/* ==================== 主体布局 ==================== */

main { height: calc(100vh - 58px); overflow: hidden; }
.view { height: 100%; }
.view[hidden] { display: none; }

/* minmax(0,1fr) 是这里的关键：只写 grid-template-columns 时，行高由内容撑开，
   .side 会跟着内容变高并溢出 main（被 overflow:hidden 裁掉），
   于是 .side 的 overflow-y:auto 永远不触发 —— 窗口再矮一点就变成"列表在视口外且滚不动"。
   显式把行高钉在容器高度上，左栏才真正出现内部滚动条。 */
#view-practice { display: grid; grid-template-columns: 296px 1fr; grid-template-rows: minmax(0, 1fr); }

/* ---------------- 左栏 ---------------- */

.side {
  display: flex; flex-direction: column; gap: 18px;
  padding: 18px 16px; overflow-y: auto; min-height: 0;
  background: #fff; border-right: 1px solid var(--line);
}
.field { display: flex; flex-direction: column; gap: 8px; }
/* 场景列表最少要露出这么高。
   背景：窗口一矮（笔记本小窗 / 左右分屏），左栏上方「模式 + 语言 + 口音 + 提示」
   能占满整屏；此时若不设下限，flex 会把 flex:1 的列表压成 0 高度，
   加上 .side 的 overflow:hidden，场景就"整个消失"且滚不到。
   给了下限 + 让 .side 可纵向滚动，任何窗口高度下都能滚到场景列表。 */
.field.grow { flex: 1 1 auto; min-height: 300px; }
.field-label { color: var(--muted); font-size: 12.5px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.count { color: #aab4c0; }
/* 行内文字按钮：用于「放大查看」这类轻量入口，不抢视觉权重 */
.link-btn {
  border: none; background: transparent; padding: 0; flex: none;
  color: var(--brand-deep); font-size: 12px;
}
.link-btn:hover { text-decoration: underline; }

/* 说明条：用于「能选但不完美」的提示（如某语种发音人未开通）。
   刻意用暖黄而不是报错红 —— 这不是故障，是功能未开放的说明。 */
.field-note {
  margin: 6px 0; padding: 7px 10px;
  background: #fdf7e8; border: 1px solid #f3e2bb; border-radius: 8px;
  color: var(--warn); font-size: 12px; line-height: 1.5;
}

/* PC 端专属引导条：说明某些功能只在手机端提供。
   与 .field-note 区分开 —— 那个是暖黄「能力受限」，这个是信息蓝「换端即可用」。 */
.pc-note {
  margin: 8px 0 2px; padding: 8px 10px;
  background: #eef4fb; border: 1px solid #d3e2f5; border-radius: 8px;
  color: #2b5d97; font-size: 12px; line-height: 1.6;
}
.pc-note b { color: #1d4b80; font-weight: 600; }

.seg { display: flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg button {
  flex: 1; padding: 7px 0; border: none; background: #fff;
  color: var(--muted); font-size: 13px;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--brand); color: #fff; }

#langSel {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: #fbfcfe; outline: none;
}
#langSel:focus { border-color: var(--brand); }

.search {
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px;
  background: #fbfcfe; outline: none; width: 100%;
}
.search:focus { border-color: var(--brand); background: #fff; }

.cats { display: flex; flex-wrap: wrap; gap: 6px; }
.cats button {
  padding: 4px 11px; border: 1px solid var(--line); border-radius: 20px;
  background: #fff; color: var(--muted); font-size: 12.5px;
}
.cats button.on { background: var(--brand-soft); border-color: #bfe0fb; color: var(--brand-deep); }

.scenario-list {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px; padding-right: 4px;
}
.sc-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; text-align: left;
}
.sc-item:hover { border-color: #bfe0fb; background: #fbfdff; }
.sc-item.on { border-color: var(--brand); background: var(--brand-soft); }
.sc-item .ico { font-size: 17px; line-height: 1; }
.sc-item .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.sc-item .nm { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-item .kd { color: #9aa5b1; font-size: 11.5px; }
.lv {
  padding: 1px 6px; border-radius: 5px; font-size: 11px;
  background: #eef2f7; color: #5b6774;
}
.lv.A1 { background: #eaf3de; color: #3b6d11; }
.lv.A2 { background: #e6f1fb; color: #185fa5; }
.lv.B1 { background: #faeeda; color: #854f0b; }
.lv.B2 { background: #fcebeb; color: #a32d2d; }
.lock {
  font-size: 11px; color: var(--warn);
  border: 1px solid currentColor; border-radius: 6px;
  padding: 1px 6px; line-height: 1.5; white-space: nowrap;
}

.primary-btn {
  padding: 9px 24px; border: none; border-radius: 10px;
  background: var(--brand); color: #fff; font-size: 14px; font-weight: 500;
}
.primary-btn:hover { background: var(--brand-deep); }
.primary-btn:disabled { background: #a9cfe8; cursor: default; }

/* ---------------- 对话区 ---------------- */

.chat { display: flex; flex-direction: column; min-width: 0; }

.chat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--line); background: #fff;
}
.chat-head .av {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); font-size: 20px;
}
.chat-head .hd { flex: 1; min-width: 0; }
.chat-head .t1 { font-size: 14.5px; font-weight: 500; }
.chat-head .t2 { color: var(--muted); font-size: 12.5px; }
.chat-head .acts { display: flex; gap: 8px; }

.chat-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 20px 24px; display: flex; flex-direction: column; gap: 14px;
}

.empty-hint {
  margin: auto; text-align: center; color: var(--muted); font-size: 13.5px;
  line-height: 2;
}
.empty-hint .big { font-size: 15px; color: #5b6774; margin-bottom: 4px; }

.bubble { display: flex; gap: 10px; max-width: 78%; }
.bubble.me { align-self: flex-end; flex-direction: row-reverse; }
.bubble .av {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: #f0f5fb; font-size: 17px;
}
.bubble .body { min-width: 0; }
.bubble .txt {
  padding: 10px 14px; border-radius: 12px; background: #fff;
  border: 1px solid var(--line); white-space: pre-wrap; word-break: break-word;
}
.bubble.me .txt { background: var(--brand); border-color: var(--brand); color: #fff; }
.bubble .foot { margin-top: 4px; font-size: 11.5px; color: var(--muted); display: flex; gap: 10px; }
.bubble.me .foot { justify-content: flex-end; }
.bubble .foot button {
  border: none; background: transparent; color: var(--brand-deep); font-size: 11.5px; padding: 0;
}
.bubble .pron { color: var(--brand-deep); }

.chat-foot { border-top: 1px solid var(--line); background: #fff; padding: 12px 20px 14px; }
.composer { display: flex; align-items: flex-end; gap: 10px; }
.composer textarea {
  flex: 1; resize: none; max-height: 120px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe;
  outline: none; line-height: 1.6;
}
.composer textarea:focus { border-color: var(--brand); background: #fff; }
.composer .mic, .composer .send {
  border: none; border-radius: 10px; height: 42px; flex: none;
}
.composer .send { padding: 0 20px; background: var(--brand); color: #fff; font-size: 14px; }
.composer .send:hover { background: var(--brand-deep); }
.composer .send:disabled { background: #a9cfe8; cursor: default; }
.composer .mic {
  width: 46px; display: flex; align-items: center; justify-content: center;
  background: #eef5fd; border: 1px solid #cfe6fa;
}
.composer .mic:hover { background: #e2effc; }
.composer .mic .mic-dot {
  width: 13px; height: 18px; border-radius: 7px;
  background: var(--brand-deep); position: relative;
}
.composer .mic .mic-dot::after {
  content: ''; position: absolute; left: -4px; right: -4px; bottom: -6px;
  height: 8px; border: 2px solid var(--brand-deep); border-top: none;
  border-radius: 0 0 8px 8px;
}
.composer .mic.rec { background: #fdeceb; border-color: #f3c4c0; }
.composer .mic.rec .mic-dot { background: #e24b4a; }
.composer .mic.rec .mic-dot::after { border-color: #e24b4a; }

.rec-bar {
  display: flex; align-items: center; gap: 10px;
  margin-top: 9px; color: var(--muted); font-size: 12.5px;
}
.rec-time { font-variant-numeric: tabular-nums; color: #e24b4a; }
.meter { flex: 1; height: 5px; border-radius: 3px; background: #f0f3f7; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .08s linear; }

.thinking { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 12.5px; }
.thinking i {
  width: 6px; height: 6px; border-radius: 50%; background: #c3cdd8;
  animation: blink 1.2s infinite ease-in-out;
}
.thinking i:nth-child(2) { animation-delay: .18s; }
.thinking i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

/* ==================== 学习记录 ==================== */

#view-history { display: grid; grid-template-columns: 400px 1fr; grid-template-rows: minmax(0, 1fr); }
.hist-wrap { display: contents; }

.hist-list {
  padding: 16px; overflow-y: auto; background: #fff; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
/* 可点选的卡片（历史场次 / 对话角色共用外观，类名分开，避免选择器互相串） */
.hist-item, .persona-item {
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; text-align: left;
}
.hist-item:hover, .persona-item:hover { border-color: #bfe0fb; background: #fbfdff; }
.hist-item.on, .persona-item.on { border-color: var(--brand); background: var(--brand-soft); }
.hist-item .r1, .persona-item .r1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hist-item .nm, .persona-item .nm { font-size: 13.5px; font-weight: 500; }
.hist-item .r2, .persona-item .r2 { color: var(--muted); font-size: 12px; margin-top: 3px; display: flex; gap: 10px; }
.pill { padding: 1px 7px; border-radius: 20px; font-size: 11px; background: #eef2f7; color: #5b6774; }
.pill.done { background: #e6f7f0; color: #0f6e56; }
.pill.doing { background: #faeeda; color: #854f0b; }

.hist-detail { padding: 20px 24px; overflow-y: auto; }
.hist-detail .hd-title { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.hist-detail .hd-sub { color: var(--muted); font-size: 12.5px; margin-bottom: 16px; }
.hist-msgs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.hist-msgs .row { display: flex; gap: 8px; }
.hist-msgs .role { flex: none; width: 44px; color: var(--muted); font-size: 12px; padding-top: 3px; }
.hist-msgs .say {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; white-space: pre-wrap; word-break: break-word; max-width: 620px;
}
.hist-msgs .row.ai .say { background: var(--brand-soft); border-color: #d6ecfd; }

/* ==================== 报告 ==================== */

.modal {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(24, 40, 62, .38);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal-card {
  width: 660px; max-width: 100%; max-height: 86vh; overflow: hidden;
  background: #fff; border-radius: 16px; display: flex; flex-direction: column;
}
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 20px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 500;
}
.modal-head .x { border: none; background: transparent; font-size: 22px; color: #b4bcc6; line-height: 1; }
.modal-body { padding: 20px; overflow-y: auto; }

.score-hero {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 18px; border-radius: 12px; background: linear-gradient(120deg, #eaf5ff, #f7fbff);
  border: 1px solid #d9ecfd; margin-bottom: 18px;
}
.score-hero .num { font-size: 40px; font-weight: 600; color: var(--brand-deep); line-height: 1; }
.score-hero .num small { font-size: 15px; font-weight: 400; color: var(--muted); }
.score-hero .desc { color: #445060; font-size: 13px; }

.dims { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.dim { display: grid; grid-template-columns: 78px 1fr 44px; align-items: center; gap: 10px; }
.dim .k { color: var(--muted); font-size: 12.5px; }
.dim .bar { height: 8px; border-radius: 4px; background: #eef2f7; overflow: hidden; }
.dim .bar i { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.dim .v { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }

.sec-t { font-size: 13px; color: var(--muted); margin: 18px 0 8px; }
.note-box {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: #fbfcfe; font-size: 13.5px; white-space: pre-wrap; line-height: 1.75;
}
.err-item {
  padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px;
  margin-bottom: 8px; font-size: 13.5px;
}
.err-item .o { color: #a32d2d; }
.err-item .c { color: var(--ok); }
.err-item .e { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.wchips { display: flex; flex-wrap: wrap; gap: 7px; }
.wchip {
  padding: 4px 11px; border-radius: 20px; background: var(--brand-soft);
  color: var(--brand-deep); font-size: 12.5px; border: none;
}
.lite-tip {
  margin-top: 16px; padding: 11px 14px; border: 1px dashed #e5cfa8; border-radius: 10px;
  background: #fffbf3; color: var(--warn); font-size: 12.5px;
}

/* ==================== 轻提示 ==================== */

.toast {
  position: fixed; left: 50%; bottom: 46px; transform: translateX(-50%);
  z-index: 50; padding: 10px 20px; border-radius: 10px;
  background: rgba(30, 41, 59, .92); color: #fff; font-size: 13.5px; max-width: 76vw;
}

/* ==================== 通用页面骨架（社区 / 跟读 / 形象） ==================== */

.page-scroll { max-width: 800px; margin: 0 auto; padding: 22px 24px 48px; }
#view-community { overflow-y: auto; }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 16px;
}
.page-t { font-size: 17px; font-weight: 600; }
.page-s { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.page-acts { display: flex; gap: 8px; flex: none; }

.pane-head { display: flex; justify-content: space-between; align-items: center; }
.pane-t { font-size: 14px; font-weight: 600; }
.wide { width: 100%; }

.modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.modal-foot .hint { margin-right: auto; color: var(--muted); font-size: 12.5px; }
.check-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; font-size: 13px; color: var(--muted);
}

/* ==================== 社区 ==================== */

.com-list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.com-more { text-align: center; margin-top: 16px; }

.post {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px;
}
.post .p-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted);
}
.post .p-av {
  width: 26px; height: 26px; border-radius: 50%; background: #eef4fb;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.post .p-name { color: var(--text); font-weight: 500; }
.post .p-topic {
  padding: 1px 8px; border-radius: 20px;
  background: var(--brand-soft); color: var(--brand-deep); font-size: 11.5px;
}
.post .p-time { margin-left: auto; }
.post .p-body { margin-top: 9px; font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.post .p-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.post .p-foot {
  display: flex; gap: 16px; margin-top: 10px;
  border-top: 1px dashed var(--line); padding-top: 9px;
}
.post .p-foot button { border: none; background: transparent; color: var(--muted); font-size: 12.5px; padding: 0; }
.post .p-foot button:hover { color: var(--brand-deep); }
.post .p-foot button.on { color: var(--brand-deep); font-weight: 500; }

/* ==================== 好友对战 ==================== */

#view-battle { display: grid; grid-template-columns: 380px 1fr; grid-template-rows: minmax(0, 1fr); }
/* 三个新页面都套了一层 wrap 容器，用 display:contents 让它「透传」，
   否则 grid 会把整层当作唯一一列，左右两栏会上下堆叠（踩过一次）。 */
.bt-wrap, .of-wrap, .av-wrap { display: contents; }

.bt-list {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; overflow: hidden;
  background: #fff; border-right: 1px solid var(--line);
}
.bt-items { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.bt-detail { padding: 20px 24px; overflow-y: auto; }
.bt-detail .hd-title { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.bt-detail .hd-sub { color: var(--muted); font-size: 12.5px; margin-bottom: 14px; }

.bt-sides {
  display: grid; grid-template-columns: 1fr 46px 1fr; gap: 12px;
  align-items: stretch; margin-top: 16px;
}
.bt-side { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.bt-side-h { display: flex; align-items: center; gap: 8px; }
.bt-side-h .who { font-size: 13.5px; font-weight: 500; }
.bt-side-name { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.bt-score { font-size: 30px; font-weight: 600; color: var(--brand-deep); line-height: 1.25; }
.bt-score small { font-size: 13px; font-weight: 400; color: var(--muted); }
.bt-wait { color: var(--warn); font-size: 12px; }
.bt-vs { display: flex; align-items: center; justify-content: center; color: #b4bcc6; font-size: 13px; }

.bt-result {
  margin-top: 16px; padding: 12px 14px; border-radius: 10px;
  background: var(--brand-soft); color: var(--brand-deep); font-size: 14px;
}
.bt-result.win { background: #e6f7f0; color: #0f6e56; }
.bt-result.lose { background: #fdeceb; color: #a32d2d; }
.bt-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.bt-tip { margin-top: 14px; color: var(--muted); font-size: 12px; line-height: 1.8; }

.invite-box { text-align: center; }
.invite-code {
  font-size: 34px; font-weight: 700; letter-spacing: 6px;
  color: var(--brand-deep); margin: 14px 0 10px; font-variant-numeric: tabular-nums;
}

/* ==================== 离线跟读 ==================== */

#view-offline { display: grid; grid-template-columns: 360px 1fr; grid-template-rows: minmax(0, 1fr); }

.of-side {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; overflow: hidden;
  background: #fff; border-right: 1px solid var(--line);
}
.of-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.of-item {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; text-align: left;
}
.of-item:hover { border-color: #bfe0fb; background: #fbfdff; }
.of-item.on { border-color: var(--brand); background: var(--brand-soft); }
.of-item .t { font-size: 13.5px; }
.of-item .z { color: var(--muted); font-size: 12px; margin-top: 2px; }

.of-main { padding: 24px; overflow-y: auto; }
.of-card {
  max-width: 720px; padding: 26px 28px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
}
.of-label { color: var(--muted); font-size: 12.5px; }
.of-en { font-size: 24px; font-weight: 500; line-height: 1.5; margin-top: 8px; }
.of-zh { color: var(--muted); font-size: 14px; margin-top: 6px; }
.of-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.of-mic {
  width: 48px; height: 42px; flex: none;
  border: 1px solid #cfe6fa; border-radius: 10px; background: #eef5fd;
  display: flex; align-items: center; justify-content: center;
}
.of-mic:hover { background: #e2effc; }
.of-mic .mic-dot {
  width: 13px; height: 18px; border-radius: 7px; background: var(--brand-deep); position: relative;
}
.of-mic .mic-dot::after {
  content: ''; position: absolute; left: -4px; right: -4px; bottom: -6px;
  height: 8px; border: 2px solid var(--brand-deep); border-top: none; border-radius: 0 0 8px 8px;
}
.of-mic.rec { background: #fdeceb; border-color: #f3c4c0; }
.of-mic.rec .mic-dot { background: #e24b4a; }
.of-mic.rec .mic-dot::after { border-color: #e24b4a; }

.of-note { margin-top: 18px; color: var(--muted); font-size: 12.5px; line-height: 1.85; }

/* ==================== AI 角色形象 ==================== */

#view-avatar { display: grid; grid-template-columns: 340px 1fr; grid-template-rows: minmax(0, 1fr); }

.av-side {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; overflow-y: auto;
  background: #fff; border-right: 1px solid var(--line);
}
.av-role {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; text-align: left;
}
.av-role:hover { border-color: #bfe0fb; background: #fbfdff; }
.av-role.on { border-color: var(--brand); background: var(--brand-soft); }
.av-face {
  width: 38px; height: 38px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.av-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.av-info .nm { font-size: 13.5px; }
.av-info .ro { color: var(--muted); font-size: 11.5px; }

#avMain { padding: 22px 24px; overflow-y: auto; }
.av-group { margin-top: 18px; }
.av-group-t { color: var(--muted); font-size: 12.5px; margin-bottom: 10px; }
.av-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.av-item {
  position: relative; width: 106px; padding: 12px 8px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.av-item:hover { border-color: #bfe0fb; background: #fbfdff; }
.av-item.on { border-color: var(--brand); background: var(--brand-soft); }
.av-item.locked { opacity: .6; }
.av-item .av-face { width: 44px; height: 44px; font-size: 24px; }
.av-name { font-size: 12.5px; color: var(--text); }
.av-cur { position: absolute; top: 6px; right: 8px; font-size: 11px; color: var(--brand-deep); }

/* ==================== 窄屏降级 ==================== */

@media (max-width: 1080px) {
  #view-practice { grid-template-columns: 250px 1fr; }
  #view-history { grid-template-columns: 320px 1fr; }
  #view-battle { grid-template-columns: 320px 1fr; }
  #view-offline { grid-template-columns: 300px 1fr; }
  #view-avatar { grid-template-columns: 280px 1fr; }
  .tabs button { padding: 7px 10px; font-size: 13px; }
  /* 窗口变窄通常也变矮，列表下限同步收一点，少滚一些 */
  .field.grow { min-height: 260px; }
}

/* ============================================================
   必须放在最后：本文件里 .modal / .rec-bar / #view-practice 等都声明了
   display（flex/grid），其优先级高于 [hidden] 自带的 display:none，
   不加这一条会出现「hidden 了但依然显示」——模态框关不掉的经典 bug。
   ============================================================ */
[hidden] { display: none !important; }

/* ============================================================
   我的（学习数据）：会员中心 / 学习档案 / 学习周报 / 间隔复习
   —— 对齐 App 端「我的」页的四项，PC 端做成左入口 + 右内容。
   ============================================================ */

.pf-wrap { display: contents; }
#view-profile { display: grid; grid-template-columns: 302px 1fr; grid-template-rows: minmax(0, 1fr); }

.pf-side {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; overflow: hidden;
  background: #fff; border-right: 1px solid var(--line);
}
.pf-main { padding: 22px 26px 40px; overflow-y: auto; }
.pf-main > .pf-card, .pf-main > .pf-list, .pf-main > .pf-sec-t,
.pf-main > .pf-hero, .pf-main > .pf-plans, .pf-main > .pf-act,
.pf-main > .pf-rv-last, .pf-main > .pf-tip { max-width: 820px; }

/* ---- 左栏：账号卡 + 入口 ---- */

.pf-u { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pf-av {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; background: var(--brand-soft);
}
.pf-u-main { min-width: 0; }
.pf-u-name { font-size: 14px; font-weight: 600; }
.pf-u-tags { display: flex; align-items: center; gap: 6px; margin-top: 4px; }

.pf-entries { display: flex; flex-direction: column; gap: 8px; }
.pf-entry {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; text-align: left;
  border: 1px solid var(--line); border-radius: 11px; background: #fff;
}
.pf-entry:hover { border-color: #bfe0fb; background: #fbfdff; }
.pf-entry.on { border-color: var(--brand); background: var(--brand-soft); }
.pf-ico {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; background: #f2f6fb;
}
.pf-entry.on .pf-ico { background: #fff; }
.pf-etxt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.pf-etxt b { font-size: 13.5px; font-weight: 500; }
.pf-etxt i { font-style: normal; color: #9aa5b1; font-size: 11.5px; }
.pf-arrow { color: #c3ccd6; font-size: 16px; }
.pf-dot {
  flex: none; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
  background: #e5484d; color: #fff; font-size: 11px; line-height: 17px; text-align: center;
}
.pf-tip { margin-top: auto; color: var(--muted); font-size: 11.5px; line-height: 1.6; }

/* ---- 通用卡片 ---- */

.pf-card {
  padding: 14px 16px; margin-bottom: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 13px;
}
.pf-card-t { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.pf-card-t .count { font-weight: 400; margin-left: 6px; }
.pf-sec-t {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: #41505f; margin: 16px 0 9px;
}
.pf-sec-t .count { color: var(--muted); font-weight: 400; font-size: 12px; }
.pf-empty { color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.pf-line { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #4a5560; }
.pf-line > span { flex: 1; }
.pf-act { display: flex; align-items: center; gap: 12px; margin: 12px 0 16px; }
.pf-act .pf-hint, .pf-hint { color: var(--muted); font-size: 12px; }
.pf-tag {
  display: inline-block; padding: 1px 7px; border-radius: 20px;
  background: #eef2f7; color: #5b6774; font-size: 11px;
}

/* ---- 会员中心 ---- */

.pf-hero {
  padding: 16px 18px; margin-bottom: 16px; border-radius: 14px;
  color: #fff; background: linear-gradient(135deg, #6f8fae, #9db6cd);
}
.pf-hero.prem { background: linear-gradient(135deg, #2b6cb0, #4facfe); }
.pf-hero-t { font-size: 15.5px; font-weight: 600; }
.pf-hero-s { font-size: 12.5px; line-height: 1.7; margin-top: 7px; opacity: .95; }
.pf-bar { height: 6px; margin-top: 10px; border-radius: 4px; background: rgba(255, 255, 255, .32); overflow: hidden; }
.pf-bar i { display: block; height: 100%; background: #fff; }

.pf-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-plan {
  padding: 13px 15px; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.pf-plan:hover { border-color: #bfe0fb; }
.pf-plan.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand) inset; }
.pf-plan-n { font-size: 13.5px; font-weight: 600; }
.pf-plan-p { margin-top: 6px; font-size: 20px; font-weight: 700; color: var(--brand-deep); }
.pf-plan-p i { font-style: normal; font-size: 11px; font-weight: 400; color: var(--muted); }
.pf-plan-d { margin-top: 5px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }

.pf-ben { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pf-ben-h { font-size: 12.5px; font-weight: 600; color: #97876a; margin-bottom: 8px; }
.pf-ben-col.ok .pf-ben-h { color: var(--ok); }
.pf-ben-i { display: flex; gap: 6px; font-size: 12px; line-height: 1.45; margin-bottom: 6px; }
.pf-ben-i i { font-style: normal; color: #c9d2dc; }
.pf-ben-col.ok .pf-ben-i i { color: var(--ok); }

.pf-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pf-table th {
  text-align: left; font-weight: 500; color: var(--muted);
  font-size: 11.5px; padding: 0 10px 7px 0; border-bottom: 1px solid var(--line-soft);
}
.pf-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line-soft); }
.pf-table tr:last-child td { border-bottom: none; }

/* ---- 学习档案 ---- */

.pf-arch-hd { display: flex; align-items: center; gap: 14px; }
.pf-arch-lv {
  width: 52px; height: 52px; flex: none; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700; color: #185fa5; background: #e6f1fb;
}
.pf-arch-nm { font-size: 14.5px; font-weight: 600; }
.pf-arch-meta { margin-top: 6px; font-size: 12px; color: var(--muted); line-height: 1.7; }

.pf-list { display: flex; flex-direction: column; gap: 9px; }
.pf-err-hd { display: flex; align-items: center; gap: 10px; }
.pf-err-freq { margin-left: auto; color: var(--muted); font-size: 11.5px; }
.pf-err-body { margin-top: 8px; font-size: 13.5px; }
.pf-err-body s { color: #a32d2d; text-decoration-thickness: 1px; }
.pf-err-body b { color: #9aa5b1; font-weight: 400; margin: 0 4px; }
.pf-err-body em { font-style: normal; color: #0f6e56; font-weight: 500; }
.pf-err-exp { margin-top: 7px; font-size: 12px; color: #6b7683; line-height: 1.65; }

.pf-voc-hd { display: flex; align-items: center; gap: 9px; }
.pf-voc-w { font-size: 15px; font-weight: 600; }
.pf-mini {
  border: 1px solid var(--line); background: #fff; border-radius: 7px;
  padding: 2px 8px; font-size: 11.5px; color: var(--muted);
}
.pf-mini:hover { border-color: var(--brand); color: var(--brand-deep); }
.pf-voc-m, .pf-voc-d { font-size: 11.5px; color: var(--muted); }
.pf-voc-m { margin-left: auto; }
.pf-voc-t { margin-top: 7px; font-size: 13px; }
.pf-voc-e { margin-top: 5px; font-size: 12px; color: #8a6b3e; line-height: 1.6; }
.pf-voc-bar { height: 4px; margin-top: 9px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.pf-voc-bar i { display: block; height: 100%; background: var(--brand); }
.pf-voc-acts { display: flex; gap: 8px; margin-top: 10px; }
.pf-voc-acts button { padding: 4px 10px; font-size: 12px; }

/* ---- 学习周报 ---- */

.pf-week-hd { display: flex; align-items: flex-start; gap: 14px; }
.pf-week-hd > div:first-child { flex: 1; min-width: 0; }
.pf-week-sub { margin-top: 6px; font-size: 11.5px; color: var(--muted); line-height: 1.65; }
.pf-week-ov { font-size: 13px; line-height: 1.75; color: #46525e; }
.pf-week-prac { margin-top: 10px; font-size: 12px; color: var(--muted); }

.pf-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pf-metric { padding: 10px 11px; border-radius: 11px; background: #f6faff; }
.pf-metric-l { font-size: 11px; color: var(--muted); }
.pf-metric-v { margin-top: 3px; font-size: 18px; font-weight: 700; color: var(--brand-deep); line-height: 1.2; }
.pf-metric-v i { font-style: normal; font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 3px; }
.pf-subs {
  display: flex; justify-content: space-around; margin-top: 11px;
  padding: 9px 0; border-radius: 10px; background: var(--brand-soft);
}
.pf-sub { text-align: center; }
.pf-sub i { display: block; font-style: normal; font-size: 11px; color: var(--muted); }
.pf-sub b { font-size: 13.5px; color: var(--brand-deep); }

.pf-sugs { display: flex; flex-direction: column; gap: 10px; }
.pf-sug { display: flex; gap: 10px; font-size: 13px; line-height: 1.6; }
.pf-sug i {
  width: 20px; height: 20px; flex: none; border-radius: 6px; margin-top: 1px;
  background: var(--brand-soft); color: var(--brand-deep);
  font-style: normal; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}
.pf-fulltext {
  margin: 0; padding: 12px 14px; max-height: 380px; overflow: auto;
  background: #fbfdff; border: 1px solid var(--line-soft); border-radius: 10px;
  font-family: inherit; font-size: 12.5px; line-height: 1.75; white-space: pre-wrap; word-break: break-word;
}

.pf-notes { display: flex; flex-direction: column; gap: 8px; }
.pf-note {
  padding: 10px 12px; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.pf-note:hover { border-color: #bfe0fb; background: #fbfdff; }
.pf-note.unread { border-color: #bfe0fb; background: var(--brand-soft); }
.pf-note-t { font-size: 13px; font-weight: 500; }
.pf-note-c { margin-top: 4px; font-size: 12px; color: #6b7683; line-height: 1.6; }
.pf-note-d { margin-top: 5px; font-size: 11px; color: #aab4c0; }
.pf-dot-in {
  display: inline-block; padding: 0 5px; margin-right: 5px; border-radius: 8px;
  background: #e5484d; color: #fff; font-size: 10.5px; font-weight: 400;
}

/* ---- 间隔复习 ---- */

.pf-rv-top { display: flex; align-items: center; gap: 12px; }
.pf-rv-langs { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.pf-rv-langs button {
  padding: 3px 10px; font-size: 12px; border: 1px solid var(--line);
  border-radius: 20px; background: #fff; color: #5b6774;
}
.pf-rv-langs button:hover { border-color: #bfe0fb; }
.pf-rv-langs button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pf-rv-count { font-size: 13px; font-weight: 600; color: var(--brand-deep); }
.pf-rv-last { margin-bottom: 9px; font-size: 12px; color: var(--muted); }

.pf-rv-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 300px; padding: 34px; text-align: center; cursor: pointer;
  background: linear-gradient(160deg, #ffffff, #f7fbff);
}
.pf-rv-card:hover { border-color: #bfe0fb; }
.pf-rv-card.flip { align-items: flex-start; text-align: left; }
.pf-rv-w { font-size: 23px; font-weight: 700; }
.pf-rv-w.big { font-size: 32px; font-weight: 800; letter-spacing: .5px; }
.pf-rv-t { margin-top: 12px; font-size: 15px; color: #41505f; }
.pf-rv-e {
  margin-top: 14px; padding: 11px 14px; width: 100%;
  background: #f6faff; border-radius: 10px;
  font-size: 13px; line-height: 1.65; color: #2b6cb0;
}
.pf-rv-hint { margin-top: 14px; font-size: 12.5px; color: #aab4c0; }
.pf-rv-note { margin: 10px 0 4px; font-size: 11.5px; color: var(--muted); }
.pf-grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.pf-grade { padding: 12px 0; border-radius: 11px; font-size: 13.5px; border: 1px solid transparent; }
.pf-grade.g1 { background: #fdeceb; color: #a32d2d; }
.pf-grade.g2 { background: #faeeda; color: #854f0b; }
.pf-grade.g3 { background: #e9f5e4; color: #3b6d11; }
.pf-grade.g4 { background: #e6f1fb; color: #185fa5; }
.pf-grade:hover { filter: brightness(.97); }
.pf-grade:disabled { opacity: .55; cursor: default; }

.pf-done { text-align: center; padding: 34px 20px; }
.pf-done-i { font-size: 40px; }
.pf-done-t { margin-top: 10px; font-size: 17px; font-weight: 600; }
.pf-done .pf-week-sub { margin-top: 8px; }
.pf-done .pf-act { margin: 18px 0 0; }

/* 窄屏（手机浏览器打开网页版）：左栏改成横排入口，避免 302px 侧栏把内容挤没 */
@media (max-width: 860px) {
  #view-profile { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .pf-side { border-right: none; border-bottom: 1px solid var(--line); }
  .pf-tip { display: none; }
  .pf-entries { flex-direction: row; flex-wrap: wrap; }
  .pf-entry { flex: 1 1 45%; }
  .pf-main { padding: 16px 14px 32px; }
  .pf-metrics { grid-template-columns: 1fr 1fr; }
  .pf-plans, .pf-ben { grid-template-columns: 1fr; }
  /* 页签加到 7 个后在窄屏会被压成竖排文字，改成不收缩 + 可横向滑动 */
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: none; white-space: nowrap; }
  /* 小窗（含手机浏览器）时上方固定区很占高度，列表下限再收一点 */
  .field.grow { min-height: 200px; }
}