/* modules — 三个交互模块样式：实验台 lab · 测验 quiz · 灰度 gray */
/* —— 实验台 —— */
.lab{display:grid;grid-template-columns:260px 1fr;gap:var(--s5);margin-top:var(--s4);}
@media(max-width:700px){.lab{grid-template-columns:1fr;}}
.controls label{display:block;font-size:.85rem;font-weight:600;margin:var(--s3) 0 4px;color:var(--ink);}
.controls .rng-val{color:var(--accent);font-family:var(--display);}
.controls input[type=range]{width:100%;accent-color:var(--accent);}
.lab-preview{display:flex;align-items:center;justify-content:center;background:var(--bg);
  border:var(--bw) dashed var(--line-strong);border-radius:var(--radius);padding:var(--s5);}
#expCard{
  --c:oklch(62% calc(var(--exp-sat)/100*0.18) 350);
  background:var(--surface);
  border:calc(var(--exp-bw)*1px) solid var(--line-strong);
  border-radius:calc(var(--exp-radius)*1px);
  padding:calc(var(--exp-gap)*1px);
  max-width:300px;width:100%;box-shadow:0 2px 10px rgba(43,36,41,.05);
}
#expCard .ek{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--c);margin-bottom:calc(var(--exp-gap)*0.5px);}
#expCard .et{font-family:var(--display);line-height:1.1;color:var(--ink);
  font-size:calc(1rem*var(--exp-scale));font-weight:var(--exp-weight);margin-bottom:calc(var(--exp-gap)*0.5px);}
#expCard .eb{color:var(--ink-2);font-size:.9rem;font-weight:var(--exp-weight);line-height:1.6;margin-bottom:calc(var(--exp-gap)*0.7px);}
#expCard .ebtn{display:inline-block;background:var(--c);color:#fff;font-weight:600;font-size:.85rem;
  padding:8px 18px;border-radius:calc(var(--exp-radius)*0.6px);}

/* —— 测验 —— */
.quiz-q{margin:var(--s5) 0;}
.quiz-prompt{font-weight:700;margin-bottom:var(--s3);font-family:var(--serif);font-size:1.1rem;}
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);}
@media(max-width:640px){.quiz-opts{grid-template-columns:1fr;}}
.quiz-opt{border:var(--bw) solid var(--line);border-radius:var(--radius);padding:var(--s4);cursor:pointer;
  background:var(--surface);transition:border-color .15s,transform .1s;text-align:left;font:inherit;}
