:root{
  --bg:#f7f7f9; --card:#fff; --text:#222; --muted:#666;
  --primary:#3b82f6; --secondary:#6b7280; --danger:#ef4444; --accent:#10b981;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;}
.app-header{padding:12px 16px;background:var(--card);border-bottom:1px solid #eee;position:sticky;top:0;z-index:10;}
.app-header h1{margin:0;font-size:18px;}
.app-main{padding:12px;display:flex;flex-direction:column;gap:12px;max-width:900px;margin:0 auto;}
.card{background:var(--card);border:1px solid #eee;border-radius:8px;padding:12px;}
.block-label{display:block;margin-bottom:6px;font-size:14px;color:var(--muted);}
.prompt{margin-top:8px;display:flex;gap:8px;align-items:center;}
.controls-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.buttons-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.btn{appearance:none;border:none;background:var(--primary);color:#fff;padding:8px 12px;border-radius:6px;font-size:14px;}
.btn-secondary{background:var(--secondary);}
.btn-danger{background:var(--danger);}
.btn:disabled{opacity:.5;}
#voiceSelect,#chapterSelect,input[type="range"]{width:100%;}
.text-container{max-height:56vh;overflow:auto;line-height:1.8;padding:4px;border:1px dashed #eee;border-radius:6px;background:#fafafa;}
.sentence{display:inline;}
.sentence + .sentence::after{content:"";display:block;height:8px;}
.sentence.current{background:rgba(16,185,129,.2);}
.sentence.dim{color:#888;}
.app-footer{padding:12px 16px;color:var(--muted);font-size:13px;}
.list{list-style:none;padding:0;margin:0;max-height:40vh;overflow:auto;}
.list-item{display:flex;align-items:center;gap:8px;padding:8px;border-bottom:1px solid #eee;}
.list-item .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.list-item .src{color:var(--muted);font-size:12px;margin-left:8px;}
.list-item .actions{display:flex;gap:8px;}