/* ===== V24 APP ENGINE ===== */
:root{
  --th24-bg:#f6f8fc;
  --th24-card:#ffffff;
  --th24-border:#e6ecf4;
  --th24-text:#1e293b;
  --th24-muted:#64748b;
  --th24-primary:#2563eb;
  --th24-primary-soft:#eaf1ff;
  --th24-dark:#0f172a;
  --th24-accent:#60a5fa;
  --th24-shadow:0 14px 34px rgba(15,23,42,.08);
}
body.th-dark-mode{
  --th24-bg:#0b1220;
  --th24-card:#111b2b;
  --th24-border:#223147;
  --th24-text:#e2e8f0;
  --th24-muted:#94a3b8;
  --th24-primary:#7fb1ff;
  --th24-primary-soft:#172338;
  --th24-dark:#0b1220;
  --th24-accent:#93c5fd;
  --th24-shadow:0 18px 40px rgba(0,0,0,.28);
}

.th24-book-row{
  display:flex; gap:16px; overflow-x:auto; padding:8px 2px 10px;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.th24-book-row::-webkit-scrollbar{display:none}
.th24-book{min-width:148px; max-width:148px; scroll-snap-align:start}
.th24-book img,.th24-book__placeholder{
  width:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  border-radius:18px; box-shadow:0 12px 24px rgba(15,23,42,.18);
  background:#dbe7f7;
}
.th24-book__name{
  color:var(--th24-text); font-size:14px; font-weight:700; line-height:1.35;
  margin:10px 0 0;
}

.th24-audio-card{
  background:linear-gradient(135deg,#0f172a,#1e293b);
  color:#fff; border-radius:24px; padding:18px; box-shadow:0 18px 40px rgba(0,0,0,.22);
}
.th24-audio__top{display:grid; grid-template-columns:72px 1fr; gap:14px; align-items:center}
.th24-audio__cover,.th24-audio__cover--placeholder{
  width:72px;height:72px;border-radius:18px;object-fit:cover;background:#223147;
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}
.th24-audio__title{font-size:20px;font-weight:800;line-height:1.2;margin:0}
.th24-audio__meta{opacity:.78;font-size:13px;margin:4px 0 0}
.th24-wave{display:flex;align-items:flex-end;gap:4px;height:28px;margin:12px 0 10px}
.th24-wave span{width:5px;border-radius:999px;background:linear-gradient(180deg,#60a5fa,#2563eb);display:block}
.th24-wave span:nth-child(1){height:32%}.th24-wave span:nth-child(2){height:78%}.th24-wave span:nth-child(3){height:54%}.th24-wave span:nth-child(4){height:96%}.th24-wave span:nth-child(5){height:42%}.th24-wave span:nth-child(6){height:84%}.th24-wave span:nth-child(7){height:36%}.th24-wave span:nth-child(8){height:72%}.th24-wave span:nth-child(9){height:48%}.th24-wave span:nth-child(10){height:88%}.th24-wave span:nth-child(11){height:44%}.th24-wave span:nth-child(12){height:66%}.th24-wave span:nth-child(13){height:50%}.th24-wave span:nth-child(14){height:76%}
.th24-audio-card audio{width:100%}

.th24-continue-card{
  display:grid; grid-template-columns:96px 1fr auto; gap:14px; align-items:center;
  background:linear-gradient(135deg,var(--th24-primary-soft),var(--th24-card));
  border:1px solid var(--th24-border); border-radius:24px; padding:18px; box-shadow:var(--th24-shadow);
}
.th24-continue__cover,.th24-continue__cover--placeholder{
  width:96px;height:128px;object-fit:cover;border-radius:16px;background:#dbe7f7;
}
.th24-continue__title{color:var(--th24-text);font-size:20px;font-weight:800;margin:0 0 6px}
.th24-continue__meta{color:var(--th24-muted);font-size:14px;margin:0 0 10px}
.th24-progress{height:10px;background:#dbe7f7;border-radius:999px;overflow:hidden}
.th24-progress__bar{height:100%;background:linear-gradient(90deg,var(--th24-primary),var(--th24-accent));border-radius:999px}
body.th-dark-mode .th24-progress{background:#334155}

.th24-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;border:0;border-radius:16px;padding:12px 16px;font-weight:800;cursor:pointer;
}
.th24-btn--primary{background:var(--th24-primary);color:#fff}
.th24-btn--soft{background:#eef2ff;color:#1e3a8a}

.th24-mini-player{
  position:fixed; left:14px; right:14px; bottom:86px; z-index:9998;
  display:grid; grid-template-columns:48px 1fr auto; gap:12px; align-items:center;
  background:rgba(15,23,42,.96); color:#fff; border-radius:20px; padding:12px 14px;
  box-shadow:0 18px 36px rgba(0,0,0,.28); backdrop-filter:blur(10px);
}
.th24-mini-player__cover,.th24-mini-player__cover--placeholder{
  width:48px;height:48px;object-fit:cover;border-radius:14px;background:#223147;
}
.th24-mini-player__meta{min-width:0}
.th24-mini-player__meta strong,.th24-mini-player__meta span{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.th24-mini-player__meta span{font-size:13px;opacity:.72;margin-top:2px}
.th24-mini-player.hidden{display:none}

.th24-app-nav{
  position:fixed; left:14px; right:14px; bottom:14px; z-index:9999;
  background:rgba(255,255,255,.96); border:1px solid var(--th24-border);
  box-shadow:0 16px 30px rgba(15,23,42,.10); border-radius:24px; padding:10px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; backdrop-filter:blur(10px);
}
body.th-dark-mode .th24-app-nav{background:rgba(17,27,43,.96)}
.th24-app-nav a{
  text-decoration:none; color:var(--th24-text); font-weight:800; font-size:14px;
  text-align:center; padding:14px 8px; border-radius:18px; background:#f8fbff;
}
body.th-dark-mode .th24-app-nav a{background:#162132;color:var(--th24-text)}
.th24-app-nav a.is-active{background:var(--th24-primary-soft); color:var(--th24-primary)}

.th24-shell{display:grid; gap:20px}
.th24-card{
  background:var(--th24-card); border:1px solid var(--th24-border);
  border-radius:24px; box-shadow:var(--th24-shadow); padding:18px;
}
.th24-title{margin:0 0 6px; color:var(--th24-text); font-size:26px; font-weight:800}
.th24-subtitle{color:var(--th24-muted); font-size:14px; margin:0}

.th24-dashboard{display:grid; grid-template-columns:1.2fr .8fr; gap:20px}
.th24-stats{display:grid; gap:14px}
.th24-stat{
  background:var(--th24-card); border:1px solid var(--th24-border);
  border-radius:22px; box-shadow:var(--th24-shadow); padding:18px;
}
.th24-stat strong{display:block; color:var(--th24-text); font-size:30px; margin-bottom:6px}
.th24-stat span{color:var(--th24-muted); font-size:14px}

.th24-detail{display:grid; grid-template-columns:220px 1fr; gap:24px; align-items:start}
.th24-detail-cover img{
  width:220px; aspect-ratio:3/4; object-fit:cover; border-radius:24px; box-shadow:0 16px 34px rgba(0,0,0,.18);
}
.th24-detail-meta{color:var(--th24-muted); margin:8px 0 16px}
.th24-detail-actions{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:16px}
.th24-detail-description{color:var(--th24-text); line-height:1.75}

@media (max-width:920px){
  .th24-dashboard{grid-template-columns:1fr}
}
@media (max-width:680px){
  .th24-book{min-width:132px;max-width:132px}
  .th24-audio__top{grid-template-columns:62px 1fr}
  .th24-audio__cover,.th24-audio__cover--placeholder{width:62px;height:62px}
  .th24-audio__title{font-size:18px}
  .th24-continue-card{grid-template-columns:84px 1fr}
  .th24-continue-card .th24-btn{grid-column:1/-1}
  .th24-continue__cover,.th24-continue__cover--placeholder{width:84px;height:114px}
  .th24-detail{grid-template-columns:1fr}
  .th24-detail-cover img{width:150px}
}