/* ===== 看图识考点 · Learning Terminal extension ===== */
.visual-specialty-entry{
  position:relative;overflow:hidden;border-color:var(--lt-line-strong)!important;
  background:linear-gradient(105deg,rgba(56,196,184,.09),transparent)!important
}
.visual-specialty-entry::after{
  content:"VISUAL / 01";position:absolute;right:16px;top:12px;color:var(--lt-text-3);
  font:700 9px var(--font-metric);letter-spacing:.12em
}
.visual-specialty-entry .vs-entry-mark{
  display:inline-flex;width:auto;height:auto;padding:0;background:none;color:var(--lt-accent);
  font:800 11px var(--font-metric);letter-spacing:.08em
}
.visual-hub,.visual-practice{max-width:1120px;margin:0 auto;padding-bottom:54px;color:var(--lt-text)}
.visual-specialty-bar{border-left-color:var(--lt-accent)!important}

/* Hub: same information density and surfaces as the quiz center. */
.visual-hero{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(290px,.75fr);
  gap:12px;margin:18px 0 20px
}
.visual-hero-copy,.visual-hero-stats{
  border:1px solid var(--lt-line);border-radius:12px;background:rgba(13,26,36,.82)
}
.visual-hero-copy{padding:25px 26px}
.visual-kicker{display:block;color:var(--lt-accent);font:700 10px var(--font-metric);letter-spacing:.14em}
.visual-hero h2{
  margin:8px 0 8px;color:var(--lt-text);font:700 clamp(26px,3.4vw,42px)/1 var(--font-display);
  letter-spacing:-.045em
}
.visual-hero p{max-width:620px;margin:0;color:var(--lt-text-2);font-size:13px;line-height:1.75}
.visual-hero-points{display:flex;flex-wrap:wrap;gap:7px;margin-top:17px}
.visual-hero-points span,.visual-relation-strip span{
  padding:5px 8px;border:1px solid var(--lt-line);border-radius:5px;
  background:rgba(255,255,255,.025);color:var(--lt-text-3);font:600 10px var(--font-ui)
}
.visual-hero-stats{display:grid;grid-template-columns:1fr 1fr;padding:7px}
.visual-hero-stat{
  display:flex;flex-direction:column;justify-content:flex-end;min-height:84px;padding:13px;
  border-right:1px solid var(--lt-line);border-bottom:1px solid var(--lt-line)
}
.visual-hero-stat:nth-child(2n){border-right:0}.visual-hero-stat:nth-child(n+3){border-bottom:0}
.visual-hero-stat strong{color:var(--lt-text);font:700 27px var(--font-metric)}
.visual-hero-stat span{margin-top:4px;color:var(--lt-text-3);font-size:10px}

.visual-mode-bar{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 17px;
  padding:6px;border:1px solid var(--lt-line);border-radius:12px;background:rgba(7,17,26,.72)
}
.visual-mode-bar button{
  min-height:48px;padding:8px 12px;border:1px solid transparent;border-radius:8px;
  background:transparent;color:var(--lt-text-3);cursor:pointer;text-align:left
}
.visual-mode-bar button:hover{background:rgba(255,255,255,.03);color:var(--lt-text)}
.visual-mode-bar button.on{
  border-color:var(--lt-line-strong);background:var(--lt-surface-2);color:var(--lt-text);
  box-shadow:inset 3px 0 var(--lt-accent)
}
.visual-mode-bar button b{display:block;font-size:12px}.visual-mode-bar button small{display:block;margin-top:3px;font-size:10px;color:inherit;opacity:.75}

