/* ============================================================
   翊尧学习工作台 — 布局与组件样式
   颜色/字号全部走 theme.css 里的 CSS 变量，这里只管结构
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  line-height: 1.6;
  background:
    radial-gradient(900px 520px at 85% -12%, var(--bg-g1) 0%, transparent 62%),
    radial-gradient(760px 520px at -12% 112%, var(--bg-g2) 0%, transparent 58%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  padding-bottom: 84px;
  min-height: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s ease, color .3s ease;
}
::selection { background: var(--accent-tint-2); color: var(--ink); }

/* ===== 顶栏 ===== */
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 24px 10px;
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(to bottom, var(--bg) 55%, transparent);
  backdrop-filter: blur(6px);
}
.brand {
  font-size: var(--fs-2xl); font-weight: 700; cursor: pointer; color: var(--ink);
  display: flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 14px;
  letter-spacing: .3px; white-space: nowrap; flex-shrink: 0;
}
.brand:hover { background: var(--accent-tint); }
.brand-grade { font-size: var(--fs-sm); color: var(--ink-soft); font-weight: 400; }
.brand .caret { font-size: var(--fs-xs); color: var(--ink-soft); }
.brand-ico { font-size: 1.35em; line-height: 1; }
.top-right { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.date-chip {
  font-size: var(--fs-sm); color: var(--ink-soft); background: var(--panel);
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--panel-border);
  backdrop-filter: blur(8px); white-space: nowrap;
}
.clock-chip {
  font-size: var(--fs-lg); font-weight: 700; color: var(--accent-deep);
  font-variant-numeric: tabular-nums; letter-spacing: .5px;
  background: var(--panel); padding: 4px 14px; border-radius: 999px;
  border: 1px solid var(--panel-border); backdrop-filter: blur(8px);
}
.icon-btn {
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px;
  font-size: var(--fs-xl); padding: 6px 12px; cursor: pointer; backdrop-filter: blur(8px);
  color: var(--ink); line-height: 1.3;
  transition: background .18s ease, transform .18s ease;
}
.icon-btn:hover { background: var(--accent-tint); transform: translateY(-1px); }

/* ===== 视图切换 ===== */
.view { display: none; animation: fadeIn .28s ease; }
.view.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: none;} }
.page { max-width: var(--page-max); margin: 0 auto; padding: 12px 24px 34px; }
.page h2 { font-size: var(--fs-3xl); margin: 8px 0 8px; font-weight: 700; letter-spacing: .3px; }
.hint { font-size: var(--fs-md); color: var(--ink-soft); margin: 8px 0 14px; line-height: 1.8; }
.hint a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.hint b { color: var(--ink); font-weight: 600; }

/* ===== 工作台三栏 ===== */
.board {
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  gap: var(--gap);
  padding: 8px 24px 22px;
  max-width: 1320px;
  margin: 0 auto;
  min-height: calc(100vh - 300px);
}
.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 190px);
}
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.panel-head h3 { font-size: var(--fs-xl); color: var(--ink); font-weight: 700; }
.head-btns { display: flex; gap: 7px; }
.mini-btn {
  width: 30px; height: 30px; border-radius: 10px; border: none; cursor: pointer;
  background: var(--accent); color: var(--on-accent); font-size: var(--fs-xl); line-height: 1;
  transition: transform .16s ease, filter .16s ease;
}
.mini-btn:hover { background: var(--accent-deep); transform: translateY(-1px); }
.task-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 11px; padding-right: 2px; }
.task-list::-webkit-scrollbar { width: 5px; }
.task-list::-webkit-scrollbar-thumb { background: var(--shadow-color); border-radius: 4px; }

.task-item {
  background: var(--card);
  border-radius: var(--radius-sm); padding: 11px 13px;
  border: 1px solid var(--card-border);
  transition: box-shadow .18s ease, transform .18s ease;
}
.task-item:hover { box-shadow: var(--shadow); }
.task-item.running { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.task-item.done { opacity: .52; }
/* 任务名可能是老师的长要求，用流式排版：学科标签在前，正文自然换行不跳行 */
.task-name { font-size: var(--fs-lg); font-weight: 600; margin-bottom: 7px; display: block; line-height: 1.55; }
.task-name > .subject-chip,
.task-name > .tag,
.task-name > .deadline-chip { display: inline-flex; align-items: center; vertical-align: middle; position: relative; top: -1px; }
.task-name > .subject-chip { margin-right: 6px; }
.task-name > .tag,
.task-name > .deadline-chip { margin-left: 6px; }
.tag { font-size: var(--fs-2xs); padding: 3px 9px; border-radius: 999px; background: var(--ok-tint); color: var(--ok); font-weight: 600; }
.tag.review { background: var(--warn-tint); color: var(--warn); }
.tag.preview { background: var(--info-tint); color: var(--info); }
/* 家长签字 / 准备学具：提醒孩子别忘了 */
.tag.sign { background: var(--warn-tint); color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.tag.self { background: var(--info-tint); color: var(--info); }
.subject-chip { font-size: var(--fs-xs); color: var(--accent-deep); font-weight: 600; }
/* 任务名前缀：学科在最前面（【数学】口算本第12页） */
.subject-chip.first {
  background: var(--accent-tint-2); color: var(--accent-deep);
  padding: 2px 9px; border-radius: 8px; font-size: var(--fs-2xs);
  font-weight: 700; letter-spacing: .02em; flex-shrink: 0;
  border: 1px solid var(--accent-tint);
}
/* 临时任务里的"今日已完成"分隔线 */
.done-sep {
  margin: 4px 0 -3px; padding-top: 10px; border-top: 1px dashed var(--card-border);
  font-size: var(--fs-xs); color: var(--ok); font-weight: 700;
}
#ocrText { max-height: 38vh; overflow-y: auto; }
.deadline-chip {
  font-size: var(--fs-2xs); color: var(--warn); background: var(--warn-tint);
  padding: 3px 9px; border-radius: 999px; white-space: nowrap; font-weight: 600;
}
.deadline-chip.overdue { color: var(--danger); background: var(--danger-tint); }

/* 拍照识别 */
.ocr-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.ocr-row {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); padding: 9px 11px; margin-bottom: 9px;
}
.ocr-row input.name, .ocr-row textarea.name { flex: 2 1 150px; font-size: var(--fs-md); padding: 8px 10px; }
.ocr-row textarea.name {
  resize: none; overflow: hidden; line-height: 1.5;
  font-family: inherit; min-height: 40px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.ocr-row select { flex: 0 0 92px; font-size: var(--fs-md); padding: 8px 6px; }
.ocr-row input.num { flex: 0 0 72px; font-size: var(--fs-md); padding: 8px 9px; }
.ocr-row input.time { flex: 0 0 104px; font-size: var(--fs-md); padding: 8px 9px; }
.ocr-row .unit { font-size: var(--fs-xs); color: var(--ink-soft); }
.ocr-row .rm { border: none; background: var(--danger-tint); color: var(--danger); border-radius: 9px; padding: 7px 11px; cursor: pointer; font-size: var(--fs-md); }
.task-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; row-gap: 6px; }
.task-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.timer-label {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-md); font-weight: 700; color: var(--accent-deep);
  background: var(--accent-tint); padding: 4px 11px; border-radius: 9px;
}
.task-actions { display: flex; gap: 7px; flex-shrink: 0; margin-left: auto; }
.tbtn {
  border: none; cursor: pointer; border-radius: 9px; font-size: var(--fs-sm);
  padding: 6px 10px; background: var(--accent-tint); color: var(--accent-deep); font-weight: 600;
  transition: background .16s ease, transform .16s ease;
  white-space: nowrap;
}
.tbtn:hover { background: var(--accent-tint-2); transform: translateY(-1px); }
.tbtn.ok { background: var(--ok-tint); color: var(--ok); }
.tbtn.del { background: var(--danger-tint); color: var(--danger); }

/* 中间插画区 */
.col-mid { position: relative; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; max-height: calc(100vh - 190px); }
.hero-card {
  background: var(--panel); border: 1px solid var(--panel-border);
  backdrop-filter: blur(16px); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px 24px; margin-bottom: 16px;
}
.hero-date { font-size: var(--fs-md); color: var(--ink-soft); letter-spacing: 1.2px; font-weight: 600; }
.hero-greet { font-size: var(--fs-4xl); font-weight: 700; margin: 7px 0 5px; color: var(--ink); letter-spacing: .5px; }
.hero-sub { font-size: var(--fs-md); color: var(--ink-soft); margin-bottom: 14px; }
.hero-quote {
  font-size: var(--fs-lg); color: var(--ink); line-height: 1.9;
  background: var(--warm-tint);
  border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 16px;
  font-family: var(--font-kai);
  border-left: 3px solid var(--warm);
}
.hero-quote .quote-mark { color: var(--warm); font-weight: 700; }
.hero-quote .quote-from { display: block; font-size: var(--fs-xs); color: var(--ink-soft); text-align: right; margin-top: 3px; font-family: var(--font-sans); }
.hero-stats { display: flex; gap: 14px; }
.stat b { display: block; font-size: var(--fs-4xl); color: var(--accent-deep); line-height: 1.15; font-weight: 700; }
.stat span { font-size: var(--fs-sm); color: var(--ink-soft); }
.hero-art { flex: 1; width: 100%; min-height: 150px; object-fit: contain; opacity: .96; }

/* ===== 主页统计数字（超链接） ===== */
.stat-link {
  display: block; text-decoration: none; color: inherit;
  padding: 6px 12px; margin: -6px -12px; border-radius: var(--radius-sm);
  transition: background .18s ease, transform .18s ease;
}
.stat-link:hover { background: var(--accent-tint); transform: translateY(-2px); }
.stat-link:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.stat-link:active { transform: translateY(0); }
.stat-link:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

/* 跳转后目标板块高亮 */
@keyframes blockFlash {
  0%   { box-shadow: 0 0 0 0 var(--accent-tint-2), var(--shadow); background: var(--accent-tint); }
  100% { box-shadow: 0 0 0 16px transparent, var(--shadow); background: var(--card); }
}
.card.flash { animation: blockFlash 1.2s ease-out; }

/* ===== 日清 · 任务清单筛选 ===== */
.filter-tabs { display: flex; gap: 9px; margin: 0 0 12px; flex-wrap: wrap; }
.ftab {
  font-family: inherit; font-size: var(--fs-md); color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--panel-border);
  padding: 6px 16px; border-radius: 999px; cursor: pointer;
  transition: all .18s ease; font-weight: 500;
}
.ftab:hover { color: var(--accent-deep); border-color: var(--accent); }
.ftab.active { background: var(--accent-deep); color: var(--on-accent); border-color: transparent; font-weight: 600; }
.ftab:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

/* ===== 底部导航 ===== */
.bottombar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: center; gap: 6px;
  padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--panel-border);
}
.nav-btn {
  border: none; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: var(--fs-xs); color: var(--ink-soft); padding: 5px 20px; border-radius: 13px;
  transition: background .18s ease, color .18s ease;
}
.nav-btn span { font-size: 1.55em; line-height: 1.15; }
.nav-btn:hover { background: var(--accent-tint); }
.nav-btn.active { color: var(--accent-deep); background: var(--accent-tint); font-weight: 600; }

/* ===== 卡片 ===== */
.card {
  background: var(--card); border: 1px solid var(--card-border);
  backdrop-filter: blur(12px); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 18px;
}
.card h3 { font-size: var(--fs-2xl); margin-bottom: 12px; font-weight: 700; letter-spacing: .2px; }

