/* ---------- 变量与基础字体（流式） ---------- */
:root{
  --brand-purple: #5e49c6;
  --brand-purple-deep: #4e3fb0;
  --paper-bg: #f6f3ff;
  --rule: #c9bdf3;
  --ink: #3c2f64;
  --title-ink: #5e49c6;
  --gold: #E3A93B;
}

html,body{height:100%;}
*{box-sizing:border-box;}
body{
  margin:0;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
  /* 全局基础字号随屏幕变化（手机到桌面） */
  font-size: clamp(14px, 1.05vw + 0.2rem, 18px);
  line-height: 1.6;
}

/* 图片默认自适应 */
img{ max-width:100%; height:auto; }

/* ---------- 页面左右两栏布局（自适应） ---------- */
.container{
  max-width: 1280px;
  margin: clamp(12px, 2vw, 20px) auto;
  padding: clamp(8px, 1.2vw, 12px);
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: clamp(10px, 1.2vw, 16px);
}
.panel{
  background:#fff;
  border:1px solid #eee;
  border-radius: clamp(10px, 1.1vw, 14px);
  box-shadow:0 6px 22px rgba(30,10,80,.06);
}

/* ---------- 左侧：表单样式 ---------- */
.form-header{
  display:flex; align-items:center; gap:10px;
  padding: clamp(10px, 1.2vw, 14px) clamp(12px,1.4vw,16px) 0;
}
.form-header h1{ 
  margin:0; 
  font-size: clamp(16px, 1.6vw, 18px); 
  color:var(--brand-purple); 
  font-weight:800; 
}

.form-panel{ padding: clamp(10px, 1.2vw, 14px) clamp(12px,1.4vw,16px) clamp(14px,1.4vw,18px); }

form fieldset{
  border:1px dashed #e7e1fb;
  border-radius: clamp(10px,1.1vw,12px);
  padding: clamp(10px,1.2vw,14px);
  margin: clamp(10px,1.2vw,12px) 0;
}
form legend{
  padding:0 clamp(6px, .8vw, 8px);
  color:var(--brand-purple);
  font-weight:800;
  font-size: clamp(14px, 1.3vw, 16px);
}
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(10px,1.2vw,12px); }
.grid-3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(10px,1.2vw,12px); }

label{ display:block; font-size: clamp(12px, 1.1vw, 13px); color:#6a5aa5; font-weight:600; }
input, select, textarea{
  width:100%;
  margin-top:6px;
  border:1px solid #e9e3fb;
  border-radius:10px;
  padding: clamp(8px, 1.1vw, 10px) clamp(10px, 1.2vw, 12px);
  font:inherit; color:var(--ink);
  background:#fff; outline:none;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
}
textarea{ min-height:88px; resize:vertical; }

.actions{
  display:flex; gap: clamp(8px, 1vw, 10px); flex-wrap:wrap; margin-top:10px;
}
.actions button{
  border:none; cursor:pointer; 
  padding: clamp(8px,1.1vw,10px) clamp(12px,1.2vw,16px); 
  border-radius:10px;
  font-weight:800; color:#fff;
  background:linear-gradient(90deg,var(--brand-purple),var(--brand-purple-deep));
  box-shadow:0 8px 18px rgba(94,73,198,.22);
}
.actions button:disabled{ opacity:.45; cursor:not-allowed; }

/* ---------- 右侧：A4 预览纸张（屏幕自适应 + 打印保持A4） ---------- */
.preview-panel{ 
  padding: clamp(8px,1.2vw,12px); 
  display:flex; flex-direction:column; align-items:center; 
}

/* 关键：允许整体缩放以适配一页 */
.sheet{
  width: min(100%, 794px);      /* 设计宽度 */
  background: var(--paper-bg);
  border-radius: clamp(12px, 1.4vw, 18px);
  outline: max(6px, 0.8vw) solid var(--brand-purple);
  padding: clamp(16px, 3vw, 26px);
  display:flex; flex-direction:column;

  /* 让 transform 缩放更自然 */
  transform-origin: top left;
}
.hint{ margin-top:8px; color:#7a70b8; font-size: clamp(11px, 1vw, 12px); }

@media print{
  body{ background:#fff; }
  .container{ display:block; }
  .panel{ box-shadow:none; border:none; }
  .form-panel{ display:none; }
  .sheet{ 
    margin:0 auto; 
    page-break-inside:avoid; 
    width: 794px; 
    min-height: 1123px;       /* 打印时恢复 A4 比例 */
    padding: 26px;
    outline: 10px solid var(--brand-purple);
    border-radius: 18px;
    transform: none !important; /* 打印时用原始比例，导出 PDF 前已在画布层面适配 */
  }
}

/* ---------- 顶部统一紫色标题条 ---------- */
.hero-banner{
  background: var(--brand-purple);
  color:#fff; 
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.4vw, 26px);
  border-radius: clamp(10px, 1.2vw, 14px);
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  grid-column-gap: clamp(10px,1.2vw,16px); 
  grid-row-gap: clamp(4px,.6vw,6px); 
  align-items:center;
}
.hero-logo{ width: clamp(64px, 7vw, 86px); height: clamp(64px, 7vw, 86px); object-fit:contain; grid-row:1 / span 2; }
.hero-text{ display:flex; flex-direction:column; gap: clamp(4px, .6vw, 6px); }
.hero-name .gold{ color:var(--gold); font-weight:800; font-size: clamp(28px, 3.2vw, 44px); letter-spacing:.5px; }
.hero-meta{ color:#fff; font-weight:600; font-size: clamp(13px, 1.4vw, 16px); opacity:.95; }

hr.separator{
  height:4px; border:none; border-radius:2px;
  background: var(--rule);
  margin: clamp(16px, 2vw, 22px) 0 clamp(18px, 2.4vw, 28px);
}

/* ---------- 上半区：左“进度模块” + 右授课内容 ---------- */
.top-grid{
  display:grid; 
  grid-template-columns: minmax(160px, 260px) 1fr;
  column-gap: clamp(16px, 2.4vw, 36px); 
  align-items:start;
}

/* 进度模块：替代原 donut（兼容旧 id/class） */
.progress, #donutStatic{
  width: clamp(180px, 20vw, 220px);
  padding: clamp(12px, 2vw, 18px);
  margin-bottom: clamp(28px, 4vw, 58px);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background: transparent;
}
#donutStatic img{ display:none !important; } /* 旧环图彻底隐藏 */

/* 百分比大号紫色数值 */
#progNum{
  font-size: clamp(48px, 9vw, 96px);
  font-weight: 900;
  color: var(--brand-purple);
  line-height: 1;
  letter-spacing: .5px;
  text-align:center;
}

/* 标签：紫色、大写、字间距 */
#progLabel{
  margin: clamp(8px, 1vw, 12px) 0 0;
  text-align: center;
  letter-spacing: 2px;
  color: var(--brand-purple);
  font-weight: 900;
  font-size: clamp(12px, 1.6vw, 18px);
  text-transform: uppercase;
}

