*{margin:0;padding:0;box-sizing:border-box}body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;background:#f5f7fa;color:#333}
header{background:linear-gradient(135deg,#4a90d9,#67b26f);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:12px}
header.home{flex-direction:row;align-items:center}header.home .cover{width:86px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.3)}
header.home h1{font-size:20px}header.home .sub{font-size:12px;opacity:.92;margin-top:4px}
header h1{font-size:17px;flex:1}.back{color:#fff;text-decoration:none;font-size:14px}
.readall{background:#fff;color:#4a90d9;border:none;border-radius:16px;padding:6px 16px;font-size:14px;cursor:pointer}
.tabs{display:flex;background:#fff;border-bottom:1px solid #eee}
.tabs button{flex:1;border:none;background:none;padding:11px;font-size:14px;color:#666;cursor:pointer;border-bottom:2px solid transparent}
.tabs button.on{color:#4a90d9;border-bottom-color:#4a90d9;font-weight:600}
.pages{display:flex;gap:8px;padding:10px 16px;background:#fff;overflow-x:auto}
.pages button{border:1px solid #ddd;background:#fff;border-radius:14px;padding:5px 14px;font-size:13px;cursor:pointer}
.pages button.on{background:#4a90d9;color:#fff;border-color:#4a90d9}
main{padding:12px 16px 90px;max-width:820px;margin:0 auto}.stage{position:relative;display:inline-block;max-width:100%}
#page-img{max-width:100%;display:block;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.12)}
.hotspot{position:absolute;background:rgba(74,144,217,.18);border:2px solid rgba(74,144,217,.55);border-radius:6px;cursor:pointer;transition:background .15s}
.hotspot:hover{background:rgba(74,144,217,.34)}.hotspot.playing{background:rgba(103,178,111,.4);border-color:#67b26f}
.panel{position:fixed;left:0;right:0;bottom:0;background:#fff;box-shadow:0 -2px 12px rgba(0,0,0,.1);padding:14px 16px;min-height:74px;z-index:5}
.panel .text{font-size:15px;line-height:1.55;white-space:pre-wrap}.panel .trans{color:#888;font-size:13px;margin-top:6px}
.hint{color:#aaa;font-size:13px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.song-card{background:#fff;border-radius:10px;padding:12px;display:flex;align-items:center;gap:10px;text-decoration:none;color:#333;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.song-card .no{font-size:20px;font-weight:700;color:#4a90d9;width:34px}.song-card .nm{flex:1;font-size:13px}
.ch-title{font-size:16px;color:#4a90d9;margin:16px 0 10px}
.audiobox{background:#fff;border-radius:10px;padding:12px;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.audiobox audio{width:100%}
.lyrics{background:#fff;border-radius:10px;margin-top:10px;padding:14px;max-height:60vh;overflow-y:auto}
.lyrics .line{padding:7px 10px;font-size:14px;line-height:1.5;color:#555;border-radius:8px;cursor:pointer}
.lyrics .line:hover{background:#f0f6ff}.lyrics .line.on{background:#e8f3ff;color:#2b7bd9;font-weight:600}
footer{text-align:center;color:#999;font-size:12px;padding:18px}

.speak-btn{background:#ff9800;color:#fff;border:none;border-radius:16px;padding:6px 18px;font-size:14px;cursor:pointer;margin-top:8px}
.speak-btn:disabled{opacity:.6}
.assess{margin-top:10px;border-top:1px dashed #ddd;padding-top:10px}
.score-row{display:flex;align-items:baseline;gap:10px}
.score{font-size:30px;font-weight:700;color:#4a90d9}
.score-sub{font-size:12px;color:#888}
.sfb{font-size:14px;color:#333;margin:8px 0}
.words{display:flex;flex-wrap:wrap;gap:6px}
.w{padding:3px 8px;border-radius:6px;font-size:13px}
.w.ok{background:#e8f6ea;color:#2e8b47}
.w.bad{background:#fdeaea;color:#c62828;text-decoration:line-through}

.speak-mini{background:#fff;border:1px solid #4a90d9;color:#4a90d9;border-radius:10px;font-size:11px;padding:1px 7px;margin-left:8px;cursor:pointer}
.speak-mini:disabled{opacity:.5}
.lyr-assess{padding:6px 10px;margin:4px 0}
.no-speak-note{color:#999;font-size:12px}

.rate-row{display:inline-flex;gap:4px;margin-right:8px}
.rate-btn{background:rgba(255,255,255,.25);color:#fff;border:none;border-radius:10px;padding:4px 8px;font-size:12px;cursor:pointer}
.rate-btn.on{background:#fff;color:#4a90d9;font-weight:600}
.readall.starred{background:#ffe0ee;color:#d63384}
.fav-btn{background:#8e7cc3}
.fav-sec{padding:0 16px}
.fav-sents{background:#fff;border-radius:10px;padding:8px 12px;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.fav-sent{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid #f0f0f0;font-size:13px}
.fav-sent a{color:#333;text-decoration:none;flex:1}
.fav-x{color:#c66;cursor:pointer;padding:2px 6px}

/* ===== P3 响应式 ===== */
/* 触控基础 */
body { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button, .hotspot, .song-card, .line { -webkit-tap-highlight-color: transparent; }
/* 热区最小可点面积（视觉不变，命中区扩大） */
.hotspot { min-width: 20px; min-height: 20px; }

/* --- 手机 ≤480px --- */
@media (max-width: 480px) {
  header { padding: 10px 12px; flex-wrap: wrap; }
  header.home { flex-direction: column; text-align: center; }
  header.home .cover { width: 120px; margin: 0 auto 8px; }
  header h1 { font-size: 15px; }
  .back { font-size: 13px; }
  .readall, .speak-btn { padding: 8px 20px; font-size: 15px; min-height: 40px; }
  .tabs button { padding: 12px 4px; font-size: 13px; min-height: 44px; }
  .pages button { padding: 7px 16px; font-size: 14px; min-height: 38px; }
  main { padding: 10px 10px 100px; }
  .grid { grid-template-columns: 1fr; gap: 8px; }
  .song-card { padding: 14px 12px; min-height: 48px; }
  .song-card .no { font-size: 22px; }
  .song-card .nm { font-size: 14px; }
  .ch-title { font-size: 15px; margin: 12px 0 8px; }
  .panel { padding: 12px; min-height: 80px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .panel .text { font-size: 14px; }
  .panel .trans { font-size: 12px; }
  .speak-btn { min-height: 40px; }
  .fav-btn { min-height: 40px; }
  .audiobox { padding: 10px; }
  .audiobox audio { height: 40px; }
  .lyrics { max-height: 55vh; padding: 10px; }
  .lyrics .line { padding: 9px 10px; font-size: 14px; min-height: 40px; display: flex; align-items: center; flex-wrap: wrap; }
  .speak-mini { padding: 5px 12px; font-size: 13px; min-height: 32px; min-width: 40px; }
  .assess { padding: 8px; }
  .score { font-size: 26px; }
  .score-sub { font-size: 11px; }
  .w { padding: 4px 8px; font-size: 12px; }
  .stage { width: 100%; }
  #page-img { width: 100%; height: auto; }
  video { width: 100% !important; max-width: none !important; }
  .rate-btn { padding: 5px 9px; font-size: 12px; min-height: 32px; }
  .fav-sent { padding: 10px 0; }
  footer { padding: 12px; font-size: 11px; }
}

/* --- 平板 481-1024px --- */
@media (min-width: 481px) and (max-width: 1024px) {
  .grid { grid-template-columns: 1fr 1fr; }
  main { max-width: 768px; margin: 0 auto; }
  header.home { padding: 20px 24px; }
  .panel { padding: 14px 20px; }
}

/* --- 桌面 >1024px --- */
@media (min-width: 1025px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
  main { max-width: 1000px; }
  header.home { padding: 24px 32px; }
  .stage { max-width: 680px; margin: 0 auto; display: block; }
  #page-img { margin: 0 auto; }
  .hotspot { transition: all .2s; }
  .hotspot:hover { transform: scale(1.02); background: rgba(74,144,217,.3); }
}

/* --- 横屏手机 --- */
@media (max-width: 900px) and (orientation: landscape) {
  .panel { position: static; box-shadow: none; margin-top: 8px; }
  main { padding-bottom: 12px; }
  .lyrics { max-height: 40vh; }
}

/* --- 高分屏优化 --- */
@media (-webkit-min-device-pixel-ratio: 2) {
  #page-img { image-rendering: -webkit-optimize-contrast; }
}

/* --- 深色模式跟随系统 --- */
@media (prefers-color-scheme: dark) {
  body { background: #1a1a2e; color: #e0e0e0; }
  .song-card, .audiobox, .lyrics, .panel { background: #16213e; color: #e0e0e0; }
  .panel .text { color: #e0e0e0; }
  .panel .trans { color: #a0a0b0; }
  .pages button { background: #16213e; color: #c0c0d0; border-color: #2a2a4a; }
  .pages button.on { background: #4a90d9; color: #fff; }
  .tabs { background: #16213e; border-bottom-color: #2a2a4a; }
  .tabs button { color: #a0a0b0; }
  .tabs button.on { color: #6db3f2; border-bottom-color: #6db3f2; }
  .lyrics .line { color: #c0c0d0; }
  .lyrics .line.on { background: #1a3a5c; color: #6db3f2; }
  .lyrics .line:hover { background: #1a2a4c; }
  .song-card { color: #e0e0e0; }
  .fav-sent { border-bottom-color: #2a2a4a; }
  .fav-sent a { color: #e0e0e0; }
  .sfb { color: #c0c0d0; }
  .w.ok { background: #1a3a2c; color: #6bcb84; }
  .w.bad { background: #3a1a1a; color: #ff6b6b; }
  .no-speak-note, .hint { color: #707080; }
}