/* ====== 21 求职信生成器 · 墨蓝信笺 + 烫金 ====== */
.tsk.clg{
  --tsk-bg:#f4f1ea;
  --tsk-bg-2:#ece7dc;
  --tsk-card:#fffdf7;
  --tsk-card-2:#f8f4e9;
  --tsk-ink:#1d2a3a;
  --tsk-sub:#5a6676;
  --tsk-faint:#8e97a3;
  --tsk-line:#ded6c5;
  --tsk-line-2:#ece6d9;
  --tsk-brand:#1f3f66;
  --tsk-brand-2:#2f5d8f;
  --tsk-brand-soft:#e7edf5;
  --tsk-brand-ink:#1b3a5e;
  --tsk-gold:#a9823f;
  --tsk-gold-soft:#f3ead3;
  --tsk-seal:#a8422f;
  --tsk-paper:#fffdf6;
  --tsk-serif:"Songti SC","STSong","Noto Serif SC","SimSun",Georgia,serif;
  background:
    radial-gradient(680px 320px at 96% -8%, rgba(169,130,63,.12), transparent 62%),
    radial-gradient(520px 240px at -4% 8%, rgba(31,63,102,.08), transparent 60%),
    var(--tsk-bg);
}
:root[data-theme="dark"] .tsk.clg{
  --tsk-bg:#12151b;
  --tsk-bg-2:#171b24;
  --tsk-card:#1b2029;
  --tsk-card-2:#222833;
  --tsk-ink:#ece7da;
  --tsk-sub:#aeb6c3;
  --tsk-faint:#7f8898;
  --tsk-line:#333c4b;
  --tsk-line-2:#2a313d;
  --tsk-brand:#8fb4dd;
  --tsk-brand-2:#b0cbe9;
  --tsk-brand-soft:rgba(143,180,221,.13);
  --tsk-brand-ink:#a9c6e6;
  --tsk-gold:#d6b169;
  --tsk-gold-soft:rgba(214,177,105,.13);
  --tsk-seal:#e08a76;
  --tsk-paper:#1d222b;
}

.clg-hero{display:grid;grid-template-columns:minmax(0,1fr) 394px;gap:30px;padding:30px 0 24px;align-items:stretch;}
.clg-hero-l{display:flex;flex-direction:column;}
.clg-hero-l>.tsk-hs{flex:1 1 auto;}
.clg-hero-l .tsk-h1 b{color:var(--tsk-brand-ink);position:relative;}
.clg-hero-l .tsk-h1 b::after{content:"";position:absolute;left:0;right:-4px;bottom:2px;height:8px;background:var(--tsk-gold-soft);z-index:-1;}
.clg-hero-r{display:flex;}

