/* =========================================================
   Vildan.cn — 功能增强层样式（v20260919-feat13）
   1) 字号缩放：--vfs 缩放全站 rem 基准（阅读辅助）
   2) 全站搜索浮层 / 结果高亮 / 命中闪烁
   3) 学习进度与收藏面板 · 新手 7 天路线 · 三步引导
   4) 阅读辅助条 · 筛选行 · 分享
   全部沿用 Carbon White 变量（--acc #0f62fe / 圆角 0 / IBM Plex）
   ========================================================= */
:root { --vfs: 1; }
html { font-size: calc(100% * var(--vfs)); }
body { font-size: calc(16px * var(--vfs)); }
html[lang="ug"] body { font-size: calc(17px * var(--vfs)); }

/* 关键词高亮（搜索命中） */
mark, .feat-mark { background: #d0e2ff; color: #161616; padding: 0 .1em; border-radius: 0; }
html[lang="ug"] mark, html[lang="ug"] .feat-mark { background: #d0e2ff; }

/* 定位命中：目标区块闪烁提示 */
@keyframes featHit { 0%,100% { outline-color: transparent } 15%,60% { outline-color: var(--acc) } }
.feat-hit { outline: 2px solid var(--acc); outline-offset: -2px; animation: featHit 2.2s ease-out 1; }

/* ---------- 顶栏增强按钮 ---------- */
.feat-acts { display: flex; align-items: center; gap: .25rem; margin-inline-start: .5rem }
.feat-icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid transparent;
  background: transparent; color: var(--tx); cursor: pointer; border-radius: 0; transition: background-color .11s, border-color .11s }
.feat-icon-btn:hover { background: var(--layer); border-color: var(--line2) }
.feat-icon-btn .ic { width: 1.125rem; height: 1.125rem }
.feat-icon-btn.on { border-color: var(--acc); color: var(--acc); background: var(--acc-d) }
.feat-fs { display: inline-flex; align-items: center; border: 1px solid var(--line2); height: 40px }
.feat-fs button { width: 36px; height: 38px; border: 0; background: transparent; color: var(--tx2); cursor: pointer;
  font-family: var(--font-mono); font-size: .875rem; border-radius: 0 }
.feat-fs button:hover { background: var(--layer); color: var(--tx) }
.feat-fs .lvl { min-width: 46px; display: grid; place-items: center; font-size: .6875rem; letter-spacing: .32px; color: var(--tx3);
  border-inline: 1px solid var(--line); height: 38px }

/* ---------- 全站搜索浮层 ---------- */
.fs-mask { position: fixed; inset: 0; z-index: 200; background: rgba(22,22,22,.5); display: none }
.fs-mask.open { display: block }
.fs-panel { position: fixed; z-index: 201; inset-inline: 0; top: 0; margin: 0 auto; width: 100%; max-width: 760px;
  background: var(--panel); border: 1px solid var(--line2); border-top: 0; max-height: 86vh; display: none;
  flex-direction: column; box-shadow: var(--sh-overlay) }
.fs-panel.open { display: flex }
.fs-head { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line) }
.fs-head .ic { width: 1.125rem; height: 1.125rem; color: var(--tx2); flex: 0 0 auto }
.fs-input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--tx); font-family: var(--font-sans);
  font-size: 1rem; height: 40px; outline: none }
.fs-input::placeholder { color: var(--tx-ph) }
.fs-close { border: 0; background: transparent; color: var(--tx2); cursor: pointer; width: 32px; height: 32px; flex: 0 0 auto }
.fs-close:hover { background: var(--layer); color: var(--tx) }
.fs-tabs { display: flex; gap: .375rem; flex-wrap: wrap; padding: .625rem 1rem; border-bottom: 1px solid var(--line); background: var(--layer) }
.fs-tab { padding: .25rem .625rem; border: 1px solid var(--line2); background: var(--panel); color: var(--tx2);
  font-size: .75rem; letter-spacing: .32px; cursor: pointer; border-radius: var(--r-pill) }
