/* ==========================================================================
   左印国际美术教育 · AI 应用统一主题（v1.0）
   来源：少儿美术专业素养测评（zuoyin-art-assess）1:1 提取
   品牌口径：主色 = 左印青 #00B3C4 ｜ 辅助色 = 左印红 #E62029
   分工：青管"主体"（标识/章节条/导航/主按钮/数据图形）；红管"重点"（序号块/标/选中/关键数字）
   用法：新智能体页面在 <head> 里第一位引入本文件，然后直接用 var(--zy-xxx)
     <link rel="stylesheet" href="/assets/zuoyin-theme.css">
   ========================================================================== */

:root {
  /* ---------- 品牌主色：左印青 ---------- */
  --zy-teal:       #00B3C4;   /* 左印青：品牌主色。标识/章节条/导航/主按钮/数据图形 */
  --zy-teal-deep:  #00A1B0;   /* 按压态、深一档青 */
  --zy-teal-2:     #31B6C9;   /* 青（略沉），用于圆点/图标 */
  --zy-teal-tint:  #F0FAFB;   /* 青色底纹（信息提示条） */
  --zy-teal-line:  #A8E3EA;   /* 青色描边 */

  /* ---------- 辅助色：左印红 ---------- */
  --zy-red:        #E62029;   /* 左印红：辅助色。只做"重点"——序号块/评价标/等级选中/关键数字 */
  --zy-red-deep:   #C4111A;   /* 按压态、深一档红 */
  --zy-red-tint:   #FFF6F5;   /* 红色底纹（告警条） */

  /* ---------- 点缀色（只做小圆点/图标，不做按钮） ---------- */
  --zy-lime:       #B9DE07;   /* 柠檬 */
  --zy-lime-2:     #B9D31F;   /* 柠檬（学习力圆专用） */
  --zy-green:      #339966;   /* 绿 */
  --zy-yellow:     #FCCB0C;   /* 明黄 */
  --zy-pink:       #F094AD;   /* 粉 */
  --zy-magenta:    #E84892;   /* 品红 */

  /* ---------- 中性 ---------- */
  --zy-ink:        #4E4644;   /* 墨：正文、标题、描边（不用纯黑） */
  --zy-ink-2:      #615955;   /* 正文次级 */
  --zy-ink-3:      #898381;   /* 说明文字 */
  --zy-mute:       #A29B98;   /* 弱化提示 */
  --zy-line:       #CDCCCC;   /* 网格线、分隔线 */
  --zy-line-2:     #E8E7E6;   /* 更浅分隔 */
  --zy-paper:      #EDE4D8;   /* 页面底（画纸米） */
  --zy-card:       #FFFFFF;   /* 卡片/纸张 */

  /* ---------- 字体 ---------- */
  --zy-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
             "Source Han Sans SC", "Noto Sans CJK SC", "Heiti SC", sans-serif;
  --zy-font-num: "DIN Alternate", "Helvetica Neue", Arial, sans-serif;

  /* ---------- 尺寸基线 ---------- */
  --zy-radius:     10px;
  --zy-radius-sm:  2px;
  --zy-shadow:     0 10px 34px rgba(34, 24, 21, .18);
  --zy-shadow-soft:0 0 60px rgba(34, 24, 21, .16);
}

/* ---------- 语义类：新页面直接用，保证跨智能体一致 ---------- */

/* 页面：画纸底 + 白卡 */
.zy-page {
  font-family: var(--zy-font);
  color: var(--zy-ink);
  background: var(--zy-paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

/* 章节头：青条承担主体（主色），红数字块点题（辅助色） */
.zy-sec { display: flex; align-items: center; gap: 10px; }
.zy-sec-num {
  width: 44px; height: 40px;
  background: var(--zy-red); color: #fff;
  font-size: 26px; font-weight: 900;
  display: grid; place-items: center;
}
.zy-sec-bar {
  background: var(--zy-teal); color: #fff;
  font-size: 20px; font-weight: 900;
  padding: 6px 11px; letter-spacing: .04em;
  position: relative;
}
/* 青条右侧的斜切尖角 */
.zy-sec-bar::after {
  content: ""; position: absolute;
  left: 100%; top: 0;
  border-left: 13px solid var(--zy-teal);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}
.zy-sec-note { font-size: 11.5px; color: var(--zy-ink-2); letter-spacing: .02em; }

/* 红标：综合评价 / 关键结论（辅助色，只标重点） */
.zy-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--zy-red); color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 3px 7px;
}

/* 等级按钮 A/B/C/D */
.zy-grade {
  width: 30px; height: 30px;
  border: 1px solid #BCB9B7; background: #fff; color: var(--zy-ink);
  font: 800 14px/1 var(--zy-font);
  border-radius: var(--zy-radius-sm);
  display: grid; place-items: center; cursor: pointer;
  transition: all .15s;
}
.zy-grade.on { background: var(--zy-red); border-color: var(--zy-red); color: #fff; }

/* 主按钮 / 次按钮 */
.zy-btn {
  border: 0; cursor: pointer; font-family: var(--zy-font);
  background: var(--zy-teal); color: #fff;
  font-size: 16px; font-weight: 800;
  padding: 13px 26px; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0,179,196, .26);
}
.zy-btn:active { background: var(--zy-teal-deep); transform: scale(.99); }
/* 红色只留给"唯一的转化动作"，一屏最多 1 个 */
.zy-btn--red {
  background: var(--zy-red);
  box-shadow: 0 8px 20px rgba(230, 32, 41, .22);
}
.zy-btn--red:active { background: var(--zy-red-deep); }
.zy-btn--ghost {
  background: #fff; color: var(--zy-ink);
  border: 1.5px solid var(--zy-ink); box-shadow: none;
}

/* 信息提示条（青） */
.zy-note {
  border-left: 4px solid var(--zy-teal);
  background: var(--zy-teal-tint);
  color: var(--zy-ink-2);
  font-size: 13px; line-height: 1.7;
  padding: 10px 14px;
}
/* 告警提示条（红，只用一次） */
.zy-note--warn {
  border-left-color: var(--zy-red);
  background: var(--zy-red-tint);
}

/* 纸面报告（A4） */
.zy-sheet {
  width: 794px; height: 1123px;
  background: var(--zy-card);
  box-shadow: var(--zy-shadow);
  padding: 46px 50px;
}

/* 页脚一行 */
.zy-foot {
  font-size: 10px; letter-spacing: .18em;
  color: var(--zy-mute); text-align: center;
}

/* ==========================================================================
   统一返回按钮（所有左印智能体通用，与素养测评页同一套）
   用法：放在 <body> 后任意位置
   <a class="zy-backhome" href="https://zuoyin-ai.app.workbuddy.host/">‹ 返回</a>
   ========================================================================== */
.zy-backhome { position: fixed; left: 14px; top: 62px; z-index: 999;
  display: inline-flex; align-items: center; gap: 2px;
  background: #fff; color: #00A1B0; border: 1px solid #A8E3EA; border-radius: 999px;
  padding: 8px 14px; font: 800 12.5px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif;
  text-decoration: none; box-shadow: 0 6px 18px rgba(0,161,176,.18);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer;
  transition: background .16s, color .16s, border-color .16s, transform .12s; }
.zy-backhome:hover { background: #00B3C4; color: #fff; border-color: #00B3C4; }
.zy-backhome:active { transform: scale(.95); background: #00B3C4; color: #fff; border-color: #00B3C4; }
@media (max-width: 640px) { .zy-backhome { padding: 7px 12px; font-size: 12px; } }