/* ===== 表单 ===== */
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: var(--fs-md); color: var(--ink-soft); margin-bottom: 6px; font-weight: 500; }
.form-row.inline { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.form-row.inline label { margin: 0; }
input, select, textarea {
  font-family: inherit; font-size: var(--fs-lg); color: var(--ink);
  background: var(--surface); border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm); padding: 10px 13px; outline: none; flex: 1; min-width: 0;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
textarea { width: 100%; resize: vertical; line-height: 1.7; }
.primary-btn {
  background: var(--accent); color: var(--on-accent); border: none; cursor: pointer;
  font-size: var(--fs-lg); padding: 11px 22px; border-radius: var(--radius-sm);
  font-weight: 600; font-family: inherit;
  box-shadow: 0 4px 14px var(--shadow-color);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.primary-btn:hover { background: var(--accent-deep); transform: translateY(-2px); box-shadow: 0 8px 22px var(--shadow-color); }
.primary-btn:active { transform: translateY(0); }
.ghost-btn {
  background: transparent; border: 1px solid var(--panel-border); color: var(--ink);
  font-size: var(--fs-md); padding: 9px 18px; border-radius: var(--radius-sm); cursor: pointer;
  margin: 4px 9px 4px 0; font-family: inherit;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.ghost-btn:hover { background: var(--accent-tint); border-color: var(--accent); transform: translateY(-1px); }
.hidden { display: none !important; }

.img-preview { display:block; width:100%; height:auto; max-height:62vh; object-fit:contain; border-radius: var(--radius-sm); margin:10px 0; border:1px solid var(--panel-border); background:var(--card); cursor:zoom-in; }

/* 全屏看图：双指缩放 / 单指拖动 / 双击放大 / 点空白或✕关闭 */
.lightbox { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.93); display:flex; align-items:center; justify-content:center; touch-action:none; -webkit-tap-highlight-color:transparent; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.lightbox img { max-width:100%; max-height:100%; transform-origin:center center; will-change:transform; pointer-events:none; }
.lb-close { position:absolute; top:calc(env(safe-area-inset-top) + 12px); right:14px; width:44px; height:44px; border-radius:50%; border:none; background:rgba(255,255,255,.18); color:#fff; font-size:20px; line-height:44px; text-align:center; cursor:pointer; }
.lb-tip { position:absolute; bottom:calc(env(safe-area-inset-bottom) + 16px); left:0; right:0; text-align:center; color:rgba(255,255,255,.72); font-size:13px; pointer-events:none; }

/* ===== 列表条目 ===== */
.item {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  background: var(--card); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: 9px; border: 1px solid var(--card-border);
  transition: box-shadow .18s ease;
}
.item:hover { box-shadow: var(--shadow); }
/* 文本区给一个最小基准宽度：窄屏放不下按钮时，按钮整组换到下一行，
   文字就能占满整行而不再被挤成竖排；宽屏仍是一行（按钮靠右） */
.item .grow { flex: 1 1 160px; min-width: 0; }
.item-actions { display: flex; gap: 11px; align-items: center; margin-left: auto; }
.item .title { font-size: var(--fs-lg); font-weight: 600; word-break: break-word; }
.item .sub { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 3px; line-height: 1.6; word-break: break-word; }
.check {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
  border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-md); color: transparent; background: var(--surface);
  transition: all .18s ease;
}
.check:hover { transform: scale(1.08); }
.check.on { background: var(--accent); color: var(--on-accent); }
.empty { text-align: center; color: var(--ink-soft); font-size: var(--fs-md); padding: 22px 0; }

.sync-box { font-size: var(--fs-lg); line-height: 2; margin-bottom: 12px; }
.sync-box b { color: var(--accent-deep); }

/* ===== 错题图 ===== */
.mistake-thumb { width: 62px; height: 62px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; border: 1px solid var(--panel-border); }

/* ===== 图表 ===== */
.chart { display: flex; flex-direction: column; gap: 12px; }
.chart-row { display: flex; align-items: center; gap: 12px; font-size: var(--fs-md); }
.chart-row .label { width: 58px; color: var(--ink-soft); }
.chart-bar { height: 18px; border-radius: 9px; background: var(--accent); opacity: .8; min-width: 5px; transition: width .4s; }
.chart-row .num { color: var(--ink-soft); }

/* ===== 弹层 ===== */
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: var(--scrim); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  animation: fadeIn .2s ease;
}
.modal-box {
  background: var(--modal-bg); border-radius: var(--radius-lg); width: 100%; max-width: 660px;
  max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg);
  padding: 20px 22px;
  border: 1px solid var(--panel-border);
}
.modal-box.small { max-width: 400px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-head h3 { font-size: var(--fs-2xl); font-weight: 700; }
.modal-x { background: var(--accent-tint); border: none; width: 34px; height: 34px; border-radius: 50%; font-size: 16px; cursor: pointer; color: var(--text-2); }
.modal-x:hover { background: var(--accent); color: #fff; }

/* ===== 错题库统计三级下钻 ===== */
.hero-stats { flex-wrap: wrap; }
.book-crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: var(--fs-sm); color: var(--text-2); flex-wrap: wrap; }
.book-crumbs a { color: var(--accent-deep); cursor: pointer; }
.book-crumbs a:hover { text-decoration: underline; }
.book-crumbs .sep { opacity: .45; }
.book-stat-list { display: flex; flex-direction: column; gap: 10px; }
.book-stat-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--accent-tint); border: 1px solid var(--panel-border); border-radius: var(--radius-sm);
  padding: 12px 16px; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; color: var(--text-1); }