.fs-tab.on { background: var(--acc); border-color: var(--acc); color: var(--on-acc); font-weight: 600 }
.fs-tab .cnt { font-family: var(--font-mono); font-size: .6875rem; opacity: .8; margin-inline-start: .25rem }
.fs-body { overflow: auto; -webkit-overflow-scrolling: touch; padding: .25rem 0 .5rem }
.fs-group { padding: .625rem 1rem .25rem; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .32px;
  color: var(--tx3); text-transform: uppercase; border-top: 1px solid var(--line) }
.fs-group:first-child { border-top: 0 }
.fs-item { display: block; padding: .625rem 1rem; border-inline-start: 3px solid transparent; cursor: pointer; text-decoration: none }
.fs-item:hover, .fs-item.sel { background: var(--layer); border-inline-start-color: var(--acc); text-decoration: none }
.fs-t { font-size: .9375rem; font-weight: 600; color: var(--tx); line-height: 1.5 }
.fs-x { margin-top: .125rem; font-size: .8125rem; color: var(--tx2); line-height: 1.6; overflow-wrap: anywhere }
.fs-meta { margin-top: .25rem; font-family: var(--font-mono); font-size: .6875rem; color: var(--tx3) }
.fs-empty { padding: 2rem 1rem; text-align: center; color: var(--tx3); font-size: .875rem }
.fs-tip { padding: .5rem 1rem; border-top: 1px solid var(--line); color: var(--tx3); font-size: .6875rem;
  font-family: var(--font-mono); letter-spacing: .32px; display: flex; gap: 1rem; flex-wrap: wrap }

/* ---------- 筛选行（难度 / 类型） ---------- */
.feat-filters { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem }
.feat-filters .fl { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .32px; color: var(--tx3);
  text-transform: uppercase; margin-inline-end: .25rem }
.feat-filters .chip { padding: .25rem .75rem; font-size: .75rem }
.feat-filters .chip.on { font-weight: 600 }
.feat-count { margin-inline-start: auto; font-family: var(--font-mono); font-size: .75rem; color: var(--tx3) }

/* ---------- 区块阅读辅助（收藏 / 复制要点 / 上一条下一条 / 相关推荐） ---------- */
.feat-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; padding-top: .75rem;
  border-top: 1px solid var(--line) }
.feat-bar .sp { margin-inline-start: auto }
.feat-btn { display: inline-flex; align-items: center; gap: .3125rem; padding: .3125rem .625rem; border: 1px solid var(--line2);
  background: var(--panel); color: var(--tx2); font-size: .75rem; letter-spacing: .32px; cursor: pointer; border-radius: 0;
  font-family: var(--font-sans); transition: background-color .11s, color .11s, border-color .11s }