/* 右侧授课内容（自适应标题） */
.teach h3{ 
  color:var(--title-ink); 
  font-weight:800; 
  font-size: clamp(20px, 2.1vw, 26px); 
  margin:0 0 12px; 
}
.teach p{ color:var(--ink); font-size: clamp(14px, 1.3vw, 16px); line-height:1.9; white-space:pre-wrap; word-break:break-word; }

/* ---------- 课程反馈 ---------- */
.feedback h3{ color:var(--title-ink); font-weight:800; font-size: clamp(20px, 2.1vw, 26px); margin:0 0 12px; }
.fb-grid{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.fb-grid p{ color:var(--ink); font-size: clamp(14px, 1.3vw, 16px); line-height:1.9; white-space:pre-wrap; word-break:break-word; }

/* ---------- 选填段落 ---------- */
.optional-section{ margin-top: clamp(12px, 1.4vw, 18px); }
.optional-section h3{ color:var(--title-ink); font-weight:800; font-size: clamp(18px, 1.8vw, 22px); margin:0 0 8px; }
.optional-section p{ margin:0; color:var(--ink); white-space:pre-wrap; line-height:1.9; font-size: clamp(14px, 1.3vw, 16px); }

/* ---------- 底部教师 & 站点（自适应） ---------- */
.teacher-footer{ margin-top: clamp(16px, 1.8vw, 24px); display:flex; flex-direction:column; align-items:center; gap: clamp(8px, 1vw, 10px); }
.teacher-photo{ 
  width: clamp(84px, 9vw, 110px); 
  height: clamp(84px, 9vw, 110px); 
  border-radius:50%; object-fit:cover; 
  border:4px solid #e9e3fb; 
  box-shadow:0 4px 16px rgba(90,60,180,.14); 
}
.teacher-name{ color:var(--title-ink); font-weight:800; font-size: clamp(16px, 1.8vw, 20px); }
.site-url{ margin-top:14px; text-align:center; color:var(--title-ink); font-weight:900; font-size: clamp(20px, 3vw, 32px); letter-spacing:1px; }

/* ---------- 小屏优化（断点） ---------- */
@media (max-width:1100px){
  .container{ grid-template-columns:1fr; }
  .preview-panel{ order:-1; }
  .sheet{ width:100%; }
}

/* 更窄：上半区两列改为一列堆叠，进度模块置顶 */
@media (max-width:720px){
  .top-grid{
    grid-template-columns: 1fr;
    row-gap: clamp(12px, 2vw, 16px);
  }
  .progress, #donutStatic{
    margin-left:auto; margin-right:auto;
  }
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
}