* { box-sizing: border-box; }
body { margin: 0; background: #0d1117; color: #e6edf3; font: 15px/1.6 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
.wrap { max-width: 720px; margin: 0 auto; padding: 18px 16px 40px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
header h1 { margin: 0; font-size: 44px; letter-spacing: 1px; }
header .sub { color: #8b949e; font-size: 12.5px; margin-top: 4px; }
header .sub b { color: #79c0ff; font-weight: 600; }
.news-link { flex: 0 0 auto; background: #161b22; border: 1px solid #388bfd; color: #79c0ff; border-radius: 10px; padding: 9px 16px; font-size: 14px; text-decoration: none; white-space: nowrap; }
.news-link:hover { background: #122031; }
.panel { background: #161b22; border: 1px solid #21262d; border-radius: 12px; padding: 12px 14px; margin-top: 14px; }
.spacer { flex: 1; }
.status { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.castbar { display: flex; align-items: center; gap: 9px; font-size: 13.5px; border-color: #1f6feb55; background: #101b2b; }
.castbar[hidden] { display: none; }
.castbar b { color: #79c0ff; font-weight: 600; }
.castbar .casttip { color: #6e7681; font-size: 12px; }
.castbar .castdot { width: 10px; height: 10px; border-radius: 50%; background: #3fb950; box-shadow: 0 0 8px #3fb95088; animation: blink 1s infinite; flex: 0 0 auto; }
.castpanel { width: 100%; max-width: 660px; padding: 10px 14px; border-color: #1f6feb33; background: #0e1726; }
.castpanel[hidden] { display: none; }
.casttext { max-height: 260px; overflow-y: auto; line-height: 1.9; font-size: 15px; scroll-behavior: smooth; color: #dbe4ef; }
.casttext .cseg { color: #7d8b9a; transition: color .25s; }
.casttext .cseg.cur { color: #e6edf3; font-weight: 600; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #484f58; }
.dot.on { background: #3fb950; box-shadow: 0 0 8px #3fb95088; }
.dot.load { background: #d29922; animation: blink 1s infinite; }
.dot.err { background: #f85149; }
@keyframes blink { 50% { opacity: .25; } }
.ck { color: #8b949e; font-size: 12.5px; cursor: pointer; user-select: none; }
.castbtn { font-size: 12.5px; padding: 5px 12px; border-color: #388bfd88; color: #79c0ff; }
.stage { text-align: center; padding: 18px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.talk { width: 132px; height: 132px; border-radius: 50%; border: 2px solid #263041; background: #131a24; color: #e6edf3; cursor: pointer; transition: .15s; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.talk:disabled { opacity: .45; cursor: default; }
.talk .ico { font-size: 44px; line-height: 1; }
.talk .tip { font-size: 13px; color: #8b949e; }
.talk.live { border-color: #f85149; background: #2a1416; box-shadow: 0 0 0 10px #f8514914; }
.talk.live .tip { color: #ff9b94; }
.talk.thinking { border-color: #d29922; }
.meter { height: 4px; background: #21262d; border-radius: 2px; margin: 18px auto 8px; max-width: 320px; overflow: hidden; }
#meterBar { height: 100%; width: 0; background: linear-gradient(90deg, #238636, #3fb950); transition: width .06s linear; }
.hint { color: #6e7681; font-size: 12.5px; }
.conv .row { display: flex; gap: 10px; margin-top: 10px; }
.conv .who { flex: 0 0 26px; height: 26px; border-radius: 50%; background: #21262d; color: #8b949e; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.bubble { flex: 1; background: #0d1117; border: 1px solid #21262d; border-radius: 10px; padding: 10px 12px; min-height: 44px; white-space: pre-wrap; word-break: break-word; }
.bubble.you { color: #7ee787; }
.bubble.bot { color: #e6edf3; }
.bubble.ghost { color: #484f58; font-style: italic; }
.txtin { display: flex; gap: 8px; align-items: center; }
.txtin input { flex: 1; background: #0d1117; border: 1px solid #30363d; color: #e6edf3; border-radius: 8px; padding: 9px 12px; font-size: 14px; }
.txtin input:focus { outline: none; border-color: #388bfd; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.stats span { display: block; color: #6e7681; font-size: 11.5px; }
.stats b { font-size: 17px; color: #79c0ff; font-variant-numeric: tabular-nums; }
.voice .vtitle { font-size: 13px; color: #8b949e; margin-bottom: 8px; }
.vrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.vrow input[type=file] { font-size: 12px; color: #8b949e; max-width: 240px; }
#voiceName { color: #d29922; }
.btn { background: #21262d; border: 1px solid #30363d; color: #e6edf3; border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.btn:hover { background: #30363d; }
.vnote { color: #6e7681; font-size: 11.5px; margin-top: 8px; }
.vsub { color: #6e7681; font-size: 11.5px; margin-left: 8px; font-weight: 400; }
.vcur { color: #8b949e; }
.vlist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.vitem { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid #30363d;
  border-radius: 8px; background: #161b22; }
.vitem.on { border-color: #2f81f7; background: #122031; }
.vitem .vnm { color: #e6edf3; font-size: 13px; max-width: 38%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.vitem .vmeta { color: #8b949e; font-size: 11.5px; }
.vitem .vsp { flex: 1; }
.btn.tiny { padding: 3px 10px; font-size: 12px; border-radius: 6px; }
.btn.tiny.del { color: #f85149; }
.vlist .empty { color: #6e7681; font-size: 12px; }
.raw { background: #010409; border: 1px solid #21262d; border-radius: 8px; padding: 10px; font-size: 11px; color: #8b949e; max-height: 220px; overflow: auto; white-space: pre-wrap; }
@media (max-width: 520px) { .stats { grid-template-columns: repeat(2, 1fr); } .talk { width: 140px; height: 140px; } }