.speaking-topics { min-height: 100vh; color: #f7f3ea; background: #142b39; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
.topics-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1440px; margin: auto; padding: 12px 40px; border-bottom: 1px solid #ffffff20; }
.topics-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.topics-brand > span { display: grid; place-items: center; width: 40px; height: 40px; background: var(--acid); color: var(--ink); font: bold 20px Georgia, serif; }
.topics-back { padding: 12px 0; color: #c6d8e0; text-decoration: none; font-size: 14px; }
.topics-main { max-width: 1440px; margin: auto; padding: 20px 40px 32px; }
.topics-heading { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.topics-heading h1 { margin: 0; font: 700 24px/1.3 Georgia, "Songti SC", serif; }
.topics-total { flex: none; display: flex; align-items: baseline; gap: 5px; }
.topics-total strong { color: #bbced8; font-size: 14px; font-weight: 500; }
.topics-total span { color: #bbced8; font-size: 12px; }
.topics-tools { display: flex; align-items: stretch; justify-content: space-between; gap: 24px; margin: 16px 0 12px; }
.topics-parts { display: flex; border: 1px solid #ffffff40; }
.topics-parts a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 20px; font-weight: bold; text-decoration: none; border-right: 1px solid #ffffff40; }
.topics-parts a:last-child { border: 0; }
.topics-parts a span { font-size: 12px; font-weight: normal; }
.topics-parts a[aria-current="page"] { background: var(--acid); color: var(--ink); }
.topics-search { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid #ffffff60; }
.topics-search > span { font-size: 28px; color: var(--acid); }
.topics-search input { min-width: 0; width: 220px; padding: 10px 0; color: white; background: transparent; border: 0; }
.topics-search input::placeholder { color: #b6c9d2; }
.bank-progress { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; min-height: 18px; }
.bank-progress-heading { order: 1; flex: none; min-width: 32px; text-align: right; }
#bank-progress-percent { color: #bbced8; font: 500 12px/1.5 "Microsoft YaHei", sans-serif; }
#bank-progress-bar { display: block; flex: 1; min-width: 0; width: 100%; height: 6px; border: 0; border-radius: 20px; overflow: hidden; background: #ffffff18; appearance: none; }
#bank-progress-bar::-webkit-progress-bar { background: #ffffff18; border-radius: 20px; }
#bank-progress-bar::-webkit-progress-value { background: var(--acid); border-radius: 20px; }
#bank-progress-bar::-moz-progress-bar { background: var(--acid); border-radius: 20px; }
.topics-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.topic-tile { min-height: 214px; display: flex; flex-direction: column; align-items: center; padding: 24px 18px 18px; border: 1px solid #ffffff26; border-radius: 16px; background: #213c4b; color: #fffdf7; text-align: center; text-decoration: none; transition: transform .18s, border-color .18s, background .18s; }
.topic-tile:hover { transform: translateY(-4px); background: #2a495a; border-color: #bfe8ef; }
.topic-tile:focus-visible, .topics-parts a:focus-visible, .topics-header a:focus-visible, .topics-retry:focus-visible { outline: 3px solid var(--acid); outline-offset: 4px; }
.topic-tile .topic-emoji { font: 42px/1.2 "Apple Color Emoji", "Segoe UI Emoji", sans-serif; margin-bottom: 16px; }
.topic-tile h2 { width: 100%; margin: 0 0 18px; font: 500 16px/1.5 Georgia, "Microsoft YaHei", serif; overflow-wrap: anywhere; }
.tile-progress { width: 100%; margin-top: auto; }
.tile-progress span { display: block; margin-bottom: 8px; font-size: 12px; color: #b7d1df; }
.tile-progress progress { display: block; width: 100%; height: 5px; border: 0; border-radius: 8px; overflow: hidden; background: #ffffff22; appearance: none; }
.tile-progress progress::-webkit-progress-bar { background: #ffffff22; }
.tile-progress progress::-webkit-progress-value { background: #6ed4ab; border-radius: 8px; }
.tile-progress progress::-moz-progress-bar { background: #6ed4ab; }
.topic-tile.is-random { background: var(--acid); color: var(--ink); border-color: var(--acid); }
.topic-tile.is-random:hover { background: #f0ff9a; }
.topic-tile.is-random h2 { font-weight: bold; }
.random-caption { margin: auto 0 0; font-size: 12px; line-height: 1.7; }
.topics-status { color: #d7e6ed; font-size: 14px; line-height: 1.8; }
.topics-status:empty { display: none; }
.topics-retry { padding: 12px 20px; background: var(--acid); color: var(--ink); border: 0; cursor: pointer; }
@media (max-width: 1100px) { .topics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .topics-parts a { padding: 10px 14px; } .topics-parts a span { display: none; } }
@media (max-width: 760px) { .topics-header { padding: 10px 20px; } .topics-main { padding: 16px 20px 28px; } .topics-heading h1 { font-size: 22px; } .topics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .topics-tools { flex-direction: column; gap: 8px; margin-top: 12px; } .topics-parts a { flex: 1; justify-content: center; } .topics-search input { width: 100%; } .topics-search { padding: 0 12px; } }
@media (max-width: 520px) { .topics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .topic-tile { min-height: 205px; padding: 20px 12px 16px; } .topic-tile h2 { font-size: 15px; } .topics-brand b { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .topic-tile { transition: none; } }