/* 写信台 */
.clg-desk{width:100%;align-self:start;background:var(--tsk-card);border:1px solid var(--tsk-line);border-radius:14px;box-shadow:var(--tsk-shadow);padding:18px 20px 16px;position:relative;overflow:hidden;}
.clg-desk::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--tsk-brand),var(--tsk-gold));}
.clg-desk-hd{display:flex;align-items:center;gap:11px;margin-bottom:12px;}
.clg-seal{width:32px;height:32px;border-radius:7px;background:var(--tsk-seal);color:#fff;font:700 15px/32px var(--tsk-serif);text-align:center;box-shadow:0 3px 10px rgba(168,66,47,.3);}
.clg-desk-hd b{display:block;font-size:14.5px;font-weight:800;color:var(--tsk-ink);line-height:1.3;}
.clg-desk-hd small{display:block;font-size:11px;color:var(--tsk-faint);}
.clg-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.clg-desk .tsk-label{font-size:11.5px;margin-bottom:5px;}
.clg-desk .tsk-label em{font-style:normal;color:var(--tsk-seal);}
.clg-desk .tsk-input,.clg-desk .tsk-select{padding:8px 10px;font-size:13px;border-radius:8px;}
.clg-desk .tsk-textarea{padding:8px 10px;font-size:13px;min-height:76px;border-radius:8px;}
.clg-err{display:none;margin-top:4px;font-size:11px;color:var(--tsk-bad);}
.clg-err.show{display:block;}
.clg-opt{margin-top:10px;}
.clg-seg{width:100%;}
.clg-seg button{flex:1 1 0;padding:7px 6px;font-size:12px;border-radius:7px;}
.clg-acts{display:flex;gap:8px;margin-top:15px;flex-wrap:wrap;}
.clg-acts .tsk-btn-main{flex:1 1 130px;background:linear-gradient(135deg,var(--tsk-brand),var(--tsk-brand-2));color:#fff;border-radius:9px;}
.clg-acts .tsk-btn{padding:10px 14px;font-size:12.5px;}
.clg-desk-note{margin-top:9px;font-size:10.5px;color:var(--tsk-faint);}

/* 预览舞台 */
.clg-stage{margin:4px 0 28px;}
.clg-stage-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:12px;}
.clg-stage-sub{margin-top:3px;font-size:12px;color:var(--tsk-faint);}
.clg-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.clg-count{font-size:11.5px;color:var(--tsk-sub);background:var(--tsk-card);border:1px solid var(--tsk-line);border-radius:99px;padding:5px 12px;}
.clg-count b{font:800 14px/1 var(--tsk-num);color:var(--tsk-brand-ink);}
.clg-tools .tsk-btn{padding:6px 12px;font-size:12px;border-radius:7px;}
.clg-tools .tsk-btn.is-copied{border-color:var(--tsk-ok);color:var(--tsk-ok);}

.clg-stage-body{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:16px;align-items:start;}
.clg-paper{background:var(--tsk-paper);border:1px solid var(--tsk-line);border-radius:6px;box-shadow:0 2px 4px rgba(29,42,58,.05),0 20px 48px rgba(29,42,58,.1);padding:0 0 26px;position:relative;}
.clg-paper::before{content:"";position:absolute;left:42px;top:0;bottom:0;width:1px;background:rgba(168,66,47,.14);}
.clg-paper::after{content:"";position:absolute;left:0;right:0;top:64px;height:1px;background:var(--tsk-line-2);}
.clg-paper-head{display:flex;justify-content:space-between;align-items:center;padding:20px 26px 14px 60px;font-size:11px;letter-spacing:.14em;color:var(--tsk-faint);text-transform:uppercase;}
.clg-paper-head span{font:700 13px/1 var(--tsk-serif);color:var(--tsk-gold);letter-spacing:.1em;}
.clg-paper-body{padding:20px 34px 0 60px;font-family:var(--tsk-serif);font-size:14.5px;line-height:2.05;color:var(--tsk-ink);}
.clg-paper-body .clg-line{text-indent:2em;margin:0 0 12px;}
.clg-paper-body .clg-call{text-indent:0;font-weight:700;margin-bottom:14px;}
.clg-paper-body .clg-sign{text-align:right;margin:18px 0 0;font-size:13.5px;line-height:1.9;}
.clg-paper-body .clg-sign i{display:block;font-style:normal;color:var(--tsk-sub);}
.clg-paper-empty{padding:44px 0;text-align:center;color:var(--tsk-faint);font-family:var(--tsk-font);font-size:13px;}

.clg-check{background:var(--tsk-card);border:1px solid var(--tsk-line);border-radius:12px;padding:16px 17px;box-shadow:var(--tsk-shadow-sm);}
.clg-check h3{margin:0 0 10px;font-size:13px;font-weight:800;color:var(--tsk-ink);display:flex;align-items:center;gap:7px;}
.clg-check h3::before{content:"✓";width:18px;height:18px;border-radius:50%;background:var(--tsk-brand-soft);color:var(--tsk-brand-ink);font-size:11px;text-align:center;line-height:18px;}
.clg-check ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.clg-check li{display:flex;align-items:flex-start;gap:7px;font-size:12px;line-height:1.65;color:var(--tsk-sub);}
.clg-check li i{flex:0 0 auto;width:15px;height:15px;margin-top:3px;border-radius:50%;font-style:normal;font-size:10px;line-height:15px;text-align:center;}
.clg-check li.is-ok i{background:var(--tsk-ok-soft);color:var(--tsk-ok);}
.clg-check li.is-no i{background:var(--tsk-bad-soft);color:var(--tsk-bad);}
.clg-tip{margin-top:13px;padding-top:12px;border-top:1px dashed var(--tsk-line);}
.clg-tip b{font-size:11.5px;color:var(--tsk-gold);letter-spacing:.06em;}
.clg-tip p{margin-top:4px;font-size:11.5px;line-height:1.75;color:var(--tsk-sub);}
.clg-tip.is-quiet b{color:var(--tsk-brand-ink);}

/* 结构 */
.clg-structure{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;}
.clg-block{background:var(--tsk-card);border:1px solid var(--tsk-line);border-radius:11px;padding:16px 18px;box-shadow:var(--tsk-shadow-sm);position:relative;overflow:hidden;}
.clg-block::before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--tsk-gold);opacity:.55;}
.clg-block-no{display:inline-block;font:800 11px/1 var(--tsk-num);letter-spacing:.12em;color:var(--tsk-gold);margin-bottom:7px;}
.clg-block b{display:block;font-size:13.5px;font-weight:800;color:var(--tsk-ink);line-height:1.5;}
.clg-block p{margin-top:6px;font-size:12px;line-height:1.85;color:var(--tsk-sub);}

