/* ===== Audio Player — matches weiwei-site design tokens ===== */
.ap{position:relative;font-family:var(--sans,'Noto Sans TC',sans-serif);}
.ap *{box-sizing:border-box;}

/* ── Main Player (inline) ── */
.ap-player{
  background:var(--paper,#fff);border:1px solid var(--line,#ece6da);border-radius:16px;
  padding:24px 28px;display:flex;flex-direction:column;gap:16px;
  box-shadow:0 8px 24px -16px rgba(40,30,16,.12);
  transition:border-color .2s;
}
.ap-player:focus-within{border-color:var(--accent,#c0633f);}

/* top row: cover/info + controls */
.ap-top{display:flex;align-items:center;gap:20px;}
.ap-cover{
  width:64px;height:64px;border-radius:12px;flex:none;
  background:linear-gradient(135deg,var(--eng,#b15a36),var(--accent,#c0633f));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--serif,'Noto Serif TC',serif);font-size:24px;font-weight:700;
}
.ap-info{flex:1;min-width:0;}
.ap-title{
  font-family:var(--serif);font-size:18px;font-weight:700;color:var(--ink,#1c2330);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ap-sub{font-size:13.5px;color:var(--gray,#857e72);margin-top:3px;}

/* play/pause */
.ap-pp{
  width:52px;height:52px;border-radius:50%;border:none;flex:none;
  background:var(--accent,#c0633f);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px -8px rgba(192,99,63,.55);
  transition:background .15s,transform .15s;
}
.ap-pp:hover{background:var(--accent-d,#a44e2d);transform:scale(1.06);}
.ap-pp:active{transform:scale(.96);}
.ap-pp svg{width:22px;height:22px;fill:currentColor;}

/* progress */
.ap-prog-wrap{display:flex;align-items:center;gap:12px;}
.ap-time{font-family:var(--mono,'JetBrains Mono',monospace);font-size:12.5px;color:var(--gray,#857e72);white-space:nowrap;min-width:42px;text-align:center;}
.ap-bar{
  flex:1;height:6px;border-radius:3px;background:var(--line,#ece6da);cursor:pointer;
  position:relative;overflow:visible;
}
.ap-bar-fill{
  height:100%;border-radius:3px;background:var(--accent,#c0633f);
  transition:width .1s linear;position:relative;
}
.ap-bar-thumb{
  position:absolute;right:-7px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;border-radius:50%;background:var(--accent,#c0633f);
  border:2.5px solid var(--paper,#fff);
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  opacity:0;transition:opacity .15s;
}
.ap-bar:hover .ap-bar-thumb,.ap-bar:focus .ap-bar-thumb{opacity:1;}
.ap-bar input[type="range"]{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;
}

/* volume */
.ap-vol{display:flex;align-items:center;gap:8px;margin-left:auto;}
.ap-vol svg{width:18px;height:18px;fill:var(--gray,#857e72);flex:none;cursor:pointer;}
.ap-vol svg:hover{fill:var(--ink,#1c2330);}
.ap-vol-bar{
  width:80px;height:5px;border-radius:3px;background:var(--line,#ece6da);
  position:relative;cursor:pointer;
}
.ap-vol-fill{height:100%;border-radius:3px;background:var(--accent,#c0633f);}
.ap-vol-bar input[type="range"]{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;
}

/* ── Playlist ── */
.ap-playlist{margin-top:8px;border-top:1px solid var(--line,#ece6da);padding-top:12px;}
.ap-pl-header{
  font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted,#a89f90);margin-bottom:10px;
}
.ap-pl-list{list-style:none;padding:0;margin:0;max-height:320px;overflow-y:auto;}
.ap-pl-list::-webkit-scrollbar{width:5px;}
.ap-pl-list::-webkit-scrollbar-thumb{background:var(--line2,#ddd5c6);border-radius:3px;}
.ap-pl-item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  cursor:pointer;transition:background .12s;
}
.ap-pl-item:hover{background:var(--cream,#faf7f1);}
.ap-pl-item.active{background:color-mix(in srgb,var(--accent,#c0633f) 10%,transparent);}
.ap-pl-item.active .ap-pl-ttl{color:var(--accent,#c0633f);font-weight:600;}
.ap-pl-num{
  font-family:var(--mono);font-size:12px;color:var(--muted,#a89f90);
  width:24px;text-align:center;flex:none;
}
.ap-pl-ttl{font-size:14.5px;color:var(--ink,#1c2330);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ap-pl-dur{font-family:var(--mono);font-size:12px;color:var(--gray,#857e72);flex:none;}

/* ── Mini Player (persistent bottom bar) ── */
.ap-mini{
  position:fixed;bottom:0;left:0;right:0;z-index:100;
  background:rgba(28,35,48,.94);backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.1);
  padding:14px 24px;display:flex;align-items:center;gap:18px;
  transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.ap-mini.show{transform:translateY(0);}
.ap-mini .ap-cover{width:44px;height:44px;border-radius:10px;font-size:16px;}
.ap-mini .ap-title{color:#f4f1ea;font-size:15px;}
.ap-mini .ap-sub{color:#9b9488;font-size:12px;}
.ap-mini .ap-pp{width:40px;height:40px;box-shadow:none;}
.ap-mini .ap-pp svg{width:18px;height:18px;}
.ap-mini .ap-bar{height:4px;}
.ap-mini .ap-bar-fill{background:#e3a37e;}
.ap-mini .ap-bar-thumb{background:#e3a37e;}
.ap-mini .ap-time{color:#9b9488;font-size:11.5px;}
.ap-mini .ap-vol svg{fill:#9b9488;}
.ap-mini .ap-vol svg:hover{fill:#fff;}
.ap-mini .ap-vol-bar{width:60px;}
.ap-mini .ap-vol-fill{background:#e3a37e;}
.ap-mini-prog{flex:1;display:flex;align-items:center;gap:10px;min-width:0;}
.ap-mini-right{display:flex;align-items:center;gap:12px;}

/* ── Lesson List Card (for audio.html) ── */
.ap-lesson{
  background:var(--paper,#fff);border:1px solid var(--line,#ece6da);border-radius:16px;
  padding:20px 24px;display:flex;align-items:center;gap:18px;
  transition:transform .18s,box-shadow .18s,border-color .18s;cursor:pointer;
}
.ap-lesson:hover{
  transform:translateY(-2px);box-shadow:0 16px 36px -24px rgba(40,30,16,.3);
  border-color:var(--accent,#c0633f);
}
.ap-lesson.playing{border-color:var(--accent,#c0633f);background:color-mix(in srgb,var(--accent,#c0633f) 5%,var(--paper,#fff));}
.ap-lesson-icon{
  width:48px;height:48px;border-radius:12px;flex:none;
  background:var(--cream,#faf7f1);border:1px solid var(--line,#ece6da);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent,#c0633f);transition:background .15s,color .15s;
}
.ap-lesson:hover .ap-lesson-icon,
.ap-lesson.playing .ap-lesson-icon{
  background:var(--accent,#c0633f);color:#fff;
}
.ap-lesson-icon svg{width:22px;height:22px;fill:currentColor;}
.ap-lesson-body{flex:1;min-width:0;}
.ap-lesson-title{font-family:var(--serif);font-size:16.5px;font-weight:600;color:var(--ink,#1c2330);}
.ap-lesson-meta{font-size:13px;color:var(--gray,#857e72);margin-top:4px;display:flex;align-items:center;gap:12px;}
.ap-lesson-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--line2,#ddd5c6);}
.ap-lesson-topic{
  font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--eng,#b15a36);
  background:color-mix(in srgb,var(--eng,#b15a36) 10%,transparent);
  padding:4px 10px;border-radius:20px;
}

/* ── Keyboard focus ring ── */
.ap-pp:focus-visible,
.ap-bar input:focus-visible + .ap-bar-fill,
.ap-vol-bar input:focus-visible + .ap-vol-fill,
.ap-pl-item:focus-visible{
  outline:2px solid var(--accent,#c0633f);outline-offset:2px;
}

/* ── Responsive ── */
@media(max-width:640px){
  .ap-player{padding:18px 16px;gap:12px;}
  .ap-top{gap:14px;}
  .ap-cover{width:48px;height:48px;font-size:18px;}
  .ap-title{font-size:16px;}
  .ap-pp{width:44px;height:44px;}
  .ap-vol{display:none;}
  .ap-mini{padding:10px 16px;gap:12px;}
  .ap-mini .ap-vol{display:none;}
  .ap-lesson{padding:16px 18px;gap:14px;}
  .ap-lesson-icon{width:40px;height:40px;}
  .ap-lesson-title{font-size:15px;}
}