.feat-btn .ic { width: .875rem; height: .875rem }
.feat-btn:hover { background: var(--layer); color: var(--tx) }
.feat-btn.ok { border-color: var(--success); color: var(--success); background: #defbe6 }
.feat-fav.on { border-color: var(--acc); color: var(--acc); background: var(--acc-d) }
.feat-btn[disabled] { opacity: .45; cursor: default }
.feat-rel { margin-top: .75rem; padding: .75rem 1rem; background: var(--layer); border-inline-start: 3px solid var(--acc) }
.feat-rel-h { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .32px; color: var(--tx3); margin-bottom: .375rem }
.feat-rel a { display: inline-block; margin-inline-end: .75rem; font-size: .8125rem; color: var(--acc) }

/* ---------- 首页：学习进度 / 收藏 / 7 天路线 ---------- */
.feat-panel { width: 100%; max-width: var(--maxw); margin: 0 auto 1rem; padding: 0 1rem }
.feat-card { padding: 1.5rem; border: 1px solid var(--line2); background: var(--panel) }
.feat-card + .feat-card { margin-top: 1rem }
.feat-card-h { display: flex; align-items: center; gap: .5rem; font-size: 1.25rem; font-weight: 600; color: var(--tx); margin-bottom: .75rem }
.feat-card-h .ic { width: 1.125rem; height: 1.125rem; color: var(--acc) }
.feat-sub { color: var(--tx2); font-size: .875rem; line-height: 1.71; margin: 0 0 .75rem }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem }
.feat-mini { padding: 1rem; background: var(--layer); border-inline-start: 3px solid var(--line2) }
.feat-mini b { display: block; font-size: .875rem; color: var(--tx); margin-bottom: .25rem }
.feat-mini span { font-size: .8125rem; color: var(--tx2) }
.feat-go { display: inline-flex; align-items: center; gap: .375rem; margin-top: .625rem; font-size: .8125rem; color: var(--acc) }
.feat-favlist { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none }
.feat-favlist li { display: flex; align-items: center; gap: .5rem; padding: .625rem .75rem; border: 1px solid var(--line);
  background: var(--panel); font-size: .8125rem; min-width: 0 }
.feat-favlist a { min-width: 0; overflow-wrap: anywhere }
.feat-favlist .rm { margin-inline-start: auto; border: 0; background: transparent; color: var(--tx3); cursor: pointer; flex: 0 0 auto }
.feat-favlist .rm:hover { color: var(--danger) }
.feat-mods { display: grid; gap: .5rem; margin-top: .75rem }
.feat-mod { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem .75rem; align-items: center }
.feat-mod-t { font-size: .8125rem; color: var(--tx2); min-width: 0; overflow-wrap: anywhere }
.feat-mod-n { font-family: var(--font-mono); font-size: .75rem; color: var(--tx3) }

/* ---------- 7 天路线 ---------- */
.feat-route { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none }
.feat-day { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; padding: 1rem; border: 1px solid var(--line2);
  background: var(--panel); align-items: start }
.feat-day.done { background: var(--acc-d); border-color: var(--acc) }
.feat-day-no { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .32px; color: var(--tx3); white-space: nowrap;
  border: 1px solid var(--line2); padding: .125rem .375rem; background: var(--panel) }
.feat-day-t { font-size: .9375rem; font-weight: 600; color: var(--tx); line-height: 1.5 }
.feat-day-d { margin: .25rem 0 0; font-size: .8125rem; color: var(--tx2); line-height: 1.71 }
.feat-day-links { margin-top: .5rem; display: flex; gap: .75rem; flex-wrap: wrap }
.feat-day-links a { font-size: .8125rem; color: var(--acc) }
.feat-day-x { grid-column: 2; margin-top: .5rem }

/* ---------- 新手引导 ---------- */
.fg-mask { position: fixed; inset: 0; z-index: 210; background: rgba(22,22,22,.55); display: none }
.fg-mask.open { display: block }
.fg-box { position: fixed; z-index: 211; inset-inline: 0; margin: 0 auto; top: 50%; transform: translateY(-50%);
  width: calc(100% - 2rem); max-width: 520px; background: var(--panel); border: 1px solid var(--line2); display: none }
.fg-box.open { display: block }
.fg-body { padding: 1.5rem }
.fg-step { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .32px; color: var(--acc) }
.fg-h { margin: .5rem 0 .5rem; font-size: 1.5rem; font-weight: 400; color: var(--tx); line-height: 1.3 }
.fg-d { margin: 0; color: var(--tx2); font-size: .875rem; line-height: 1.75 }
.fg-list { margin: .75rem 0 0; padding-inline-start: 1.25rem; color: var(--tx2); font-size: .875rem; line-height: 1.71 }
.fg-foot { display: flex; align-items: center; gap: .5rem; padding: .75rem 1.5rem; border-top: 1px solid var(--line) }
.fg-dots { display: flex; gap: .375rem; margin-inline-end: auto }
.fg-dots i { width: 8px; height: 8px; background: var(--line2); display: block }
.fg-dots i.on { background: var(--acc) }
.fg-btn { border: 1px solid var(--acc); background: var(--acc); color: var(--on-acc); height: 40px; padding: 0 1rem;
  font-size: .875rem; cursor: pointer; border-radius: 0 }