/* 三类对比 */
.clg-compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;}
.clg-type{background:var(--tsk-card);border:1px solid var(--tsk-line);border-radius:12px;padding:18px 19px;box-shadow:var(--tsk-shadow-sm);}
.clg-type>span{display:inline-block;padding:4px 12px;border-radius:99px;background:var(--tsk-brand-soft);color:var(--tsk-brand-ink);font-size:11.5px;font-weight:800;}
.clg-type p{margin-top:9px;font-size:12px;line-height:1.75;color:var(--tsk-sub);}
.clg-type ul{margin:11px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;}
.clg-type li{position:relative;padding-left:14px;font-size:11.5px;line-height:1.7;color:var(--tsk-sub);}
.clg-type li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--tsk-gold);}

/* 句式表 */
.clg-phrase-wrap{overflow-x:auto;border-radius:11px;border:1px solid var(--tsk-line);box-shadow:var(--tsk-shadow-sm);}
.clg-table{width:100%;min-width:640px;border-collapse:collapse;background:var(--tsk-card);}
.clg-table th,.clg-table td{padding:11px 15px;font-size:12.5px;line-height:1.7;text-align:left;border-bottom:1px solid var(--tsk-line-2);}
.clg-table thead th{background:var(--tsk-card-2);font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--tsk-brand-ink);}
.clg-table tbody tr:last-child td{border-bottom:0;}
.clg-table tbody tr:hover td{background:var(--tsk-card-2);}
.clg-bad{color:var(--tsk-seal);}
.clg-tag{display:inline-block;padding:2px 9px;border-radius:99px;background:var(--tsk-gold-soft);color:var(--tsk-gold);font-size:11px;font-weight:800;}

/* 响应式 */
@media (max-width:900px){
  .clg-hero{grid-template-columns:1fr;gap:22px;}
  .clg-hero-r{order:2;}
  .clg-stage-body{grid-template-columns:1fr;}
  .clg-compare{grid-template-columns:1fr;}
  .clg-paper::before{left:24px;}
  .clg-paper-head{padding-left:38px;}
  .clg-paper-body{padding-left:38px;padding-right:22px;font-size:14px;}
}
@media (max-width:560px){
  .clg-row2{grid-template-columns:1fr;}
  .clg-acts .tsk-btn-main{flex:1 1 100%;}
  .clg-tools{width:100%;}
}

