/* =====================================================================
   单词默写练习页 · 童话主题适配层（2026-09-15）
   ---------------------------------------------------------------------
   服务页面：units/moxie.html（A4 默写卷生成 + 打印导出）
   底座：comm/disney-kit.css（令牌 + 材质配方）
   挂载：页面 <head> 里加两行
         <link rel="stylesheet" href="/comm/disney-kit.css">
         <link rel="stylesheet" href="/units/moxie-disney.css">
   回滚：删掉那两行 <link> 即可，页面自带的 <style> 一行未动。
   ---------------------------------------------------------------------
   分层策略：
   · 外壳（天空）+ 控制台（工具栏）+ 纸卡摆放观感 → 包在 @media screen；
   · 卷面内容（§4：页眉/大题标/题干/选项/水印）**不带 media 包裹**，
     屏幕与打印/PDF 同一套样子（导出的卷子也是童话风）；
   · 功能色保留不动：书写红横线（#d11）、对错反馈（绿/红）——
     那是教学语义，不是装饰。
   ===================================================================== */
@media screen {

/* ============ 1. 外壳：晨光天空 ============ */
html{ background:var(--dk-sky-4); }
body{
  background-color:var(--dk-sky-2) !important;
  background-image:
    radial-gradient(56% 38% at 88% -6%, rgba(185,164,255,.40), rgba(185,164,255,0) 72%),
    radial-gradient(46% 34% at -10% 20%, rgba(127,230,207,.34), rgba(127,230,207,0) 72%),
    radial-gradient(44% 30% at 108% 66%, rgba(255,194,166,.34), rgba(255,194,166,0) 74%),
    radial-gradient(48% 34% at 2% 104%, rgba(255,223,142,.36), rgba(255,223,142,0) 74%),
    linear-gradient(180deg,var(--dk-sky-1) 0%,var(--dk-sky-2) 32%,var(--dk-sky-3) 66%,var(--dk-sky-4) 100%) !important;
  background-attachment:fixed;
  color:var(--dk-ink) !important;
  font-family:var(--dk-font-cn) !important;
}

/* ============ 2. 工具栏：象牙故事书控制台 ============ */
.toolbar{
  background:var(--dk-page-bg) !important;
  border-bottom:2px solid var(--dk-lip) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.85),
    0 8px 20px -12px rgba(78,54,155,.4) !important;
}
.toolbar .brand{
  color:var(--dk-ink-strong) !important;
  letter-spacing:.5px;
}

/* 下拉与按钮：白瓷挤塑件（尺寸/高度照旧，只换材质） */
.toolbar select, .toolbar button{
  background:var(--dk-plastic-bg) !important;
  border:1px solid transparent !important;
  border-radius:var(--dk-r-ctl) !important;
  color:var(--dk-ink) !important;
  font-weight:600;
  box-shadow:
    inset 0 2px 0 #fff,
    inset 0 -3px 0 rgba(96,66,190,.14),
    0 3px 0 rgba(96,66,190,.22) !important;
  transition:box-shadow .15s ease, transform .12s ease, color .15s ease !important;
}
.toolbar select:hover, .toolbar button:hover{
  color:var(--dk-vio) !important;
  box-shadow:
    inset 0 2px 0 #fff,
    inset 0 -3px 0 rgba(96,66,190,.14),
    0 3px 0 rgba(96,66,190,.22),
    var(--dk-halo) !important;
}
.toolbar select:active, .toolbar button:active{
  transform:translateY(2px);
  box-shadow:var(--dk-plastic-shadow-press) !important;
}

/* 生成题目 = 主行动：紫挤塑 */
.toolbar .btn-go{
  background:var(--dk-vio-plastic) !important;
  color:#fff !important;
  box-shadow:var(--dk-vio-plastic-shadow), 0 3px 0 var(--dk-vio-lip) !important;
}
.toolbar .btn-go:hover{
  background:var(--dk-vio-plastic) !important;
  color:#fff !important;
  box-shadow:var(--dk-vio-plastic-shadow), 0 3px 0 var(--dk-vio-lip), var(--dk-halo-strong) !important;
}
.toolbar .btn-go:active{
  transform:translateY(2px);
  box-shadow:var(--dk-vio-plastic-shadow-press) !important;
}

/* 导出 PDF = 金挤塑 + 墨金字（白字压金底对比度不够） */
.toolbar .btn-primary{
  background:var(--dk-gold-plastic) !important;
  color:var(--dk-gold-ink) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.8),
    0 3px 0 var(--dk-gold-lip) !important;
}
.toolbar .btn-primary:hover{
  background:var(--dk-gold-plastic) !important;
  color:var(--dk-gold-ink) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.8),
    0 3px 0 var(--dk-gold-lip),
    var(--dk-halo) !important;
}
.toolbar .btn-primary:active{
  transform:translateY(2px);
  box-shadow:var(--dk-gold-plastic-shadow-press) !important;
}

