#ccc-podcast-app {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #1a1a2e; background: #ffffff; max-width: 900px; margin: 0 auto;
  padding: 20px; line-height: 1.6; box-sizing: border-box;
}
#ccc-podcast-app *, #ccc-podcast-app *::before, #ccc-podcast-app *::after { box-sizing: border-box; }
#ccc-podcast-app .ccc-header { text-align: left; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 3px solid #1a1a2e; }
#ccc-podcast-app .ccc-header h1 { font-size: 28px; font-weight: 800; margin: 0 0 4px 0; color: #1a1a2e; }
#ccc-podcast-app .ccc-header .ccc-subtitle { font-size: 14px; color: #64748b; margin: 0; }
#ccc-podcast-app .ccc-controls { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
#ccc-podcast-app .ccc-search-wrap { flex: 1; min-width: 200px; position: relative; }
#ccc-podcast-app .ccc-search-input { width: 100%; padding: 10px 14px 10px 38px; font-size: 14px; border: 1px solid #cbd5e0; border-radius: 8px; outline: none; transition: border-color 0.2s; font-family: inherit; color: #1a1a2e; }
#ccc-podcast-app .ccc-search-input:focus { border-color: #4a7c59; box-shadow: 0 0 0 3px rgba(74,124,89,0.12); }
#ccc-podcast-app .ccc-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 16px; pointer-events: none; }
#ccc-podcast-app .ccc-date-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#ccc-podcast-app .ccc-date-filters label { font-size: 13px; color: #64748b; font-weight: 500; }
#ccc-podcast-app .ccc-date-input { padding: 9px 10px; font-size: 13px; border: 1px solid #cbd5e0; border-radius: 8px; outline: none; font-family: inherit; transition: border-color 0.2s; color: #1a1a2e; }
#ccc-podcast-app .ccc-date-input:focus { border-color: #4a7c59; box-shadow: 0 0 0 3px rgba(74,124,89,0.12); }
#ccc-podcast-app .ccc-transcript-status { font-size: 12px; color: #64748b; text-align: right; margin-bottom: 8px; min-height: 18px; }
#ccc-podcast-app .ccc-transcript-status .ccc-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid #e2e8f0; border-top-color: #4a7c59; border-radius: 50%; animation: ccc-spin 0.8s linear infinite; vertical-align: middle; margin-right: 6px; }
@keyframes ccc-spin { to { transform: rotate(360deg); } }
#ccc-podcast-app .ccc-episode-list { list-style: none; padding: 0; margin: 0; }
#ccc-podcast-app .ccc-episode-card { display: flex; gap: 16px; padding: 16px; border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 12px; cursor: pointer; transition: box-shadow 0.2s, border-color 0.2s; background: #fff; }
#ccc-podcast-app .ccc-episode-card:hover { border-color: #4a7c59; box-shadow: 0 2px 12px rgba(74,124,89,0.12); }
#ccc-podcast-app .ccc-ep-thumb { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #e2e8f0; }
#ccc-podcast-app .ccc-ep-info { flex: 1; min-width: 0; }
#ccc-podcast-app .ccc-ep-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
#ccc-podcast-app .ccc-ep-duration { display: inline-flex; align-items: center; gap: 4px; background: #4a7c59; color: #fff; font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 10px; letter-spacing: 0.3px; }
#ccc-podcast-app .ccc-ep-duration::before { content: '\25B6'; font-size: 8px; }
#ccc-podcast-app .ccc-ep-date { font-size: 12px; color: #64748b; }
#ccc-podcast-app .ccc-ep-title { font-size: 16px; font-weight: 700; margin: 4px 0; color: #1a1a2e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ccc-podcast-app .ccc-ep-desc { font-size: 13px; color: #64748b; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#ccc-podcast-app .ccc-no-results { text-align: center; padding: 40px 20px; color: #64748b; font-size: 15px; }
#ccc-podcast-app .ccc-detail { animation: ccc-fadeIn 0.25s ease; }
@keyframes ccc-fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
#ccc-podcast-app .ccc-back-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid #1a1a2e; border-radius: 8px; padding: 8px 16px; font-size: 14px; font-weight: 600; color: #1a1a2e; cursor: pointer; margin-bottom: 20px; font-family: inherit; transition: background 0.2s, color 0.2s; }
#ccc-podcast-app .ccc-back-btn:hover { background: #1a1a2e; color: #fff; }
#ccc-podcast-app .ccc-detail-header { display: flex; gap: 20px; margin-bottom: 20px; align-items: flex-start; }
#ccc-podcast-app .ccc-detail-thumb { width: 140px; height: 140px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #e2e8f0; }
#ccc-podcast-app .ccc-detail-info h2 { font-size: 24px; font-weight: 800; margin: 0 0 8px 0; color: #1a1a2e; }
#ccc-podcast-app .ccc-detail-info .ccc-ep-meta { margin-bottom: 0; }
#ccc-podcast-app .ccc-detail-player { width: 100%; margin: 20px 0; border-radius: 8px; }
#ccc-podcast-app .ccc-detail-description { font-size: 15px; line-height: 1.7; color: #334155; }
#ccc-podcast-app .ccc-detail-description p { margin: 0 0 12px 0; }
#ccc-podcast-app .ccc-detail-description a { color: #4a7c59; text-decoration: underline; }
#ccc-podcast-app .ccc-loading { text-align: center; padding: 60px 20px; color: #64748b; }
#ccc-podcast-app .ccc-loading .ccc-spinner-lg { display: inline-block; width: 32px; height: 32px; border: 3px solid #e2e8f0; border-top-color: #4a7c59; border-radius: 50%; animation: ccc-spin 0.8s linear infinite; margin-bottom: 12px; }
#ccc-podcast-app .ccc-error-msg { text-align: center; padding: 40px 20px; color: #c53030; font-size: 15px; }
@media (max-width: 600px) {
  #ccc-podcast-app { padding: 12px; }
  #ccc-podcast-app .ccc-episode-card { flex-direction: column; gap: 10px; }
  #ccc-podcast-app .ccc-ep-thumb { width: 100%; height: 180px; }
  #ccc-podcast-app .ccc-ep-title { white-space: normal; }
  #ccc-podcast-app .ccc-detail-header { flex-direction: column; }
  #ccc-podcast-app .ccc-detail-thumb { width: 100%; height: auto; max-height: 260px; }
  #ccc-podcast-app .ccc-controls { flex-direction: column; }
  #ccc-podcast-app .ccc-date-filters { width: 100%; }
}