/* 打印：只留信纸 */
@media print{
  @page{size:A4;margin:18mm 16mm;}
  .clg .tsk-crumb-bar,.clg .clg-hero,.clg .clg-stage-hd,.clg .clg-check,
  .clg .tsk-sec,.clg .tskb,.clg .tsk-foot{display:none !important;}
  .clg,.tsk.clg{background:#fff !important;}
  .clg-stage-body{display:block;}
  .clg-paper{border:0;box-shadow:none;background:#fff;color:#111;}
  .clg-paper-head{color:#666;}
  .clg-paper-body{color:#111;}
  .clg-paper::before{background:rgba(168,66,47,.1) !important;}
  .clg-paper-body .clg-sign i{color:#555 !important;}
}

/* ====== 表单状态：错误 / 焦点 / 禁用 ====== */
.clg-desk .tsk-input.bad,
.clg-desk .tsk-textarea.bad,
.clg-desk .tsk-select.bad{
  border-color:var(--tsk-bad);
  background:var(--tsk-bad-soft);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tsk-bad) 14%,transparent);
}
.clg-desk .tsk-input:disabled,
.clg-desk .tsk-textarea:disabled,
.clg-desk .tsk-select:disabled{opacity:.6;cursor:not-allowed;background:var(--tsk-bg-2);}
.clg-desk .tsk-input:focus-visible,
.clg-desk .tsk-textarea:focus-visible,
.clg-desk .tsk-select:focus-visible{
  outline:2px solid var(--tsk-gold);
  outline-offset:1px;
}
.clg-acts .tsk-btn:focus-visible,
.clg-tools .tsk-btn:focus-visible{
  outline:2px solid var(--tsk-brand);
  outline-offset:2px;
}

/* ====== 按钮的按压与复制反馈 ====== */
.clg-acts .tsk-btn{transition:transform .12s ease,box-shadow .16s ease,background .16s ease;}
.clg-acts .tsk-btn:hover{box-shadow:var(--tsk-shadow-sm);}
.clg-acts .tsk-btn:active{transform:translateY(1px);}
.clg-acts .tsk-btn-main:hover{filter:brightness(1.06);}
.clg-tools .tsk-btn{transition:border-color .15s,color .15s,background .15s;}
.clg-tools .tsk-btn:hover{border-color:var(--tsk-brand);color:var(--tsk-brand-ink);}
.clg-tools .tsk-btn.is-copied::after{content:" ✓";}

/* ====== 信纸正文的细节排版 ====== */
.clg-paper-body .clg-line:first-child{text-indent:0;}
.clg-paper-body .clg-line b{font-weight:800;color:var(--tsk-brand-ink);}
.clg-paper-body .clg-sign b{
  display:block;
  font:700 14.5px/1.8 var(--tsk-serif);
  color:var(--tsk-ink);
  margin-top:6px;
}
.clg-paper-body .clg-sign span{
  display:block;
  font-size:12px;
  color:var(--tsk-faint);
  letter-spacing:.04em;
}
.clg-paper-footer{
  margin:20px 34px 0 60px;
  padding-top:12px;
  border-top:1px dashed var(--tsk-line);
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:10.5px;
  color:var(--tsk-faint);
  letter-spacing:.06em;
}
.clg-paper-footer i{font-style:normal;color:var(--tsk-gold);}

/* ====== 自检卡的状态细节 ====== */
.clg-check li.is-no b,
.clg-check li.is-no span{color:var(--tsk-bad);}
.clg-check li.is-ok span{color:var(--tsk-sub);}
.clg-check .clg-score{
  margin-top:11px;
  padding:9px 11px;
  border-radius:8px;
  background:var(--tsk-brand-soft);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.clg-check .clg-score span{font-size:11px;color:var(--tsk-sub);}
.clg-check .clg-score b{font:800 18px/1 var(--tsk-num);color:var(--tsk-brand-ink);}
.clg-check .clg-score.is-pass{background:var(--tsk-ok-soft);}
.clg-check .clg-score.is-pass b{color:var(--tsk-ok);}
.clg-check .clg-score.is-low{background:var(--tsk-warn-soft);}
.clg-check .clg-score.is-low b{color:var(--tsk-warn);}

/* ====== 结构卡 / 类型卡的悬浮细节 ====== */
.clg-block,
.clg-type{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.clg-block:hover,
.clg-type:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--tsk-gold) 35%,var(--tsk-line));
  box-shadow:var(--tsk-shadow);
}
.clg-block-no::after{
  content:"";
  display:inline-block;
  width:24px;
  height:1px;
  margin-left:8px;
  vertical-align:middle;
  background:var(--tsk-gold);
  opacity:.5;
}
.clg-type li b{color:var(--tsk-ink);font-weight:750;}

/* ====== 句式表：首列强调与斑马纹 ====== */
.clg-table tbody td:first-child{font-weight:700;color:var(--tsk-ink);}
.clg-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--tsk-card-2) 55%,transparent);}
.clg-table tbody tr:nth-child(even):hover td{background:var(--tsk-card-2);}
.clg-table .clg-good{color:var(--tsk-ok);}
.clg-table .clg-meh{color:var(--tsk-faint);}

