/* ============================================================
 * 素养工坊（原「AI 素养护照」· 2026-10-16 更名）· SPA 三屏壳（中屏对话流 + 右屏素养看板/伦理）样式
 * 2026-10-16 重构：左栏对话流搬到中屏（替代 AiSidePanel，统一错题本对话风格），
 *   进度环上移到中屏顶部（替代原 hero），「三件要紧事」伦理卡移到右屏。
 * 色值全部走 .myquest-shell 作用域令牌，深浅双色自动跟随、对宿主页零污染。
 * ============================================================ */
/* 中屏：满高 flex 列 = 内容区自滚 + 底栏常驻（与错题本 .eb-chat / .eb-dock 同范式）。
   --ail-gutter 取 44px：与 app.html 的 xb-app 通用中屏留白（quest-shell.css:151）同值，
   底栏用等值负边距咬合 ⇒ 底栏背景/分隔线满宽、内容仍与正文列左右对齐。 */
/* [2026-10-16 PM「中间屏和下面的输入框往中间移」] 居中真源 = **内容列中心 ↔ 视口中心**。
   演进三段（均由 PM 截图驱动）：
     初版：中屏 flex:1 撑满 + 内容列 max-width:968 自身居中 + 看板贴最右
           ⇒ 内容右缘与看板左缘间甩出 300+ 空白（PM「右边屏离中间屏太远」）。
     二版：壳 justify-content:center ⇒「中屏1036 + 看板320」整组居中、两列紧邻
           （24 间距含在中屏 1036 基宽内作右 padding，看板与中屏右缘相邻 ⇒ 群组实宽 1356）。
           副作用：内容列中心 = (壳宽−1356)/2 + 528 = 壳宽/2 − 150 ⇒ 恒比视口中心偏左
           150px（1600/1440/1300 三档实测内容列中心均为 vw/2−150）⇒ PM「最主要工作区，视线偏左」。
     三版（本批）：≥1724px 壳改 flex-start，中屏 margin-left = (壳宽 − 1056)/2
           （1056 = 2×左留白44 + 内容列968 = 内容列精确居中所需左右总占位）
           ⇒ 内容列中心精确 = 壳宽/2（1885 实测偏差 0.5px）；看板不参与居中，紧随中屏
           右侧悬挂（右缘留白 = 壳宽/2 − 828：1885 下 ≈114px、1724 下 ≈34px）。
           底栏 .ail-dock 左右内边距由 ailFitDock 实测 .ail-main 位置回填 ⇒ 输入框
           随中屏一同居中，无需改 JS。
           <1724px 回落二版整组居中：看板贴视口右缘的临界为 1656（= 2×828），断点取
           1724 = 临界 + 68 缓冲；更窄时看板 320 恒宽会挤出右缘，可见性优先
           （PM「看板别太远」的形态保留）。
   ⚠ 为什么不能给壳写 max-width + margin:auto：desktop.css 的 min-width:781px 段对三栏壳族有
     body:has(.myquest-shell) .main > .myquest-shell{
       max-width:none !important; margin-left:0 !important; margin-right:0 !important }
     —— 壳必须「通栏」（全站共识：左栏贴浏览器左边、消除左右白边），带 !important 不可对抗，
     实测本页 max-width 被压成 none（连内联 style 都读回 none）。故居中一律在**壳内部**做。 */