.visual-group-bar{
  display:flex;gap:6px;overflow:auto;margin:0 0 14px;padding:5px;
  border:1px solid var(--lt-line);border-radius:10px;background:rgba(7,17,26,.55)
}
.visual-group-bar button{
  flex:0 0 auto;display:flex;align-items:baseline;gap:7px;padding:8px 10px;
  border:1px solid transparent;border-radius:7px;background:transparent;color:var(--lt-text-3);
  cursor:pointer;text-align:left
}
.visual-group-bar button:hover{background:rgba(255,255,255,.03);color:var(--lt-text)}
.visual-group-bar button.on{
  border-color:var(--lt-line-strong);background:var(--lt-surface-2);color:var(--lt-text);
  box-shadow:inset 0 -2px var(--vg,var(--lt-accent))
}
.visual-group-bar button b{font-size:11px}.visual-group-bar button small{font:700 9px var(--font-metric);opacity:.72}
.visual-hub-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.visual-group-label{
  grid-column:1/-1;display:flex;justify-content:space-between;align-items:end;
  margin-top:5px;padding:13px 2px 7px;border-bottom:1px solid var(--lt-line);
  color:var(--lt-text-3);font-size:10px
}
.visual-group-label b{color:var(--lt-text-2);font-size:13px}
.visual-object-card{
  position:relative;min-width:0;padding:0;overflow:hidden;border:1px solid var(--lt-line);
  border-radius:10px;background:var(--lt-surface);color:var(--lt-text);cursor:pointer;text-align:left;
  transition:border-color .18s,transform .18s,background .18s
}
.visual-object-card:hover{transform:translateY(-2px);border-color:var(--lt-line-strong);background:var(--lt-surface-2)}
.visual-object-visual{position:relative;display:block;overflow:hidden}
.visual-object-visual::after{
  content:"";position:absolute;inset:auto 0 0;height:42%;pointer-events:none;
  background:linear-gradient(transparent,rgba(4,12,17,.78))
}
.visual-object-visual img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  border-bottom:1px solid var(--lt-line);background:#08131b
}
.visual-object-visual>strong{
  position:absolute;z-index:1;left:11px;right:11px;bottom:10px;color:#fff;
  font:700 16px/1.2 var(--font-display);letter-spacing:-.02em;
  text-shadow:0 1px 8px rgba(0,0,0,.65)
}
.visual-card-source{
  position:absolute;z-index:2;left:9px;top:9px;padding:4px 6px;border:1px solid rgba(255,255,255,.24);
  border-radius:4px;background:rgba(7,17,26,.78);color:#d7e7e4;
  font:700 8px var(--font-metric);letter-spacing:.08em;backdrop-filter:blur(4px)
}
.visual-card-source.real{border-color:rgba(56,196,184,.5);color:#72dfd4}
.visual-object-copy{padding:11px 12px 13px}
.visual-object-copy b{display:block;color:var(--lt-text);font-size:14px}
.visual-object-copy span{display:block;margin-top:4px;color:var(--lt-text-3);font-size:10px;line-height:1.45}
.visual-object-copy em{
  display:inline-block;margin-top:8px;color:var(--lt-accent);font:600 9px var(--font-metric);
  letter-spacing:.035em;font-style:normal
}
.visual-progress-note{margin:18px 0 0;color:var(--lt-text-3);font-size:11px}
.visual-progress-note b{color:var(--lt-accent);font-weight:600}

/* Practice: image is evidence, options stay in the familiar quiz instrument. */
.visual-practice-top{
  display:flex;align-items:end;justify-content:space-between;gap:15px;margin:18px 0 12px
}
.visual-practice-top h2{margin:0;color:var(--lt-text);font:700 27px var(--font-display);letter-spacing:-.03em}
.visual-practice-top p{margin:5px 0 0;color:var(--lt-text-3);font-size:11px}
.visual-practice-score{text-align:right;color:var(--lt-text-3);font:600 10px var(--font-metric)}
.visual-practice-score b{color:var(--lt-text);font:700 20px var(--font-metric)}
.visual-progress-line{height:3px;margin-bottom:13px;overflow:hidden;background:rgba(139,167,177,.12)}
.visual-progress-line i{display:block;height:100%;background:var(--lt-accent);transition:width .2s}
.visual-question{
  display:grid;grid-template-columns:minmax(300px,.92fr) minmax(0,1.08fr);gap:0;
  overflow:hidden;border:1px solid var(--lt-line);border-radius:12px;
  background:linear-gradient(145deg,rgba(17,34,45,.98),rgba(10,23,33,.98))
}
.visual-question-media{position:relative;min-height:430px;overflow:hidden;background:#08131b;border-right:1px solid var(--lt-line)}
.visual-question-media img{display:block;width:100%;height:100%;min-height:430px;object-fit:cover}
.visual-media-stamp{
  position:absolute;left:13px;top:13px;padding:5px 7px;border:1px solid var(--lt-line-strong);
  border-radius:4px;background:rgba(7,17,26,.82);color:var(--lt-accent);
  font:700 8px var(--font-metric);letter-spacing:.12em
}
.visual-media-source{
  position:absolute;z-index:2;right:13px;top:13px;max-width:48%;overflow:hidden;text-overflow:ellipsis;
  padding:5px 7px;border:1px solid rgba(255,255,255,.22);border-radius:4px;
  background:rgba(7,17,26,.82);color:#d5e4e1;text-decoration:none;white-space:nowrap;
  font:600 8px var(--font-metric);letter-spacing:.035em
}
.visual-media-source:hover{border-color:var(--lt-accent);color:var(--lt-accent)}
.visual-media-name{
  position:absolute;z-index:1;left:13px;right:13px;bottom:14px;padding:10px 12px;
  border:1px solid rgba(255,255,255,.28);border-radius:8px;background:rgba(4,13,18,.76);
  color:#fff;font:700 20px/1.15 var(--font-display);letter-spacing:-.03em;
  text-shadow:0 1px 8px rgba(0,0,0,.55);backdrop-filter:blur(4px);transition:opacity .18s,filter .18s
}
.visual-media-name.is-hidden{opacity:0;filter:blur(8px);pointer-events:none}
.visual-question-copy{display:flex;flex-direction:column;min-width:0;padding:22px 23px 20px}
.visual-q-meta{display:flex;justify-content:space-between;gap:12px;color:var(--lt-text-3);font-size:9px}
.visual-q-meta b{color:var(--lt-accent);font:700 9px var(--font-metric);letter-spacing:.08em}
.visual-question-copy h3{margin:28px 0 20px;color:var(--lt-text);font-size:20px;line-height:1.55}
.visual-options{display:grid;gap:8px;margin-top:auto}
.visual-options button{
  display:grid;grid-template-columns:27px 1fr;gap:10px;align-items:center;min-height:47px;
  padding:10px 12px;border:1px solid var(--lt-line);border-radius:9px;
  background:rgba(255,255,255,.025);color:var(--lt-text);cursor:pointer;text-align:left;font-size:12px
}
.visual-options button:hover{border-color:var(--lt-line-strong);background:rgba(56,196,184,.05)}
.visual-options button .k{
  display:grid;place-items:center;width:24px;height:24px;border-radius:6px;
  background:rgba(255,255,255,.055);color:var(--lt-text-2);font:700 10px var(--font-metric)
}
.visual-options button.correct{border-color:rgba(56,196,184,.65);background:rgba(56,196,184,.09);box-shadow:inset 3px 0 var(--lt-accent)}
.visual-options button.correct .k{background:var(--lt-accent);color:#071a1b}
.visual-options button.wrong{border-color:rgba(223,106,96,.72);background:rgba(223,106,96,.08);box-shadow:inset 3px 0 var(--lt-danger)}
.visual-options button.wrong .k{background:var(--lt-danger);color:#fff}
.visual-options button:disabled{cursor:default}
.visual-feedback{
  margin-top:13px;padding:13px 14px;border-left:3px solid var(--lt-danger);
  border-radius:7px;background:rgba(223,106,96,.065)
}
.visual-feedback.good{border-left-color:var(--lt-accent);background:rgba(56,196,184,.06)}
.visual-feedback b{display:block;color:var(--lt-text);font-size:12px}
.visual-feedback p{margin:5px 0 0;color:var(--lt-text-2);font-size:11px;line-height:1.65}
.visual-feedback small{display:block;margin-top:8px;color:var(--lt-text-3);font-size:10px}
.visual-source-question{
  margin-top:11px;padding:11px 12px;border:1px solid var(--lt-line);
  border-radius:8px;background:rgba(255,255,255,.025)
}
.visual-source-question>span{
  display:block;color:var(--lt-accent);font:700 9px var(--font-metric);letter-spacing:.1em
}
.visual-source-question p{margin:5px 0 0;color:var(--lt-text-2);font-size:11px;line-height:1.55}
.visual-source-question small{display:block;margin-top:6px;color:var(--lt-text-3);font-size:10px}
.visual-relation-strip{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.visual-relation-locked{
  margin-top:11px;padding:9px 11px;border:1px dashed var(--lt-line);
  border-radius:7px;color:var(--lt-text-3);font-size:10px
}
.visual-next{display:flex;justify-content:space-between;gap:9px;margin-top:11px}
.visual-next button{
  min-height:41px;padding:0 15px;border:1px solid var(--lt-line);border-radius:8px;
  background:rgba(255,255,255,.025);color:var(--lt-text-2);cursor:pointer
}
.visual-next button:hover{border-color:var(--lt-line-strong);color:var(--lt-text)}
.visual-next button.primary{border-color:var(--lt-accent);background:var(--lt-accent);color:#071a1b;font-weight:750}
.visual-next button:disabled{opacity:.35;cursor:default}

/* Day mode follows the project's paper-like quiz palette. */
html[data-theme="day"] body[data-view="quiz"] .visual-hub,
html[data-theme="day"] body[data-view="quiz"] .visual-practice{color:#17343a}
html[data-theme="day"] body[data-view="quiz"] :is(.visual-hero-copy,.visual-hero-stats,.visual-object-card){
  background:#fff;border-color:rgba(40,76,82,.14)
}
html[data-theme="day"] body[data-view="quiz"] .visual-hero h2,
html[data-theme="day"] body[data-view="quiz"] :is(.visual-hero-stat strong,.visual-object-copy b,.visual-practice-top h2,.visual-question-copy h3){color:#17343a}
html[data-theme="day"] body[data-view="quiz"] :is(.visual-hero p,.visual-object-copy span,.visual-practice-top p,.visual-practice-score,.visual-q-meta,.visual-feedback p){color:#657a7d}
html[data-theme="day"] body[data-view="quiz"] .visual-mode-bar{background:#f2f5f2;border-color:rgba(40,76,82,.14)}
html[data-theme="day"] body[data-view="quiz"] .visual-group-bar{background:#f2f5f2;border-color:rgba(40,76,82,.14)}
html[data-theme="day"] body[data-view="quiz"] .visual-mode-bar button{color:#657a7d}
html[data-theme="day"] body[data-view="quiz"] .visual-mode-bar button.on{background:#fff;color:#17343a;border-color:rgba(19,127,145,.35);box-shadow:inset 3px 0 #137f91}
html[data-theme="day"] body[data-view="quiz"] .visual-group-bar button{color:#657a7d}
html[data-theme="day"] body[data-view="quiz"] .visual-group-bar button.on{background:#fff;color:#17343a;border-color:rgba(19,127,145,.35)}
html[data-theme="day"] body[data-view="quiz"] .visual-question{background:#fff;border-color:rgba(40,76,82,.16)}
html[data-theme="day"] body[data-view="quiz"] .visual-options button{background:#fbfcfa;color:#17343a;border-color:rgba(40,76,82,.14)}
html[data-theme="day"] body[data-view="quiz"] .visual-next button{background:#fff;color:#657a7d;border-color:rgba(40,76,82,.14)}
html[data-theme="day"] body[data-view="quiz"] .visual-source-question,
html[data-theme="day"] body[data-view="quiz"] .visual-relation-locked{background:#f7faf7;border-color:rgba(40,76,82,.14)}
html[data-theme="day"] body[data-view="quiz"] .visual-source-question p{color:#435d61}

@media(max-width:900px){
  .visual-hero{grid-template-columns:1fr}.visual-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .visual-question{grid-template-columns:1fr}.visual-question-media{min-height:auto;border-right:0;border-bottom:1px solid var(--lt-line)}
  .visual-question-media img{height:auto;min-height:0;aspect-ratio:4/3}
}
@media(max-width:560px){
  .visual-mode-bar{grid-template-columns:1fr 1fr}.visual-hub-grid{gap:7px}
  .visual-hero-copy{padding:20px}.visual-object-copy{padding:9px 10px 11px}
  .visual-object-copy b{font-size:13px}.visual-object-copy span{font-size:9px}
  .visual-practice-top h2{font-size:23px}.visual-question-copy{padding:18px 13px 15px}
  .visual-question-copy h3{margin:22px 0 17px;font-size:18px}.visual-q-meta span{max-width:58%;text-align:right}
  .visual-object-visual>strong{left:9px;bottom:8px;font-size:14px}
  .visual-media-name{left:10px;right:10px;bottom:11px;padding:8px 10px;font-size:17px}
}