:root {
    --bg: #f5f8fc;
    --card: #ffffff;
    --ink: #172940;
    --ink-soft: #5d6b7c;
    --cn-soft: #798b9e;
    --line: #dbe5f0;
    --brand: #003e74;
    --brand-2: #1763a3;
    --brand-soft: #eaf2fa;
    --accent: #ad740b;
    --gold: #f2be48;
    --gold-soft: #fff6df;
    --warn: #b8750c;
    --green: #167853;
    --radius: 16px;
    --shadow: 0 6px 20px rgba(10, 36, 68, .06), 0 18px 42px -20px rgba(10, 36, 68, .17);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.65;
    font-size: 15px;
  }

  /* ===== Header ===== */
  header {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
    color: #fff;
    padding: 40px 24px 34px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  header::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.18) 0%, transparent 45%);
    pointer-events: none;
  }
  header h1 { font-size: 30px; font-weight: 800; letter-spacing: 1px; }
  header p { margin-top: 8px; opacity: .92; font-size: 14.5px; }
  .header-badge {
    display: inline-block; margin-top: 14px; padding: 5px 14px;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px; font-size: 12.5px; backdrop-filter: blur(4px);
  }

  /* ===== Layout ===== */
  .wrap { max-width: 1080px; margin: 0 auto; padding: 24px 20px 80px; }

  /* ===== Toolbar ===== */
  .toolbar {
    position: sticky; top: 0; z-index: 50;
    background: rgba(244,246,250,.92); backdrop-filter: blur(8px);
    padding: 12px 0; margin-bottom: 18px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
  }
  .toolbar .search-box { flex: 1 0 100%; }
  .toolbar-icons { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
  .search-box {
    flex: 1; min-width: 220px; position: relative;
  }
  .search-box input {
    width: 100%; padding: 10px 16px 10px 40px;
    border: 1px solid var(--line); border-radius: 999px;
    font-size: 14px; background: #fff; color: var(--ink);
    outline: none; transition: border .2s, box-shadow .2s;
  }
  .search-box input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
  .search-box .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); font-size: 15px; }
  .stat-pill {
    background: #fff; border: 1px solid var(--line); border-radius: 999px;
    padding: 7px 14px; font-size: 13px; color: var(--ink-soft); white-space: nowrap;
  }
  .stat-pill b { color: var(--brand); }

  /* ===== Progress ===== */
  .progress-card {
    background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 16px 20px; margin-bottom: 22px;
  }
  .progress-card .label { font-size: 13.5px; color: var(--ink-soft); }
  .progress-head { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; }
  .progress-head > .label { color:var(--ink);font-weight:700; }
  .progress-head-actions { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
  .progress-main { display:flex;align-items:center;gap:12px;margin:16px 0 7px; }
  #progressDetail { display:block; }
  .progress-bar { flex: 1; min-width: 160px; height: 8px; background: #eef0f4; border-radius: 99px; overflow: hidden; }
  .progress-bar > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--accent)); border-radius: 99px; transition: width .35s; }
  .progress-card .pct { font-size: 15px; font-weight: 700; color: var(--brand); min-width: 52px; text-align: right; }

  /* ===== TOC ===== */
  .toc {
    background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 18px 22px; margin-bottom: 22px;
  }
  .toc h2 { font-size: 15px; color: var(--ink-soft); margin-bottom: 10px; font-weight: 600; letter-spacing: .5px; }
  .toc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 16px; }
  .toc a {
    display: block; padding: 7px 12px; border-radius: 8px; text-decoration: none;
    color: var(--ink); font-size: 14px; transition: background .15s;
  }
  .toc a:hover { background: var(--brand-soft); color: var(--brand); }
  .toc a .num { color: var(--brand); font-weight: 700; margin-right: 6px; font-size: 12.5px; }

  /* ===== Section ===== */
  section { margin-bottom: 34px; }
  .sec-head {
    display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
    scroll-margin-top: 70px;
  }
  .sec-head .emoji { font-size: 24px; }
  .sec-head h2 { font-size: 21px; font-weight: 800; }
  .sec-head .tag {
    font-size: 12px; background: var(--brand-soft); color: var(--brand);
    padding: 3px 10px; border-radius: 999px; font-weight: 600;
  }
  .sec-head .sec-meta {display:flex;align-items:center;gap:7px;margin-left:auto;}
  .sec-desc { color: var(--ink-soft); font-size: 13.5px; margin: -8px 0 16px; }

  /* ===== Process timeline ===== */
  .timeline { position: relative; padding-left: 26px; }
  .timeline::before {
    content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px;
    width: 2px; background: linear-gradient(180deg, var(--brand), var(--accent));
    border-radius: 2px;
  }
  .step { position: relative; margin-bottom: 18px; }
  .step::before {
    content: ""; position: absolute; left: -26px; top: 6px; width: 16px; height: 16px;
    background: var(--brand); border: 3px solid #fff; border-radius: 50%;
    box-shadow: 0 0 0 2px var(--brand);
  }
  .step h3 { font-size: 15.5px; font-weight: 700; }
  .step h3 .step-tag {
    display: inline-block; font-size: 11px; background: #eef2ff; color: #4338ca;
    border-radius: 6px; padding: 1px 8px; margin-left: 6px; vertical-align: 2px;
  }
  .step p, .step ul { margin-top: 5px; color: #374151; font-size: 14px; }
  .step ul { padding-left: 20px; }
  .step li { margin-top: 3px; }

  /* ===== FAQ ===== */
  .faq { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
  .faq-item { border-bottom: 1px solid var(--line); }
  .faq-item:last-child { border-bottom: none; }
  .faq-q {
    padding: 14px 20px; cursor: pointer; display: flex; align-items: center; gap: 10px;
    font-weight: 600; font-size: 14.5px; user-select: none;
    transition: background .15s;
  }
  .faq-q:hover { background: #f8fafc; }
  .faq-q .arrow { margin-left: auto; color: var(--ink-soft); transition: transform .2s; font-size: 12px; }
  .faq-item.open .faq-q .arrow { transform: rotate(180deg); }
  .faq-q .q-mark { color: var(--brand); font-weight: 800; }
  .faq-a { display: none; padding: 0 20px 16px 46px; color: #374151; font-size: 14px; }
  .faq-item.open .faq-a { display: block; }
  .faq-a ul { padding-left: 20px; margin-top: 4px; }
  .faq-a li { margin-top: 3px; }
  .faq-a .tip { background: #fffbeb; border-left: 3px solid var(--warn); padding: 8px 12px; border-radius: 6px; margin-top: 8px; font-size: 13.5px; }

  /* ===== Question cards ===== */
  .qcard {
    background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 18px 20px; margin-bottom: 14px; border-left: 4px solid transparent;
    transition: border-color .2s;
  }
  .qcard.status-new { border-left-color: var(--line); }
  .qcard.status-doing { border-left-color: var(--warn); }
  .qcard.status-done { border-left-color: var(--green); }
  .recall-mark { display:inline-block; padding:2px 8px; margin-top:6px; border-radius:999px; background:#fff6df; color:#876015; border:1px solid #f0d9a0; font-size:11px; font-weight:600; }
  .qcard .q-top { display: flex; align-items: flex-start; gap: 12px; }
  .q-num {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
    background: var(--brand-soft); color: var(--brand);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px;
  }
  .q-title { flex: 1; }
  .q-title .en { font-size: 16.5px; font-weight: 700; color: var(--ink); line-height: 1.5; }
  .q-title .cn { font-size: 12.5px; color: var(--cn-soft); margin-top: 4px; line-height: 1.55; }
  .q-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .status-btn {
    border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
    padding: 6px 12px; border-radius: 999px; font-size: 12.5px; cursor: pointer;
    transition: all .18s; font-family: inherit;
  }
  .status-btn:hover { border-color: var(--brand); color: var(--brand); }
  .status-btn.active-new { background: #f3f4f6; color: var(--ink-soft); border-color: #d1d5db; }
  .status-btn.active-doing { background: #fffbeb; color: var(--warn); border-color: var(--warn); font-weight: 700; }
  .status-btn.active-done { background: #f0fdf4; color: var(--green); border-color: var(--green); font-weight: 700; }
  .copy-btn {
    border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
    padding: 6px 10px; border-radius: 999px; font-size: 12px; cursor: pointer;
    transition: all .18s; font-family: inherit;
  }
  .copy-btn:hover { border-color: var(--accent); color: var(--accent); }

  /* ===== 小问（中英双语：英文黑大 + 中文灰小） ===== */
  .subq { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
  .subq-head {
    font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
    display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
    letter-spacing: .5px;
  }
  .subq-head .arrow { transition: transform .2s; font-size: 11px; }
  .subq.open .subq-head .arrow { transform: rotate(90deg); }
  .subq-list { display: none; margin-top: 10px; }
  .subq.open .subq-list { display: block; }
  .subq-list ol { padding-left: 22px; }
  .subq-list li { margin-top: 8px; font-size: 14.5px; color: var(--ink); }
  .subq-list li .subq-en { color: var(--ink); font-weight: 500; }
  .subq-list li .subq-cn { display: block; font-size: 12px; color: var(--cn-soft); margin-top: 1px; }

  /* ===== Empty state ===== */
  .empty { display: none; flex-basis: 100%; text-align: center; padding: 10px 14px; color: var(--ink-soft); background: #fff; border: 1px solid var(--line); border-radius: 12px; }

  /* ===== Footer ===== */
  footer { text-align: center; color: var(--ink-soft); font-size: 12.5px; padding: 30px 0 10px; }

  .to-top {
    position: fixed; right: 22px; bottom: 22px; z-index: 60;
    width: 42px; height: 42px; border-radius: 50%; background: var(--brand); color: #fff;
    border: none; cursor: pointer; box-shadow: var(--shadow);
    font-size: 18px; opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  .to-top.show { opacity: 1; pointer-events: auto; }

  /* ===== 保存按钮（与回到顶端同风格，悬浮右下角） ===== */
  .save-btn {
    position: fixed; right: 22px; bottom: 76px; z-index: 60;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--accent); color: #fff; border: none; cursor: pointer;
    box-shadow: var(--shadow); font-size: 18px; line-height: 1;
    transition: transform .2s, background .25s, box-shadow .25s;
    opacity: 0; pointer-events: none;
  }
  .save-btn:hover { transform: scale(1.08); }
  .save-btn:active { transform: scale(.9); }
  .save-btn.dirty { opacity: 1; pointer-events: auto; background: var(--warn); animation: savePulse 1.6s infinite; }
  .save-btn.saved { background: var(--green); }
  @keyframes savePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,6,.45); }
    50% { box-shadow: 0 0 0 9px rgba(217,119,6,0); }
  }

  /* ===== 数据存储提示条 ===== */
  .storage-banner {
    display: none; margin-bottom: 14px; padding: 10px 16px; border-radius: 10px;
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 13px;
  }
  .storage-banner.show { display: block; }
  .storage-banner.ok { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
  .storage-banner.err { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

  /* ===== 工具栏文件夹按钮 ===== */
  .folder-btn {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--line); background: #fff; cursor: pointer;
    font-size: 15px; line-height: 1; transition: all .18s;
  }
  .folder-btn:hover { border-color: var(--brand); background: var(--brand-soft); }

  /* ===== 顶栏保存按钮 ===== */
  .save-top {
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    padding: 7px 14px; border-radius: 999px; font-size: 13px; cursor: pointer;
    font-family: inherit; transition: all .18s; font-weight: 600; white-space: nowrap;
  }
  .save-top:hover { border-color: var(--accent); color: var(--accent); background: #f0fdfa; }
  .save-top:active { transform: scale(.96); }
  .save-top.dirty { border-color: var(--warn); color: var(--warn); background: #fffbeb; animation: savePulse 1.6s infinite; }
  .save-top.saved { background: var(--green); border-color: var(--green); color: #fff; animation: none; }
  .save-top.saving { background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; cursor: wait; }
  .save-top:disabled { opacity: .85; pointer-events: none; }

  /* ===== 自动保存开关 ===== */
  .auto-switch {
    display: flex; align-items: center; gap: 7px; cursor: pointer;
    user-select: none; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap;
  }
  .auto-switch input { display: none; }
  .auto-track {
    width: 36px; height: 20px; border-radius: 999px; background: #d1d5db;
    position: relative; transition: background .2s; flex-shrink: 0;
  }
  .auto-track::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2);
  }
  .auto-switch input:checked + .auto-track { background: var(--accent); }
  .auto-switch input:checked + .auto-track::after { left: 18px; }
  .auto-switch .auto-label { transition: color .2s; }
  .auto-switch input:checked ~ .auto-label { color: var(--accent); font-weight: 600; }

  /* ===== 快捷键帮助浮层 ===== */
  .help-mask {
    position: fixed; inset: 0; z-index: 100; display: none;
    background: rgba(15, 23, 42, .35); backdrop-filter: blur(2px);
    align-items: center; justify-content: center; padding: 20px;
  }
  .help-mask.show { display: flex; }
  .help-panel {
    background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(15,23,42,.25);
    max-width: 560px; width: 100%; max-height: 85vh; overflow: auto; padding: 22px 26px;
  }
  .help-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 17px; font-weight: 800; margin-bottom: 14px;
  }
  .help-close {
    border: none; background: #f3f4f6; color: var(--ink-soft); cursor: pointer;
    width: 28px; height: 28px; border-radius: 50%; font-size: 13px; transition: all .15s;
  }
  .help-close:hover { background: #fee2e2; color: var(--danger); }
  .help-body { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .help-col h4 {
    font-size: 13px; color: var(--brand); margin-bottom: 6px; letter-spacing: .5px;
  }
  .help-col table { width: 100%; border-collapse: collapse; }
  .help-col td { padding: 5px 4px; font-size: 13px; border-bottom: 1px dashed #f1f2f5; color: #374151; }
  .help-col td:first-child { width: 46%; white-space: nowrap; }
  kbd {
    display: inline-block; padding: 2px 6px; margin: 0 1px;
    background: #f3f4f6; border: 1px solid #d1d5db; border-bottom-width: 2px;
    border-radius: 5px; font-size: 11.5px; font-family: ui-monospace, Consolas, monospace; color: #374151;
  }
  .help-foot { margin-top: 14px; font-size: 12px; color: var(--ink-soft); background: #f8fafc; padding: 8px 12px; border-radius: 8px; }

  /* ===== 大问题笔记 ===== */
  .qnote { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
  .qnote .note-area { min-height: 56px; }

  /* ===== 笔记：编辑/预览切换（Markdown 渲染） ===== */
  .note-toolbar { display: flex; align-items: center; gap: 6px; }
  .md-tab {
    border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
    font-size: 11px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
    transition: all .15s; font-family: inherit;
  }
  .md-tab:hover { border-color: var(--accent); color: var(--accent); }
  .md-tab.active { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); font-weight: 700; }
  .md-preview {
    display: none; margin-top: 6px; padding: 10px 13px;
    border: 1px solid var(--line); border-radius: 8px;
    background: #fafbfc; font-size: 13.5px; line-height: 1.7; color: var(--ink);
    word-break: break-word; overflow: auto;
    resize: vertical;
  }
  .md-preview.show { display: block; }
  .md-preview p { margin: 6px 0; }
  .md-preview h1, .md-preview h2, .md-preview h3, .md-preview h4, .md-preview h5, .md-preview h6 { margin: 10px 0 5px; line-height: 1.35; }
  .md-preview h1 { font-size: 18px; } .md-preview h2 { font-size: 16.5px; }
  .md-preview h3 { font-size: 15.5px; } .md-preview h4 { font-size: 15px; }
  .md-preview h5, .md-preview h6 { font-size: 14px; }
  .md-preview ul, .md-preview ol { padding-left: 22px; margin: 6px 0; }
  .md-preview li { margin: 3px 0; }
  .md-preview code { background: #eef0f4; padding: 1px 5px; border-radius: 4px; font-size: 12.5px; font-family: ui-monospace, Consolas, monospace; }
  .md-preview pre { background: #f1f3f7; padding: 10px 12px; border-radius: 8px; overflow: auto; margin: 8px 0; }
  .md-preview pre code { background: none; padding: 0; }
  .md-preview blockquote { border-left: 3px solid #cbd5e1; margin: 6px 0; padding: 2px 12px; color: var(--ink-soft); }
  .md-preview a { color: var(--brand); }
  .md-preview del { color: var(--ink-soft); }
  .md-preview u { text-decoration: underline; }
  .md-preview table { border-collapse: collapse; margin: 8px 0; }
  .md-preview th, .md-preview td { border: 1px solid var(--line); padding: 5px 10px; font-size: 13px; }
  .md-preview th { background: #f3f4f6; }

  /* 演练高亮：边框闪烁 5 次后保持静态高亮 */
  .qcard.drill-active {
    border-left-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(37,99,235,.45), var(--shadow);
    transition: box-shadow .3s;
  }
  .qcard.drill-flash {
    animation: drillBlink .6s ease-in-out 5;   /* 闪烁 5 次（约 3 秒） */
  }
  @keyframes drillBlink {
    0%, 100% { box-shadow: 0 0 0 3px rgba(37,99,235,.45), var(--shadow); }
    50% { box-shadow: 0 0 0 3px rgba(37,99,235,.06), var(--shadow); }
  }

  /* ===== 搜索框清空按钮 ===== */
  .search-clear {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; border-radius: 50%; border: none; cursor: pointer;
    background: #e5e7eb; color: var(--ink-soft); font-size: 11px; line-height: 1;
    display: none; align-items: center; justify-content: center; padding: 0;
  }
  .search-clear.show { display: flex; }
  .search-clear:hover { background: #d1d5db; color: var(--ink); }

  /* ===== 导出链接 ===== */
  .export-link {
    color: var(--brand); background: none; border: none; cursor: pointer;
    font-size: 12px; font-family: inherit; text-decoration: underline;
  }
  .export-link:hover { color: #1d4ed8; }

  /* ===== 计时器面板（贴近顶栏浮出） ===== */
  .timer-panel {
    position: fixed; right: 22px; top: 84px; z-index: 110;
    width: 264px; background: #fff; border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15,23,42,.28); padding: 14px 16px 16px;
    display: none;
  }
  .timer-panel.show { display: block; }
  .timer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; }
  .timer-tabs { display: flex; gap: 6px; }
  .timer-tab {
    border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
    font-size: 12px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
    transition: all .15s; font-family: inherit;
  }
  .timer-tab.active { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); font-weight: 700; }
  .timer-close {
    border: none; background: #f3f4f6; color: var(--ink-soft); cursor: pointer;
    width: 24px; height: 24px; border-radius: 50%; font-size: 11px; flex-shrink: 0;
  }
  .timer-close:hover { background: #fee2e2; color: var(--danger); }
  .timer-set { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; color: var(--ink-soft); font-size: 13px; }
  .timer-input {
    width: 62px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px;
    font-size: 15px; text-align: center; font-family: inherit; color: var(--ink); outline: none;
  }
  .timer-input:focus { border-color: var(--brand); }
  .timer-input:disabled { background: #f3f4f6; color: var(--ink-soft); }
  .timer-display {
    text-align: center; font-size: 44px; font-weight: 800; letter-spacing: 2px;
    font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.1; margin: 6px 0 2px;
    transition: color .3s;
  }
  .timer-phase {
    text-align: center; font-size: 12px; font-weight: 700;
    padding: 3px 14px; border-radius: 999px; margin: 0 auto 10px;
    width: fit-content; letter-spacing: .5px;
    background: #f3f4f6; color: var(--ink-soft); border: 1px solid var(--line);
    transition: all .3s;
  }
  .timer-panel.prep .timer-phase { background: #fff7ed; color: var(--warn); border-color: #fdba74; }
  .timer-panel.prep .timer-display { color: var(--warn); }
  .timer-panel.speak .timer-phase { background: #eff6ff; color: var(--brand); border-color: #93c5fd; }
  .timer-panel.speak .timer-display { color: var(--brand); }
  .timer-panel.finished .timer-phase { background: #fef2f2; color: var(--danger); border-color: #fca5a5; }
  .timer-display.warn { color: var(--danger); animation: timerBlink .5s step-end infinite; }
  .timer-panel.finished .timer-display { color: var(--danger); animation: timerBlink .5s step-end infinite; }
  @keyframes timerBlink { 50% { opacity: .35; } }
  .timer-status { text-align: center; font-size: 12.5px; color: var(--danger); height: 18px; margin-bottom: 4px; }
  .timer-actions { display: flex; gap: 8px; }
  .timer-btn {
    flex: 1; border: 1px solid var(--line); background: #fff; color: var(--ink);
    padding: 8px 0; border-radius: 10px; font-size: 13.5px; cursor: pointer;
    transition: all .15s; font-family: inherit; font-weight: 600;
  }
  .timer-btn:hover { border-color: var(--brand); color: var(--brand); }
  .timer-btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
  .timer-btn.primary:hover { background: #1d4ed8; }
  #timerDrill { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }

  /* ===== 小问笔记输入框（可展开 · 可拖拽调高 · 自动保存） ===== */
  .note-wrap { margin-top: 7px; }
  .note-toggle {
    border: 1px dashed #cbd5e1; background: transparent; color: var(--ink-soft);
    font-size: 11.5px; padding: 3px 11px; border-radius: 999px; cursor: pointer;
    transition: all .18s; font-family: inherit;
  }
  .note-toggle:hover { border-color: var(--accent); color: var(--accent); background: #f0fdfa; }
  .note-area {
    display: none; width: 100%; margin-top: 6px;
    border: 1px solid var(--line); border-radius: 8px;
    padding: 8px 11px; font-size: 13px; font-family: inherit;
    line-height: 1.5; color: var(--ink); background: #fcfdfe;
    resize: vertical; min-height: 44px; outline: none;
    transition: border .2s, box-shadow .2s;
  }
  .note-area:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(13,148,136,.12); }
  .note-wrap.open .note-area { display: block; }
  .note-wrap.open .note-toggle { border-style: solid; border-color: var(--accent); color: var(--accent); background: #f0fdfa; }

  /* ===== Print ===== */
  @media print {
    .toolbar, .to-top, .save-btn, .q-actions, .toc, .progress-card, .storage-banner, .note-toggle { display: none !important; }
    body { background: #fff; }
    .qcard, .faq, .timeline { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
    .subq-list { display: block !important; }
    .note-area { display: block !important; border: none; padding: 2px 0; }
    header { background: #1e3a8a !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .wrap { padding: 12px; }
  }

  @media (max-width: 640px) {
    header h1 { font-size: 23px; }
    .q-actions { width: 100%; justify-content: flex-end; }
    .qcard .q-top { flex-wrap: wrap; }
  }
  /* ===== 资源入口、可访问性与移动端 ===== */
  .resource-links { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
  .resource-links a { color:#fff; border:1px solid rgba(255,255,255,.5); border-radius:999px;
    padding:7px 15px; text-decoration:none; font-size:13px; background:rgba(255,255,255,.12); }
  .resource-links a:hover { background:rgba(255,255,255,.22); }
  .source-notice { padding:13px 17px; border:1px solid #dbeafe; border-radius:12px; margin-bottom:18px;
    background:#eff6ff; color:#334155; font-size:13px; line-height:1.7; }
  .source-notice a { color:#1d4ed8; }
  .filter-select { border:1px solid var(--line); border-radius:999px;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.25 6 6.25 11 1.25' fill='none' stroke='%23334a62' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center/12px 8px;
    appearance:none; -webkit-appearance:none; padding:7px 28px 7px 12px;
    color:var(--ink); font-size:13px; min-height:36px; width:auto; max-width:100%; }
  .toolbar-action { border:1px solid var(--line); background:#fff; color:var(--ink);
    border-radius:999px; padding:8px 12px; cursor:pointer; font-size:12.5px; white-space:nowrap; }
  .toolbar-action:hover { border-color:var(--brand); color:var(--brand); }
  .faq-q { width:100%; border:0; background:transparent; color:inherit; text-align:left; font-family:inherit; }
  .subq-head { border:0; background:transparent; width:100%; text-align:left; padding:5px 0; font-family:inherit; }
  button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
  textarea:focus-visible { outline:3px solid #0d9488; outline-offset:3px; }
  .progress-bar { position:relative; }
  @media (max-width:640px) {
    .wrap { padding:14px 12px 70px; }
    header { padding:30px 15px 28px; }
    .toolbar { gap:8px; position:relative; }
    .toolbar-icons { gap:8px; margin-left:0; }
    .search-box { min-width:100%; }
    .filter-select { flex:0 1 auto; max-width:100%; }
    .stat-pill { padding:7px 10px; }
    .qcard { padding:14px 13px; }
    .q-title .en { font-size:15px; overflow-wrap:anywhere; }
    .q-actions { justify-content:flex-start; padding-left:46px; }
    .timer-panel { right:12px; left:12px; top:108px; width:auto; max-width:360px; margin-left:auto; }
    .save-btn { right:14px; bottom:72px; }
    .to-top { right:14px; bottom:17px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
  }
  @media (min-width:981px) {
    html { scroll-padding-top:200px; }
    .toolbar { top:73px; }
  }
  @media (min-width:641px) and (max-width:980px) {
    .toolbar { position:relative; }
  }

  /* ===== HKUST-inspired campus hero ===== */
  .campus-hero {
    position: relative;
    isolation: isolate;
    min-height: 392px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 62px clamp(22px, 5vw, 72px) 58px;
    background: linear-gradient(90deg, rgba(0,33,63,.89) 0%, rgba(0,48,91,.75) 33%, rgba(0,47,88,.31) 72%, rgba(0,47,88,.17) 100%), url('../assets/images/Administration-Building-14-1536x864.jpg') center 55% / cover no-repeat;
    text-align: left;
  }
  /* Hero punctuation is provided by typography, not asymmetric stripes. */
  .campus-hero::after { display:none; content:none; }
  .hero-inner { position: relative; z-index: 1; width: min(100%, 1140px); margin: 0 auto; }
  .hero-eyebrow {
    display: inline-block; margin-bottom: 18px;
    border: 1px solid rgba(255,255,255,.48); padding: 7px 13px;
    border-radius: 999px; background: rgba(0,45,87,.31);
    color: #fff; font-size: 12px; font-weight: 650; letter-spacing: .065em;
  }
  .campus-hero h1 { margin: 0; font-size: clamp(34px, 4.5vw, 54px); line-height: 1.12; font-weight: 800; letter-spacing: -.025em; }
  .hero-highlight { color: #f8d176; }
  .campus-hero .hero-lead { max-width: 690px; margin-top: 19px; font-size: clamp(17px, 2.1vw, 21px); font-weight: 600; opacity: 1; }
  .campus-hero .hero-description { max-width: 720px; margin-top: 12px; font-size: 13.5px; line-height: 1.7; opacity: .9; }
  .hero-actions { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; margin-top: 28px; }
  .hero-action {
    display: inline-flex; align-items: center; gap: 9px; min-height: 43px;
    border: 1px solid transparent; border-radius: 999px; padding: 11px 19px;
    font-weight: 700; font-size: 13.5px; text-decoration: none;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
  }
  .hero-action:hover { transform: translateY(-2px); }
  .hero-primary { color: #19314b; background: #f8c95c; box-shadow: 0 8px 20px rgba(9,22,43,.16); }
  .hero-primary:hover { background: #ffd77a; }
  .hero-secondary { color: #fff; border-color: rgba(255,255,255,.52); background: rgba(255,255,255,.12); }
  .hero-secondary:hover { background: rgba(255,255,255,.2); }
  .hero-text-link { color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; margin-left: 7px; border-bottom: 1px solid rgba(255,255,255,.5); }
  .hero-text-link:hover { color: #ffdc86; }
  .hero-caption { position: absolute; z-index: 1; right: 25px; bottom: 20px; font-size: 11px; color: rgba(255,255,255,.85); letter-spacing: .06em; }
  /* ===== Easy-access feature tiles ===== */
  .quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 25px; }
  .quick-tile { display: flex; align-items: center; gap: 12px; padding: 17px 14px; min-width: 0; min-height: 92px; text-align: left;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
    color: var(--ink); text-decoration: none; transition: border-color .18s, transform .18s, box-shadow .18s; }
  .quick-tile:hover { transform: translateY(-2px); border-color: #99b9db; box-shadow: 0 12px 32px rgba(0,48,91,.1); }
  .quick-tile-button { font: inherit; width: 100%; cursor: pointer; }
  .quick-symbol { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--brand-soft); font-size: 20px; }
  .quick-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .quick-copy strong { font-size: 14px; color: var(--brand); font-weight: 750; }
  .quick-copy small { font-size: 11.5px; color: var(--ink-soft); line-height: 1.55; }
  .quick-arrow { margin-left: auto; font-size: 15px; color: var(--accent); align-self: flex-start; }
  .toolbar { border: 1px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: 0 4px 20px rgba(0,48,91,.06); background: rgba(255,255,255,.95); }
  .sec-head h2 { color: var(--brand); }
  .sec-head .tag { background: var(--gold-soft); color: #815411; border: 1px solid #f2dc9b; }
  .q-num { background: var(--brand-soft); color: var(--brand); }
  .progress-bar > div { background: linear-gradient(90deg, var(--brand), #3d81b9); }
  .qcard:hover { box-shadow: 0 8px 28px rgba(0,48,91,.1); }
  @media (max-width: 980px) { .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) {
    .campus-hero { min-height: 320px; padding: 43px 20px 48px;
      background: linear-gradient(90deg, rgba(0,33,63,.85) 0%, rgba(0,48,91,.58) 80%, rgba(0,48,91,.43) 100%), url('../assets/images/Administration-Building-14-1536x864.jpg') 55% center / cover no-repeat; }
    .campus-hero h1 { font-size: clamp(29px, 7vw, 37px); }
    .hero-eyebrow { font-size: 10px; margin-bottom: 13px; }
    .campus-hero .hero-description { font-size: 12px; }
    .hero-actions { margin-top: 22px; gap: 9px; }
    .hero-action { min-height: 42px; padding: 10px 13px; }
    .hero-text-link { margin-left: 2px; }
    .hero-caption { right: 16px; bottom: 11px; font-size: 9px; }
    .quick-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
    .quick-tile { gap: 8px; padding: 12px 10px; align-items: flex-start; min-height: 104px; }
    .quick-symbol { width: 32px; height: 32px; font-size: 17px; }
    .quick-copy strong { font-size: 12px; }
    .quick-copy small { font-size: 10.5px; }
    .quick-arrow { display: none; }
  }
  @media (max-width: 360px) { .quick-grid { grid-template-columns: 1fr; } }

  /* Keep accessibility labels available to screen readers, not in the visual flex layout. */
  .sr-only {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  /* The search action is a separate flex item, not overlaid on placeholder text. */
  .search-box {display:flex;align-items:center;gap:8px;min-width:0;position:relative;}
  .search-box .search-field {position:relative;min-width:0;flex:1 1 auto;}
  .search-box input {display:block;width:100%;min-width:0;height:48px;min-height:48px;padding:11px 42px 11px 40px;border-radius:12px;font-size:15px;}
  .search-box .icon {font-size:22px;line-height:1;left:15px;pointer-events:none;}
  .search-box .search-clear {right:10px;top:50%;transform:translateY(-50%);width:26px;height:26px;z-index:2;display:none;align-items:center;justify-content:center;position:absolute;border:0;background:#e8edf4;color:#52677d;border-radius:7px;cursor:pointer;font-size:18px;}
  .search-box .search-clear.show {display:flex;}
  .search-box .search-submit {position:static;flex:0 0 auto;min-height:44px;border:0;border-radius:10px;background:#003e74;color:#fff;min-width:77px;padding:0 15px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px;}
  .search-box .search-submit:hover {background:#135e9b;}
  .search-box .search-submit:focus-visible {outline:3px solid #e3b34b;outline-offset:2px;}
  .search-feedback {flex:1 0 100%;font-size:13px;color:#245579;background:#ecf5fe;padding:9px 12px;border-radius:9px;line-height:1.6;border:1px solid #cbdfee;margin:0;}
  .search-feedback[hidden]{display:none;}
  .qcard.search-target {outline:2px solid #21659b;outline-offset:2px;box-shadow:0 0 0 6px rgba(19,94,155,.08);}
  .qcard[tabindex="-1"]:focus {outline:2px solid #21659b;outline-offset:2px;}
  .qcard {scroll-margin-top:155px;}
  @media(max-width:640px){
    .search-box input {font-size:16px;height:48px;padding-right:42px;}
    .search-box .search-submit {min-width:74px;}
    .qcard{scroll-margin-top:128px;}
  }
  @media(max-width:480px){
    .search-box {flex-direction:column;align-items:stretch;}
    .search-box .search-field {flex:none;width:100%;}
    .search-box .search-submit {width:100%;min-height:42px;}
  }

  .elpa-choices{background:#fff;border:1px solid #dbe5f0;border-radius:16px;padding:18px 20px;margin:20px 0;}
  .elpa-choice-row{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
  .elpa-choice-row+.elpa-choice-row{margin-top:13px}
  .elpa-choice-label{min-width:68px;font-size:13px;font-weight:700;color:#52677d}
  .elpa-choice-buttons{display:inline-flex;gap:3px;max-width:100%;padding:4px;border-radius:12px;background:#f0f4f9;border:1px solid #dce5ef}
  .elpa-choice-buttons button{min-height:38px;padding:8px 17px;white-space:nowrap;border:0;border-radius:9px;background:transparent;color:#445b73;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
  .elpa-choice-buttons button[aria-pressed="true"]{background:#003e74;color:#fff;box-shadow:0 2px 8px rgba(0,48,91,.14)}
  .elpa-choice-buttons button:focus-visible{outline:3px solid #e3b34b;outline-offset:2px}
  .elpa-choice-note{font-size:12px;color:#60758b;line-height:1.7;margin:12px 0 0}
  .page-practice section[hidden]{display:none!important}
  .page-practice .toolbar[hidden]{display:none!important}
  .category-empty{margin:0 0 22px;padding:20px;border:1px solid var(--line);border-radius:12px;background:#fff}
  .category-empty h2{margin:0 0 8px;font-size:18px;color:var(--brand)}
  .category-empty p{margin:6px 0;font-size:13px;color:var(--ink-soft);line-height:1.7}
  .category-empty p[lang="en"]{font-size:12px}
  .category-empty-actions{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:12px;font-size:13px}
  .category-empty-actions a{padding:6px 0;font-weight:650}
  #timerDrill:disabled{opacity:.45;cursor:not-allowed}
  @media(max-width:640px){.elpa-choices{padding:14px}.elpa-choice-row{gap:7px;flex-direction:column;align-items:stretch}.elpa-choice-row+.elpa-choice-row{margin-top:14px}.elpa-choice-buttons{width:100%}.elpa-choice-buttons button{flex:1 1 0;min-width:0;padding:8px 6px;font-size:12px}}


  /* Mobile practice layout: keep each section title and its data together. */
  @media (max-width: 760px) {
    .page-practice .sec-head {
      display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
    }
    .page-practice .sec-head .emoji {line-height:1.2;font-size:20px;flex:0 0 auto;}
    .page-practice .sec-head h2 {
      min-width:0;margin:0;font-size:clamp(18px,4.8vw,22px);line-height:1.35;
      white-space:nowrap;
    }
    .page-practice .sec-head .sec-meta {
      display:grid;gap:4px;justify-items:end;margin-left:auto;flex:0 0 auto;
    }
    .page-practice .sec-head .tag {
      flex:0 0 auto;padding:3px 7px;font-size:10.5px;
      line-height:1.4;white-space:nowrap;
    }
  }
  @media (max-width: 640px) {
    .page-practice .qcard {padding:16px 13px;}
    .page-practice .qcard .q-top {
      display:grid;grid-template-columns:36px minmax(0,1fr);
      align-items:start;column-gap:10px;row-gap:9px;
    }
    .page-practice .qcard .q-num {grid-column:1;grid-row:1;}
    .page-practice .qcard .q-title {grid-column:2;grid-row:1;min-width:0;}
    .page-practice .qcard .q-title .en {
      font-size:clamp(15px,4vw,16.5px);line-height:1.48;
      overflow-wrap:break-word;
    }
    .page-practice .qcard .q-actions {
      grid-column:2;grid-row:2;
      width:auto;min-width:0;margin:0;padding:0;
      display:flex;justify-content:flex-start;flex-wrap:wrap;gap:8px;
    }
    .page-practice .qcard .q-actions button {flex:0 0 auto;min-height:32px;}
    .page-practice .qcard .note-toolbar {display:flex;flex-wrap:wrap;gap:7px;}
    .page-practice .sec-desc {line-height:1.75;}
  }


/* Compact practice actions; legacy sync controls stay hidden. */
.practice-action{border:1px solid #ccd9e7;border-radius:10px;background:#fff;color:#153e65;padding:10px 14px;font:inherit;font-weight:650;font-size:13px;cursor:pointer;min-height:42px}
.practice-action:hover{background:#eef5fc;border-color:#7cadd7}
.practice-action.primary{background:#124f86;border-color:#124f86;color:#fff}
.practice-action.primary:hover{background:#0d3d69}
.practice-action.subtle{font-weight:500}
.records-menu{position:relative;margin-left:auto}
#sessionFilter{field-sizing:content}
#sessionFilter:focus-visible,#recordsMenuBtn:focus-visible{outline-width:2px;outline-offset:2px}
.progress-head-actions .stat-pill,#recordsMenuBtn{box-sizing:border-box;height:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.progress-head-actions .stat-pill{padding:0 12px}
#recordsMenuBtn{width:auto;padding:0 10px;border-radius:999px;font-size:13px;line-height:1.2}
.records-menu-panel{position:absolute;right:0;top:calc(100% + 6px);width:min(310px,calc(100vw - 38px));background:white;border:1px solid #d8e3ee;box-shadow:0 12px 35px rgba(15,45,72,.13);border-radius:12px;padding:12px;z-index:90}
.records-menu-panel[hidden]{display:none!important}
.records-menu-panel p{font-size:12px;line-height:1.6;color:#536a7d;margin:0 0 8px}
.records-menu-panel button{display:block;text-align:left;width:100%;border:0;background:transparent;padding:10px;border-radius:7px;color:#22435e;font:inherit;font-size:13px;cursor:pointer}
.records-menu-panel button:hover{background:#f0f6fc}
.records-menu-panel small{display:block;color:#6e7d8d;font-size:11px;line-height:1.5;padding:7px 10px}
.question-feedback{font-size:12px;color:#466884;margin-top:7px}
.question-contribute{padding:5px 0 0;text-align:right}
.question-contribute a{color:#527c9e;font-size:12px;text-decoration:none}
.question-contribute a:hover{text-decoration:underline}
.page-practice #saveBtn,.page-practice #exportBtn{display:none!important}
@media(max-width:640px){.progress-head-actions{width:100%;justify-content:space-between}.records-menu{margin-left:0}.records-menu-panel{right:0}}


  /* One compact exercise dock; the sheet stays above iOS Safari's usable viewport. */
  .page-practice .to-top{
    display:inline-grid!important;place-items:center;right:16px;
    bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:112;
    width:38px;height:38px;border:1px solid #cbd9e7;border-radius:999px;
    color:#003e74;background:#fff;box-shadow:0 7px 20px rgba(0,40,85,.16);
    font-size:17px;font-weight:700
  }
  .page-practice .practice-launcher{
    position:fixed;right:16px;bottom:calc(66px + env(safe-area-inset-bottom,0px));
    z-index:112;display:inline-flex;align-items:center;justify-content:center;gap:7px;
    border:0;border-radius:999px;padding:0 16px;min-height:46px;
    color:white;background:#003e74;box-shadow:0 8px 25px rgba(0,40,85,.22);
    font:inherit;font-size:13px;font-weight:700;cursor:pointer;
    font-variant-numeric:tabular-nums;touch-action:manipulation
  }
  .page-practice .practice-launcher:focus-visible{outline:3px solid #e4b73e;outline-offset:3px}
  .page-practice .timer-panel{
    top:auto;left:auto;right:12px;bottom:calc(120px + env(safe-area-inset-bottom,0px));
    z-index:111;width:min(320px,calc(100vw - 24px));max-width:none;
    max-height:min(410px,calc(100dvh - 100px));overflow-y:auto;
    padding:13px;border:1px solid #dbe5f0;border-radius:16px;
    box-shadow:0 13px 42px rgba(10,35,65,.18);overscroll-behavior:contain
  }
  .page-practice .timer-panel:not(.show){display:none!important}
  .page-practice .timer-head{margin:0 0 10px}
  .page-practice .timer-head strong{font-size:14px;color:#1c3754}
  .page-practice .timer-close{width:30px;height:30px;font-size:18px;line-height:1}
  .page-practice .timer-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .page-practice .timer-tab{padding:8px 3px;font-size:12px;white-space:nowrap;min-height:38px}
  .page-practice .timer-set{margin:8px 0 0}
  .page-practice .timer-set[hidden]{display:none!important}
  .page-practice .timer-input{width:58px;height:37px;min-height:37px}
  .page-practice .timer-phase{font-size:12px;letter-spacing:0;margin:10px auto 3px;padding:0;border:0;background:none}
  .page-practice .timer-display{font-size:38px;letter-spacing:0;line-height:1.1;margin:3px 0 8px}
  .page-practice .timer-status{height:auto;min-height:0;font-size:11px;line-height:1.45;margin:0 0 5px}
  .page-practice .timer-status:empty{display:none}
  .page-practice .timer-actions{gap:8px}
  .page-practice .timer-btn{font-size:13px;min-height:40px;padding:8px;border-radius:9px}
  .page-practice .timer-draw{display:block;width:100%;margin-top:8px}
  .timer-preset-note{margin:6px 0;font-size:11px;line-height:1.5;text-align:center;color:var(--ink-soft)}
  /* Clear predictable card geometry at every width; no second contribution toolbar. */
  .page-practice .qcard .q-top{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:11px;row-gap:9px}
  .page-practice .qcard .q-num{grid-column:1;grid-row:1}
  .page-practice .qcard .q-title{grid-column:2;grid-row:1;min-width:0}
  .page-practice .qcard .q-actions{
    grid-column:2;grid-row:2;display:flex;flex-wrap:nowrap;gap:8px;
    width:auto;min-width:0;padding:0;margin:0;justify-content:flex-start
  }
  .page-practice .qcard .q-actions button{
    flex:0 0 auto;min-height:36px;min-width:74px;max-width:100%;
    padding:6px 10px;font-size:12px;border-radius:9px;white-space:nowrap
  }
  .page-practice .qcard .note-wrap:not(.open) .md-tab{display:none!important}
  .page-practice .qcard .note-toolbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .page-practice .qcard .note-toggle{min-height:34px;padding:6px 10px}
  .page-practice .qcard .qnote{margin-top:12px;padding-top:10px}
  .page-practice .question-feedback{margin-top:4px}
  @media(max-width:640px){
    .page-practice .wrap{padding-bottom:110px}
    .page-practice .qcard .q-actions{
      grid-column:1/-1;grid-row:2;
      display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
      gap:8px;width:100%;
    }
    .page-practice .qcard .q-actions.no-translation{grid-template-columns:repeat(2,minmax(0,1fr))}
    .page-practice .qcard .q-actions button{width:100%;min-width:0;padding:7px 3px;min-height:40px}
    .page-practice .timer-panel{right:12px;left:12px;bottom:calc(118px + env(safe-area-inset-bottom,0px));width:auto;max-width:none;margin:0}
    .page-practice .practice-launcher{right:14px;bottom:calc(64px + env(safe-area-inset-bottom,0px))}
    .page-practice .to-top{right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  }
  @media(prefers-reduced-motion:reduce){
    .page-practice .qcard.drill-flash{animation:none!important}
    .page-practice .timer-display.warn{animation:none!important}
  }


  .page-practice .qcard.drill-active{
    border-left-color:#23649f;box-shadow:0 0 0 2px rgba(30,102,164,.25),0 8px 30px rgba(10,47,82,.08)
  }

  /* Card actions: a single baseline in iOS Safari; no inherited margins. */
  .page-practice .qcard .q-actions > button{
    display:inline-flex;align-items:center;justify-content:center;
    box-sizing:border-box;margin:0!important;border-width:1px;
    height:40px;min-height:40px;line-height:1.2;
    font-family:inherit;font-size:12px;font-weight:650;vertical-align:middle;
  }
  .page-practice .qcard .q-actions > .translation-toggle{margin:0!important}
  .page-practice .question-feedback{
    display:flex;align-items:center;flex-wrap:wrap;gap:5px 12px;
    font-size:12px;color:#526d85;line-height:1.5;margin-top:6px;
  }
  .page-practice .question-feedback a{
    color:#125b8e;font-weight:650;text-decoration:none;white-space:nowrap;
  }
  .page-practice .question-feedback a:hover{text-decoration:underline}
  .page-practice .question-feedback a:focus-visible{
    outline:2px solid #d5a83f;outline-offset:3px;border-radius:3px;
  }