/* ====== 深色模式：信纸与烫金微调 ====== */
:root[data-theme="dark"] .tsk.clg .clg-desk{box-shadow:0 2px 6px rgba(0,0,0,.5),0 18px 44px rgba(0,0,0,.35);}
:root[data-theme="dark"] .tsk.clg .clg-paper{box-shadow:0 2px 6px rgba(0,0,0,.55),0 24px 56px rgba(0,0,0,.42);}
:root[data-theme="dark"] .tsk.clg .clg-paper::before{background:rgba(224,138,118,.16);}
:root[data-theme="dark"] .tsk.clg .clg-seal{box-shadow:0 3px 12px rgba(0,0,0,.45);}
:root[data-theme="dark"] .tsk.clg .clg-block::before{opacity:.7;}

/* ====== 中等与窄屏补充 ====== */
@media (max-width:1180px){
  .clg-stage-body{grid-template-columns:minmax(0,1fr) 260px;}
  .clg-paper-body{padding-left:48px;padding-right:26px;}
  .clg-paper-head{padding-left:48px;}
  .clg-paper::before{left:30px;}
}
@media (max-width:760px){
  .clg-desk{padding:16px 16px 14px;}
  .clg-acts{gap:6px;}
  .clg-acts .tsk-btn{flex:1 1 96px;text-align:center;}
  .clg-compare{grid-template-columns:1fr;}
  .clg-structure{grid-template-columns:1fr;}
  .clg-paper-footer{margin-left:38px;margin-right:20px;flex-direction:column;gap:4px;}
}
@media (max-width:480px){
  .clg-row2{grid-template-columns:1fr;}
  .clg-paper-body{padding:16px 18px 0 34px;font-size:13.5px;line-height:1.95;}
  .clg-paper-head{padding:16px 18px 10px 34px;font-size:10px;}
  .clg-paper::before{left:22px;}
  .clg-paper::after{top:52px;}
  .clg-check{padding:14px 14px;}
  .clg-tools .tsk-btn{flex:1 1 44%;text-align:center;}
}

/* ====== 动效与可访问性 ====== */
@media (prefers-reduced-motion:reduce){
  .clg-block,
  .clg-type,
  .clg-acts .tsk-btn,
  .clg-tools .tsk-btn{transition:none;}
  .clg-block:hover,
  .clg-type:hover{transform:none;}
}
.clg-print-hint{
  display:none;
  font-size:11px;
  color:var(--tsk-faint);
  text-align:right;
}
@media print{
  .clg-print-hint{display:block;margin-top:8px;}
  .clg-paper-footer{border-color:#ccc;color:#666;}
  .clg-paper-body .clg-line{page-break-inside:avoid;}
  .clg-paper-body .clg-line:last-child{margin-bottom:0;}
}