.myquest-shell.ai-literacy-shell{
  --ail-gutter:44px;   /* 内容列左侧留白（与全站 xb-app 中屏 44 节奏同值） */
  --ail-gap:24px;      /* 内容列右缘 ↔ 右看板左缘（错题本两列间的同款间距） */
  --ail-w:968px;       /* 内容列上限宽 */
  justify-content:center;   /* <1724px 回落态：整组居中（见上方注释三版） */
  /* [2026-10-16 PM「左右两边的底色要与中间屏底色一样」] 画布统一：
     壳原本透明 ⇒ 中屏两侧的留白透出宿主 body 的奶油底 #FFF6F0（+ main.main 的紫光晕），
     与中屏 #FCFAFF 冷暖不接，整页像「中间一块冷板贴在另一种暖底上」。
     给壳铺上中屏同款令牌（--mq-main-bg：浅 #FCFAFF / 深 #151229）⇒ 中屏与其两侧留白连成一片，
     深浅双色自动跟随；顶栏(.top-nav)与底栏(.ail-dock)各自底色不受影响。
     ⚠ 只染壳，不动宿主 body / main.main（那是全站画布，属共享层）。 */
  background:var(--mq-main-bg,#FCFAFF);
}
.ai-literacy-shell > .mq-main{
  /* [2026-10-16 PM] 底栏改为 fixed 通栏（见下方 .ail-dock）后，它不再占中屏高度 ⇒ 这里扣掉
     --ail-dock-h（JS 实测写入，兜底 108）。也不再减原来的 16px 底部留白：坞已贴视口底，
     中屏内容底（= 视口底 − 坞高）正好接在坞的上沿，下沿不再需要留缝。 */
  height:calc(100vh - var(--mq-top) - var(--ail-dock-h,108px));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  /* flex-basis = 44(左) + 968(内容) + 24(右) = 1036；写死而不写 calc()：此处数值由上面三个
     令牌相加而来，改宽度时三处需同步。shrink:1 保证窄视口下中屏收缩而非溢出。 */
  flex:0 1 1036px;
  /* 按页压回中屏左右留白（44 / 24）：quest-shell.css:151 那条 xb-app 规则带 4 个 :not()，
     特异性 (0,7,0)，普通声明赢不了；本项目的既有做法 = 按页 !important 压回
     （同 physics-shell.css:73 / subpage-top-nav.css 的按页压回先例）。
     ⚠ 若某天 quest-shell.css 改了中屏 padding 口径，这一行需同步复核。 */
  padding:0 var(--ail-gap) 0 var(--ail-gutter) !important;
}
/* [2026-10-16 PM] ≥1724px：内容列以视口中心为居中真源（完整演进见上方注释）。
   margin-left 百分比对壳宽解析；1056 = 2×--ail-gutter + --ail-w ⇒ 内容列左缘
   = (壳宽 − 1056)/2 + 44，内容列中心 = 壳宽/2（精确居中，偏差 0）。
   看板 flex:0 0 320 紧随其后，右缘留白 = 壳宽/2 − 828（看板贴右缘临界 1656，
   断点 1724 = 临界 + 68 缓冲 ⇒ 留白 ≥34px）。
   特异性 (0,2,0) 与本文件其余 .mq-main 规则同级、源序在后 ⇒ 无需 !important；
   quest-shell.css:151 的 xb-app 规则只钉 padding 不碰 margin，无冲突。 */
@media (min-width:1724px){
  .myquest-shell.ai-literacy-shell{ justify-content:flex-start; }
  .ai-literacy-shell > .mq-main{
    margin-left:calc((100% - var(--ail-gutter) * 2 - var(--ail-w)) / 2);
  }
}
/* 内容区（页头 + 对话流）整体自滚：版块往上滚走，把高度让给对话；底栏不参与滚动 */
.ai-literacy-shell .ail-main{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  max-width:var(--ail-w,968px);
  width:100%;
  margin:0 auto;
  padding:16px 0 8px;
}
/* 顶部区块：标题 + 进度环 + 练习场（在滚动区内，可被滚走） */
.ai-literacy-shell .ail-chat-hd{ margin-bottom:2px; }
.ai-literacy-shell .ail-hd-title{ font-size:17px; font-weight:800; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.ai-literacy-shell .ail-hd-sub{ font-size:12.5px; color:var(--muted,#665E85); font-weight:600; }
/* [T-A 2026-10-17 素养练习挂学科场景] 学科锚点条：只有这一局真挂了学科上下文才渲染
   （无 ⇒ 空元素，用 :empty 收掉，不占位、不留一条空缝）。 */
.ai-literacy-shell .ail-ctx:empty{ display:none; }
.ai-literacy-shell .ail-ctx-chip{ display:inline-flex; align-items:center; gap:8px; margin-top:10px;
  padding:7px 8px 7px 13px; border:1px solid var(--hair,#E7DEFB); border-radius:999px;
  background:var(--surface-2,#F5F0FF); font-size:12.5px; color:var(--muted,#665E85);
  line-height:1.4; max-width:100%; }
.ai-literacy-shell .ail-ctx-ico{ font-size:13px; }
.ai-literacy-shell .ail-ctx-t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ai-literacy-shell .ail-ctx-chip b{ color:var(--accent,#7F4AE0); font-weight:800; }
.ai-literacy-shell .ail-ctx-sub{ color:var(--muted,#665E85); }
.ai-literacy-shell .ail-ctx-x{ flex:0 0 auto; border:0; background:#fff; color:var(--muted,#665E85);
  width:20px; height:20px; border-radius:50%; cursor:pointer; font-size:11px; line-height:1;
  display:grid; place-items:center; font-family:inherit; padding:0;
  box-shadow:0 1px 4px rgba(127,74,224,.18); transition:.14s; }
.ai-literacy-shell .ail-ctx-x:hover{ background:var(--accent,#7F4AE0); color:#fff; }
/* 进度环 */
.ai-literacy-shell .ail-rings{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.ai-literacy-shell .ail-ring{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:10px 6px; border:1px solid var(--hair,#EAE4F6); border-radius:14px; background:var(--surface-2,#F5F0FF); transition:.16s; }
/* [2026-10-15 创造力陪练] 四维全部转正（judge/create 不再「备着」）=> 撤掉预留态样式。 */
.ai-literacy-shell .ail-ring-svg{ width:78px; height:78px; }
.ai-literacy-shell .ail-ring-track{ fill:none; stroke:var(--hair,#EAE4F6); stroke-width:8; }
.ai-literacy-shell .ail-ring-bar{ fill:none; stroke:var(--accent,#7F4AE0); stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset .5s ease; }
.ai-literacy-shell .ail-ring-num{ font-size:15px; font-weight:900; fill:var(--ink,#221838); font-variant-numeric:tabular-nums; }
.ai-literacy-shell .ail-ring-name{ font-size:13px; font-weight:800; margin-top:6px; }
.ai-literacy-shell .ail-ring-meta{ font-size:11px; color:var(--muted,#665E85); margin-top:1px; }
.ai-literacy-shell .ail-ring-tag{ display:inline-block; font-size:10px; color:var(--accent,#7F4AE0); background:var(--surface-2,#F0EBFF); padding:1px 7px; border-radius:20px; margin-top:5px; }
/* 练习场 */
.ai-literacy-shell .ail-prac-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
.ai-literacy-shell .ail-pcard{ background:var(--mq-board-bg,#fff); border:1px solid var(--hair,#EAE4F6); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:8px; transition:.16s; }
.ai-literacy-shell .ail-pcard:hover{ border-color:var(--accent,#7F4AE0); box-shadow:0 12px 30px -22px rgba(127,74,224,.6); }
.ai-literacy-shell .ail-pcard-h{ display:flex; align-items:center; gap:9px; }
.ai-literacy-shell .ail-pcard-ico{ width:32px; height:32px; border-radius:10px; background:var(--surface-2,#F0EBFF); color:var(--accent,#7F4AE0); display:grid; place-items:center; font-size:17px; flex:0 0 auto; }
.ai-literacy-shell .ail-pcard-t{ font-size:14.5px; font-weight:800; }
.ai-literacy-shell .ail-pcard-d{ font-size:12.5px; color:var(--muted,#665E85); flex:1; line-height:1.6; }
/* [2026-10-15 点火包 2 · T4 分龄螺旋] 练习场 5 张卡（2 基础 + 3 共创），卡序由 JS 按分龄 tier 重排
   （AIL_TIER_ORDER）。这里只负责：分龄提示条、共创卡微区分、按档追加的脚手架提示行、末张补满半行。 */
.ai-literacy-shell .ail-tier-tip{ font-size:12.5px; color:var(--muted,#665E85); background:var(--surface-2,#F5F0FF);
  border:1px solid var(--hair,#EAE4F6); border-radius:10px; padding:9px 13px; margin-top:14px; line-height:1.6; }
.ai-literacy-shell .ail-pcard-cc{ border-color:var(--hair,#E7DEFB); }
.ai-literacy-shell .ail-pcard-tip{ font-size:12px; color:var(--accent,#7F4AE0); background:var(--surface-2,#F0EBFF);
  border-radius:8px; padding:6px 10px; line-height:1.55; }
.ai-literacy-shell .ail-pcard-rec{ display:inline-block; margin-left:8px; font-size:10.5px; font-weight:800; color:#fff;
  background:var(--accent,#7F4AE0); border-radius:20px; padding:1.5px 8px; vertical-align:1px; }
/* 5 张卡落在 2 列网格上 => 末张（奇数位）跨满整行，不留半空 */
.ai-literacy-shell .ail-prac-row > .ail-pcard:last-child:nth-child(odd){ grid-column:1 / -1; }
.ai-literacy-shell .ail-pbtn{ align-self:flex-start; border:0; border-radius:10px; padding:8px 16px; background:var(--accent,#7F4AE0); color:#fff; font-size:13px; font-weight:800; cursor:pointer; font-family:inherit; box-shadow:0 4px 13px rgba(127,74,224,.34); transition:transform .14s,box-shadow .14s; }
.ai-literacy-shell .ail-pbtn:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(127,74,224,.44); }
/* 对话流（错题本风格：小伴头像在左、用户在右）；滚动交给 .ail-main，这里只排版 */
.ai-literacy-shell .ail-conv{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px 0 6px;
}
.ai-literacy-shell .ail-msg{ display:flex; gap:10px; align-items:flex-start; }
.ai-literacy-shell .ail-msg-me{ flex-direction:row-reverse; }
.ai-literacy-shell .ail-av{ width:34px; height:34px; border-radius:50%; overflow:hidden; flex:0 0 auto; background:var(--surface-2,#F0EBFF); display:grid; place-items:center; }
.ai-literacy-shell .ail-av img{ width:100%; height:100%; object-fit:cover; }
.ai-literacy-shell .ail-bubble{ max-width:74%; padding:10px 13px; border-radius:14px; font-size:13.5px; line-height:1.7; word-break:break-word; white-space:pre-wrap; }
.ai-literacy-shell .ail-bubble-ai{ background:var(--surface-2,#F0EBFF); color:var(--ink,#221838); border:1px solid var(--hair,#E7DEFB); border-top-left-radius:4px; }
.ai-literacy-shell .ail-bubble-me{ background:var(--accent,#7F4AE0); color:#fff; border-top-right-radius:4px; }
/* 底部输入坞：[2026-10-16 PM 反馈「底栏宽度从左到右铺满全屏，高度不变」]
   原实现是 .mq-main 内的等宽条（负边距咬合到中屏宽 1036px）—— 中屏本身只占视口中间一段
   （1920 下 282~1318），坞跟着中屏走 ⇒ 永远铺不满屏。改为脱离中屏的 **fixed 通栏**：
     position:fixed + left:0/right:0/bottom:0 ⇒ 宽度恒等于视口宽（用 left/right 而非 width:100vw，
     避免纵向滚动条宽度造成的横向溢出），高度仍由内容撑（快捷行 + 文本行），不写死 ⇒ 高度不变。
     ⚠ 用 fixed 的前提（已实测）：本页 shell 到 <html> 全链无 transform/filter/will-change/contain
     祖先（探针 blockers=[]），否则 fixed 会以该祖先为包含块、拿不到视口宽。
   坞内容左右内边距由 JS 实测「正文列相对视口的位置」写入（--ail-dock-pl/pr）⇒ 输入框仍与
   上方正文列严格左右对齐；变量未写入时回落 44/24（= 原中屏左右留白），不会崩。 */
.ai-literacy-shell .ail-dock{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:50;               /* 顶栏 .app-top-nav .top-nav 为 60，坞不高过顶栏 */
  border-top:1px solid var(--hair,#EAE4F6);
  background:var(--mq-main-bg,#FCFAFF);
  padding:10px var(--ail-dock-pr,24px) 12px var(--ail-dock-pl,44px);
}
/* 坞内容不再需要自身限宽居中：宽度已由上面的实测内边距界定（= 正文列宽） */
.ai-literacy-shell .ail-dock-in{ max-width:none; margin:0; }
/* 右看板同步让出坞高：坞现在通栏到视口右缘，会盖住看板底部 108px（原看板高 = 100vh−top−16）。
   减高到坞上沿即可；看板自身 overflow-y:auto，减高后仍能滚到最后一卡。 */
.ai-literacy-shell > .mq-board{
  height:calc(100vh - var(--mq-top) - var(--ail-dock-h,108px));
}
.ai-literacy-shell .ail-dock-quick{ display:flex; gap:8px; margin-bottom:9px; flex-wrap:wrap; }
.ai-literacy-shell .ail-quick{ border:1px solid var(--hair,#EAE4F6); background:var(--mq-board-bg,#fff); color:var(--accent,#7F4AE0); font-size:12.5px; font-weight:800; border-radius:999px; padding:7px 14px; cursor:pointer; font-family:inherit; transition:border-color .14s; }
.ai-literacy-shell .ail-quick:hover{ border-color:var(--accent,#7F4AE0); }
.ai-literacy-shell .ail-dock-row{ display:flex; align-items:flex-end; gap:8px; }
.ai-literacy-shell .ail-dock-row textarea{ flex:1 1 auto; resize:none; min-height:42px; max-height:120px; border:1px solid var(--hair,#EAE4F6); border-radius:12px; padding:11px 13px; font:inherit; font-size:13.5px; line-height:1.5; color:var(--ink,#221838); background:var(--mq-board-bg,#fff); }
.ai-literacy-shell .ail-dock-row textarea:focus{ outline:none; border-color:var(--accent,#7F4AE0); }
.ai-literacy-shell .ail-dock-ico{ width:38px; height:38px; flex:0 0 auto; border-radius:999px; border:1px solid var(--hair,#EAE4F6); background:var(--mq-board-bg,#fff); color:var(--muted,#665E85); font-size:16px; line-height:1; cursor:pointer; display:inline-flex; justify-content:center; align-items:center; padding:0; font-family:inherit; transition:border-color .14s,color .14s,background .14s; }
.ai-literacy-shell .ail-dock-ico:hover{ border-color:var(--accent,#7F4AE0); color:var(--accent,#7F4AE0); }
.ai-literacy-shell .ail-dock-ico.is-on{ background:var(--accent,#7F4AE0); color:#fff; border-color:var(--accent,#7F4AE0); }
.ai-literacy-shell .ail-dock-send{ flex:0 0 auto; border:0; border-radius:12px; padding:0 18px; height:38px; background:var(--accent,#7F4AE0); color:#fff; font-size:13px; font-weight:800; cursor:pointer; font-family:inherit; box-shadow:0 4px 13px rgba(127,74,224,.34); transition:transform .14s,box-shadow .14s; }
.ai-literacy-shell .ail-dock-send:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(127,74,224,.44); }
/* [2026-10-16 底栏对齐] 待发送附件预览条（快捷行之上）——与思伴聊屋 .attach-preview 同一视觉语汇，
   只是作用域收到本壳内。色值全部走全站令牌（本文件不写 [data-theme] 分支，深浅色由变量自翻）。 */
.ai-literacy-shell .ail-att:empty{ display:none; }
.ai-literacy-shell .ail-att-box{ display:flex; align-items:center; gap:10px; width:fit-content; max-width:100%; padding:8px 40px 8px 10px; margin-bottom:8px; position:relative; border:1px solid var(--hair,#EAE4F6); border-radius:12px; background:var(--mq-board-bg,#fff); }
.ai-literacy-shell .ail-att-thumb{ max-width:120px; max-height:84px; border-radius:9px; border:1px solid var(--hair,#EAE4F6); object-fit:cover; }
.ai-literacy-shell .ail-att-doc{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:9px; background:var(--surface-2,#F0EBFF); font-size:13px; color:var(--ink,#221838); max-width:240px; }
.ai-literacy-shell .ail-att-doc-ico{ font-size:16px; flex:0 0 auto; }
.ai-literacy-shell .ail-att-doc-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ai-literacy-shell .ail-att-x{ position:absolute; top:6px; right:8px; width:22px; height:22px; border-radius:50%; border:0; cursor:pointer; background:var(--ink,#221838); color:var(--mq-board-bg,#fff); font-size:12px; line-height:1; display:grid; place-items:center; font-family:inherit; }
.ai-literacy-shell .ail-att-x:hover{ background:#E5484D; color:#fff; }
.ai-literacy-shell .ail-att-hint{ font-size:12px; color:var(--muted,#665E85); }
/* [2026-10-16] 轻 Toast（附件就绪等）在本页的两个必要修正。
   ① 全局 .gh-toast 是 fixed;bottom:48px —— 本页坞已 fixed 贴视口底，48px 正好被坞压住看不见
      ⇒ 改为从顶部定位（与 #/screen 同款思路），永远不会盖住输入行。
   ② 全局 .gh-toast 拿 --ink 当**底色**、文字恒 #fff，而暗色主题下 --ink 是近白
      ⇒ 白字白底（真机截图实测：只剩一个白色空方块）。此处按「暗但清晰」层级给深卡底。
   **仅本壳作用域**；共享 desktop.css 的同名全局缺陷属其它任务线在途范围，不在本批改动。 */
body:has(.ai-literacy-shell) .gh-toast{ bottom:auto; top:132px; }
[data-theme="dark"] body:has(.ai-literacy-shell) .gh-toast{
  background:#2D2748; color:#FFFFFF;
  box-shadow:0 0 0 1px #3A3164,0 8px 24px rgba(0,0,0,.55);
}
/* 右屏伦理卡（单列堆叠，板宽 320px） */
.ai-literacy-shell .ail-board-ethics{ display:flex; flex-direction:column; gap:10px; }
.ai-literacy-shell .ail-ecard{ border:1px solid var(--hair,#EAE4F6); border-radius:14px; padding:14px; background:var(--mq-board-bg,#fff); }
.ai-literacy-shell .ail-ecard-h{ font-size:13px; font-weight:800; display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.ai-literacy-shell .ail-ecard-ico{ width:22px; height:22px; border-radius:7px; background:var(--surface-2,#F0EBFF); color:var(--accent,#7F4AE0); display:grid; place-items:center; font-size:13px; flex:0 0 auto; }
.ai-literacy-shell .ail-ecard-d{ font-size:12px; color:var(--muted,#665E85); line-height:1.6; }
/* 解读（保留做右屏底部说明） */
.ai-literacy-shell .ail-interp{ margin-top:14px; background:var(--surface-2,#F5F0FF); border:1px solid var(--hair,#EAE4F6); border-radius:14px; padding:15px 17px; font-size:13px; color:var(--ink,#221838); line-height:1.8; }
.ai-literacy-shell .ail-interp b{ color:var(--accent,#7F4AE0); }
.ai-literacy-shell .ail-k{ display:inline-block; background:var(--surface-2,#F0EBFF); color:var(--accent,#7F4AE0); border-radius:6px; padding:1px 7px; font-size:12px; font-weight:700; margin:0 2px; }
@media (max-width:680px){
  .ai-literacy-shell .ail-rings{ grid-template-columns:repeat(2,1fr); }
  .ai-literacy-shell .ail-prac-row{ grid-template-columns:1fr; }
}
/* <1100px 右看板按壳规范收起（quest-shell.css:247）⇒ 无需再为它预留右侧 320，
   中屏回到 flex:1 撑满 + 左右对称留白，内容列自身的 max-width 居中。 */
@media (max-width:1100px){
  .ai-literacy-shell > .mq-main{ flex:1 1 auto; width:auto; padding:0 var(--ail-gutter) !important; }
}
/* ≤900px 壳改上下堆叠（quest-shell.css:249 flex-direction:column）⇒ 中屏那条 flex-basis 会落到
   交叉轴变成「高度」，1036px 会把中屏撑成一条 1036px 高的长条。此处改回按内容自然收 + 横满。 */
@media (max-width:900px){
  .ai-literacy-shell > .mq-main{ flex:0 0 auto; width:100%; padding:0 20px !important; }
  /* 堆叠模式整页可滚（看板落到中屏下方）：坞已脱离文档流贴视口底，给壳留出坞高，
     保证滚到最底时看板最后一卡不被坞压住。 */
  .ai-literacy-shell{ padding-bottom:var(--ail-dock-h,108px); }
}

/* ===== [B/C 2026-10-17 满星晋级] 跨维融合徽章 + 学科迁移 =========================
   视觉家族：沿用右屏看板既有的 .ail-ecard 血统（发丝描边 + 圆角 14 + 板底色），
   「已点亮」才给强调色 —— 未点亮一律素面，不靠灰底制造"缺失感"（不贴标签同源）。
   ⚠ 只染本壳内的类（.ai-literacy-shell 前缀），不动全站 token。 */
.ai-literacy-shell .ail-fus-card{ margin-top:14px; padding:16px; border:1px dashed var(--hair,#EAE4F6);
  border-radius:16px; background:var(--surface-2,#F5F0FF); display:flex; flex-direction:column; gap:9px; }
.ai-literacy-shell .ail-fus-lockline{ font-size:12.5px; font-weight:800; color:var(--muted,#665E85); }
.ai-literacy-shell .ail-fus-pick{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.ai-literacy-shell .ail-fus-chip{ display:flex; flex-direction:column; gap:2px; text-align:left; cursor:pointer;
  padding:10px 12px; border:1px solid var(--hair,#EAE4F6); border-radius:12px; background:var(--mq-board-bg,#fff);
  font:inherit; color:var(--ink,#221838); transition:.16s; }
.ai-literacy-shell .ail-fus-chip:hover{ border-color:var(--accent,#7F4AE0); }
.ai-literacy-shell .ail-fus-chip b{ font-size:13px; font-weight:900; }
.ai-literacy-shell .ail-fus-chip span{ font-size:11.5px; color:var(--muted,#665E85); }
.ai-literacy-shell .ail-fus-chip i{ font-size:11px; font-style:normal; color:var(--muted,#665E85); }
.ai-literacy-shell .ail-fus-chip.on{ border-color:var(--accent,#7F4AE0); background:var(--surface-2,#F0EBFF); }
.ai-literacy-shell .ail-fus-chip.on i{ color:var(--accent,#7F4AE0); font-weight:800; }
.ai-literacy-shell .ail-fus-lock{ font-size:12.5px; color:var(--muted,#665E85); line-height:1.75;
  background:var(--surface-2,#F5F0FF); border:1px solid var(--hair,#EAE4F6); border-radius:12px; padding:12px 14px; }
.ai-literacy-shell .ail-fus-lock b{ color:var(--ink,#221838); }
.ai-literacy-shell .ail-fus-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.ai-literacy-shell .ail-fus{ padding:11px 12px; border:1px solid var(--hair,#EAE4F6); border-radius:13px;
  background:var(--mq-board-bg,#fff); display:flex; flex-direction:column; gap:2px; transition:.16s; }
.ai-literacy-shell .ail-fus-n{ font-size:13px; font-weight:900; }
.ai-literacy-shell .ail-fus-d{ font-size:11px; color:var(--muted,#665E85); }
.ai-literacy-shell .ail-fus-s{ font-size:11px; color:var(--muted,#665E85); }
.ai-literacy-shell .ail-fus.on{ border-color:var(--accent,#7F4AE0); background:var(--surface-2,#F0EBFF); }
.ai-literacy-shell .ail-fus.on .ail-fus-n{ color:var(--accent,#7F4AE0); }
.ai-literacy-shell .ail-fus.on .ail-fus-s{ color:var(--accent,#7F4AE0); font-weight:800; }
.ai-literacy-shell .ail-mig-list{ display:flex; flex-direction:column; gap:7px; }
.ai-literacy-shell .ail-mig{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 12px; border:1px solid var(--hair,#EAE4F6); border-radius:11px; background:var(--mq-board-bg,#fff); }
.ai-literacy-shell .ail-mig-n{ font-size:12.5px; font-weight:800; }
.ai-literacy-shell .ail-mig-b{ font-size:11.5px; color:var(--muted,#665E85); font-variant-numeric:tabular-nums; }
.ai-literacy-shell .ail-mig.on{ border-color:var(--accent,#7F4AE0); background:var(--surface-2,#F0EBFF); }
.ai-literacy-shell .ail-mig.on .ail-mig-b{ color:var(--accent,#7F4AE0); font-weight:800; }
@media (max-width:680px){
  .ai-literacy-shell .ail-fus-grid{ grid-template-columns:1fr; }
  .ai-literacy-shell .ail-fus-pick{ grid-template-columns:1fr; }
}

/* ============================================================
 * [1137] 素养↔误区 联动报告（只读诊断视图）+ 顶部 tab
 *   复用本壳令牌（深浅双色自动跟随、对宿主页零污染），新增 .linkage-* 类，
 *   ⛔ 不抽公共层换肤（防雷同靠视觉母题，各自写）。
 * ============================================================ */
/* 顶部 tab 切换：分段控件，贴在内容列顶部 */
.ai-literacy-shell .ail-tabs{
  display:flex; gap:8px; flex:0 0 auto;
  padding:10px var(--ail-gutter,44px) 8px;
  border-bottom:1px solid var(--hairline, rgba(127,74,224,.14));
}
.ai-literacy-shell .ail-tab{
  appearance:none; border:1.5px solid var(--hairline, rgba(127,74,224,.22));
  background:var(--surface-2,#F0EBFF); color:var(--muted,#665E85);
  font-size:13.5px; font-weight:800; line-height:1;
  padding:9px 16px; border-radius:999px; cursor:pointer;
  transition:all .15s ease;
}
.ai-literacy-shell .ail-tab:hover{ border-color:var(--accent,#7F4AE0); color:var(--accent,#7F4AE0); }
.ai-literacy-shell .ail-tab.on{
  background:linear-gradient(135deg,var(--accent,#7F4AE0),var(--accent-2,#9A5CF0));
  border-color:transparent; color:#fff;
  box-shadow:0 4px 12px rgba(127,74,224,.28);
}
/* 联动报告视图：占满剩余高度、内部自滚 */
.ai-literacy-shell #ailLinkageView{ flex:1 1 auto; overflow:auto; }
.ai-literacy-shell #ailLinkageView[hidden]{ display:none; }
.ai-literacy-shell #ailPassportView[hidden]{ display:none; }
.ai-literacy-shell .linkage-wrap{ padding:14px var(--ail-gutter,44px) 22px; }
.ai-literacy-shell .linkage-loading,
.ai-literacy-shell .linkage-empty{
  color:var(--muted,#665E85); font-size:13.5px; line-height:1.7;
  padding:18px 16px; background:var(--surface-2,#F0EBFF);
  border:1px dashed var(--hairline, rgba(127,74,224,.22)); border-radius:12px;
}
/* 顶部一句话结论 */
.ai-literacy-shell .linkage-concl{
  background:linear-gradient(135deg, rgba(127,74,224,.12), rgba(154,92,240,.10));
  border:1px solid var(--hairline, rgba(127,74,224,.22));
  border-left:4px solid var(--accent,#7F4AE0);
  border-radius:12px; padding:13px 15px; margin-bottom:14px;
  font-size:14px; font-weight:700; line-height:1.7; color:var(--text,#2C2545);
}
/* 通用 section 卡片 */
.ai-literacy-shell .linkage-sec{
  background:var(--card-bg,#fff); border:1px solid var(--hairline, rgba(127,74,224,.14));
  border-radius:14px; padding:14px 15px; margin-bottom:13px;
}
.ai-literacy-shell .linkage-sec-h{
  font-size:13px; font-weight:900; letter-spacing:.3px; color:var(--accent,#7F4AE0);
  margin-bottom:11px;
}
/* 素养仪表盘（紧凑四维） */
.ai-literacy-shell .linkage-dims{ display:flex; flex-wrap:wrap; gap:10px; }
.ai-literacy-shell .linkage-dim{
  flex:1 1 90px; min-width:84px; text-align:center;
  background:var(--surface-2,#F0EBFF); border-radius:10px; padding:10px 6px;
}
.ai-literacy-shell .linkage-dim b{ display:block; font-size:13px; color:var(--text,#2C2545); }
.ai-literacy-shell .linkage-dim span{
  font-size:15px; font-weight:900; color:var(--accent,#7F4AE0);
  font-variant-numeric:tabular-nums;
}
/* 误区分布权重条 */
.ai-literacy-shell .linkage-mind{ display:flex; flex-direction:column; gap:9px; }
.ai-literacy-shell .linkage-mind-row{ display:flex; align-items:center; gap:10px; }
.ai-literacy-shell .linkage-mind-lab{
  flex:0 0 78px; font-size:12.5px; font-weight:800; color:var(--text,#2C2545);
  display:flex; flex-direction:column; gap:2px;
}
.ai-literacy-shell .linkage-core{
  font-size:10px; font-weight:800; color:#B23A48;
  background:rgba(178,58,72,.12); border-radius:6px; padding:1px 5px; width:fit-content;
}
.ai-literacy-shell .linkage-bar{
  flex:1 1 auto; height:11px; border-radius:7px; overflow:hidden;
  background:var(--surface-2,#F0EBFF);
}
.ai-literacy-shell .linkage-bar i{
  display:block; height:100%; border-radius:7px;
  background:linear-gradient(90deg,var(--accent,#7F4AE0),var(--accent-2,#9A5CF0));
}
.ai-literacy-shell .linkage-w{
  flex:0 0 56px; text-align:right; font-size:12px; font-weight:800;
  color:var(--muted,#665E85); font-variant-numeric:tabular-nums;
}
/* 联动对照行 */
.ai-literacy-shell .linkage-row{
  border:1px solid var(--hairline, rgba(127,74,224,.14));
  border-radius:12px; padding:12px 13px; margin-bottom:10px;
  background:var(--surface-2,#F0EBFF);
}
.ai-literacy-shell .linkage-row.kgap{ background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.3); }
.ai-literacy-shell .linkage-row-h{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:7px; }
.ai-literacy-shell .linkage-row-h b{ font-size:14px; color:var(--text,#2C2545); }
.ai-literacy-shell .linkage-hedge{ font-size:12.5px; color:var(--accent,#7F4AE0); font-weight:800; }
.ai-literacy-shell .linkage-tag{
  font-size:10.5px; font-weight:800; border-radius:6px; padding:2px 7px;
}
.ai-literacy-shell .linkage-tag.tag-gap{ background:rgba(127,74,224,.14); color:var(--accent,#7F4AE0); }
.ai-literacy-shell .linkage-tag.tag-mis{ background:rgba(245,158,11,.16); color:#B26A00; }
.ai-literacy-shell .linkage-tag.tag-str{ background:rgba(34,160,100,.16); color:#1F8F5C; }
.ai-literacy-shell .linkage-tag.tag-kg{ background:rgba(102,94,133,.14); color:var(--muted,#665E85); }
.ai-literacy-shell .linkage-row-copy{ font-size:13px; line-height:1.7; color:var(--text,#2C2545); margin-bottom:10px; }
/* 练习入口按钮（报告内，复用 .ail-pbtn 视觉；锚点型 .linkage-btn） */
.ai-literacy-shell .linkage-btn{
  display:inline-block; appearance:none; text-decoration:none;
  border:none; border-radius:999px; cursor:pointer;
  background:linear-gradient(135deg,var(--accent,#7F4AE0),var(--accent-2,#9A5CF0));
  color:#fff; font-size:13px; font-weight:800; line-height:1;
  padding:9px 16px; box-shadow:0 4px 12px rgba(127,74,224,.26);
}
.ai-literacy-shell .linkage-btn:hover{ filter:brightness(1.05); }
/* 心理侧情绪卡 */
.ai-literacy-shell .linkage-emotion{
  background:linear-gradient(135deg, rgba(127,74,224,.10), rgba(154,92,240,.08));
  border-color:rgba(127,74,224,.26);
}
.ai-literacy-shell .linkage-emotion .linkage-sec-h{ color:#9A5CF0; }
@media (max-width:680px){
  .ai-literacy-shell .ail-tabs{ padding:9px 16px 7px; }
  .ai-literacy-shell .linkage-wrap{ padding:12px 16px 20px; }
}