/* 备用警示钮（当前页面未用到，顺手对齐，防以后加按钮跳色） */
.toolbar .btn-warn{
  background:var(--dk-warn-plastic) !important;
  color:#fff !important;
  box-shadow:var(--dk-warn-plastic-shadow), 0 3px 0 var(--dk-warn-lip) !important;
}

/* ============ 3. A4 卷纸：屏幕上给一点故事书纸感 ============ */
/* 只动屏幕观感（圆角+阴影），打印由页面自带的 @media print 重置，
   卷面内部（水印/页眉/题目/选项/红横线）一行不碰 */
.a4-page{
  border-radius:12px;
  box-shadow:
    var(--dk-ring),
    0 20px 44px -24px rgba(78,54,155,.42) !important;
}

/* 小屏适配：A4 固定 210mm（≈794px），在手机上左右对称溢出——
   对称溢出不会撑大 scrollWidth（kit 盒模型清单记录过的坑），表现为
   纸的两边被裁且无法滚动。放开固定宽度让卷面自然撑满小屏；
   全部在 @media screen 内，打印路径零命中 */
@media (max-width: 820px){
  .page-wrap{ align-items:stretch !important; }
  .a4-page{
    width:100% !important;
    min-height:0 !important;
    padding:10mm 6mm !important;
  }
}

/* 加载提示：紫字 + 光晕 */
.loading{
  color:var(--dk-vio) !important;
  text-shadow:0 0 18px rgba(150,110,255,.35);
}

}
/* ==== @media screen 结束（外壳/控制台不进打印） ==== */

/* =====================================================================
   4. 卷面内容 · 童话风（屏幕 + 打印/PDF 都生效）
   ---------------------------------------------------------------------
   只换颜色与形状（圆角/底色/字色），不动任何字号、行高、间距、布局；
   布局是 A4 排版命脉。水印换成同几何的紫罗兰版。 */
.a4-page{
  /* 纯白 → 象牙纸（极浅，黑白打印时≈白纸） */
  background:linear-gradient(180deg,#fffdf7 0%,#fdf9ef 70%,#faf4e4 100%) !important;
}
/* 水印：几何与原版完全一致（130px 网格 / 13px / rotate -30），只把
   蓝灰字换成主题紫（data-URI 里的 fill 无法继承，只能整图替换） */
.a4-page::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='130' height='130'><text x='80' y='90' font-size='13' font-family='Microsoft YaHei,sans-serif' fill='rgba(106,68,236,0.10)' text-anchor='middle' transform='rotate(-30 80 80)'>词老大英语</text></svg>") !important;
}

/* 页眉：绿线 → 紫罗兰书脊线 */
.page-head{ border-bottom-color:rgba(106,68,236,.38) !important; }
.page-head .pt{ color:var(--dk-ink-strong) !important; letter-spacing:.5px; }
.page-head .ps{ color:var(--dk-ink-mute) !important; }
.page-head .pname{ color:var(--dk-ink-mute) !important; }
.info-row{ color:var(--dk-ink-mute) !important; }

/* 大题标题：绿色方块 → 紫挤塑胶囊（padding/字号照旧） */
.major-title{
  background:var(--dk-vio-plastic) !important;
  color:#fff !important;
  border-radius:999px !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.42),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 2px 0 var(--dk-vio-lip) !important;
  letter-spacing:.5px;
}

/* 题干：墨色体系（紫墨压象牙纸 ≥4.87:1） */
.qnum{ color:var(--dk-ink-strong) !important; }
.stem-zh{ color:var(--dk-ink) !important; }
.stem-en{ color:var(--dk-vio) !important; }
.blank-word{ color:var(--dk-vio) !important; }
.phonetic{ color:var(--dk-vio-deep) !important; }
.stem-meta{ color:var(--dk-ink-mute) !important; }
/* has-paren 括号伪元素继承 .q-stem 的 #333 —— 换墨色 */
.q-block.has-paren .q-stem::before{ color:var(--dk-ink) !important; }

/* 选项：字母序号 → 主题紫；选项底从纯白降为半透奶白，融进象牙纸
   （纯白方块压米色纸反差太硬）；对错反馈绿/红保留（教学语义） */
.opt{ background:rgba(255,253,247,.45) !important; }
.opt .oletter{ color:var(--dk-vio) !important; }
.opt:hover{ background:#f4efff !important; }
.opt:hover{ border-color:rgba(106,68,236,.35) !important; }

/* 书写线保持红色（#d11）—— 学生要在横线上写字母，红色是全站既定视觉 */