.fg-btn.ghost { background: transparent; color: var(--acc) }
.fg-btn:hover { background: var(--acc2); border-color: var(--acc2); color: var(--on-acc) }

/* ---------- RTL 修正 ---------- */
html[dir="rtl"] .fs-item { border-inline-start-color: transparent }
html[dir="rtl"] .fs-item:hover, html[dir="rtl"] .fs-item.sel { border-inline-start-color: var(--acc) }
html[dir="rtl"] .feat-rel, html[dir="rtl"] .feat-mini { border-inline-start-color: var(--acc) }

/* ---------- 窄屏 ---------- */
@media (max-width: 700px) {
  .feat-card { padding: 1rem }
  .feat-acts { gap: .125rem }
  .feat-acts #featShareBtn, .feat-acts .feat-fs { display: none }
  .feat-icon-btn { width: 36px; height: 36px }
  .feat-fs { height: 36px }
  .feat-fs button { width: 32px; height: 34px }
  .feat-fs .lvl { height: 34px; min-width: 40px }
  .fs-panel { max-height: 100vh; border-inline: 0 }
  .feat-count { margin-inline-start: 0; width: 100% }
  .feat-day { padding: .75rem }
}
@media (max-width: 420px) {
  .feat-acts { margin-inline-start: 0 }
  .feat-acts #featHelpBtn { display: none }
  .feat-icon-btn { width: 34px; height: 34px }
  .fs-panel { max-height: 100dvh }
  .feat-day { grid-template-columns: minmax(0, 1fr) }
  .feat-day-x { grid-column: 1 }
}
@media (max-width: 380px) {
  .feat-fs .lvl { display: none }
}

/* ---------- 打印：隐藏增强 UI ---------- */
@media print {
  .fs-mask, .fs-panel, .fg-mask, .fg-box, .feat-acts, .feat-bar, .feat-filters, .feat-rel { display: none !important }
}


/* =========================================================
   练习题 / 小测（quiz）—— 由 js/quiz.js 渲染，仅 quiz.html 使用
   基调：扁平、1px 描边、单一蓝色强调；维文 RTL 自动适配
   ========================================================= */
#qz-app{max-width:56rem}
.qz-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.qz-empty{color:var(--tx3);font-size:.875rem}

/* ---- 总览 ---- */
.qz-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line2);margin:0 0 1rem;background:var(--panel)}
.qz-stat{padding:.75rem 1rem;text-align:center;border-inline-start:1px solid var(--line)}
.qz-stat:first-child{border-inline-start:0}
.qz-stat b{display:block;font-size:1.25rem;line-height:1.4;color:var(--tx);font-variant-numeric:tabular-nums}
.qz-stat span{display:block;font-size:.75rem;color:var(--tx3);margin-top:.125rem}