.quiz-opt:hover{border-color:var(--accent);}
.quiz-opt:active{transform:scale(.99);}
.quiz-opt.correct{border-color:var(--good);background:#f1faf5;}
.quiz-opt.wrong{border-color:var(--bad);background:#fdf1ef;}
.quiz-explain{margin-top:var(--s3);font-size:.92rem;color:var(--ink-2);display:none;
  border-left:3px solid var(--good);padding:var(--s2) var(--s3);background:#f1faf5;border-radius:0 8px 8px 0;}
.quiz-explain.show{display:block;}
.mini{font-size:.85rem;line-height:1.5;}
/* 维度筛选条 */
.quiz-filters{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0 var(--s2);}
.quiz-filter{font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;background:var(--surface);
  border:var(--bw) solid var(--line-strong);border-radius:99px;padding:5px 16px;color:var(--ink-2);
  transition:border-color .15s,color .15s;}
.quiz-filter:hover{border-color:var(--accent);color:var(--accent);}
.quiz-filter.active{background:var(--ink);color:var(--bg);border-color:var(--ink);}
/* 题首维度徽章 */
.quiz-dim-tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.06em;color:var(--accent);
  background:var(--accent-soft);border-radius:6px;padding:2px 8px;margin-right:var(--s2);vertical-align:middle;}
/* 练眼档案统计 */
.quiz-stats{margin-top:var(--s5);border-top:var(--bw) solid var(--line);padding-top:var(--s4);}
.quiz-stats h4{font-family:var(--serif);font-weight:700;font-size:1.05rem;margin-bottom:var(--s3);
  display:flex;align-items:center;gap:var(--s2);}
.qs-row{display:grid;grid-template-columns:72px 1fr 96px;gap:var(--s3);align-items:center;margin-bottom:var(--s2);font-size:.85rem;}
.qs-row .qs-k{color:var(--ink);font-weight:600;}
.qs-bar{height:8px;background:var(--bg);border:var(--bw) solid var(--line);border-radius:99px;overflow:hidden;}
.qs-bar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .3s;}
.qs-row .qs-v{color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums;}
.qs-row .qs-v small{color:var(--ink-3);}
.qs-weak{font-size:.9rem;color:var(--ink-2);margin-top:var(--s3);border-left:3px solid var(--accent);
  background:var(--accent-soft);padding:var(--s2) var(--s3);border-radius:0 8px 8px 0;}
.qs-weak b{color:var(--accent);}
.qs-reset{font-size:.8rem;color:var(--ink-3);background:none;border:none;cursor:pointer;
  text-decoration:underline;margin-top:var(--s3);padding:0;font-family:inherit;}
.qs-reset:hover{color:var(--accent);}

/* —— 灰度 —— */
#grayToggle{cursor:pointer;}
.gray-demo{display:flex;gap:var(--s3);align-items:stretch;margin-top:var(--s3);flex-wrap:wrap;}
.gray-card{flex:1;min-width:180px;background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--radius);padding:var(--s4);}
.gray-card.is-gray{filter:grayscale(1) contrast(.95);}
.gray-card .gk{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;}
.gray-card .gt{font-family:var(--display);font-weight:900;font-size:1.4rem;margin:6px 0;}
.gray-card .gp{font-size:.85rem;color:var(--ink-2);margin-bottom:12px;}
.gray-card .gbtn{display:inline-block;background:var(--accent);color:#fff;font-weight:600;font-size:.8rem;padding:7px 16px;border-radius:8px;}
.toggle-btn{font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;background:var(--ink);color:var(--bg);
  border:none;border-radius:99px;padding:8px 20px;margin-top:var(--s2);}

/* —— 每日一练 —— */
.daily-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s3);margin:var(--s4) 0 var(--s3);}
.dl-streak{font-size:.95rem;color:var(--ink-2);font-weight:600;}
.dl-streak b{font-family:var(--display);font-size:1.4rem;color:var(--accent);margin:0 4px;}
.dl-done{color:var(--good);font-weight:600;margin-left:6px;font-size:.85rem;}
.dl-todo{color:var(--ink-3);font-weight:500;margin-left:6px;font-size:.85rem;}
.dl-week{display:flex;gap:6px;}
.dl-dot{width:16px;height:16px;border-radius:5px;background:var(--bg);border:var(--bw) solid var(--line-strong);}
.dl-dot.on{background:var(--accent);border-color:var(--accent);}
.dl-dot.today{box-shadow:0 0 0 2px var(--accent-soft);}
.daily-card{margin-top:var(--s2);}
.daily-q{font-family:var(--serif);font-weight:700;font-size:1.15rem;margin-bottom:var(--s3);}
.daily-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-bottom:var(--s4);}
@media(max-width:640px){.daily-pair{grid-template-columns:1fr;}}
.daily-side{position:relative;border:var(--bw) solid var(--line);border-radius:var(--radius);padding:var(--s4);
  background:var(--surface);transition:border-color .2s,background .2s;}
