/* ===== 阿拉伯语字体（均只含阿拉伯字符区，按需下载；切换时只拉取被选中的）
   ⚠️ 子集必须保留 GSUB/GPOS（pyftsubset --layout-features='*'），
   否则字母退化为孤立形、音符错位（fontsource / Google 现成子集都有此问题） ===== */
@font-face {
  font-family: "Amiri";
  src: url("../fonts/amiri-sub.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}
@font-face {
  /* 教科书体：用 Bold 字重当常规，笔画粗、字腔圆，最接近课本/试卷印刷 */
  font-family: "ScheherazadeB";
  src: url("../fonts/scheherazadenew-bold.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}
@font-face {
  font-family: "NotoNaskh";
  src: url("../fonts/notonaskh.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}
@font-face {
  font-family: "ReemKufi";
  src: url("../fonts/reemkufi.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}
@font-face {
  font-family: "ArefRuqaa";
  src: url("../fonts/arefruqaa.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}

/* ==========================================================
   阿拉伯语入门实验室  样式表
   布局：内容最宽 1080px，超出则居中；手机竖屏单列优化
   装饰：伊斯兰几何纹（八角星 / 锯齿饰带）/ 羊皮纸底色
   ========================================================== */

:root {
  /* 纸面与文字 */
  --bg:        #ece5d6;   /* 页面底：羊皮纸 */
  --page:      #fffefb;   /* 内容面板 */
  --card:      #ffffff;
  --line:      #e3ded1;
  --ink:       #241f18;
  --ink2:      #5f5b53;
  --ink3:      #8d887e;

  /* 功能色 */
  --acc:       #185fa5;
  --acc-soft:  #e6f1fb;
  --ok:        #3b6d11;
  --ok-soft:   #eaf3de;
  --bad:       #a32d2d;
  --bad-soft:  #fcebeb;
  --warn:      #854f0b;
  --warn-soft: #faeeda;

  /* 文化装饰色 */
  --navy:      #123c5a;
  --gold:      #b08330;
  --gold-soft: #f4ead4;
  --teal:      #0f6b62;

  --ar: "Amiri", "Noto Naskh Arabic", "Traditional Arabic", "Segoe UI", serif;
  --sh: 0 1px 3px rgba(40, 30, 10, .07), 0 10px 34px rgba(40, 30, 10, .08);
}

/* 伊斯兰八角星（Rub el Hizb 变体）连续纹样 */
:root {
  --pat-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%238a7550' stroke-width='1' opacity='.26'%3E%3Cpath d='M28 0 L56 28 L28 56 L0 28 Z'/%3E%3Crect x='18' y='18' width='20' height='20'/%3E%3Crect x='18' y='18' width='20' height='20' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E");
  /* 锯齿饰带 */
  --pat-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14'%3E%3Cpath d='M0 13 L6 1 L12 13 L18 1 L24 13' fill='none' stroke='%23b08330' stroke-width='1.5' opacity='.55'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 22px 16px;
  background-color: var(--bg);
  background-image: var(--pat-star);
  background-repeat: repeat;
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- 1080 居中容器 ---------- */
.shell {
  max-width: 1080px;
  margin: 0 auto;
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--sh);
  overflow: hidden;
}

.ar { font-family: var(--ar); }
.rtl { direction: rtl; }

/* ============================ 页眉 ============================ */
header.site {
  background: linear-gradient(180deg, #fffdf8 0%, #fdfaf3 100%);
  border-bottom: 1px solid var(--line);
}
.rule-top {
  height: 5px;
  background: var(--navy);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.25);
}

.masthead {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;            /* 工具多时整体换行，绝不挤压标题 */
  padding: 16px clamp(14px, 3vw, 26px) 14px;
}
.mh-star, .f-star {
  width: 40px; height: 40px; flex: 0 0 auto;
  fill: none; stroke: var(--gold); stroke-width: 1.5;
}
.mh-star circle, .f-star circle { fill: var(--gold); stroke: none; }

.mh-mid { flex: 1 1 auto; min-width: 190px; }   /* 保底宽度：标题/副标题不会竖排 */
.mh-ar {
  font-family: var(--ar);
  font-size: 15px;
  color: var(--gold);
  letter-spacing: .5px;
  line-height: 1.3;
}
header.site h1 {
  font-size: 18px; font-weight: 700; margin: 1px 0 2px;
  letter-spacing: .5px; color: var(--navy);
}
header.site .sub { font-size: 12px; color: var(--ink3); }

.mh-tools {
  display: flex; align-items: center; gap: 8px;
  flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end;
}
.mini { font-size: 12px; color: var(--ink2); }

/* 锯齿饰带（页眉 / 页脚通用） */
.ornband {
  height: 14px;
  background-color: #fffdf8;
  background-image: var(--pat-band);
  background-repeat: repeat-x;
  background-position: center;
  border-top: 1px solid var(--line);
}

select, button, input[type=search], input[type=text] {
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
  touch-action: manipulation;
}
select:focus, button:focus, input:focus { outline: 2px solid var(--acc-soft); outline-offset: 1px; }
button:hover { border-color: var(--ink3); }
button.primary { background: var(--acc); border-color: var(--acc); color: #fff; }
button.primary:hover { background: #12497f; }
button:disabled { opacity: .45; cursor: default; }

/* ============================ 标签栏 ============================ */
nav.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px clamp(14px, 3vw, 26px) 0;
  border-bottom: 1px solid var(--line);
  background: var(--page);
}
nav.tabs button {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px 8px 0 0;
  padding: 7px 14px;
  color: var(--ink2);
  touch-action: manipulation;
}
nav.tabs button.on {
  background: var(--acc-soft);
  border-color: var(--line);
  border-bottom-color: var(--acc-soft);
  color: var(--acc);
  font-weight: 600;
  box-shadow: inset 0 2px 0 var(--gold);
}

/* ============================ 主体 ============================ */
main {
  padding: 20px clamp(14px, 3vw, 26px) 56px;
  max-width: 1080px;
  margin: 0 auto;
}

h2.sec {
  font-size: 15px; font-weight: 600; margin: 22px 0 10px;
  display: flex; align-items: center; gap: 8px;
}
h2.sec:first-child { margin-top: 0; }
h2.sec::before {
  content: "۞";
  color: var(--gold);
  font-size: 14px;
  line-height: 1;
}
h2.sec::after {
  content: ""; flex: 1 1 auto; height: 1px; min-width: 12px;
  background: linear-gradient(90deg, rgba(176,131,48,.45), rgba(176,131,48,0));
}
h3.sub { font-size: 13px; font-weight: 600; margin: 16px 0 8px; color: var(--ink2); }
p.note { font-size: 12px; color: var(--ink3); margin: 8px 0 0; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
.grid { display: grid; gap: 10px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  transition: transform .08s;
  touch-action: manipulation;
}
.tile:hover { border-color: var(--acc); }
.tile:active { transform: scale(.97); }
.tile .g { font-family: var(--ar); font-size: 27px; line-height: 1.25; }
.tile .t { font-size: 12px; font-weight: 600; margin-top: 2px; }
/* 字母下方：音值 + 发音要点（如 th · θ，think 里的咬舌 th） */
.tile .d { font-size: 10.5px; color: var(--ink3); line-height: 1.35; margin-top: 1px; }
.tile.star { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }

/* 拼字台的辅音按钮：字母 + 读音 */
.bKey {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 5px 2px; line-height: 1.15;
}
.bKey .ar { font-size: 20px; }
.bKey .bk-rd {
  font-family: "Segoe UI", ui-monospace, Consolas, "Courier New", monospace;
  font-size: 10px; font-weight: 700; color: var(--acc);
}

/* 阿拉伯文大字号：随视口自动缩放 */
.big-ar { font-family: var(--ar); font-size: clamp(30px, 5.4vw, 46px); line-height: 1.35; text-align: center; }
.mid-ar { font-family: var(--ar); font-size: clamp(22px, 3.8vw, 30px); line-height: 1.4; }

table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th, table.tbl td { border-bottom: 1px solid var(--line); padding: 7px 10px; text-align: left; }
table.tbl th { color: var(--ink2); font-weight: 600; font-size: 12px; background: #fbfaf7; }

.pill {
  display: inline-block;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #f1efe8;
  color: var(--ink2);
  margin-right: 4px;
}
.fam {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px;
}
.fam .sk { font-family: var(--ar); font-size: 32px; min-width: 46px; text-align: center; line-height: 1.1; }

.kb { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 5px; }
.kb .k {
  background: var(--card); border: 1px solid var(--line); border-radius: 7px;
  padding: 5px 2px; text-align: center; font-size: 11px; color: var(--ink3);
}
.kb .k b { display: block; font-family: var(--ar); font-size: 20px; color: var(--ink); line-height: 1.2; }

.dict-stage {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; text-align: center;
}
.hidden-ans { color: var(--ink3); font-size: 13px; }
.reveal { animation: pop .18s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.qopt { width: 100%; text-align: left; margin-bottom: 6px; font-size: 13px; padding: 8px 12px; }
.qopt.good { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.qopt.bad { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }

.wlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.wcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; cursor: pointer; touch-action: manipulation;
}
.wcard:hover { border-color: var(--acc); }
.wcard .a { font-family: var(--ar); font-size: 21px; line-height: 1.35; }
.wcard .m { font-size: 11px; color: var(--ink3); }
.wcard.fav { border-color: var(--warn); background: #fffdf7; }

.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: var(--ink2); margin-top: 10px; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
.stat { font-size: 12px; color: var(--ink2); }
.badge { font-size: 11px; background: var(--acc-soft); color: var(--acc); border-radius: 6px; padding: 1px 7px; }

/* ============ 写法演示 / 字母详解 / 音素矩阵 ============ */
.wrWrap { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.wrBoard {
  background: #fffdf8; border: 1px solid var(--line); border-radius: 12px;
  padding: 8px; position: relative;
}
.wrSvg { width: 100%; height: auto; display: block; touch-action: none; }
.wrSvg .guide { stroke: #e8e3d8; stroke-width: 1; stroke-dasharray: 4 4; }
.wrSvg .base { stroke: #d8cbb4; stroke-width: 1.4; }
.wrSvg .st {
  fill: none; stroke: #1f4e79; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round;
}
.wrSvg .st.done { stroke: #185FA5; }
.wrSvg .st.cur { stroke: #c0392b; }
.wrSvg .ghost { fill: none; stroke: #1f4e79; stroke-width: 5.5; opacity: .10; stroke-linecap: round; stroke-linejoin: round; }
.wrSvg .dot { fill: #1f4e79; }
.wrSvg .dot.ghost { opacity: .10; }
.wrSvg .pen { fill: #c0392b; opacity: 0; }
.wrSteps { margin: 0; padding: 0; list-style: none; }
.wrSteps li {
  font-size: 12px; color: var(--ink2); padding: 5px 8px; border-radius: 7px;
  border: 1px solid transparent; margin-bottom: 3px; cursor: pointer;
}
.wrSteps li.on { background: var(--acc-soft); border-color: var(--acc); color: var(--acc); }
.wrSteps li b { display: inline-block; width: 18px; color: var(--ink3); }
.wrRef { font-family: var(--ar); font-size: clamp(28px, 4.8vw, 40px); text-align: center; line-height: 1.5; }
.wrStrip { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; direction: rtl; }
.wrStrip span {
  font-family: var(--ar); font-size: 24px; padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); cursor: pointer;
}
.wrStrip span.on { background: var(--acc-soft); border-color: var(--acc); color: var(--acc); }

.atlasGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.atlasCell {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer;
  touch-action: manipulation;
}
.atlasCell:hover { border-color: var(--acc); }
.atlasCell.on { border-color: var(--acc); background: var(--acc-soft); }
.atlasCell .l { font-family: var(--ar); font-size: 22px; }
.atlasCell .n { font-size: 12px; color: var(--ink2); }
.atlasCell .m { font-size: 11px; color: var(--ink3); }
.kv { display: grid; grid-template-columns: 96px 1fr; gap: 4px 10px; font-size: 12.5px; }
.kv dt { color: var(--ink3); }
.kv dd { margin: 0; }
.originBox { background: #fdfbf6; border: 1px solid #ece5d5; border-radius: 10px; padding: 12px 14px; }
.phe { font-family: var(--ar); font-size: clamp(26px, 4.4vw, 34px); line-height: 1.2; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 10px; }
.pcell {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  display: flex; gap: 12px; align-items: center; cursor: pointer; touch-action: manipulation;
}
.pcell:hover { border-color: var(--acc); }
.pcell .gl { display: flex; flex-direction: column; align-items: center; min-width: 68px; }
.pcell .g { font-family: var(--ar); font-size: 36px; text-align: center; line-height: 1.25; }
/* 该组合的实际读音，如 بَ → ba */
.pcell .rd {
  font-family: "Segoe UI", ui-monospace, Consolas, "Courier New", monospace;
  font-size: 14px; font-weight: 700; color: var(--acc);
  line-height: 1.2; margin-top: 2px; letter-spacing: .2px;
  white-space: nowrap;
}
.pcell .t { font-size: 12px; }
.pcell .t b { font-size: 13px; }
.pcell .t i { display: block; font-style: normal; color: var(--ink3); font-size: 11px; }
.grpTitle {
  font-size: 12px; color: var(--ink3); margin: 14px 0 6px;
  border-bottom: 1px dashed var(--line); padding-bottom: 4px;
}

/* ============================ 页脚 ============================ */
footer.site-foot {
  background: linear-gradient(180deg, #fdfaf3 0%, #fffdf8 100%);
  border-top: 1px solid var(--line);
}
.f-in {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 16px 22px; text-align: center;
}
.f-ar { font-family: var(--ar); font-size: clamp(18px, 3.4vw, 24px); color: var(--navy); line-height: 1.5; }
.f-zh { font-size: 11.5px; color: var(--ink3); }

/* ==========================================================
   响应式：平板 / 窄窗
   ========================================================== */
@media (max-width: 900px) {
  .wrWrap { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { padding: 0; background-image: none; }
  .shell {
    border-radius: 0;
    border-left: 0; border-right: 0;
    box-shadow: none;
    max-width: 100%;
  }

  /* 页眉：星徽与标题同行，工具行换行 */
  .masthead { flex-wrap: wrap; gap: 8px 10px; padding: 12px 14px 10px; }
  .mh-star { width: 26px; height: 26px; align-self: flex-start; margin-top: 3px; }
  .mh-mid { flex: 1 1 auto; }
  header.site h1 { font-size: 16px; }
  .mh-ar { font-size: 13px; }
  .mh-tools { order: 3; flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; }
  #hdrStat { flex: 1 1 100%; }

  /* 标签栏：横向滚动 + 吸顶 */
  nav.tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 10px 0;
    position: sticky;
    top: 0;
    z-index: 30;
    box-shadow: 0 1px 0 var(--line);
  }
  nav.tabs::-webkit-scrollbar { display: none; }
  nav.tabs button { flex: 0 0 auto; padding: 9px 13px; font-size: 13px; }

  main { padding: 14px 12px 40px; }

  /* 触控友好 */
  button, select { min-height: 38px; }
  input[type=search], input[type=text] { font-size: 16px; min-height: 38px; }

  /* 网格降列 */
  .wlist  { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .atlasGrid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
  .pgrid  { grid-template-columns: 1fr; }
  .kv     { grid-template-columns: 78px 1fr; }
  .fam    { gap: 8px; }
  .fam .sk { min-width: 38px; font-size: 26px; }

  .tile { padding: 9px 4px; }
  .tile .g { font-size: 24px; }
  .tile .d { font-size: 10.5px; }

  .dict-stage { padding: 14px 12px; }
  .card { padding: 12px 12px; }
  .wrStrip span { font-size: 21px; padding: 3px 8px; }
  h2.sec { margin: 16px 0 8px; font-size: 14px; }
}

@media (max-width: 420px) {
  .masthead { gap: 8px; }
  header.site .sub { font-size: 11px; }
  .wlist { grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); }
  .atlasGrid { grid-template-columns: repeat(auto-fill, minmax(min(96px, 100%), 1fr)); }
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dt { margin-top: 6px; }
  .pcell .g { font-size: 30px; }
  .pcell .gl { min-width: 56px; }
  .pcell .rd { font-size: 13px; }
  .f-zh { font-size: 11px; }
}

/* 横屏矮窗：标签栏不吸顶，避免占太多高度 */
@media (max-height: 460px) and (orientation: landscape) {
  nav.tabs { position: static; }
}

/* 打印 / 减少动效 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* 安全区（iPhone 刘海 / 底部横条） */
@supports (padding: env(safe-area-inset-left)) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  @media (max-width: 760px) {
    .masthead, nav.tabs, main { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
    main { padding-bottom: max(40px, env(safe-area-inset-bottom)); }
  }
}

/* ================= 学习进度 / 伊斯兰教面板 ================= */
.hdrprog {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: var(--acc-soft); color: var(--acc); text-decoration: none;
  border: 1px solid #cfe0f2; white-space: nowrap;
}
.hdrprog:hover { background: #dbeafb; }

.pbar {
  display: block; height: 8px; border-radius: 999px; background: #ece7db;
  overflow: hidden; margin-top: 10px;
}
.pbar > i { display: block; height: 100%; background: linear-gradient(90deg, #2a7fbf, #185fa5); border-radius: 999px; }

.wcard .lmark { font-size: 11px; color: var(--ok); margin-left: 6px; }
.wcard.learned { border-color: #cfe3c4; background: #fbfdf9; }
.wcard.learned .a { color: #2f5a12; }

.ichip {
  font-size: 12.5px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: #fffdf8; color: var(--ink2);
  cursor: pointer; font-family: inherit;
}
.ichip.primary { background: var(--acc); border-color: var(--acc); color: #fff; }
.ichip:hover { border-color: var(--acc); }

.ibox {
  background: #fbfaf6; border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px;
}
.ibox b { font-size: 13px; display: block; margin-top: 2px; }
.ibox .mini { margin-top: 2px; line-height: 1.55; }

.itab { width: 100%; border-collapse: collapse; font-size: 13px; }
.itab th, .itab td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.itab th { font-size: 12px; color: var(--ink3); font-weight: 600; background: #faf8f2; }
.itab tr:last-child td { border-bottom: none; }

.ilist { margin: 8px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.7; }
.ilist li { margin-bottom: 5px; }

.tl { position: relative; margin-top: 12px; padding-left: 18px; border-left: 2px solid #e8e0cf; }
.tli { position: relative; padding: 0 0 16px 14px; }
.tli:last-child { padding-bottom: 0; }
.tli::before {
  content: ""; position: absolute; left: -25px; top: 5px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--acc);
  box-shadow: 0 0 0 3px #eaf2fa;
}
.tld { font-size: 12px; color: var(--acc); font-weight: 700; letter-spacing: .02em; }
.tlb b { font-size: 13.5px; }
.tlb .mini { margin-top: 2px; line-height: 1.6; }

.sect { padding: 12px 0; border-bottom: 1px dashed var(--line); }
.sect:last-child { border-bottom: none; }

@media (max-width: 760px) {
  .itab th:nth-child(1), .itab td:nth-child(1) { min-width: 78px; }
  .hdrprog { font-size: 11px; padding: 3px 8px; }
}

/* ================= 古兰经阅读器 ================= */
.qbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.qsws { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.qsw {
  border: none; background: #fffdf8; padding: 7px 15px; font-size: 13px;
  cursor: pointer; font-family: inherit; color: var(--ink3); border-right: 1px solid var(--line);
}
.qsw:last-child { border-right: none; }
.qsw.on { background: var(--acc); color: #fff; }
.qsw.shake { animation: qshake .35s; }
@keyframes qshake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }

.qbook {
  background: #fdfaf1; border: 1px solid #e7dcc2; border-radius: 3px 12px 12px 3px;
  padding: 26px 30px 16px 44px; position: relative; min-height: 320px;
  box-shadow: inset 26px 0 34px -30px rgba(120, 90, 40, .5), 0 8px 22px -16px rgba(80, 60, 20, .4);
}
.qbook::before {
  content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px; width: 1px;
  background: linear-gradient(#e2d5b6, #efe6cf, #e2d5b6);
}
.qhead { text-align: center; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid #eadfc6; }
.qhead .ar { font-size: 30px; line-height: 1.7; color: #0f3d2e; }
.qhead b { display: block; font-size: 17px; margin: 2px 0 6px; }
.qbasmal { font-size: 21px; margin-top: 6px; color: #1a5c46; line-height: 1.9; }

.qv { position: relative; padding: 12px 0 15px 42px; border-bottom: 1px dashed #ece1c8; }
.qv:last-child { border-bottom: none; }
.qa {
  font-family: var(--ar);
  font-size: var(--qa, 34px); line-height: 2.05; color: #141b17; margin: 4px 0 6px;
}
.qnum {
  position: absolute; left: 0; top: 12px;
  font-size: 13px; line-height: 1.8; color: #2f7d5a;
  background: #eef6f1; border: 1px solid #cfe3d6; border-radius: 999px;
  padding: 0 8px; font-family: inherit; white-space: nowrap;
}
.qz { font-size: var(--qz, 16px); line-height: 1.85; color: #2a2a26; }
.qt { font-size: var(--qt, 13px); line-height: 1.7; color: #8a7a5f; font-style: italic; margin-top: 4px; }
.qfoot { text-align: center; font-size: 12px; color: var(--ink3); margin-top: 10px; }
.qload { text-align: center; color: var(--ink3); padding: 46px 0; font-size: 13px; }

.qmodal { display: none; position: fixed; inset: 0; background: rgba(20, 24, 20, .42); z-index: 60; align-items: center; justify-content: center; padding: 20px; }
.qmodal.on { display: flex; }
.qmbox { background: #fffdf7; border: 1px solid var(--line); border-radius: 14px; padding: 18px; width: 100%; max-width: 430px; box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .4); }

/* ================= 饮食分级 ================= */
.ftags { gap: 6px; }
.ftag {
  font-size: 12px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: #fffdf8; cursor: pointer; font-family: inherit; color: var(--ink2);
}
.ftag.on { background: var(--acc); border-color: var(--acc); color: #fff; }
.flist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.fcard { background: #fffef9; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; cursor: pointer; }
.fcard .a { font-size: 22px; }
.fzh { font-size: 14px; font-weight: 600; margin: 2px 0 4px; }
.ftagbadge { font-size: 11px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; font-weight: 600; }
.f-A1 { background: #e6f4e6; color: #24622a; }
.f-A2 { background: #eef7e4; color: #42721f; }
.f-A3 { background: #e8f2ea; color: #2c6b4f; }
.f-B1 { background: #fbe6e4; color: #a52a22; }
.f-B2 { background: #fdeee2; color: #a3541e; }
.f-B3 { background: #f7e8e0; color: #8f4a2c; }
.f-C  { background: #f0eee7; color: #6c6656; }

@media (max-width: 760px) {
  .qbook { padding: 18px 12px 12px 20px; }
  .qv { padding-left: 34px; }
  .qnum { font-size: 12px; padding: 0 6px; }
  .qa { font-size: var(--qa, 27px); line-height: 1.95; }
  .qz { font-size: var(--qz, 15px); }
  .qc { font-size: var(--qc, 14px); }
  .qt { font-size: var(--qt, 12px); }
  .qbar select { max-width: 100%; }
}

/* 古兰经：中文音译行 */
.qc { font-size: var(--qc, 15px); line-height: 1.8; color: #6b4a1f; margin-top: 5px; letter-spacing: .02em; }
@media (max-width: 760px) { .qc { font-size: 13.5px; } }

/* 饮食分级：适用前提徽章 */
.fprem {
  display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 500;
  padding: 2px 7px; border-radius: 6px; background: #eef2f6; color: #3d5a70;
  border: 1px solid #dbe4ec; vertical-align: 1px;
}

/* 概览数据左对齐 */
.ovrow { display: flex; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px dashed var(--line); flex-wrap: wrap; }
.ovrow:last-child { border-bottom: none; }
.ovlab { font-size: 12px; color: var(--ink2); min-width: 96px; flex: 0 0 auto; }
.ovval { font-size: 13.5px; color: var(--ink); flex: 0 0 auto; }
.ovnote { font-size: 11.5px; color: var(--ink3); margin-left: auto; text-align: right; flex: 1 1 180px; }

/* 伊斯兰历 */
.calrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.calbox { flex: 1 1 0; min-width: min(150px, 100%); background: #fbf8f0; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; }
.calbox b { display: block; font-size: 13.5px; margin: 2px 0; }
.calgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.calout { display: flex; gap: 10px; flex-wrap: wrap; }

/* 首屏加载提示 */
.boot {
  text-align: center; color: var(--ink3); font-size: 13px;
  padding: 60px 12px; letter-spacing: .04em;
}
.boot::before {
  content: ""; display: block; width: 26px; height: 26px; margin: 0 auto 14px;
  border: 2px solid #e3dcc9; border-top-color: var(--acc); border-radius: 50%;
  animation: bootspin .9s linear infinite;
}
@keyframes bootspin { to { transform: rotate(360deg); } }

/* 播放状态与备用发音开关 */
/* 播放提示：脱离文档流做成浮层，出现/消失都不改变头部宽度 */
.hdrplay {
  position: fixed; left: 14px; bottom: 14px; z-index: 70;
  font-size: 12px; padding: 5px 11px; border-radius: 999px;
  background: #eaf6ea; color: #2f6b2f; border: 1px solid #cfe3c4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: min(52vw, 320px);
  direction: ltr; unicode-bidi: plaintext;   /* 中阿混排时保持「标签在左、词在右」 */
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .35);
}
@media (max-width: 760px) { .hdrplay { left: 10px; bottom: 10px; max-width: 60vw; } }
.hdrtts {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  background: #fffdf8; color: var(--ink3); border: 1px solid var(--line);
  font-family: inherit; white-space: nowrap;
}
.hdrtts.on { background: #fdf1e3; color: #a3541e; border-color: #efd9bd; }
@media (max-width: 760px) {
  .hdrtts, .hdrplay { font-size: 11px; padding: 2px 7px; }
}

/* 停止发声按钮 */
.hdrstop {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  background: #fdf0ee; color: #a52a22; border: 1px solid #f0d3ce;
  font-family: inherit; white-space: nowrap;
}
.hdrstop:hover { background: #fbe3df; }
@media (max-width: 760px) { .hdrstop { font-size: 11px; padding: 2px 7px; } }

/* 播放日志 */
.playlog {
  max-height: 240px; overflow: auto; font-size: 11.5px; line-height: 1.7;
  background: #fbfaf6; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
}
.playlog > div { padding: 4px 0; border-bottom: 1px dashed #eee7d8; }
.playlog > div:last-child { border-bottom: none; }

/* 词汇/常用语：「标记已学」按钮 */
.wm {
  font-size: 11px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: #fffdf8; color: var(--ink3); font-family: inherit;
}
.wm.on { background: #e8f4e4; border-color: #cfe3c4; color: #2f5a12; font-weight: 600; }

/* 古兰经字号弹层 */
.frow { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.frow > span { font-size: 12px; color: var(--ink2); min-width: 108px; }
.frow input[type=range] { flex: 1; min-width: 0; }
.frow b { font-size: 12px; min-width: 26px; text-align: right; }

/* 头部：阿语字体选择器 */
.hdrfont {
  font-size: 12px; padding: 3px 6px; border-radius: 8px;
  border: 1px solid var(--line); background: #fffdf8; color: var(--ink2);
  font-family: inherit; max-width: 132px;
}
.hdrfont:hover { border-color: var(--acc); }
@media (max-width: 760px) { .hdrfont { font-size: 11px; padding: 2px 4px; max-width: 104px; } }

/* 轻提示 toast */
#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px);
  background: rgba(26, 34, 28, .92); color: #fff; font-size: 13px; line-height: 1.5;
  padding: 9px 15px; border-radius: 10px; max-width: min(520px, 90vw);
  opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s; z-index: 90;
}
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== 输入框统一 RTL（阿拉伯语输入习惯） =====
   只作用于文本类输入；number / date / range / file / checkbox 保持 LTR，
   否则滑块方向会反过来、日期控件会错位 */
input[type="text"],
input[type="search"],
input:not([type]),
textarea {
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;   /* 中/英片段仍按自身方向排版，只是整体靠右 */
}
input[type="text"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
  text-align: right;
  direction: rtl;
}

/* ===== 字母四体对照总表 ===== */
.lwrap {
  overflow-x: auto; border: 1px solid var(--line); border-radius: 10px;
  background: #fffdf8;
}
.ltab { width: 100%; border-collapse: collapse; }
.ltab th {
  font-size: 12px; font-weight: 600; color: var(--ink3); white-space: nowrap;
  padding: 9px 8px; background: #f6f2e8; border-bottom: 1px solid var(--line);
}
.ltab td {
  padding: 7px 8px; text-align: center;
  border-bottom: 1px dashed #ece4d2; vertical-align: middle;
}
.ltab tr:last-child td { border-bottom: none; }
.ltab tbody tr { cursor: pointer; }
.ltab tbody tr:hover td { background: #fbf7ec; }
.ltab .lc { font-family: var(--ar); font-size: 28px; line-height: 1.4; color: var(--ink); }
.ltab .lg { font-family: var(--ar); font-size: 32px; line-height: 1.55; color: #141b17; }
.ltab .fg { display: inline-block; }
.ltab .ln {
  text-align: left; font-size: 12.5px; color: var(--ink2);
  white-space: nowrap; min-width: 96px;
}
.ltab .lzh { display: block; font-size: 11px; color: var(--ink3); margin-top: 1px; }
/* 断连字母：词首形与原型相同，底色提示 */
.ltab tr.brk td:nth-child(4) { background: #f4f0e6; }
.ltab tr.brk:hover td:nth-child(4) { background: #efe9db; }

@media (max-width: 760px) {
  .ltab th { font-size: 11px; padding: 7px 4px; }
  .ltab td { padding: 6px 4px; }
  .ltab .lc { font-size: 24px; }
  .ltab .lg { font-size: 26px; }
  .ltab .ln { font-size: 11.5px; min-width: 74px; }
  .ltab .lzh { font-size: 10px; }
}

/* ===== 中阿互译面板 ===== */
.trLbl { display: block; font-size: 12px; color: var(--ink3); margin-bottom: 5px; font-weight: 600; }

/* 原文：大输入区，约占面板一半高度 */
#trIn {
  width: 100%; min-height: clamp(220px, 34vh, 360px);
  line-height: 1.7;
  /* 覆盖全局 textarea 的 RTL 规则：中文左对齐，含阿语时由 .ar 切回 RTL */
  direction: ltr; text-align: left;
}
/* 输入阿拉伯语时自动切到用户选的阿语字体 */
#trIn.ar { font-family: var(--ar); font-size: 20px; direction: rtl; text-align: right; }

/* 译文：纯展示区 + 字号调节 */
.trOutHd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.trTools { display: inline-flex; align-items: center; gap: 8px; }
.trTools #trSay {
  padding: 3px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: #fffdf8; color: var(--ink2);
  font-size: 12px; font-weight: 600; cursor: pointer; line-height: 1.75;
  white-space: nowrap;
}
.trTools #trSay:hover { border-color: var(--acc); color: var(--acc); }
.trTools #trSay.on { background: var(--acc-soft); border-color: var(--acc); color: var(--acc); }
.trZoom { display: inline-flex; align-items: center; gap: 3px; }
.trZoom button {
  padding: 2px 9px; border-radius: 6px; border: 1px solid var(--line);
  background: #fffdf8; color: var(--ink2); font-size: 12px; font-weight: 700;
  cursor: pointer; line-height: 1.7;
}
.trZoom button:hover { border-color: var(--acc); color: var(--acc); }
.trZoom b { min-width: 24px; text-align: center; font-size: 11.5px; color: var(--ink3); font-weight: 600; }

.trOut {
  min-height: 150px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fffdf8; color: var(--ink);
  line-height: 1.85; white-space: pre-wrap; word-break: break-word;
  font-size: 22px;
}
/* 阿拉伯语译文用用户选的阿语字体 */
.trOut.ar { font-family: var(--ar); line-height: 2.05; }
.trOut:empty::before {
  content: "译文会显示在这里";
  color: var(--ink3); font-size: 13px; line-height: 1.7; font-family: inherit;
}

@media (max-width: 720px) {
  #trIn { min-height: 210px; }
  .trOut { min-height: 118px; padding: 12px; }
}

.arAnaBox {
  border: 1px solid var(--line); border-radius: 10px;
  background: #fffdf8; padding: 12px 14px; margin-top: 12px;
}
.arAnaHd { font-size: 12px; font-weight: 700; color: var(--ink2); margin-bottom: 6px; }
.arAnaRow { display: flex; gap: 10px; align-items: flex-start; margin-top: 7px; }
.arAnaLbl { flex: 0 0 58px; font-size: 11.5px; color: var(--ink3); padding-top: 6px; }
.arLat {
  /* Segoe UI 放最前：等宽字体常缺 ʿ 等注音符号的字形 */
  font-family: "Segoe UI", ui-monospace, Consolas, "Courier New", monospace;
  font-size: 13px; line-height: 1.75; color: var(--ink);
  background: #f6f2e8; padding: 3px 9px; border-radius: 6px;
  word-break: break-word;
}
/* 容器 RTL：词内字母从右往左排（与阿拉伯语阅读方向一致）；块内部强制 LTR 以免拉丁名错位 */
.arChips { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; padding-top: 2px; direction: rtl; }
.arChip {
  display: inline-flex; flex-direction: column; align-items: center; direction: ltr;
  min-width: 44px; padding: 4px 7px 3px; border-radius: 8px;
  background: #fff; border: 1px solid var(--line); cursor: pointer;
  transition: transform .1s, border-color .15s, box-shadow .15s;
}
.arChip:hover { border-color: var(--acc); box-shadow: 0 3px 10px -5px rgba(0, 0, 0, .3); }
.arChip:active { transform: scale(.95); }
.arChip .ch { font-family: var(--ar); font-size: 22px; line-height: 1.35; color: var(--ink); }
.arChip .nm { font-size: 10px; color: var(--ink3); margin-top: 1px; white-space: nowrap; }
.arChip.off { opacity: .4; cursor: default; }
.arSp { width: 10px; }

/* ===== 资源分享 ===== */
.shareWrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 12px;
}
.shareEmpty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink3);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 44px 16px;
  background: #fffdf8;
  font-size: 13px;
}

@media (max-width: 560px) {
  .arAnaRow { flex-direction: column; gap: 5px; }
  .arAnaLbl { padding-top: 0; }
  .arChip { min-width: 40px; }
  .arChip .ch { font-size: 20px; }
}