/* ---- 模块筛选 ---- */
.qz-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.qz-chip{display:inline-flex;align-items:center;gap:.375rem;min-height:32px;padding:0 .75rem;border:1px solid var(--line2);background:var(--panel);color:var(--tx2);font:inherit;font-size:.8125rem;cursor:pointer}
.qz-chip i{font-style:normal;font-size:.6875rem;color:var(--tx3);font-variant-numeric:tabular-nums}
.qz-chip:hover{border-color:var(--acc);color:var(--acc)}
.qz-chip.on{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.qz-chip.on i{color:rgba(255,255,255,.75)}

/* ---- 按钮 ---- */
.qz-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 1rem;border:1px solid var(--acc);background:var(--acc);color:var(--on-acc);font:inherit;font-size:.875rem;cursor:pointer;text-decoration:none}
.qz-btn:hover{background:var(--acc2);border-color:var(--acc2)}
.qz-btn:active{background:var(--acc3);border-color:var(--acc3)}
.qz-btn-s{background:transparent;color:var(--acc)}
.qz-btn-s:hover{background:var(--acc);color:var(--on-acc)}
.qz-btn-g{background:transparent;border-color:var(--line2);color:var(--tx2)}
.qz-btn-g:hover{background:var(--layer);border-color:var(--line-strong);color:var(--tx)}
.qz-btn[disabled]{opacity:.5;cursor:not-allowed}
.qz-redo{margin:0 0 1rem}
.qz-link{align-self:center;font-size:.8125rem;color:var(--acc);text-decoration:none;border-bottom:1px solid transparent}
.qz-link:hover{border-bottom-color:var(--acc)}

/* ---- 题集列表 ---- */
.qz-sets{display:grid;gap:.75rem}
@media(min-width:48rem){.qz-sets{grid-template-columns:repeat(2,1fr)}}
.qz-set{border:1px solid var(--line2);background:var(--panel);padding:1rem;display:flex;flex-direction:column;gap:.625rem;scroll-margin-top:5rem}
.qz-set-h{display:flex;align-items:baseline;gap:.5rem}
.qz-no{flex:0 0 auto;font-family:var(--font-mono);font-size:.75rem;color:var(--tx3)}
.qz-set-h h3{margin:0;font-size:.9375rem;line-height:1.5;font-weight:600;color:var(--tx)}
.qz-set-m{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.75rem;color:var(--tx3)}
.qz-dot{width:3px;height:3px;background:var(--line-strong);border-radius:50%}
.qz-bad{color:var(--danger)}
.qz-set-a{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:auto}
.qz-set-a .qz-btn{min-height:36px;padding:0 .875rem;font-size:.8125rem}

