.thumbnail-details {
  --td-ink: #eef7ff;
  --td-muted: #a6bbcf;
  --td-cyan: #56f1ff;
  --td-lime: #d8ff49;
  --td-red: #ff728a;
  --td-gold: #ffd166;
  --td-line: #2b405b;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: clamp(18px, 2.5vw, 34px);
  color: var(--td-ink);
  background: linear-gradient(145deg, #111c2d, #0b1220);
  border: 1px solid var(--td-line);
  border-radius: 18px;
  scrollbar-width: thin;
  scrollbar-color: #36506b transparent;
}
.thumbnail-details *, .thumbnail-details *::before, .thumbnail-details *::after { box-sizing: border-box; }
.thumbnail-details .td-header { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 25px; }
.thumbnail-details .td-heading h2 { margin: 7px 0 0; color: var(--td-ink); font-size: clamp(22px, 2vw, 30px); line-height: 1.45; }
.thumbnail-details .td-kicker { display: block; color: var(--td-lime); font-size: 10px; line-height: 1.6; font-weight: 750; letter-spacing: .14em; }
.thumbnail-details .td-back { flex-shrink: 0; border: 1px solid #4a6a86; background: #172b40; color: #d9faff; border-radius: 999px; padding: 12px 19px; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.thumbnail-details .td-back:hover { border-color: var(--td-cyan); background: #1e354d; }
.thumbnail-details :is(button, input, summary):focus-visible { outline: 2px solid var(--td-cyan); outline-offset: 4px; }
.thumbnail-details .td-review-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(310px, .9fr); align-items: start; gap: 22px; }
.thumbnail-details .td-card { min-width: 0; border: 1px solid var(--td-line); border-radius: 14px; padding: 22px; background: linear-gradient(150deg, #162336, #101a2a); box-shadow: 0 12px 28px #00000026; }
.thumbnail-details .td-card-title { margin: 6px 0 15px; color: var(--td-ink); font-size: 17px; font-weight: 650; line-height: 1.6; }
.thumbnail-details .td-explanation { display: grid; gap: 18px; min-width: 0; }
.thumbnail-details .td-figure { margin: 0; }
.thumbnail-details .td-image-surface { position: relative; width: 100%; border-radius: 9px; overflow: hidden; background: #080e17; line-height: 0; }
.thumbnail-details .td-original-image { display: block; width: 100%; height: auto; max-width: 100%; margin: 0; }
.thumbnail-details .td-overlay { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.thumbnail-details .td-region { stroke-width: 2.5; stroke-linejoin: round; }
.thumbnail-details .td-region--headline { fill: #ff728a0d; stroke: var(--td-red); filter: drop-shadow(0 0 3px #290009); }
.thumbnail-details .td-region--subject { fill: #56f1ff0a; stroke: var(--td-cyan); filter: drop-shadow(0 0 3px #00171c); }
.thumbnail-details .td-region--first-attention { fill: #ffd16613; stroke: var(--td-gold); stroke-dasharray: 8 5; filter: drop-shadow(0 0 3px #332200); }
.thumbnail-details .td-image-empty { min-height: 220px; margin: 0; display: grid; place-items: center; padding: 30px; color: var(--td-muted); font-size: 14px; line-height: 1.9; text-align: center; }
.thumbnail-details .td-caption { margin: 12px 0 0; color: var(--td-muted); font-size: 12px; line-height: 1.9; }
.thumbnail-details .td-attention-note { margin: 12px 0 0; padding: 10px 12px; color: #f6dd9e; background: #ffd1660a; border-left: 2px solid var(--td-gold); font-size: 12px; line-height: 1.9; }
.thumbnail-details .td-overlay-controls { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 14px 0 4px; margin: 19px 0 0; border: 0; border-top: 1px solid var(--td-line); }
.thumbnail-details .td-overlay-controls legend { padding: 0 9px 0 0; color: #c7d9eb; font-size: 12px; }
.thumbnail-details .td-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.7; cursor: pointer; }
.thumbnail-details .td-overlay-checkbox { width: 16px; height: 16px; margin: 0; accent-color: var(--td-cyan); }
.thumbnail-details .td-toggle--headline .td-overlay-checkbox { accent-color: var(--td-red); }
.thumbnail-details .td-toggle--first-attention .td-overlay-checkbox { accent-color: var(--td-gold); }
.thumbnail-details .td-color-key { width: 11px; height: 11px; border: 2px solid var(--td-cyan); border-radius: 2px; }
.thumbnail-details .td-toggle--headline .td-color-key { border-color: var(--td-red); }
.thumbnail-details .td-toggle--first-attention .td-color-key { border-color: var(--td-gold); border-style: dashed; }
.thumbnail-details .td-location-list { margin-top: 14px; display: grid; gap: 10px; }
.thumbnail-details .td-location { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 12px; padding: 12px 0; border-top: 1px solid #2b405b88; }
.thumbnail-details .td-location strong { color: #d5e5f5; font-size: 13px; font-weight: 600; }
.thumbnail-details .td-location-status { margin-left: auto; color: #d0c49c; font-size: 12px; }
.thumbnail-details .td-location-status.is-located { color: #9adbcf; }
.thumbnail-details .td-location small { flex-basis: 100%; color: var(--td-muted); font-size: 11px; line-height: 1.8; }
.thumbnail-details .td-muted { color: var(--td-muted); font-size: 12px; line-height: 1.95; margin: 8px 0 14px; overflow-wrap: anywhere; }
.thumbnail-details .td-finding { margin-top: 12px; padding: 14px 15px; border: 1px solid #a5904266; border-left: 3px solid var(--td-lime); border-radius: 8px; background: #d8ff4908; }
.thumbnail-details .td-finding-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.thumbnail-details .td-finding h4 { margin: 0; color: #f0f7dd; font-size: 14px; line-height: 1.7; font-weight: 650; }
.thumbnail-details .td-probability { flex-shrink: 0; color: #d5ed9e; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.thumbnail-details .td-finding p { margin: 8px 0 0; color: #c9d7e5; font-size: 13px; line-height: 1.95; overflow-wrap: anywhere; }
.thumbnail-details .td-finding small { display: block; margin-top: 9px; color: var(--td-muted); font-size: 11px; line-height: 1.9; }
.thumbnail-details .td-empty-finding { border: 1px dashed #35536a; border-radius: 8px; padding: 15px; margin: 14px 0 0; color: #aac4d9; font-size: 13px; line-height: 1.9; }
.thumbnail-details .td-uncertain { margin-top: 18px; border-top: 1px solid var(--td-line); padding-top: 14px; }
.thumbnail-details :is(.td-uncertain, .td-context-text, .td-criteria) > summary { color: #a9dfe8; font-size: 12px; line-height: 1.9; cursor: pointer; }
.thumbnail-details .td-finding.is-uncertain { border-color: #3d5269; border-left-color: #809bb5; background: #1a293b; }
.thumbnail-details .td-finding.is-uncertain h4 { color: #dce7ef; }
.thumbnail-details .td-finding.is-uncertain .td-probability { color: #b1c5d6; }
.thumbnail-details .td-context-none { margin: 0; padding: 13px 15px; border: 1px solid #35506a; border-radius: 8px; background: #122c3b; color: #b7d2e5; font-size: 13px; line-height: 1.95; }
.thumbnail-details .td-context-mode { margin: 0 0 6px; color: #d3f3e6; font-size: 14px; font-weight: 600; }
.thumbnail-details .td-context-text { margin: 12px 0; }
.thumbnail-details .td-context-text pre { margin: 12px 0 0; padding: 14px; max-height: 290px; overflow: auto; border: 1px solid #2b405b; border-radius: 8px; background: #0d1624; color: #c8d9e8; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 12px; line-height: 2; }
.thumbnail-details .td-card:has(> .td-naturalness) { border-color: #28656c; }
.thumbnail-details .td-card:has(> .td-naturalness) > .td-kicker { color: #71dfd9; }
.thumbnail-details .td-naturalness .ai-likeness-copy h3 { margin: 5px 0 7px; color: #c9fff7; font-size: 17px; line-height: 1.6; }
.thumbnail-details .td-naturalness .ai-likeness-kicker { color: #71dfd9; font-size: 9px; letter-spacing: .1em; }
.thumbnail-details .td-naturalness .ai-likeness-copy p { color: var(--td-muted); font-size: 12px; line-height: 1.9; }
.thumbnail-details .td-naturalness .ai-likeness-topline { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 15px 0 12px; }
.thumbnail-details .td-naturalness .ai-likeness-band { color: #71dfd9; font-size: 12px; }
.thumbnail-details .td-naturalness .ai-likeness-value { color: #9af8ed; font-size: 35px; font-weight: 550; line-height: 1; font-variant-numeric: tabular-nums; }
.thumbnail-details .td-naturalness .ai-likeness-value small { color: var(--td-muted); font-size: 12px; font-weight: 400; }
.thumbnail-details .td-naturalness .segmented-meter { display: grid; grid-template-columns: repeat(var(--segment-count, 20), minmax(0, 1fr)); gap: 3px; height: 9px; border-color: #28656c; }
.thumbnail-details .td-naturalness .segment-cell { display: block; background: #2c4056; border-radius: 1px; }
.thumbnail-details .td-naturalness .segment-cell.is-active { background: linear-gradient(180deg, #94ffeb, #25bfc1); }
.thumbnail-details .td-naturalness .ai-likeness-scale { display: flex; justify-content: space-between; gap: 15px; color: #8ebdbd; font-size: 10px; margin-top: 8px; }
.thumbnail-details .td-naturalness .ai-likeness-detail { margin-top: 16px; }
.thumbnail-details .td-naturalness .ai-likeness-detail summary { color: #a6dfdb; font-size: 12px; cursor: pointer; }
.thumbnail-details .td-naturalness .ai-likeness-detail p { margin: 10px 0; color: var(--td-muted); font-size: 12px; line-height: 1.95; }
.thumbnail-details .td-naturalness.is-unavailable .ai-likeness-value { color: #92a9bf; }
.thumbnail-details .td-quality { margin-top: 22px; }
.thumbnail-details .td-quality-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; margin-top: 18px; }
.thumbnail-details .td-quality-card { position: relative; min-width: 0; padding: 18px 15px; border: 1px solid #2d4562; border-radius: 10px; background: linear-gradient(150deg, #15283b, #101c2e); }
.thumbnail-details .td-axis-index { color: #6b93af; font-size: 10px; letter-spacing: .1em; }
.thumbnail-details .td-quality-card h4 { margin: 8px 0 14px; min-height: 3.2em; color: #dcebf8; font-size: 14px; line-height: 1.6; }
.thumbnail-details .td-quality-value { display: block; color: var(--td-cyan); font-size: 33px; line-height: 1.2; font-weight: 550; font-variant-numeric: tabular-nums; }
.thumbnail-details .td-quality-value small { color: #91a9be; font-size: 11px; font-weight: 400; }
.thumbnail-details .td-quality-track { height: 5px; margin-top: 14px; background: #293e56; border-radius: 3px; overflow: hidden; }
.thumbnail-details .td-quality-track > span { display: block; height: 100%; background: linear-gradient(90deg, #26c6dd, #9af7dc); border-radius: inherit; }
.thumbnail-details .td-confidence { margin: 12px 0 0; color: #a7c0d2; font-size: 11px; line-height: 1.9; }
.thumbnail-details .td-criteria { margin-top: 14px; padding-top: 12px; border-top: 1px solid #2e435b; }
.thumbnail-details .td-criteria p { margin: 12px 0 6px; color: #bbd0e2; font-size: 12px; line-height: 1.95; overflow-wrap: anywhere; }
.thumbnail-details .td-criteria small { color: #8eabc1; font-size: 10px; }
.thumbnail-details .td-footnote { margin: 22px 2px 0; color: #8faac2; font-size: 11px; line-height: 1.95; }
@media (max-width: 1250px) {
  .thumbnail-details .td-review-grid { grid-template-columns: minmax(0, 1.2fr) minmax(290px, .9fr); gap: 16px; }
  .thumbnail-details .td-card { padding: 18px; }
  .thumbnail-details .td-quality-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 940px) {
  .thumbnail-details .td-review-grid { grid-template-columns: minmax(0, 1fr); }
  .thumbnail-details .td-quality-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .thumbnail-details .td-quality-card h4 { min-height: 0; }
}
@media (max-width: 560px) {
  .thumbnail-details { padding: 16px; border-radius: 12px; }
  .thumbnail-details .td-header { align-items: flex-start; flex-direction: column; gap: 14px; }
  .thumbnail-details .td-back { padding: 10px 15px; font-size: 12px; }
  .thumbnail-details .td-card { padding: 16px; }
  .thumbnail-details .td-quality-grid { grid-template-columns: minmax(0, 1fr); }
  .thumbnail-details .td-finding-heading { flex-wrap: wrap; gap: 4px 12px; }
}