.topic-app {
  margin: 1rem 0 1.8rem; padding: 1.1rem;
  border: 1px solid var(--danl-line, #dce4ee); border-radius: 16px;
  background: var(--danl-surface, #f7f9fc); min-width: 0;
}
.topic-app .topic-app-title { margin: 0 0 .45rem; padding: 0; border: 0; font-size: 1.3rem; line-height: 1.35; }
.topic-app-intro { margin: 0 0 1rem; font-size: .9rem; line-height: 1.6; }
.topic-app-controls { display: flex; flex-wrap: wrap; align-items: end; gap: .65rem; margin: .8rem 0; }
.topic-app-controls > label, .topic-app-control, .topic-app-field {
  display: flex; flex: 1 1 155px; flex-direction: column; gap: .25rem;
  min-width: 0; font-size: .78rem; font-weight: 650;
}
.topic-app input:not([type="checkbox"]), .topic-app select, .topic-app button {
  max-width: 100%; min-height: 40px; padding: .4rem .6rem; border-radius: 7px;
  border: 1px solid var(--danl-line, #ccd6e3); background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #23334a); font: inherit; font-size: .86rem;
}
.topic-app select, .topic-app input:not([type="checkbox"]) { width: 100%; min-width: 0; }
.topic-app input[type="checkbox"] { width: 17px; height: 17px; accent-color: #227f9e; }
.topic-app :is(.topic-app-checkbox,.topic-app-check) { display: flex; flex-direction: row; align-items: center; align-self: center; gap: .45rem; flex-basis: 100%; font-weight: 500; }
.topic-app button { cursor: pointer; }
.topic-app :is(input, select, button):focus-visible { outline: 3px solid #41a7cf; outline-offset: 2px; }
.topic-app-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .55rem; margin: 1rem 0; }
.topic-app-summary > * { padding: .6rem .75rem; border-radius: 9px; border: 1px solid var(--danl-line, #dce4ee); background: var(--bs-body-bg, #fff); min-width: 0; }
.topic-app-summary :is(.topic-app-label,.topic-app-stat-label,.topic-app-card-label) { display: block; color: var(--danl-muted, #596579); font-size: .75rem; line-height: 1.4; }
.topic-app-summary :is(.topic-app-value,.topic-app-stat-value,.topic-app-card-value) { display: block; font-size: 1.25rem; font-weight: 700; line-height: 1.6; }
.topic-app-summary strong { display: block; font-size: 1.2rem; line-height: 1.5; }
.topic-app-summary small { display: block; color: var(--danl-muted, #596579); font-size: .74rem; }
.topic-app-summary > .topic-app-card > span { display: block; color: var(--danl-muted, #596579); font-size: .75rem; }
.topic-app-stat > p { margin: .25rem 0; }
.topic-app-stat > h3 { margin: 0 0 .4rem; font-size: 1rem; }
.topic-app-stat-note { font-size: .73rem; color: var(--danl-muted, #596579); line-height: 1.45; }
.topic-app-chart { width: 100%; height: 400px; min-width: 0; }
.topic-app-chart .modebar { z-index: 2; }
.topic-app-chart .modebar-btn path { fill: var(--danl-muted, #596579) !important; }
.topic-app-details { margin-top: .7rem; min-width: 0; }
.topic-app-details h3 { font-size: 1.02rem; margin: 1rem 0 .4rem; }
.topic-app-details p { font-size: .85rem; margin: .5rem 0; }
.topic-app-details .topic-app-focus { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; font-weight: 650; }
.topic-app-details .topic-app-control { flex: none; }
.topic-app-data-table { font-size: .8rem; margin: .7rem 0; }
.topic-app-data-table summary { cursor: pointer; font-weight: 650; }
.topic-app-data-details summary { cursor: pointer; font-weight: 650; font-size: .8rem; }
.topic-app-reference-moves { overflow-wrap: anywhere; color: var(--danl-muted, #596579); }
.topic-app :is(.topic-app-table-wrap,.topic-app-table-scroll) { overflow-x: auto; max-width: 100%; }
.topic-app table { width: 100%; margin: .65rem 0; border-collapse: collapse; font-size: .78rem; }
.topic-app table caption { color: var(--danl-muted, #596579); font-size: .76rem; text-align: left; }
.topic-app th, .topic-app td { border-bottom: 1px solid var(--danl-line, #dce4ee); padding: .45rem .4rem; text-align: left; }
.topic-app th { font-weight: 650; }
.topic-app :is(.topic-app-status,.topic-app-notes,.topic-app-note,.topic-app-help,.topic-app-hint) { font-size: .77rem; line-height: 1.6; }
.topic-app-detail-note, .topic-app-source-links { font-size: .77rem; line-height: 1.6; }
.topic-app-status { margin: .7rem 0; }
.topic-app-notes { margin: .6rem 0 0; color: var(--danl-muted, #596579); }
.topic-app-notes a { color: inherit; text-decoration: underline; }
.topic-app [hidden] { display: none !important; }
@media (max-width: 600px) {
  .topic-app { padding: .75rem; }
  .topic-app-controls > label, .topic-app-control, .topic-app-field { flex-basis: 130px; }
  .topic-app-chart { height: 370px; }
  .topic-app-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-app .topic-app-title { font-size: 1.2rem; }
}