/* ---- 作答 ---- */
.qz-run{display:block}
.qz-bar{display:flex;align-items:center;gap:.75rem;margin-bottom:.625rem}
.qz-bar .qz-btn{min-height:32px;padding:0 .75rem;font-size:.8125rem}
.qz-title{flex:1 1 auto;min-width:0;font-size:.875rem;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qz-pg{flex:0 0 auto;font-family:var(--font-mono);font-size:.8125rem;color:var(--tx3);font-variant-numeric:tabular-nums}
.qz-progress{height:2px;background:var(--layer2);margin-bottom:1rem}
.qz-progress i{display:block;height:100%;background:var(--acc);transition:width .2s ease}
.qz-card{border:1px solid var(--line2);background:var(--panel);padding:1.25rem}
.qz-tags{display:flex;gap:.375rem;flex-wrap:wrap;margin-bottom:.75rem}
.qz-tag{font-size:.6875rem;line-height:1.6;padding:0 .5rem;border:1px solid var(--acc);color:var(--acc);background:var(--acc-d)}
.qz-tag-g{border-color:var(--line2);color:var(--tx3);background:var(--layer)}
.qz-stem{margin:0 0 1rem;font-size:1.0625rem;line-height:1.7;color:var(--tx);white-space:pre-line}
.qz-opts{border:0;margin:0;padding:0;display:grid;gap:.5rem}
.qz-opt{display:flex;align-items:flex-start;gap:.625rem;padding:.75rem .875rem;border:1px solid var(--line2);background:var(--panel);cursor:pointer;line-height:1.65}
.qz-opt:hover{border-color:var(--acc);background:var(--acc-d)}
.qz-opt input{position:absolute;opacity:0;pointer-events:none}
.qz-letter{flex:0 0 auto;width:1.5rem;height:1.5rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line2);font-family:var(--font-mono);font-size:.75rem;color:var(--tx2)}
.qz-optx{flex:1 1 auto;min-width:0;font-size:.9375rem;color:var(--tx)}
.qz-opt.on{border-color:var(--acc);background:var(--acc-d)}
.qz-opt.on .qz-letter{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.qz-opt.ok{border-color:var(--success);background:#defbe6}
.qz-opt.ok .qz-letter{background:var(--success);border-color:var(--success);color:#fff}
.qz-opt.no{border-color:var(--danger);background:#fff1f1}
.qz-opt.no .qz-letter{background:var(--danger);border-color:var(--danger);color:#fff}
.qz-fb{margin-top:1rem;padding:.875rem 1rem;border:1px solid var(--line2);border-inline-start-width:3px;background:var(--layer)}
.qz-fb b{font-size:.875rem}
.qz-fb.ok{border-inline-start-color:var(--success)}
.qz-fb.ok b{color:var(--success)}
.qz-fb.no{border-inline-start-color:var(--danger)}
.qz-fb.no b{color:var(--danger)}
.qz-key{margin:.375rem 0 0;font-size:.875rem;color:var(--tx)}
.qz-exp{margin:.375rem 0 0;font-size:.875rem;line-height:1.7;color:var(--tx2)}
.qz-foot{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:1.25rem}
.qz-foot-c{justify-content:center;margin:1.25rem 0}

/* ---- 结果 ---- */
.qz-score{text-align:center;border:1px solid var(--line2);background:var(--panel);padding:1.5rem 1rem;margin-bottom:1rem}
.qz-score b{font-size:2rem;line-height:1.2;color:var(--tx);font-variant-numeric:tabular-nums}
.qz-score span{margin-inline-start:.5rem;font-size:.875rem;color:var(--acc)}
.qz-score p{margin:.5rem 0 0;font-size:.875rem;color:var(--tx2)}
.qz-revs{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.qz-rev{border:1px solid var(--line2);border-inline-start-width:3px;background:var(--panel);padding:.875rem 1rem}
.qz-rev.ok{border-inline-start-color:var(--success)}
.qz-rev.no{border-inline-start-color:var(--danger)}
.qz-rev-q{margin:0 0 .5rem;font-size:.9375rem;line-height:1.65;color:var(--tx);white-space:pre-line}
.qz-rev-a{margin:.25rem 0 0;font-size:.8125rem;color:var(--tx2)}
.qz-rev-a span{color:var(--tx3)}
.qz-rev-e{margin:.5rem 0 0;font-size:.8125rem;line-height:1.7;color:var(--tx3)}

/* ---- 锚点高亮 / 轻提示 ---- */
.qz-set.qz-hit{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-d)}
.qz-toast{position:fixed;inset-inline:0;bottom:2rem;margin:0 auto;width:max-content;max-width:82vw;padding:.625rem 1rem;background:var(--tx);color:#fff;font-size:.875rem;opacity:0;transform:translateY(.5rem);transition:opacity .18s,transform .18s;pointer-events:none;z-index:9999}
.qz-toast.on{opacity:1;transform:none}
@media(max-width:30rem){
  .qz-stats{grid-template-columns:1fr 1fr 1fr}
  .qz-stat{padding:.625rem .5rem}
  .qz-stat b{font-size:1.0625rem}
  .qz-card{padding:1rem}
  .qz-stem{font-size:1rem}
  .qz-set-a .qz-btn{flex:1 1 auto}
}

/* ---- 维文 RTL ---- */
[dir="rtl"] .qz-stem,[dir="rtl"] .qz-optx,[dir="rtl"] .qz-exp,[dir="rtl"] .qz-rev-q,[dir="rtl"] .qz-rev-a{text-align:right}
[dir="rtl"] .qz-letter{direction:ltr}
[dir="rtl"] .qz-no,[dir="rtl"] .qz-pg{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .qz-opts,[dir="rtl"] .qz-set-a,[dir="rtl"] .qz-foot,[dir="rtl"] .qz-bar{flex-direction:row}