.daily-side.is-good{border-color:var(--good);background:#f1faf5;}
.ds-no{position:absolute;top:8px;right:10px;font-family:var(--display);font-weight:700;color:var(--ink-3);font-size:.95rem;}
.daily-side.is-good .ds-no{color:var(--good);}
.five-q{background:var(--bg);border:var(--bw) solid var(--line);border-radius:var(--radius);padding:var(--s3) var(--s4);margin-bottom:var(--s3);}
.five-q-h{font-weight:700;font-size:.9rem;margin-bottom:var(--s2);color:var(--ink);}
.five-q ol{margin:0 0 0 var(--s4);display:grid;gap:var(--s3);color:var(--ink-2);font-size:.9rem;line-height:1.6;}
.five-q ol li b{color:var(--ink);}
.dl-input{display:block;width:100%;font:inherit;font-size:.88rem;line-height:1.5;color:var(--ink);
  background:var(--surface);border:var(--bw) solid var(--line-strong);border-radius:8px;
  padding:7px 10px;margin-top:5px;resize:vertical;}
.dl-input::placeholder{color:var(--ink-3);}
.dl-input:focus{outline:none;border-color:var(--accent);}
/* 对照反馈 */
.dl-feedback{display:none;margin-top:var(--s3);border:var(--bw) solid var(--line);border-radius:var(--radius);
  padding:var(--s3) var(--s4);background:var(--bg);}
.dl-feedback.show{display:block;}
.dl-feedback h5{font-family:var(--serif);font-weight:700;font-size:1rem;margin-bottom:var(--s2);color:var(--ink);}
.dl-feedback .fb-line{font-size:.9rem;color:var(--ink-2);margin-bottom:var(--s2);line-height:1.7;}
.dl-feedback .fb-line:last-child{margin-bottom:0;}
.dl-feedback .fb-line b{color:var(--ink);}
.fb-miss{color:var(--ink-2);}
.fb-std{border-left:3px solid var(--accent);background:var(--accent-soft);padding:var(--s2) var(--s3);border-radius:0 8px 8px 0;}
.fb-chip{display:inline-block;font-size:.78rem;border-radius:99px;padding:2px 10px;margin:2px 4px 2px 0;
  border:var(--bw) solid var(--line-strong);}
.fb-chip.hit{color:var(--good);border-color:#bfe3cf;background:#f1faf5;}
.fb-chip.miss{color:var(--accent);border-color:#eccdd5;background:var(--accent-soft);}
/* AI 深度点评 */
.dl-ai{margin-top:var(--s3);}
.dl-ai-btn{font:inherit;font-weight:600;font-size:.88rem;cursor:pointer;background:var(--surface);
  color:var(--accent);border:var(--bw) solid var(--accent);border-radius:99px;padding:8px 18px;}
.dl-ai-btn:hover{background:var(--accent-soft);}
.dl-ai-btn:disabled{opacity:.6;cursor:default;}
.dl-ai-out{display:none;margin-top:var(--s3);white-space:pre-wrap;font-size:.92rem;line-height:1.8;color:var(--ink);
  border:var(--bw) solid var(--line);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;
  background:var(--surface);padding:var(--s3) var(--s4);}
.dl-ai-out.show{display:block;}

/* —— 真实界面训练场 —— */
.fl-card{margin-top:var(--s2);}
.fl-source{margin-bottom:var(--s4);}
.fl-url{display:block;width:100%;font:inherit;font-size:.9rem;color:var(--ink);background:var(--surface);
  border:var(--bw) solid var(--line-strong);border-radius:8px;padding:9px 12px;margin-bottom:var(--s2);}
.fl-url::placeholder{color:var(--ink-3);}
.fl-url:focus{outline:none;border-color:var(--accent);}
.fl-srow{display:flex;gap:var(--s4);align-items:center;}
.fl-upload{font:inherit;font-weight:600;font-size:.85rem;cursor:pointer;background:var(--surface);
  color:var(--accent);border:var(--bw) solid var(--accent);border-radius:99px;padding:6px 16px;}
.fl-upload:hover{background:var(--accent-soft);}
.fl-open{font-size:.85rem;color:var(--accent);text-decoration:none;font-weight:600;}
.fl-open:hover{text-decoration:underline;}
.fl-preview{margin-top:var(--s3);}
.fl-preview img{max-width:100%;border:var(--bw) solid var(--line-strong);border-radius:var(--radius);display:block;}
.fl-history{margin-top:var(--s5);}
.fl-history h4{font-family:var(--serif);font-weight:700;font-size:1.05rem;margin-bottom:var(--s3);
  display:flex;align-items:center;gap:var(--s2);}
.fl-note{border:var(--bw) solid var(--line);border-radius:var(--radius);padding:var(--s3) var(--s4);
  margin-bottom:var(--s2);background:var(--surface);}
.fl-note-time{font-size:.78rem;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-right:var(--s3);}
.fl-note-src{font-size:.8rem;color:var(--accent);font-weight:600;}
.fl-note-body{font-size:.85rem;color:var(--ink-2);margin-top:4px;line-height:1.6;}

/* —— brief 生成器 —— */
.brief-form{margin-top:var(--s2);}
.brief-field{margin-bottom:var(--s3);}
.brief-field label{display:block;font-size:.88rem;font-weight:600;color:var(--ink);margin-bottom:5px;}
.brief-field.is-each{border-left:3px solid var(--accent);padding-left:var(--s3);margin-left:calc(-1 * var(--s3) - 3px);}
.bf-tag{font-size:.7rem;font-weight:700;border-radius:6px;padding:1px 7px;vertical-align:middle;margin-left:4px;
  color:var(--ink-3);background:var(--bg);border:var(--bw) solid var(--line-strong);}
.bf-tag.arch{color:var(--accent);background:var(--accent-soft);border-color:#eccdd5;}
.brief-actions{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;margin-top:var(--s2);}
.brief-out-wrap{display:none;margin-top:var(--s4);}
.brief-out-wrap.show{display:block;}
.brief-out{font-family:var(--sans);line-height:1.7;background:var(--bg);}
.brief-copy{margin-top:var(--s3);}

/* —— anti-slop 验收器 —— */
.as-card{margin-top:var(--s2);}
.as-group{margin-bottom:var(--s4);}
.as-group h4{font-family:var(--serif);font-weight:700;font-size:1rem;margin-bottom:var(--s3);
  display:flex;align-items:center;gap:var(--s2);}
.as-item{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  padding:var(--s2) var(--s3);border:var(--bw) solid var(--line);border-radius:10px;margin-bottom:6px;
  background:var(--surface);transition:border-color .15s,background .15s;}
.as-item.is-pass{border-color:var(--good);background:#f1faf5;}
.as-item.is-fail{border-color:var(--bad);background:#fdf1ef;}
.as-q{font-size:.9rem;color:var(--ink);line-height:1.5;}
.as-btns{display:flex;gap:6px;flex:none;}
.as-b{font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;border-radius:99px;padding:4px 14px;
  background:var(--surface);border:var(--bw) solid var(--line-strong);color:var(--ink-2);}
.as-pass.on{background:var(--good);border-color:var(--good);color:#fff;}
.as-fail.on{background:var(--bad);border-color:var(--bad);color:#fff;}
.as-stat{font-size:.92rem;color:var(--ink-2);margin:var(--s4) 0 var(--s3);font-weight:600;}
.as-stat .as-okn{color:var(--good);}
.as-stat .as-badn{color:var(--bad);}
.as-out-wrap{display:none;margin-top:var(--s4);}
.as-out-wrap.show{display:block;}
.as-out{font-family:var(--sans);line-height:1.7;background:var(--bg);}
.as-copy{margin-top:var(--s3);}
.daily-ex{margin-top:var(--s3);font-size:.92rem;color:var(--ink-2);display:none;
  border-left:3px solid var(--good);padding:var(--s2) var(--s3);background:#f1faf5;border-radius:0 8px 8px 0;}
.daily-ex.show{display:block;}
.dl-actions{margin-top:var(--s4);}
.dl-checkin{font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;background:var(--accent);color:#fff;
  border:none;border-radius:99px;padding:9px 22px;}
.dl-checkin.done{background:var(--good);cursor:default;opacity:.9;}