.book-stat-row:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.book-stat-row .bs-name { font-size: var(--fs-lg); font-weight: 700; flex: 1; }
.book-stat-row .bs-count { font-size: var(--fs-2xl); font-weight: 800; color: var(--accent-deep); min-width: 48px; text-align: right; }
.book-stat-row .bs-meta { font-size: var(--fs-sm); opacity: .6; width: 100%; }
.book-stat-row .bs-go { opacity: .5; font-size: 18px; }
.book-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.book-table th, .book-table td { border-bottom: 1px solid var(--panel-border); padding: 8px 10px; text-align: left; vertical-align: top; line-height: 1.5; }
.book-table th { position: sticky; top: 0; background: var(--modal-bg); font-weight: 700; color: var(--text-2); z-index: 1; }
.book-table tr:hover td { background: var(--accent-tint); }
.book-table .c-idx { width: 36px; color: var(--text-2); text-align: center; }
.book-table .c-q { min-width: 160px; }
.book-table .tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: var(--fs-xs); font-weight: 600; }
.tag-learning { background: #fff3cd; color: #8a6d00; }
.tag-review { background: #e0ecff; color: #2b5fb3; }
.tag-mastered { background: #d6f5dd; color: #1d7a36; }
.tag-no { background: #ffe0e0; color: #b3261e; }
.tag-yes { background: #d6f5dd; color: #1d7a36; }
.book-empty { text-align: center; padding: 40px 12px; color: var(--text-2); opacity: .8; }
@media (max-width: 620px) {
  .book-table { font-size: 12px; }
  .book-table th, .book-table td { padding: 6px 7px; }
}

/* ===== 错题：识别结果 / 记忆曲线 / 巩固题 ===== */
.q-box {
  background: var(--accent-tint); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 14px; border-left: 3px solid var(--accent);
}
.q-label { font-size: var(--fs-2xs); color: var(--accent-deep); font-weight: 700; letter-spacing: 1.2px; margin-bottom: 7px; }
.q-text { font-size: var(--fs-xl); line-height: 1.8; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.meta-box {
  background: var(--warm-tint); border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 14px; font-size: var(--fs-md); line-height: 1.9; color: var(--ink);
}
.curve-box {
  background: var(--card); border: 1px dashed var(--accent);
  border-radius: var(--radius-sm); padding: 11px 15px; margin-bottom: 16px;
  font-size: var(--fs-sm); color: var(--accent-deep); line-height: 1.7;
}
.similar-box {
  background: var(--warm-tint); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 16px;
}
.similar-item { padding: 11px 0; border-bottom: 1px dashed var(--panel-border); }
.similar-item:last-child { border-bottom: none; }
.similar-q { font-size: var(--fs-lg); line-height: 1.8; margin-bottom: 5px; }
.redo-actions { display: flex; gap: 11px; flex-wrap: wrap; margin: 14px 0 10px; }
.redo-actions button { flex: 1 1 auto; }

/* ===== 照片裁剪选区 ===== */
.crop-stage {
  background: var(--stage-bg); border-radius: var(--radius); padding: 11px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin: 9px 0 14px; min-height: 240px;
}
.crop-stage canvas {
  display: block; border-radius: 9px; touch-action: none;
  cursor: crosshair; max-width: 100%;
}
.crop-tools { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 9px; }
.crop-tools button { flex: 0 0 auto; }

/* 引导步骤 */
.guide-img { max-width: 100%; max-height: 52vh; width: auto; margin: 0 auto 16px; display: block; object-fit: contain; border-radius: var(--radius-sm); border: 1px solid var(--panel-border); background: var(--card); cursor: zoom-in; }
/* 错因归类交互 */
.err-attr { background: var(--accent-tint); border-radius: var(--radius-sm); padding: 13px 16px; margin-bottom: 16px; border-left: 3px solid var(--accent); }
.err-attr .q-label { margin-bottom: 10px; }
.err-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.err-btn {
  border: 1px solid var(--panel-border); background: var(--surface); border-radius: 99px;
  padding: 8px 14px; font-size: var(--fs-md); cursor: pointer; color: var(--ink); font-family: inherit;
  transition: all .16s ease;
}
.err-btn:hover { border-color: var(--accent); }
.err-btn.sel { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.guide-step { border-left: 3px solid var(--accent); padding: 12px 16px; margin-bottom: 16px; background: var(--accent-tint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.guide-step .step-no { font-size: var(--fs-2xs); color: var(--accent-deep); font-weight: 700; letter-spacing: 1.2px; }
.guide-step .step-q { font-size: var(--fs-xl); font-weight: 700; margin: 5px 0 9px; line-height: 1.6; }
.guide-step .step-hint { font-size: var(--fs-sm); color: var(--ink-soft); margin: 7px 0 0; line-height: 1.7; }
.guide-step textarea { font-size: var(--fs-md); }
.guide-foot { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.mastery-btns { display: flex; gap: 9px; flex-wrap: wrap; }
.mastery-btns button {
  border: 1px solid var(--panel-border); background: var(--surface); border-radius: var(--radius-sm);
  padding: 9px 16px; font-size: var(--fs-md); cursor: pointer; color: var(--ink); font-family: inherit;
  transition: all .16s ease;
}

/* AI 老师辅导对话 */
.tutor-card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-sm); padding: 14px; margin: 14px 0; }
.tutor-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: 700; color: var(--accent-deep); font-size: var(--fs-lg); }
.tutor-mute { border: 1px solid var(--panel-border); background: var(--surface); border-radius: 99px; padding: 7px 13px; font-size: var(--fs-sm); cursor: pointer; color: var(--ink); font-family: inherit; white-space: nowrap; transition: all .16s ease; }
.tutor-mute:active { transform: scale(.96); }
.tutor-mute.off { background: #efe7e2; border-color: #d6c1b4; color: #8a6a55; font-weight: 600; }
.tutor-msgs { max-height: 42vh; overflow-y: auto; padding: 4px 2px 8px; display: flex; flex-direction: column; gap: 10px; }
.tmsg { display: flex; gap: 8px; align-items: flex-end; }
.tmsg-text { max-width: 82%; padding: 10px 13px; border-radius: 14px; font-size: var(--fs-md); line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.tmsg-user { justify-content: flex-end; }
.tmsg-user .tmsg-text { background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; }
.tmsg-ai .tmsg-text { background: var(--accent-tint); color: var(--ink); border-bottom-left-radius: 4px; }
.tmsg-err .tmsg-text { background: #fff3f0; color: #c0392b; border: 1px solid #ffd2c8; font-size: var(--fs-sm); }
.tmsg-speak { flex: 0 0 auto; border: 1px solid var(--panel-border); background: var(--surface); border-radius: 99px; width: 34px; height: 34px; font-size: 15px; cursor: pointer; }
.tmsg-speak:active { transform: scale(.94); }
.tmsg-typing .tmsg-text { display: inline-flex; gap: 5px; align-items: center; }
.tmsg-typing .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-deep); opacity: .5; animation: tutorBlink 1.2s infinite; }
.tmsg-typing .dot:nth-child(2) { animation-delay: .2s; }
.tmsg-typing .dot:nth-child(3) { animation-delay: .4s; }
@keyframes tutorBlink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.tutor-retry { color: var(--accent-deep); cursor: pointer; font-weight: 600; }
.tutor-input { margin-top: 10px; }
.tutor-input textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--panel-border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: var(--fs-md); font-family: inherit; resize: vertical; }
.tutor-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.tutor-quick .primary-btn { padding: 9px 18px; font-size: var(--fs-md); }
.tutor-quick .ghost-btn { padding: 9px 14px; font-size: var(--fs-md); border: 1px solid var(--panel-border); background: var(--surface); border-radius: var(--radius-sm); cursor: pointer; color: var(--ink); font-family: inherit; }
.tutor-quick button:disabled { opacity: .5; cursor: not-allowed; }
/* 语音输入（小朋友用麦克风说话） */
.tutor-voice { background: var(--surface); border: 1px dashed var(--panel-border); border-radius: var(--radius-sm); padding: 12px; text-align: center; }
.tutor-live { min-height: 22px; font-size: var(--fs-md); color: var(--ink-soft); line-height: 1.6; white-space: pre-wrap; word-break: break-word; margin-bottom: 10px; }
.tutor-mic-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.tutor-mic { width: 64px; height: 64px; border-radius: 50%; border: none; background: var(--accent); color: #fff; font-size: 28px; cursor: pointer; box-shadow: 0 4px 14px var(--shadow-color); transition: transform .12s ease, background .2s ease; flex: 0 0 auto; }
.tutor-mic:active { transform: scale(.92); }
.tutor-mic:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.tutor-mic.listening { background: #e74c3c; animation: tutorPulse 1.1s infinite; }
.tutor-mic.listening:disabled { opacity: 1; }
.tutor-mic-hint { font-size: var(--fs-sm); color: var(--ink-soft); }
.tutor-input textarea { margin-top: 10px; }
@keyframes tutorPulse { 0% { box-shadow: 0 0 0 0 rgba(231,76,60,.55); } 70% { box-shadow: 0 0 0 16px rgba(231,76,60,0); } 100% { box-shadow: 0 0 0 0 rgba(231,76,60,0); } }
.tutor-tip { margin: 11px 0 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.7; }
.ref-card { background: var(--card); border: 1px dashed var(--panel-border); border-radius: var(--radius-sm); margin: 4px 0 14px; overflow: hidden; }
.ref-toggle { padding: 12px 14px; cursor: pointer; font-weight: 600; color: var(--accent-deep); font-size: var(--fs-md); }
.ref-body { padding: 0 14px 12px; font-size: var(--fs-md); color: var(--ink-soft); line-height: 1.8; }
.ref-body > div { margin-top: 6px; }
.mastery-btns button:hover { border-color: var(--accent); }
.mastery-btns button.sel { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }

/* ===== 响应式：手机单栏 ===== */
@media (max-width: 1000px) {
  .board { grid-template-columns: minmax(0, 1fr); padding: 8px 16px; gap: 16px; }
  .col-mid, .col-side, .panel, .hero-card { min-width: 0; }
  .col-mid { order: -1; }
  .panel { max-height: none; }
  .task-list { max-height: 320px; }
  .hero-art { min-height: 160px; }
  .col-mid { max-height: none; }
  .page { padding: 12px 16px 34px; }
  .nav-btn { padding: 5px 14px; }
}
@media (max-width: 620px) {
  .date-chip { display: none; }
  .brand { font-size: var(--fs-xl); padding: 4px 8px; gap: 5px; }
  .brand-ico { font-size: 1.15em; }
  .brand-grade { display: none; }          /* 手机上空间紧，年级藏起来 */
  .clock-chip { font-size: var(--fs-md); padding: 3px 10px; }
  .topbar { padding: 12px 14px 8px; gap: 8px; }
  .top-right { gap: 7px; }
  .icon-btn { padding: 5px 10px; }
  .hero-greet { font-size: var(--fs-3xl); }
  .hero-stats { gap: 6px; }
  .stat b { font-size: var(--fs-3xl); }
  .theme-btn .theme-label { display: none; }
  .theme-btn { padding: 5px 9px; }
  .theme-panel { top: 56px; right: 14px; }
  /* 手机：老师朗读开关做成好点按的大小 */
  .tutor-mute { padding: 9px 15px; font-size: var(--fs-md); }

  /* 手机：弹层贴顶 + 高度跟随可视区，键盘弹出也能滚到最下面 */
  .modal { align-items: flex-start; padding: 8px; padding-top: max(8px, env(safe-area-inset-top)); }
  .modal-box {
    max-height: calc(100dvh - 16px);
    padding: 16px 14px calc(22px + env(safe-area-inset-bottom));
    border-radius: var(--radius-md);
    overscroll-behavior: contain;
  }
  .ocr-row { padding: 10px; }
  .ocr-row input.name, .ocr-row textarea.name { flex: 1 1 100%; }  /* 内容独占一行，长名字不被挤断 */
  .ocr-row input.name, .ocr-row textarea.name, .ocr-row select { font-size: var(--fs-md); }
  /* "添加到临时任务"吸底，滚不滚都点得到；底部留白免得盖住最后一行 */
  #ocrResult { padding-bottom: 78px; }
  #ocrResult .primary-btn {
    position: sticky; bottom: -1px; z-index: 2;
    box-shadow: 0 -10px 18px var(--modal-bg);
  }
  /* 手机：错题条目按钮整组占满下一行，做成大点按区域 */
  .item { align-items: flex-start; }
  .item-actions { flex: 1 1 100%; justify-content: flex-end; margin-left: 0; margin-top: 4px; }
  .item-actions .tbtn { flex: 1 1 0; justify-content: center; padding: 9px 12px; }
}

/* ===== 轻提示（多设备同步等） ===== */
.toast {
  position: fixed; left: 50%; bottom: 104px; transform: translate(-50%, 12px);
  background: var(--toast-bg); color: #fff; font-size: var(--fs-md);
  padding: 11px 20px; border-radius: 999px; backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity .24s, transform .24s;
  z-index: 300; max-width: 82vw; text-align: center; line-height: 1.6;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* 本设备使用者徽标 */
.device-chip {
  font-size: var(--fs-2xs); color: var(--accent-deep); background: var(--accent-tint);
  border-radius: 999px; padding: 3px 9px; margin-left: 7px; vertical-align: middle; font-weight: 600;
}

/* 防止长句把窄屏撑出横向滚动 */
.hero-quote, .hero-greet, .hero-date, .task-name, .panel { overflow-wrap: anywhere; }

/* ================= 默写本 ================= */
.inline-row { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; margin-top: 12px; }

/* 主页底部默写模块 */
.dict-module {
  margin: 12px 0 0; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: linear-gradient(120deg, var(--card), var(--accent-tint));
  border: 1px solid var(--card-border); border-radius: var(--radius);
  box-shadow: var(--shadow); backdrop-filter: blur(16px);
}
.dict-module-left { flex: 1; min-width: 0; }
.dict-module-title { font-size: var(--fs-xl); font-weight: 700; color: var(--ink); }
.dict-module-sub { font-size: var(--fs-sm); color: var(--ink-soft); margin: 5px 0 9px; }
.dict-module-bar { height: 7px; background: var(--accent-tint); border-radius: 99px; overflow: hidden; max-width: 440px; }
.dict-module-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .4s; }
.dict-module-right { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.dict-due b { font-size: var(--fs-4xl); color: var(--accent-deep); display: block; line-height: 1.1; font-weight: 700; }
.dict-due span { font-size: var(--fs-xs); color: var(--ink-soft); }

/* 统计 */
.dict-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; text-align: center; }
.dict-stat {
  display: block; width: 100%; text-align: center; cursor: pointer;
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-sm);
  padding: 14px 6px; font-family: inherit; color: inherit;
  transition: transform .12s ease, box-shadow .16s ease, border-color .16s ease;
}
.dict-stat:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.dict-stat:active { transform: translateY(0) scale(.98); }
.dict-stat b { display: block; font-size: var(--fs-4xl); color: var(--accent-deep); font-weight: 700; line-height: 1.1; }
.dict-stat span { font-size: var(--fs-sm); color: var(--ink-soft); }
.dict-stat::after { content: ' ›'; color: var(--accent); font-weight: 700; opacity: 0; transition: opacity .16s ease; }
.dict-stat:hover::after { opacity: 1; }

/* 统计详情弹层内容 */
.ds-list { display: flex; flex-direction: column; gap: 8px; }
.ds-word-row { display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-sm); padding: 9px 11px; }
.ds-word-main { flex: 1; min-width: 0; }
.ds-word-main .lib-word { font-weight: 700; }
.ds-word-main .lib-lv { font-size: 12px; color: var(--accent-deep); letter-spacing: 1px; }
.ds-acc-summary { font-size: var(--fs-lg); margin-bottom: 12px; line-height: 1.8; }
.ds-acc-summary b { color: var(--accent-deep); }
.ds-sessions { display: flex; flex-direction: column; gap: 9px; }
.ds-session { border: 1px solid var(--card-border); border-radius: var(--radius-sm); overflow: hidden; }
.ds-session-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; background: var(--card); }
.ds-session-head:hover { background: var(--accent-tint); }
.ds-session-date { font-weight: 600; }
.ds-session-pct { margin-left: auto; font-weight: 700; }
.ds-session-pct.ok { color: var(--ok); }
.ds-session-pct.bad { color: var(--danger); }
.ds-caret { transition: transform .18s ease; color: var(--ink-soft); }
.ds-session-body { padding: 8px 12px 12px; border-top: 1px dashed var(--panel-border); }
.ds-item { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: var(--fs-md); border-bottom: 1px solid var(--panel-border); }
.ds-item:last-child { border-bottom: none; }
.ds-item.ok span:first-child { color: var(--ink); }
.ds-item.bad span:first-child { color: var(--ink); }
.ds-item-ans { font-size: var(--fs-sm); white-space: nowrap; }
.ds-item.ok .ds-item-ans { color: var(--ok); }
.ds-item.bad .ds-item-ans { color: var(--danger); }

/* 学科切换 */
.dict-tabs { display: flex; gap: 9px; margin-bottom: 13px; flex-wrap: wrap; }
.dict-tab {
  border: 1px solid var(--panel-border); background: var(--card);
  border-radius: 999px; padding: 8px 22px; font-size: var(--fs-lg); cursor: pointer;
  color: var(--ink-soft); font-family: inherit;
  transition: all .18s ease;
}
.dict-tab:hover { border-color: var(--accent); color: var(--accent-deep); }
.dict-tab.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }

/* 三个来源按钮 */
.dict-sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.dict-source {
  border: 1px dashed var(--accent); background: var(--card);
  border-radius: var(--radius-sm); padding: 16px 9px; font-size: var(--fs-md); cursor: pointer; color: var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .18s ease, transform .18s ease;
}
.dict-source:hover { background: var(--accent-tint); transform: translateY(-2px); }
.dict-source small {
  background: var(--accent); color: var(--on-accent); border-radius: 999px;
  padding: 2px 8px; font-size: var(--fs-2xs); font-weight: 700;
}

/* 词条 */
.word-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.word-chip {
  background: var(--accent-tint); color: var(--ink);
  border-radius: 999px; padding: 7px 14px; font-size: var(--fs-lg); display: inline-flex; align-items: center; gap: 7px;
}
.word-chip i { font-style: normal; color: var(--ink-soft); cursor: pointer; font-size: var(--fs-sm); }
/* 词条里的中文释义：跟在英文后面，小一号、淡一点，一眼看出"英文 + 中文"是同一条 */
.word-chip .chip-zh {
  font-style: normal; font-weight: 400; font-size: var(--fs-sm); color: var(--ink-soft);
  padding-left: 7px; margin-left: 2px; border-left: 1px solid var(--card-border, rgba(128,128,128,.25));
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.word-chip.add { background: transparent; border: 1px dashed var(--accent); cursor: pointer; }

/* 播放器 */
.dict-player { text-align: center; padding: 20px 0 12px; }
.dict-count { font-size: var(--fs-md); color: var(--ink-soft); letter-spacing: 1.2px; }
.dict-big { font-size: var(--fs-5xl); font-weight: 700; color: var(--ink); margin: 9px 0 7px; letter-spacing: 2px; }
.dict-tip { font-size: var(--fs-md); color: var(--ink-soft); min-height: 22px; }
.dict-controls { display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

/* 批阅结果 */
.grade-summary { font-size: var(--fs-lg); margin: 14px 0; color: var(--ink); }
.grade-summary b { font-size: var(--fs-3xl); color: var(--accent-deep); }
.grade-list { display: flex; flex-direction: column; gap: 7px; }
.grade-row {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  padding: 10px 13px; border-radius: var(--radius-sm); border: 1px solid var(--card-border);
  background: var(--card); font-size: var(--fs-lg);
}
.grade-row.ok { background: var(--ok-tint); }
.grade-row.bad { background: var(--danger-tint); }
.grade-no { width: 26px; color: var(--ink-soft); font-size: var(--fs-sm); }
.grade-word { font-weight: 700; min-width: 92px; }
.grade-answer { flex: 1; font-size: var(--fs-sm); color: var(--ink-soft); }
.grade-flag { font-weight: 700; }
.grade-row.ok .grade-flag { color: var(--ok); }
.grade-row.bad .grade-flag { color: var(--danger); }

/* 词库 */
.lib-head { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: 9px; }
.lib-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--radius-sm); background: var(--card);
  border: 1px solid var(--card-border); margin-bottom: 7px; font-size: var(--fs-md);
}
.lib-word { font-weight: 700; min-width: 84px; }
.lib-lv { color: var(--accent); letter-spacing: 2px; font-size: var(--fs-xs); }
.lib-meta { color: var(--ink-soft); font-size: var(--fs-sm); flex: 1; }
.lib-badge { font-size: var(--fs-2xs); color: var(--ink-soft); background: var(--accent-tint); border-radius: 999px; padding: 3px 9px; font-weight: 600; }
.lib-badge.due { background: var(--warn-tint); color: var(--warn); }
.lib-badge.ok { background: var(--ok-tint); color: var(--ok); }

/* 词库新结构：全部词库 = 科目文件夹（点开才展开词）；默写错题本 = 单词卡 */
.lib-folder {
  margin-bottom: 8px; border-radius: var(--radius-md);
  border: 1px solid var(--card-border); background: var(--card); overflow: hidden;
}
.lib-folder-head {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 12px; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.lib-folder-head:active { background: var(--accent-tint); }
.lib-folder-ico { font-size: 18px; line-height: 1; flex: 0 0 auto; }
.lib-folder-title { font-weight: 700; font-size: var(--fs-md); flex: 1; min-width: 0; }
.lib-folder-cnt {
  font-size: var(--fs-2xs); color: var(--ink-soft); background: var(--accent-tint);
  border-radius: 999px; padding: 2px 9px; font-weight: 600;
}
.lib-folder-caret { color: var(--ink-soft); font-size: 12px; transition: transform .15s; }
.lib-folder-caret.open { transform: rotate(180deg); }
.lib-folder-body { padding: 2px 8px 9px; }
.lib-folder-hint { padding: 6px 6px 8px; color: var(--ink-soft); font-size: var(--fs-sm); }

/* 默写错题本：未掌握的词用单词卡显示，每张可单独"已掌握"移出错题本 */
.wrong-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--card-border); margin-bottom: 7px;
}
.wrong-main { flex: 1; min-width: 0; }
.wrong-word { font-weight: 700; font-size: var(--fs-md); word-break: break-word; }
.wrong-zh { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 2px; }
.wrong-meta { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 3px; }
.wrong-btns { display: flex; flex-direction: column; gap: 6px; align-items: stretch; flex: 0 0 auto; }

/* 载入默写文件后的「修改 / 覆盖保存」编辑器 */
.dict-loaded-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.dict-loaded-name { font-size: 12px; color: var(--ink-soft); font-weight: 400; }
.loaded-row { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.loaded-idx { flex: 0 0 18px; color: var(--ink-soft); text-align: right; font-size: 13px; }
.loaded-text { flex: 1 1 auto; min-width: 0; padding: 6px 8px; border: 1px solid var(--card-border, #d6d6d6); border-radius: 8px; background: var(--bg, #fff); color: inherit; font-size: 14px; }
.loaded-zh { flex: 1 1 auto; min-width: 0; padding: 6px 8px; border: 1px solid var(--card-border, #d6d6d6); border-radius: 8px; background: var(--bg, #fff); color: inherit; font-size: 14px; }
.loaded-del { flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid var(--card-border, #d6d6d6); border-radius: 8px; background: var(--bg, #fff); color: var(--danger, #c0392b); cursor: pointer; }
.loaded-del:hover { background: var(--danger-tint, #fdecea); }

/* IMA 知识库目录树 */
.ima-actions {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin: 12px 0;
}
.ima-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 13px; text-align: left;
  border: 1px solid var(--card-border); border-radius: var(--radius-md);
  background: var(--card); color: var(--ink);
  font-family: inherit; font-size: var(--fs-md);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .12s, box-shadow .15s, opacity .15s;
  min-height: 58px;
}
.ima-btn:active { transform: scale(.97); opacity: .85; }
.ima-btn[disabled] { opacity: .6; cursor: default; }
.ima-btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.ima-btn-ico { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.ima-btn-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ima-btn-body b { font-size: var(--fs-md); font-weight: 700; line-height: 1.25; }
.ima-btn-body i {
  font-style: normal; font-size: var(--fs-xs); opacity: .72; line-height: 1.3;
}
.ima-btn-primary .ima-btn-body i { opacity: .85; }

/* 转圈动画 */
@keyframes ima-spin { to { transform: rotate(360deg); } }
.ima-btn-ico.spin, .spin-inline {
  display: inline-block; animation: ima-spin 1s linear infinite;
}
.spin-inline {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  vertical-align: -2px;
}
.ima-loading {
  padding: 16px 12px; text-align: center; color: var(--ink-soft);
  background: var(--accent-tint); border-radius: var(--radius-sm);
  line-height: 1.7;
}
.ima-loading small { opacity: .75; font-size: var(--fs-xs); }
.ima-error {
  padding: 12px; border-radius: var(--radius-sm);
  background: var(--warn-tint); color: var(--ink);
  line-height: 1.8;
}
.ima-tree-foot { margin-top: 10px; text-align: center; }

/* 新版本横幅 */
.newver-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 9px 12px; font-size: var(--fs-sm); font-weight: 700;
  background: var(--accent); color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.newver-banner.hidden { display: none; }
.newver-banner button {
  padding: 5px 12px; border-radius: var(--radius-sm);
  border: none; background: #fff; color: var(--accent);
  font-weight: 700; font-size: var(--fs-sm); cursor: pointer;
}
.newver-banner .newver-x { cursor: pointer; opacity: .8; padding: 0 4px; }

.ima-tree-head {
  font-weight: 700; font-size: var(--fs-md); margin: 12px 0 8px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--accent-tint); color: var(--ink);
}
.ima-linkbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;
}
.ima-link {
  display: inline-block; padding: 8px 13px; border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--card-border);
  color: var(--accent); font-weight: 700; font-size: var(--fs-sm); text-decoration: none;
}
.ima-link:active { opacity: .75; }
.ghost-btn.mini {
  padding: 6px 11px; font-size: var(--fs-xs); border-radius: var(--radius-sm);
}
.ima-tree { margin-top: 4px; }
.ima-node {
  border: 1px solid var(--card-border); border-radius: var(--radius-sm);
  background: var(--card); margin-bottom: 6px; overflow: hidden;
}
.ima-summary {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 12px; cursor: pointer; list-style: none;
  font-size: var(--fs-md); user-select: none;
}
.ima-summary::-webkit-details-marker { display: none; }
.ima-caret { color: var(--ink-soft); font-size: var(--fs-xs); transition: transform .15s; }
.ima-node[open] > .ima-summary .ima-caret { transform: rotate(90deg); }
.ima-fname { font-weight: 700; flex: 1; min-width: 90px; white-space: nowrap; }
.ima-count { color: var(--ink-soft); font-size: var(--fs-xs); white-space: nowrap; }
.ima-open-btn { margin-left: auto; white-space: nowrap; }
.ima-open-short { display: none; }
.ima-children {
  padding: 4px 12px 10px 30px; border-top: 1px solid var(--card-border);
}
.ima-file {
  padding: 6px 0; font-size: var(--fs-sm); color: var(--ink-soft);
  border-bottom: 1px dashed var(--card-border); word-break: break-all;
}
.ima-file:last-child { border-bottom: none; }
.ima-file.empty { font-style: italic; }
.ima-node .ima-node { background: transparent; }

/* 窄屏：把「在 ima 中查看」挪到单独一行，避免挤坏文件名 */
@media (max-width: 560px) {
  .ima-summary { gap: 6px; padding: 9px 10px; }
  /* 文件名过长时省略号截断，保证「在 ima 中查看」始终在同一行 */
  .ima-fname {
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; flex: 1 1 auto;
  }
  .ima-count { flex: 0 0 auto; }
  .ima-open-btn {
    margin-left: auto; flex: 0 0 auto; width: auto; text-align: center;
    padding: 4px 8px; font-size: 11px;
  }
  .ima-open-full { display: none; }
  .ima-open-short { display: inline; font-size: 14px; }
  .ima-children { padding-left: 18px; }
  /* 按钮组在手机上仍保持两列，但缩小间距 */
  .ima-actions { gap: 8px; }
  .ima-btn { padding: 10px 10px; gap: 8px; min-height: 54px; }
  .ima-btn-ico { font-size: 19px; }
  .ima-btn-body b { font-size: var(--fs-sm); }
}

/* 手机端 */
@media (max-width: 1000px) {
  .dict-module { flex-direction: column; align-items: stretch; gap: 12px; margin: 12px 0 0; padding: 14px 16px; }
  .dict-module-right { justify-content: space-between; }
  .dict-stats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .dict-sources { grid-template-columns: 1fr; }
  .dict-big { font-size: var(--fs-4xl); }
  .bottombar { gap: 2px; padding-left: 6px; padding-right: 6px; }
  .bottombar .nav-btn { flex: 1 1 0; min-width: 0; padding: 5px 2px; }
  .dict-module-right { align-items: center; }
  .dict-due { display: flex; align-items: baseline; gap: 5px; }
  .dict-due b { font-size: var(--fs-3xl); }
}

/* 默写 / 背诵 模式切换 */
.dict-modes { display: flex; gap: 9px; margin-bottom: 13px; flex-wrap: wrap; }
.dict-mode {
  flex: 1; min-width: 190px; border: 1px solid var(--panel-border); background: var(--card);
  border-radius: var(--radius-sm); padding: 11px 14px; font-size: var(--fs-md); cursor: pointer;
  color: var(--ink-soft); font-family: inherit;
  transition: all .18s ease;
}
.dict-mode.on { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-deep); font-weight: 700; }

/* ===== 待默写临时库（拍照识别后跨设备同步） ===== */
.dict-module { flex-wrap: wrap; }
.dict-module-pending {
  flex: 1 0 100%; margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--accent);
  font-size: var(--fs-md); color: var(--ink); display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.dict-module-pending a { color: var(--accent-deep); font-weight: 700; text-decoration: none; }
#dictPendingList { display: flex; flex-direction: column; gap: 11px; }
.pending-item {
  display: flex; align-items: center; justify-content: space-between; gap: 13px;
  padding: 13px 16px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--card-border);
}
.pending-main { min-width: 0; }
.pending-title { font-size: var(--fs-lg); color: var(--ink); }
.pending-title b { font-size: var(--fs-xl); color: var(--accent-deep); }
.pending-meta { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 3px; }
.pending-words {
  font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 640px;
}
.pending-btns { display: flex; gap: 9px; flex-shrink: 0; }
@media (max-width: 720px) {
  .pending-item { flex-direction: column; align-items: stretch; }
  .pending-words { white-space: normal; }
  .pending-btns { justify-content: flex-end; }
  .pending-btns button { flex: 1; }
}

/* 默写文件列表（按 日期 + 科目 存档） */
.dict-file-day { margin-top: 10px; }
.dict-file-daytitle {
  font-size: var(--fs-sm); color: var(--ink-soft); font-weight: 700;
  margin-bottom: 6px; letter-spacing: .02em;
}
.dict-file-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--panel-border);
  margin-bottom: 6px;
}
.dict-file-name { font-weight: 600; color: var(--ink); font-size: var(--fs-md); }
.dict-file-count { color: var(--ink-soft); font-size: var(--fs-sm); flex: 1; }

/* ============ 错题 AI 分析：批改卡片 / 引导步骤 / 分析文档 / 奖励 ============ */
.tag-learn { background: #eee9ff; color: #5b45c0; }
.book-table .diff-stars { color: #e8a33d; letter-spacing: 1px; font-size: var(--fs-xs); }
.book-table .c-doc { white-space: nowrap; color: var(--accent-deep); font-weight: 600; }
.book-row-clickable { cursor: pointer; }
.book-row-clickable:hover td { background: var(--accent-tint); }

/* AI 批改结果卡片 */
.ana-card {
  border-radius: var(--radius-md, 12px);
  padding: 12px 14px;
  margin: 12px 0;
  border: 1px solid var(--panel-border);
  background: var(--card);
}
.ana-card.ana-ok { border-color: #8fd6a8; background: #f2fbf5; }
.ana-card.ana-bad { border-color: #f0b4ae; background: #fff6f5; }
.ana-card.ana-unk { border-color: #d6c9f5; background: #faf8ff; }
.ana-card.ana-loading { border-color: #cdd6e4; }
.ana-head { font-weight: 800; font-size: var(--fs-md, 15px); margin-bottom: 8px; color: var(--ink); }
.ana-loading-tip { font-size: var(--fs-sm, 13px); opacity: .65; line-height: 1.6; }
.ana-card.ana-error .ghost-btn { margin-top: 8px; }
.ana-rows { display: flex; flex-direction: column; gap: 5px; }
.ana-row { display: flex; gap: 10px; font-size: var(--fs-sm, 13px); line-height: 1.6; }
.ana-k { flex: 0 0 62px; opacity: .6; font-weight: 600; }
.ana-v { flex: 1; word-break: break-word; }
.ana-ans { font-weight: 700; color: #1d7a36; }
.ana-sol { margin-top: 10px; border-top: 1px dashed var(--panel-border); padding-top: 8px; }
.ana-sol-toggle { cursor: pointer; font-size: var(--fs-sm, 13px); font-weight: 700; color: var(--accent-deep); user-select: none; }
.ana-arrow { float: right; }
.ana-sol-body {
  margin-top: 6px; font-size: var(--fs-sm, 13px); line-height: 1.75;
  background: var(--panel); border-radius: 8px; padding: 9px 11px;
  white-space: pre-wrap; word-break: break-word;
}
.ana-praise {
  margin: 10px 0; padding: 11px 13px; border-radius: 12px;
  background: linear-gradient(135deg, #fff6d9, #ffeef5);
  border: 1px solid #ffd97d; font-size: var(--fs-sm, 13px); line-height: 1.7;
}

/* 引导步骤（🔴 不含答案） */
.guide-steps {
  margin: 12px 0; padding: 12px 14px;
  border: 1px dashed #9fc7f0; border-radius: 12px; background: #f4f9ff;
}
.guide-steps.empty-tip { font-size: var(--fs-sm, 13px); opacity: .6; }
.gs-title { font-weight: 800; font-size: var(--fs-sm, 13px); margin-bottom: 8px; color: #2b5fb3; }
.gs-item { margin-bottom: 9px; padding-left: 2px; }
.gs-item:last-child { margin-bottom: 0; }
.gs-step { font-weight: 700; font-size: var(--fs-sm, 13px); color: var(--ink); }
.gs-q { font-size: var(--fs-sm, 13px); line-height: 1.7; margin-top: 3px; color: var(--ink); }
.gs-hint { font-size: var(--fs-xs, 12px); line-height: 1.65; margin-top: 3px; opacity: .78; }
.gs-warn { margin-top: 8px; font-size: var(--fs-xs, 12px); color: #b3261e; }

/* 错题分析文档弹窗 */
.doc-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.doc-verdict { font-weight: 700; font-size: var(--fs-sm, 13px); }
.doc-file { font-size: var(--fs-xs, 12px); opacity: .6; }
.doc-body {
  white-space: pre-wrap; word-break: break-word; margin: 0;
  font-family: inherit; font-size: var(--fs-sm, 13px); line-height: 1.85;
  background: var(--panel); border-radius: 10px; padding: 14px 16px;
  max-height: 56vh; overflow-y: auto; color: var(--ink);
}
.doc-foot { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* 奖励弹窗 */
.reward-box { text-align: center; position: relative; overflow: hidden; }
.reward-sticker { font-size: 64px; line-height: 1; animation: rewardPop .5s cubic-bezier(.2,1.4,.4,1); }
.reward-title { margin: 8px 0 10px; font-size: var(--fs-xl, 20px); font-weight: 800; color: var(--ink); }
.reward-body { font-size: var(--fs-sm, 13px); line-height: 1.8; text-align: left; }
.reward-body .rw-line { padding: 4px 0; }
.reward-body .rw-ok { color: #1d7a36; font-weight: 700; }
.reward-body .rw-ans { color: var(--accent-deep); font-weight: 700; }
.reward-body .rw-tip { margin-top: 8px; opacity: .7; font-size: var(--fs-xs, 12px); }
@keyframes rewardPop {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* 撒花 */
.confetti { position: absolute; top: -24px; pointer-events: none; animation: confettiFall 2.4s ease-in forwards; }
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(420px) rotate(540deg); opacity: 0; }
}

/* 错题卡片上的 AI 批改徽章 */
.ai-badge {
  display: inline-block; padding: 1px 9px; border-radius: 10px;
  font-size: var(--fs-xs); font-weight: 700; margin-top: 3px;
}
.ai-badge.ai-ok { background: #d6f5dd; color: #1d7a36; }
.ai-badge.ai-bad { background: #ffe0e0; color: #b3261e; }
.ai-badge.ai-loading { background: #e8ecf3; color: #5a6b85; }

/* ============================================================
   首页 · 星际玻璃面板（Home Dashboard v2）
   深色宇宙底 + 玻璃大面板 + 彩色 bento 磁贴 + 立体插画 + 悬浮工具坞
   只在 body.home-active 时生效；其它页面继续使用主题配色，互不影响
   ============================================================ */

/* ---------- 宇宙背景 ---------- */
body.home-active {
  background:
    radial-gradient(1100px 700px at 78% -14%, rgba(52, 92, 170, .36) 0%, transparent 62%),
    radial-gradient(900px 620px at 6% 108%, rgba(96, 58, 150, .30) 0%, transparent 60%),
    radial-gradient(700px 500px at 50% 46%, rgba(20, 48, 96, .18), transparent 72%),
    #060b19;
  color-scheme: dark;
}
#view-home { position: relative; }
.hd-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hd-sky::before {
  content: ''; position: absolute; inset: -8%;
  background-image:
    radial-gradient(1.4px 1.4px at 20px 30px, rgba(255,255,255,.85) 50%, transparent 52%),
    radial-gradient(1px 1px at 120px 90px, rgba(180,215,255,.7) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 210px 170px, rgba(255,255,255,.55) 50%, transparent 52%),
    radial-gradient(1px 1px at 300px 40px, rgba(200,225,255,.6) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 70px 210px, rgba(255,235,190,.6) 50%, transparent 52%);
  background-size: 340px 250px;
  animation: hdTwinkle 7s ease-in-out infinite alternate;
}
.hd-sky::after {
  content: ''; position: absolute; width: 74vw; height: 74vw; right: -26vw; top: -34vw;
  background: conic-gradient(from 205deg, transparent 0 60%, rgba(96,150,255,.09) 70%, transparent 80%);
  transform: rotate(-12deg);
}
.hd-planet {
  position: absolute; right: -14vw; bottom: -30vw; width: 54vw; height: 54vw; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(93,133,204,.20), rgba(14,26,54,.48) 55%, rgba(4,9,22,.88) 78%);
  box-shadow: inset 0 2px 26px rgba(150,190,255,.16), 0 -20px 90px rgba(60,110,220,.12);
}
@keyframes hdTwinkle { from { opacity: .42; } to { opacity: .9; } }

/* ---------- 顶栏（首页专用深色） ---------- */
body.home-active .topbar { background: linear-gradient(to bottom, rgba(6,11,25,.92) 58%, transparent); }
body.home-active .brand { color: #eef5ff; }
body.home-active .brand:hover { background: rgba(255,255,255,.08); }
body.home-active .brand-grade,
body.home-active .brand .caret { color: #9fb2d6; }
body.home-active .date-chip,
body.home-active .clock-chip,
body.home-active .icon-btn,
body.home-active .theme-btn {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #dbe8ff;
}
body.home-active .date-chip { color: #9fb2d6; }
body.home-active .clock-chip { color: #8fd0ff; }
body.home-active .icon-btn:hover,
body.home-active .theme-btn:hover { background: rgba(255,255,255,.15); }

/* ---------- 大玻璃面板 ---------- */
.hd-wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 4px 20px 20px; }
.hd-shell {
  position: relative; max-width: 100%; border-radius: 26px; padding: 14px 18px 12px; overflow: hidden;
  background: linear-gradient(160deg, rgba(29,44,88,.74), rgba(11,19,42,.88) 58%, rgba(16,25,54,.92));
  border: 1px solid rgba(146,184,255,.22);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.045) inset,
    0 1px 0 rgba(255,255,255,.14) inset,
    0 30px 80px rgba(0,0,0,.55),
    0 0 90px rgba(70,120,255,.10);
}
.hd-shell::before {
  content: ''; position: absolute; left: 12%; right: 12%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(160,205,255,.75), transparent);
}
.hd-shell::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .38;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 82%, transparent);
}
.hd-shell > * { position: relative; z-index: 1; }

/* 顶部标签导航 */
.hd-tabs { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 2px 0 14px; }
.hd-tab {
  border: 0; background: transparent; color: #95a8cd; font-family: inherit;
  font-size: var(--fs-sm); padding: 6px 14px 8px; cursor: pointer; position: relative;
  letter-spacing: .3px; transition: color .2s ease;
}
.hd-tab:hover { color: #dceaff; }
.hd-tab.on { color: #eaf3ff; font-weight: 700; }
.hd-tab.on::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 18px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #54a8ff, #9b7bff); box-shadow: 0 0 10px #5b9bff;
}

/* ---------- bento 网格 ---------- */
.hd-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 208px 208px 130px; gap: 13px; align-items: stretch;
}
.hd-tile {
  position: relative; border-radius: 18px; padding: 14px 15px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 26px rgba(3,8,24,.38);
  color: #f3f7ff;
  transition: transform .22s ease, box-shadow .22s ease;
}
.hd-tile:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 16px 34px rgba(3,8,24,.5); }
.hd-tile h3 { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 8px; letter-spacing: .3px; }
.hd-t-hero    { grid-column: 4 / 9;  grid-row: 1 / 3; }
.hd-t-profile { grid-column: 1 / 4;  grid-row: 1; }
.hd-t-stats   { grid-column: 9 / 13; grid-row: 1; }
.hd-t-temp    { grid-column: 1 / 4;  grid-row: 2; }
.hd-t-dict    { grid-column: 9 / 11; grid-row: 2; }
.hd-t-book    { grid-column: 11 / 13; grid-row: 2; }
.hd-t-fixed   { grid-column: 1 / 13; grid-row: 3; }

.hd-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.hd-tile-head h3 { margin: 0; }
.hd-head-tag {
  font-size: 9px; letter-spacing: 1.4px; color: #bfe0ff;
  background: rgba(255,255,255,.14); padding: 2px 7px; border-radius: 6px;
}
.hd-head-btns { display: flex; gap: 5px; }
.hd-mini-add {
  width: 26px; height: 26px; border-radius: 9px; border: 0; cursor: pointer;
  font-size: 15px; line-height: 1; background: rgba(255,255,255,.2); color: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35); transition: background .18s ease;
}
.hd-mini-add:hover { background: rgba(255,255,255,.36); }

/* ① 主视觉卡 */
.hd-t-hero {
  display: flex; flex-direction: column;
  background: linear-gradient(155deg, #4392ff 0%, #2f6be8 42%, #224cc4 100%);
  border-color: rgba(190,220,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 16px 40px rgba(18,70,180,.36);
}
.hd-hero-glow {
  position: absolute; width: 330px; height: 330px; right: -100px; top: -140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.26), transparent 68%); pointer-events: none;
}
.hd-hero-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.hd-chip {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .8px;
  background: rgba(255,255,255,.2); padding: 3px 10px; border-radius: 999px; color: #fff;
}
.hd-date { font-size: var(--fs-2xs); color: #dceaff; opacity: .92; }
.hd-greet {
  font-size: var(--fs-3xl); font-weight: 800; margin: 8px 0 2px; letter-spacing: .5px;
  text-shadow: 0 2px 10px rgba(10,40,120,.3); overflow-wrap: anywhere;
}
.hd-sub { font-size: var(--fs-sm); color: #dceaff; margin-bottom: 8px; }
.hd-quote {
  font-size: var(--fs-sm); line-height: 1.6; color: #e9f2ff;
  background: rgba(255,255,255,.14); border-radius: 12px; padding: 8px 12px;
  border-left: 2px solid rgba(255,255,255,.6); margin: 2px 0 4px;
  overflow-wrap: anywhere;
}
.hd-quote i { display: block; text-align: right; font-size: var(--fs-2xs); opacity: .78; font-style: normal; margin-top: 2px; }
.hd-qmark { color: #ffe9a8; }
.hd-hero-illu { flex: 1; min-height: 108px; display: flex; align-items: center; justify-content: center; position: relative; }
.hd-book { width: min(84%, 264px); height: auto; filter: drop-shadow(0 12px 18px rgba(8,32,100,.35)); }
.hd-spark { position: absolute; color: #fff; opacity: .8; animation: hdFloat 4s ease-in-out infinite; }
.hd-spark.s1 { top: 12%; left: 12%; font-size: 15px; }
.hd-spark.s2 { top: 30%; right: 14%; font-size: 20px; animation-delay: 1.1s; color: #ffe9a8; }
.hd-spark.s3 { bottom: 16%; left: 22%; font-size: 11px; animation-delay: 2.2s; }
@keyframes hdFloat { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-8px); opacity: 1; } }
.hd-hero-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.hd-cta {
  border: 0; cursor: pointer; font-family: inherit; font-size: var(--fs-sm); font-weight: 700;
  color: #2154c0; background: linear-gradient(180deg, #fff, #e7f0ff);
  padding: 8px 18px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(8,40,120,.3), inset 0 1px 0 #fff;
  transition: transform .18s ease;
}
.hd-cta:hover { transform: translateY(-2px); }
.hd-cta b { font-size: 1.2em; margin-left: 4px; }
.hd-hero-note { font-size: var(--fs-2xs); color: #dceaff; opacity: .88; }

/* ② 孩子档案卡（橙金） */
.hd-t-profile {
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(145deg, #f6b95c 0%, #e88b32 55%, #c96a24 100%);
  border-color: rgba(255,224,170,.55);
}
.hd-prof-head { display: flex; align-items: center; gap: 9px; }
.hd-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 25px;
  background: linear-gradient(150deg, #fff5dd, #ffd89a);
  border: 2px solid rgba(255,255,255,.78); box-shadow: 0 4px 12px rgba(120,50,0,.25);
}
.hd-prof-id { flex: 1; min-width: 0; }
.hd-prof-id b { display: block; font-size: var(--fs-xl); font-weight: 800; color: #fff; text-shadow: 0 2px 6px rgba(120,50,0,.3); }
.hd-prof-id small { font-size: var(--fs-2xs); color: #fff0d5; }
.hd-stars { font-size: var(--fs-xs); color: #fff3c4; letter-spacing: -1px; white-space: nowrap; }
.hd-prof-label { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-2xs); color: #fff3dc; }
.hd-prof-label b { font-size: var(--fs-md); color: #fff; }
.hd-prof-bar { height: 7px; border-radius: 99px; background: rgba(90,40,0,.26); overflow: hidden; }
.hd-prof-bar i { display: block; height: 100%; background: linear-gradient(90deg, #fff6cf, #fff); border-radius: 99px; transition: width .5s ease; }
.hd-prof-foot { display: flex; justify-content: space-between; gap: 6px; font-size: var(--fs-2xs); color: #fff0d5; margin-top: auto; }

/* ③ 今日数据卡（深蓝） */
.hd-t-stats { background: linear-gradient(150deg, #2b5fc9, #1b3e96 72%, #1a3380); }
.hd-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.hd-stat {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 3px 9px !important; margin: 0 !important;
  background: rgba(6,20,60,.3); border: 1px solid rgba(255,255,255,.13); border-radius: 11px;
  text-decoration: none; color: #eaf3ff; transition: background .18s ease, transform .18s ease;
}
.hd-stat:hover { background: rgba(255,255,255,.15); transform: translateY(-2px); }
.hd-stat b { font-size: var(--fs-xl); line-height: 1.12; color: #fff; font-weight: 800; }
.hd-stat span { font-size: var(--fs-2xs); color: #a9c4f5; }
.hd-rank { display: flex; align-items: center; gap: 9px; margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.15); }
.hd-cup { width: 30px; height: 30px; flex: 0 0 auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.hd-rank-txt b { display: block; font-size: var(--fs-sm); color: #ffe6a3; }
.hd-rank-txt small { font-size: var(--fs-2xs); color: #a9c4f5; }

/* ④⑤ 小磁贴：默写 / 错题库 */
.hd-t-dict, .hd-t-book { display: flex; flex-direction: column; }
.hd-t-dict { background: linear-gradient(150deg, #8b6cf0, #623fc9 72%, #5534b5); }
.hd-t-book { background: linear-gradient(150deg, #38c6c0, #199eae 72%, #187fa3); cursor: pointer; }
.hd-mini-ico {
  width: 40px; height: 40px; border-radius: 13px; margin-bottom: 8px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px rgba(0,0,0,.22);
}
.hd-due { display: flex; align-items: baseline; gap: 5px; margin: 0 0 6px; }
.hd-due b { font-size: var(--fs-4xl); font-weight: 800; line-height: 1; color: #fff; }
.hd-due small { font-size: var(--fs-2xs); color: rgba(255,255,255,.88); }
.hd-bar { height: 6px; border-radius: 99px; background: rgba(0,0,0,.2); overflow: hidden; margin-bottom: 6px; }
.hd-bar i { display: block; height: 100%; background: linear-gradient(90deg, #fff, #ffe6a8); border-radius: 99px; transition: width .4s ease; }
.hd-mini-text {
  font-size: var(--fs-2xs); line-height: 1.5; color: rgba(255,255,255,.9); margin: 0 0 8px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.hd-tiny-btn {
  align-self: flex-start; margin-top: auto; border: 0; cursor: pointer; font-family: inherit;
  font-size: var(--fs-2xs); font-weight: 700; color: #fff;
  background: rgba(255,255,255,.22); padding: 5px 12px; border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.hd-tiny-btn:hover { background: rgba(255,255,255,.36); }
.hd-pill {
  align-self: flex-start; margin-top: auto; font-size: var(--fs-2xs); font-weight: 700;
  color: #0b5c68; background: rgba(255,255,255,.88); padding: 4px 10px; border-radius: 999px;
}
.hd-pending {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding: 9px 14px; border-radius: 13px;
  background: linear-gradient(100deg, rgba(126,92,224,.28), rgba(52,126,214,.24));
  border: 1px solid rgba(180,160,255,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  font-size: var(--fs-xs); color: #eee6ff; line-height: 1.6;
}
.hd-pending b { color: #fff; }
.hd-pending a {
  color: #ffe9a8; font-weight: 700; text-decoration: none;
  background: rgba(255,255,255,.14); padding: 3px 12px; border-radius: 999px;
}
.hd-pending a:hover { background: rgba(255,255,255,.26); }

/* ⑥⑦ 任务卡 */
.hd-t-temp, .hd-t-fixed { display: flex; flex-direction: column; }
.hd-t-temp {
  background: linear-gradient(150deg, rgba(242,247,255,.96), rgba(214,229,255,.92));
  color: #26375a; border-color: rgba(255,255,255,.7);
}
.hd-t-fixed { background: linear-gradient(120deg, rgba(31,48,92,.92), rgba(20,31,66,.94)); }
.hd-t-temp .hd-tile-head h3 { color: #26375a; }
.hd-t-temp .hd-mini-add { background: rgba(40,80,160,.14); color: #2b5fb3; }
.hd-t-temp .hd-mini-add:hover { background: rgba(40,80,160,.26); }
.hd-tasks { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow-y: auto; padding-right: 3px; }
.hd-tasks::-webkit-scrollbar { width: 5px; }
.hd-tasks::-webkit-scrollbar-thumb { background: rgba(120,150,200,.45); border-radius: 4px; }
.hd-t-temp .hd-tasks::-webkit-scrollbar-thumb { background: rgba(60,100,170,.35); }
.hd-t-fixed .hd-tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 9px; align-content: start; }

/* 任务条目在深色 / 浅色卡上的可读性 */
.hd-t-temp .task-item { background: rgba(255,255,255,.76); border-color: rgba(90,120,180,.2); box-shadow: 0 2px 6px rgba(40,70,130,.07); }
.hd-t-temp .task-name { color: #26375a; }
.hd-t-temp .timer-label { background: rgba(60,110,220,.12); color: #2b5fb3; }
.hd-t-temp .tbtn { background: rgba(60,110,220,.12); color: #2b5fb3; }
.hd-t-temp .empty { color: #6b7fa3; }
.hd-t-temp .subject-chip.first { background: rgba(60,110,220,.12); color: #2b5fb3; border-color: rgba(60,110,220,.2); }
.hd-t-fixed .task-item { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.13); }
.hd-t-fixed .task-name { color: #eef4ff; }
.hd-t-fixed .timer-label { background: rgba(120,175,255,.18); color: #a9d3ff; }
.hd-t-fixed .tbtn { background: rgba(255,255,255,.11); color: #d5e5ff; }
.hd-t-fixed .empty { color: #9fb0d2; }
.hd-t-fixed .subject-chip,
.hd-t-fixed .subject-chip.first { background: rgba(120,175,255,.16); color: #bcd8ff; border-color: rgba(150,195,255,.25); }
.hd-tasks > .empty { text-align: center; }
.hd-t-fixed .hd-tasks > .empty { grid-column: 1 / -1; }

/* ---------- 快捷工具坞 ---------- */
.hd-quick {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin-top: 13px; padding: 10px 12px; border-radius: 18px;
  background: rgba(6,12,30,.55); border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.hd-q {
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 74px; padding: 2px 4px; color: #a9bcdc; font-size: var(--fs-2xs);
}
.hd-q i {
  display: flex; align-items: center; justify-content: center; font-style: normal;
  width: 40px; height: 40px; border-radius: 13px; font-size: 20px;
  background: linear-gradient(150deg, var(--q1, #4a7fe0), var(--q2, #2a4c9a));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 5px 12px rgba(0,0,0,.38);
  transition: transform .18s ease;
}
.hd-q:hover i { transform: translateY(-3px) scale(1.05); }
.hd-q:hover { color: #eaf3ff; }
.hd-q:nth-child(1) i { --q1: #57a6ff; --q2: #2b62d8; }
.hd-q:nth-child(2) i { --q1: #ffa95c; --q2: #e0701f; }
.hd-q:nth-child(3) i { --q1: #a887ff; --q2: #6642c9; }
.hd-q:nth-child(4) i { --q1: #47d6c4; --q2: #1597a0; }
.hd-q:nth-child(5) i { --q1: #7ed874; --q2: #2e9b52; }
.hd-q:nth-child(6) i { --q1: #8fa6c8; --q2: #4a608c; }
.hd-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.hd-dots i { width: 5px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.25); }
.hd-dots i.on { width: 18px; background: linear-gradient(90deg, #5aa4ff, #9b83ff); }
.hd-footnote { text-align: center; font-size: var(--fs-2xs); color: #7f92b8; margin-top: 10px; letter-spacing: .4px; }

/* ---------- 底部导航 → 悬浮彩色 dock（仅首页） ---------- */
body.home-active .bottombar {
  left: 50%; right: auto; bottom: 12px; transform: translateX(-50%);
  width: min(660px, calc(100vw - 20px));
  display: flex; justify-content: space-between; gap: 4px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(10,17,38,.84);
  border: 1px solid rgba(150,185,255,.22); border-radius: 22px; border-top: 1px solid rgba(150,185,255,.22);
  box-shadow: 0 14px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
body.home-active .bottombar .nav-btn {
  flex: 1 1 0; min-width: 0; padding: 5px 2px; gap: 3px; border-radius: 14px;
  color: #9fb2d6; font-size: var(--fs-2xs); font-weight: 500;
  transition: background .18s ease, color .18s ease;
}
body.home-active .bottombar .nav-btn span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 11px; font-size: 19px; line-height: 1;
  background: linear-gradient(150deg, #3c5488, #243559);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 10px rgba(0,0,0,.4);
  transition: transform .18s ease, box-shadow .18s ease;
}
body.home-active .bottombar .nav-btn:nth-child(1) span { background: linear-gradient(150deg, #5a9bff, #2a59d8); }
body.home-active .bottombar .nav-btn:nth-child(2) span { background: linear-gradient(150deg, #6fd8a0, #229361); }
body.home-active .bottombar .nav-btn:nth-child(3) span { background: linear-gradient(150deg, #b295ff, #6642c9); }
body.home-active .bottombar .nav-btn:nth-child(4) span { background: linear-gradient(150deg, #ffb06a, #dc6a27); }
body.home-active .bottombar .nav-btn:nth-child(5) span { background: linear-gradient(150deg, #57d6e0, #178fa8); }
body.home-active .bottombar .nav-btn:nth-child(6) span { background: linear-gradient(150deg, #ff9bb8, #c74d78); }
body.home-active .bottombar .nav-btn:hover { background: rgba(255,255,255,.07); }
body.home-active .bottombar .nav-btn.active { background: rgba(110,160,255,.14); color: #eaf3ff; font-weight: 700; }
body.home-active .bottombar .nav-btn.active span {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 16px rgba(70,130,255,.5);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1000px) {
  .hd-wrap { padding: 4px 12px 18px; }
  .hd-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: none; grid-auto-rows: minmax(160px, auto);
  }
  .hd-tile { grid-column: auto !important; grid-row: auto !important; }
  .hd-t-hero { grid-column: 1 / -1 !important; min-height: 350px; }
  .hd-t-profile, .hd-t-stats, .hd-t-dict, .hd-t-book { grid-column: span 3 !important; }
  .hd-t-temp, .hd-t-fixed { grid-column: 1 / -1 !important; }
  .hd-t-temp .hd-tasks { max-height: 240px !important; }
  .hd-t-fixed .hd-tasks { max-height: 210px !important; }
}
@media (max-width: 620px) {
  .hd-shell { padding: 12px 11px 10px; border-radius: 20px; }
  .hd-tabs {
    gap: 0; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto;
    padding-bottom: 10px; scrollbar-width: none;
  }
  .hd-tabs::-webkit-scrollbar { display: none; }
  .hd-tab { padding: 5px 7px; white-space: nowrap; font-size: var(--fs-2xs); }
  .hd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; grid-auto-rows: minmax(148px, auto); }
  .hd-t-hero { min-height: 336px; }
  .hd-t-dict, .hd-t-book { grid-column: span 1 !important; }
  .hd-t-profile, .hd-t-stats { grid-column: 1 / -1 !important; }
  .hd-prof-id b { white-space: nowrap; }
  .hd-t-stats .hd-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hd-greet { font-size: var(--fs-2xl); }
  .hd-hero-note { display: none; }
  .hd-date { display: none; }   /* 顶栏已有日期和时钟，窄屏不再重复占位置 */
  .hd-quick { gap: 5px; padding: 9px 6px; }
  .hd-q { min-width: 0; flex: 1 1 30%; }
  .hd-q span { font-size: 10px; }
  .hd-footnote { display: none; }
  body.home-active .bottombar { bottom: 8px; padding: 7px 6px calc(7px + env(safe-area-inset-bottom)); border-radius: 18px; }
  body.home-active .bottombar .nav-btn span { width: 32px; height: 32px; font-size: 17px; border-radius: 10px; }
  body.home-active .bottombar .nav-btn { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hd-sky::before, .hd-spark { animation: none; }
  .hd-tile, .hd-q i, .hd-cta { transition: none; }
}

/* ============================================================
   全站统一皮肤 · 星际玻璃 v3
   把首页 Home Dashboard v2 的「深色宇宙 + 玻璃大面板 + 彩色磁贴」
   提升为全局皮肤；所有内页沿用同一套设计令牌与组件语言。
   body.gx-active 常驻，body.home-active 只负责首页专属 bento 网格。
   ============================================================ */

/* ---------- 深色设计令牌（覆盖主题变量，内页/弹窗自动跟随） ---------- */
body.gx-active {
  color-scheme: dark;
  --bg: #060b19;
  --bg-g1: #0e1c3d;
  --bg-g2: #17163a;
  --ink: #eef4ff;
  --ink-soft: #a8bbdd;
  --ink-faint: #7f94ba;
  --accent: #64a6ff;
  --accent-deep: #a9ccff;
  --accent-tint: rgba(100, 166, 255, .15);
  --accent-tint-2: rgba(100, 166, 255, .27);
  --on-accent: #081833;
  --warm: #ffc880;
  --warm-tint: rgba(255, 200, 128, .14);
  --panel: rgba(28, 43, 84, .58);
  --panel-border: rgba(150, 185, 255, .22);
  --card: rgba(24, 37, 74, .58);
  --card-border: rgba(150, 185, 255, .25);
  --surface: rgba(9, 17, 39, .78);
  --modal-bg: #111c38;
  --shadow: 0 8px 26px rgba(0, 0, 0, .42);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .58);
  --shadow-color: rgba(0, 0, 0, .42);
  --ok: #7ce0ac;      --ok-tint: rgba(90, 220, 155, .16);
  --warn: #ffc775;    --warn-tint: rgba(255, 195, 100, .16);
  --danger: #ff96a6;  --danger-tint: rgba(255, 120, 140, .16);
  --info: #83d9f0;    --info-tint: rgba(110, 210, 240, .16);
  --scrim: rgba(2, 6, 18, .70);
  --toast-bg: rgba(14, 24, 50, .95);
  --stage-bg: #080f24;
  --text-2: #a8bbdd;
  background:
    radial-gradient(1.4px 1.4px at 20px 30px, rgba(255,255,255,.40) 50%, transparent 52%),
    radial-gradient(1px 1px at 120px 90px, rgba(180,215,255,.30) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 210px 170px, rgba(255,255,255,.25) 50%, transparent 52%),
    radial-gradient(1px 1px at 300px 40px, rgba(200,225,255,.26) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 70px 210px, rgba(255,235,190,.26) 50%, transparent 52%),
    radial-gradient(1100px 700px at 78% -14%, rgba(52, 92, 170, .36) 0%, transparent 62%),
    radial-gradient(900px 620px at 6% 108%, rgba(96, 58, 150, .30) 0%, transparent 60%),
    radial-gradient(700px 500px at 50% 46%, rgba(20, 48, 96, .18), transparent 72%),
    #060b19;
  background-size: 340px 250px, 340px 250px, 340px 250px, 340px 250px, 340px 250px, auto, auto, auto, auto;
}

/* 首页浅色「临时任务」磁贴：局部恢复浅色令牌，保持原来的可读性 */
.hd-t-temp {
  --ink: #26375a; --ink-soft: #6b7fa3; --ink-faint: #8a9cbd;
  --accent: #2b5fb3; --accent-deep: #2b5fb3;
  --accent-tint: rgba(60,110,220,.12); --accent-tint-2: rgba(60,110,220,.20);
  --card: rgba(255,255,255,.76); --card-border: rgba(90,120,180,.20);
  --panel: rgba(255,255,255,.60); --panel-border: rgba(90,120,180,.20);
  --surface: rgba(255,255,255,.88);
  --ok: #3d7a4a; --warn: #a36c22; --danger: #b3453f; --info: #2b5fb3;
  --ok-tint: rgba(80,160,100,.16); --warn-tint: rgba(220,160,60,.18);
  --danger-tint: rgba(210,80,70,.14); --info-tint: rgba(60,110,220,.14);
}

/* 首页任务卡：标题变成明确的「进入独立页」入口 */
.hd-title-btn {
  border: 0; background: transparent; padding: 0; margin: 0; cursor: pointer;
  font-family: inherit; font-size: var(--fs-lg); font-weight: 700; letter-spacing: .3px;
  color: inherit; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.hd-title-btn i {
  font-style: normal; font-size: var(--fs-2xs); font-weight: 600; opacity: .8;
  background: rgba(255,255,255,.16); padding: 2px 8px; border-radius: 999px;
}
.hd-title-btn:hover i { background: rgba(255,255,255,.28); opacity: 1; }
.hd-t-temp .hd-title-btn { color: #26375a; }
.hd-t-temp .hd-title-btn i { background: rgba(40,80,160,.12); color: #2b5fb3; }
.hd-t-temp .hd-title-btn:hover i { background: rgba(40,80,160,.24); }

/* ---------- 顶栏：全局深色磨砂 ---------- */
body.gx-active .topbar { background: linear-gradient(to bottom, rgba(6,11,25,.96) 58%, rgba(6,11,25,.58)); }
body.gx-active .brand { color: #eef5ff; }
body.gx-active .brand:hover { background: rgba(255,255,255,.08); }
body.gx-active .brand-grade,
body.gx-active .brand .caret { color: #9fb2d6; }
body.gx-active .date-chip,
body.gx-active .clock-chip,
body.gx-active .icon-btn,
body.gx-active .theme-btn {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #dbe8ff;
}
body.gx-active .date-chip { color: #9fb2d6; }
body.gx-active .clock-chip { color: #8fd0ff; }
body.gx-active .icon-btn:hover,
body.gx-active .theme-btn:hover { background: rgba(255,255,255,.15); }

/* ---------- 内页：统一玻璃大面板 ---------- */
.gx-active .view:not(#view-home) > .page {
  width: min(1120px, calc(100% - 36px)); max-width: none;
  margin: 14px auto 30px; padding: 20px 24px 26px;
  position: relative; border-radius: 26px; overflow: hidden;
  background: linear-gradient(160deg, rgba(29,44,88,.76), rgba(11,19,42,.90) 58%, rgba(16,25,54,.94));
  border: 1px solid rgba(146,184,255,.24);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.045) inset,
    0 1px 0 rgba(255,255,255,.14) inset,
    0 30px 80px rgba(0,0,0,.55),
    0 0 90px rgba(70,120,255,.10);
}
.gx-active .view:not(#view-home) > .page::before {
  content: ''; position: absolute; left: 12%; right: 12%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(160,205,255,.75), transparent);
  pointer-events: none;
}
.gx-active .view:not(#view-home) > .page::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .30;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 84%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 84%, transparent);
}
.gx-active .view:not(#view-home) > .page > * { position: relative; z-index: 1; }

/* ---------- 内页顶部统一标签导航（JS 注入） ---------- */
.gx-nav {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(150,185,255,.16);
}
.gx-back {
  flex: 0 0 auto; border: 1px solid rgba(150,185,255,.28); cursor: pointer;
  background: rgba(100,166,255,.14); color: #dceaff; font-family: inherit;
  font-size: var(--fs-xs); font-weight: 700; padding: 6px 13px; border-radius: 999px;
  transition: background .18s ease, transform .18s ease;
}
.gx-back:hover { background: rgba(100,166,255,.28); transform: translateX(-2px); }
.gx-tabs {
  flex: 1 1 auto; display: flex; justify-content: center; gap: 5px;
  overflow-x: auto; scrollbar-width: none;
}
.gx-tabs::-webkit-scrollbar { display: none; }
.gx-tab {
  border: 0; background: transparent; color: #95a8cd; font-family: inherit;
  font-size: var(--fs-sm); padding: 6px 13px 8px; cursor: pointer; position: relative;
  letter-spacing: .3px; white-space: nowrap; transition: color .2s ease;
}
.gx-tab:hover { color: #dceaff; }
.gx-tab.on { color: #eaf3ff; font-weight: 700; }
.gx-tab.on::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 18px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #54a8ff, #9b7bff); box-shadow: 0 0 10px #5b9bff;
}

/* ---------- 内页标题与卡片 ---------- */
.gx-active .view:not(#view-home) .page > h2,
.gx-active .tc-hero h2 {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: var(--fs-3xl); color: #f2f7ff; margin: 2px 0 12px; font-weight: 800;
  text-shadow: 0 2px 16px rgba(70,130,255,.32);
}
.gx-active .view:not(#view-home) .page > h2::before,
.gx-active .tc-hero h2::before {
  content: ''; width: 5px; height: 1.05em; border-radius: 99px; flex: 0 0 auto;
  background: linear-gradient(180deg, #6fb4ff, #9b7bff); box-shadow: 0 0 14px rgba(90,160,255,.8);
}
.gx-active .view:not(#view-home) .card {
  background: linear-gradient(155deg, rgba(39,58,110,.52), rgba(16,26,56,.62));
  border: 1px solid rgba(150,185,255,.20); border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 10px 28px rgba(0,0,0,.28);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gx-active .view:not(#view-home) .card:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 16px 36px rgba(0,0,0,.38);
}
.gx-active .view:not(#view-home) .card h3 { color: #eaf3ff; }
.gx-active .view:not(#view-home) .hint { color: #a8bbdd; }
.gx-active .view:not(#view-home) .hint b { color: #eaf3ff; }
.gx-active .view:not(#view-home) .hint a { color: #9dc9ff; }
.gx-active .view:not(#view-home) .form-row label { color: #a8bbdd; }
.gx-active .view:not(#view-home) .sync-box b { color: #9dc9ff; }
.gx-active .view:not(#view-home) .empty { color: #93a8cd; }

/* ---------- 表单控件 ---------- */
.gx-active input, .gx-active select, .gx-active textarea { color-scheme: dark; }
.gx-active input::placeholder, .gx-active textarea::placeholder { color: #8297bd; opacity: 1; }
.gx-active select option { background: #111c38; color: #eef4ff; }
.gx-active input[type="checkbox"], .gx-active input[type="radio"] { accent-color: #64a6ff; }
.gx-active input[type="file"]::file-selector-button {
  font-family: inherit; cursor: pointer; margin-right: 9px;
  background: rgba(100,166,255,.20); color: #dcecff;
  border: 1px solid rgba(150,185,255,.34); border-radius: 9px; padding: 6px 11px;
}
.gx-active .view:not(#view-home) input,
.gx-active .view:not(#view-home) select,
.gx-active .view:not(#view-home) textarea {
  background: rgba(8,16,38,.66); border-color: rgba(150,185,255,.28); color: #eef4ff;
}
.gx-active input:focus, .gx-active select:focus, .gx-active textarea:focus {
  border-color: #6fb4ff; box-shadow: 0 0 0 3px rgba(100,166,255,.22);
}
.gx-active .img-preview, .gx-active .guide-img { background: rgba(8,16,38,.7); }

/* ---------- 按钮 ---------- */
.gx-active .primary-btn {
  background: linear-gradient(150deg, #7bb8ff, #3a72e8); color: #071633; font-weight: 800;
  border: 0; box-shadow: 0 8px 22px rgba(40,100,230,.36), inset 0 1px 0 rgba(255,255,255,.5);
}
.gx-active .primary-btn:hover {
  background: linear-gradient(150deg, #9ccdff, #4a85f5); color: #061229;
  box-shadow: 0 12px 28px rgba(50,120,255,.48), inset 0 1px 0 rgba(255,255,255,.6);
}
.gx-active .ghost-btn {
  background: rgba(255,255,255,.05); border-color: rgba(150,185,255,.34); color: #cfe2ff;
}
.gx-active .ghost-btn:hover { background: rgba(100,166,255,.18); border-color: #6fb4ff; color: #fff; }
.gx-active .mini-btn { background: rgba(100,166,255,.18); color: #dceaff; }
.gx-active .ftab { border-color: rgba(150,185,255,.3); color: #a8bbdd; }
.gx-active .ftab.active {
  background: linear-gradient(150deg, #6fb4ff, #3a72e8); color: #071633;
  border-color: transparent; font-weight: 800;
}
.gx-active .dict-tab { color: #a8bbdd; }
.gx-active .check { border-color: rgba(150,185,255,.4); }

/* ---------- 列表条目 ---------- */
.gx-active .view:not(#view-home) .task-item,
.gx-active .view:not(#view-home) .item {
  background: rgba(255,255,255,.055); border: 1px solid rgba(150,185,255,.17);
  color: #eef4ff; border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.gx-active .view:not(#view-home) .task-item:hover,
.gx-active .view:not(#view-home) .item:hover { background: rgba(255,255,255,.095); }
.gx-active .view:not(#view-home) .task-item.done { opacity: .78; }
.gx-active .view:not(#view-home) .task-name,
.gx-active .view:not(#view-home) .item .title { color: #f2f7ff; }
.gx-active .view:not(#view-home) .item .sub { color: #a8bbdd; }
.gx-active .view:not(#view-home) .tbtn {
  background: rgba(100,166,255,.16); color: #cfe2ff;
}
.gx-active .view:not(#view-home) .tbtn.ok { background: rgba(90,220,155,.18); color: #9df0c0; }
.gx-active .view:not(#view-home) .tbtn.del { background: rgba(255,120,140,.16); color: #ffb2bd; }
.gx-active .view:not(#view-home) .timer-label { background: rgba(100,166,255,.16); color: #bcd8ff; }
.gx-active .view:not(#view-home) .subject-chip.first {
  background: rgba(100,166,255,.18); color: #cfe2ff; border-color: rgba(150,195,255,.28);
}
.gx-active .view:not(#view-home) .done-sep { color: #8fe6b5; border-color: rgba(140,230,180,.3); }
.gx-active .view:not(#view-home) .deadline-chip.overdue { color: #ffb2bd; }
.gx-active .chart-bar { background: linear-gradient(90deg, #6fb4ff, #9b7bff); }
.gx-active .chart-row .label, .gx-active .chart-row .num { color: #a8bbdd; }
.gx-active .book-table th, .gx-active .book-table td { border-bottom-color: rgba(150,185,255,.16); }
.gx-active .book-table th { background: #16234a; color: #cfe2ff; }
.gx-active .book-table tr:hover td { background: rgba(100,166,255,.12); }
.gx-active .book-table .c-idx, .gx-active .book-crumbs { color: #a8bbdd; }
.gx-active .book-stat-row { background: rgba(255,255,255,.055); border-color: rgba(150,185,255,.18); color: #eef4ff; }
.gx-active .book-stat-row .bs-count { color: #9dc9ff; }

/* ---------- 弹窗 / 引导 / AI 分析里的浅色硬编码块 ---------- */
.gx-active .modal { background: rgba(2,6,18,.72); backdrop-filter: blur(6px); }
.gx-active .modal-box {
  background: linear-gradient(160deg, #1b2c58, #101a35);
  border: 1px solid rgba(150,185,255,.28); border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12);
  color: #eef4ff;
}
.gx-active .modal-head h3 { color: #eef5ff; }
.gx-active .modal-x { background: rgba(255,255,255,.10); color: #dce8ff; }
.gx-active .tag-learning { background: rgba(255,205,100,.18); color: #ffdb8f; }
.gx-active .tag-review { background: rgba(110,170,255,.20); color: #bcd8ff; }
.gx-active .tag-mastered, .gx-active .tag-yes { background: rgba(90,220,155,.18); color: #9df0c0; }
.gx-active .tag-no { background: rgba(255,120,140,.18); color: #ffb2bd; }
.gx-active .tag-learn { background: rgba(160,130,255,.22); color: #d8c9ff; }
.gx-active .ana-card.ana-ok { background: rgba(70,190,120,.14); border-color: rgba(120,225,165,.45); }
.gx-active .ana-card.ana-bad { background: rgba(220,90,100,.13); border-color: rgba(255,150,160,.4); }
.gx-active .ana-card.ana-unk { background: rgba(150,125,240,.14); border-color: rgba(190,170,255,.4); }
.gx-active .ana-card.ana-loading { border-color: rgba(150,185,255,.3); }
.gx-active .ana-ans { color: #8fe8ae; }
.gx-active .ana-praise {
  background: linear-gradient(135deg, rgba(255,200,100,.16), rgba(255,140,180,.14));
  border-color: rgba(255,215,125,.4);
}
.gx-active .guide-steps { border-color: rgba(120,180,255,.45); background: rgba(80,140,230,.12); }
.gx-active .gs-title { color: #a9ccff; }
.gx-active .gs-warn { color: #ffb2bd; }
.gx-active .reward-body .rw-ok { color: #8fe8ae; }
.gx-active .ai-badge.ai-ok { background: rgba(90,220,155,.18); color: #9df0c0; }
.gx-active .ai-badge.ai-bad { background: rgba(255,120,140,.18); color: #ffb2bd; }
.gx-active .ai-badge.ai-loading { background: rgba(150,185,255,.16); color: #bcd8ff; }
.gx-active .q-box, .gx-active .meta-box, .gx-active .curve-box,
.gx-active .similar-box, .gx-active .err-attr, .gx-active .guide-step {
  background: rgba(100,166,255,.10); border-color: rgba(150,185,255,.22);
}
.gx-active .loaded-text, .gx-active .loaded-zh, .gx-active .loaded-del {
  background: rgba(8,16,38,.7); border-color: rgba(150,185,255,.28); color: #eef4ff;
}
.gx-active .crop-stage { background: rgba(6,12,30,.9); }
.gx-active .ocr-row .rm { background: rgba(255,120,140,.18); color: #ffb2bd; }

/* ---------- 底部导航：全局悬浮彩色 dock ---------- */
body.gx-active .bottombar {
  left: 50%; right: auto; bottom: 12px; transform: translateX(-50%);
  width: min(660px, calc(100vw - 20px));
  display: flex; justify-content: space-between; gap: 4px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(10,17,38,.86);
  border: 1px solid rgba(150,185,255,.22); border-radius: 22px; border-top: 1px solid rgba(150,185,255,.22);
  box-shadow: 0 14px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
body.gx-active .bottombar .nav-btn {
  flex: 1 1 0; min-width: 0; padding: 5px 2px; gap: 3px; border-radius: 14px;
  color: #9fb2d6; font-size: var(--fs-2xs); font-weight: 500;
  transition: background .18s ease, color .18s ease;
}
body.gx-active .bottombar .nav-btn span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 11px; font-size: 19px; line-height: 1;
  background: linear-gradient(150deg, #3c5488, #243559);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 10px rgba(0,0,0,.4);
  transition: transform .18s ease, box-shadow .18s ease;
}
body.gx-active .bottombar .nav-btn:nth-child(1) span { background: linear-gradient(150deg, #5a9bff, #2a59d8); }
body.gx-active .bottombar .nav-btn:nth-child(2) span { background: linear-gradient(150deg, #6fd8a0, #229361); }
body.gx-active .bottombar .nav-btn:nth-child(3) span { background: linear-gradient(150deg, #b295ff, #6642c9); }
body.gx-active .bottombar .nav-btn:nth-child(4) span { background: linear-gradient(150deg, #ffb06a, #dc6a27); }
body.gx-active .bottombar .nav-btn:nth-child(5) span { background: linear-gradient(150deg, #57d6e0, #178fa8); }
body.gx-active .bottombar .nav-btn:nth-child(6) span { background: linear-gradient(150deg, #ff9bb8, #c74d78); }
body.gx-active .bottombar .nav-btn:hover { background: rgba(255,255,255,.07); }
body.gx-active .bottombar .nav-btn.active { background: rgba(110,160,255,.14); color: #eaf3ff; font-weight: 700; }
body.gx-active .bottombar .nav-btn.active span {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 16px rgba(70,130,255,.5);
}

/* ---------- 任务中心（独立弹出页） ---------- */
.view-pop.active { animation: tcPop .34s cubic-bezier(.2,.8,.25,1); }
@keyframes tcPop {
  from { opacity: 0; transform: translateY(24px) scale(.987); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tc-page {
  /* 比普通内页更亮一点，做出「从主页浮出的一层」的层次 */
  box-shadow: 0 0 0 1px rgba(170,205,255,.12) inset, 0 36px 100px rgba(0,0,0,.66), 0 0 130px rgba(90,140,255,.18) !important;
}
.tc-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.tc-hero-txt { min-width: 0; }
.tc-eyebrow {
  display: inline-block; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 2px;
  color: #bfe0ff; background: rgba(100,166,255,.16); border: 1px solid rgba(150,195,255,.26);
  padding: 3px 11px; border-radius: 999px; margin-bottom: 8px;
}
.tc-hero h2 { margin: 0 0 4px !important; }
.tc-hero .hint { margin: 0 !important; }
.tc-back {
  flex: 0 0 auto; cursor: pointer; font-family: inherit; font-size: var(--fs-sm); font-weight: 700;
  color: #eaf3ff; background: rgba(255,255,255,.09); border: 1px solid rgba(150,185,255,.3);
  padding: 8px 15px; border-radius: 999px; transition: background .18s ease, transform .18s ease;
}
.tc-back:hover { background: rgba(100,166,255,.24); transform: translateX(-2px); }

.tc-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.tc-stat {
  border-radius: 18px; padding: 14px 16px; color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 26px rgba(3,8,24,.34);
}
.tc-stat b { display: block; font-size: var(--fs-4xl); font-weight: 800; line-height: 1.1; }
.tc-stat span { font-size: var(--fs-xs); opacity: .92; }
.tc-stat.c1 { background: linear-gradient(150deg, #4b93ff, #2455c8); }
.tc-stat.c2 { background: linear-gradient(150deg, #61d6a0, #229061); }
.tc-stat.c3 { background: linear-gradient(150deg, #b191ff, #6440c6); }
.tc-stat.c4 { background: linear-gradient(150deg, #ffb168, #dd6b28); }

.tc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tc-type-tabs {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: rgba(6,14,34,.55); border: 1px solid rgba(150,185,255,.18);
}
.tc-type {
  border: 0; cursor: pointer; font-family: inherit; font-size: var(--fs-sm); font-weight: 700;
  color: #a8bbdd; background: transparent; padding: 7px 15px; border-radius: 999px;
  white-space: nowrap; transition: background .18s ease, color .18s ease;
}
.tc-type:hover { color: #eaf3ff; }
.tc-type.on {
  color: #071633; background: linear-gradient(150deg, #8cc2ff, #5a93f5);
  box-shadow: 0 4px 12px rgba(40,100,230,.35), inset 0 1px 0 rgba(255,255,255,.5);
}
.tc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tc-actions .primary-btn, .tc-actions .ghost-btn { font-size: var(--fs-sm); padding: 8px 15px; }
.tc-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tc-list-head h3 { margin: 0 !important; }
.tc-list-head .filter-tabs { margin: 0 !important; }
#tcListCard #riqingList {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 11px;
}
#tcListCard #riqingList > .empty { grid-column: 1 / -1; }

/* 日清页的任务入口卡 */
.gx-portal {
  background: linear-gradient(120deg, rgba(70,110,220,.28), rgba(120,80,210,.22)) !important;
  border-color: rgba(160,190,255,.34) !important;
}
.gx-portal-btns { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 4px; }

/* ---------- 全站皮肤响应式 ---------- */
@media (max-width: 1000px) {
  .gx-active .view:not(#view-home) > .page { width: calc(100% - 24px); }
  .tc-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .gx-active .view:not(#view-home) > .page {
    width: calc(100% - 16px); padding: 14px 12px 18px; border-radius: 20px; margin-top: 8px;
  }
  .gx-nav { gap: 6px; margin-bottom: 12px; padding-bottom: 9px; flex-wrap: nowrap; }
  .gx-back { font-size: var(--fs-2xs); padding: 5px 10px; flex: 0 0 auto; }
  .gx-tabs { justify-content: flex-start; min-width: 0; }
  .gx-tab { padding: 5px 8px; font-size: var(--fs-2xs); }
  .gx-active .view:not(#view-home) .page > h2,
  .gx-active .tc-hero h2 { font-size: var(--fs-2xl); gap: 9px; }
  .gx-active .view:not(#view-home) .card { padding: 14px 13px; border-radius: 16px; }
  .tc-hero { flex-direction: column; gap: 8px; }
  .tc-stats { gap: 9px; }
  .tc-stat { padding: 11px 12px; border-radius: 15px; }
  .tc-stat b { font-size: var(--fs-3xl); }
  .tc-toolbar { flex-direction: column; align-items: stretch; }
  .tc-type-tabs { width: 100%; justify-content: space-between; }
  .tc-type { flex: 1 1 0; padding: 7px 4px; font-size: var(--fs-2xs); }
  .tc-actions .primary-btn, .tc-actions .ghost-btn { flex: 1 1 auto; }
  .tc-list-head { flex-direction: column; align-items: stretch; }
  #tcListCard #riqingList { grid-template-columns: 1fr; }
  body.gx-active .bottombar { bottom: 8px; padding: 7px 6px calc(7px + env(safe-area-inset-bottom)); border-radius: 18px; }
  body.gx-active .bottombar .nav-btn span { width: 32px; height: 32px; font-size: 17px; border-radius: 10px; }
  body.gx-active .bottombar .nav-btn { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .view-pop.active { animation: none; }
}

/* ---------- 切回「经典主题」时：导航 / 任务中心的浅色兜底 ---------- */
body:not(.gx-active) .gx-nav { border-bottom-color: var(--panel-border); }
body:not(.gx-active) .gx-back {
  background: var(--accent-tint); color: var(--accent-deep); border-color: var(--panel-border);
}
body:not(.gx-active) .gx-tab { color: var(--ink-soft); }
body:not(.gx-active) .gx-tab:hover { color: var(--accent-deep); }
body:not(.gx-active) .gx-tab.on { color: var(--accent-deep); }
body:not(.gx-active) .gx-tab.on::after { background: var(--accent); box-shadow: none; }
body:not(.gx-active) .tc-hero h2 { color: var(--ink); }
body:not(.gx-active) .tc-eyebrow {
  background: var(--accent-tint); color: var(--accent-deep); border-color: var(--panel-border);
}
body:not(.gx-active) .tc-back {
  background: var(--accent-tint); color: var(--accent-deep); border-color: var(--panel-border);
}
body:not(.gx-active) .tc-type-tabs { background: var(--accent-tint); border-color: var(--panel-border); }
body:not(.gx-active) .tc-type { color: var(--ink-soft); }
body:not(.gx-active) .tc-type:hover { color: var(--accent-deep); }
body:not(.gx-active) .tc-type.on { background: var(--accent); color: var(--on-accent); box-shadow: none; }
body:not(.gx-active) .gx-portal {
  background: var(--card) !important; border-color: var(--panel-border) !important;
}