/* ═══════════════════════════════════════════════════════════
   MP3Tagger — front-end styles (scoped under .mp3t* / data-mp3t-theme)
   Dark/light themes, responsive, theme-conflict-safe.
   ═══════════════════════════════════════════════════════════ */

:root,
:root[data-mp3t-theme="dark"] {
  --mp3t-bg: #0d1117;
  --mp3t-surface: #161b22;
  --mp3t-surface-2: #1e2530;
  --mp3t-border: rgba(255, 255, 255, 0.09);
  --mp3t-text: #f0f2f5;
  --mp3t-muted: #9aa4b2;
  --mp3t-accent: #22c55e;
  --mp3t-accent-2: #a855f7;
  --mp3t-accent-text: #04120a;
  --mp3t-chip: rgba(255, 255, 255, 0.07);
  --mp3t-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  --mp3t-radius: 16px;
  --mp3t-gradient: linear-gradient(135deg, #22c55e 0%, #10b981 40%, #a855f7 100%);
}
:root[data-mp3t-theme="light"] {
  --mp3t-bg: #f6f7f9;
  --mp3t-surface: #ffffff;
  --mp3t-surface-2: #eef1f5;
  --mp3t-border: rgba(15, 23, 42, 0.1);
  --mp3t-text: #101828;
  --mp3t-muted: #5b6472;
  --mp3t-accent: #16a34a;
  --mp3t-accent-2: #9333ea;
  --mp3t-accent-text: #ffffff;
  --mp3t-chip: rgba(15, 23, 42, 0.06);
  --mp3t-shadow: 0 12px 32px rgba(16, 24, 40, 0.12);
}

/* Base container — never touches theme body */
.mp3t,
.mp3t-single,
.mp3t-archive {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--mp3t-text);
  line-height: 1.55;
  box-sizing: border-box;
}
.mp3t *, .mp3t-single *, .mp3t-archive *, .mp3t-sticky * { box-sizing: border-box; }
.mp3t img, .mp3t-single img, .mp3t-archive img { max-width: 100%; }

/* ── Hero ── */
.mp3t-hero {
  background: var(--mp3t-surface);
  border: 1px solid var(--mp3t-border);
  border-radius: 24px;
  padding: clamp(20px, 4vw, 40px);
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.mp3t-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--mp3t-gradient);
}
.mp3t-hero__inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.mp3t-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: 0.22em;
  color: var(--mp3t-accent); margin: 0 0 8px;
}
.mp3t-hero__title { font-size: clamp(26px, 4.5vw, 42px); line-height: 1.1; margin: 0 0 10px; font-weight: 800; }
.mp3t-hero__sub { color: var(--mp3t-muted); margin: 0; max-width: 60ch; }

.mp3t-theme-toggle {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--mp3t-border);
  background: var(--mp3t-chip); color: var(--mp3t-text);
  font-size: 20px; cursor: pointer;
}
.mp3t-theme-toggle:hover { border-color: var(--mp3t-accent); }

/* ── Search ── */
.mp3t-searchbar { margin-top: 22px; display: grid; gap: 12px; }
.mp3t-searchbar__field {
  display: flex; align-items: center; gap: 10px;
  background: var(--mp3t-surface-2);
  border: 1px solid var(--mp3t-border);
  border-radius: 14px; padding: 0 16px;
}
.mp3t-searchbar__field:focus-within { border-color: var(--mp3t-accent); }
.mp3t-searchbar__icon { font-size: 20px; color: var(--mp3t-muted); }
.mp3t-searchbar input[type="search"] {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--mp3t-text); font-size: 16px; padding: 14px 0; width: 100%;
}
.mp3t-searchbar__filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mp3t-searchbar select {
  background: var(--mp3t-surface-2); color: var(--mp3t-text);
  border: 1px solid var(--mp3t-border); border-radius: 12px;
  padding: 11px 12px; font-size: 14px; width: 100%;
}

/* ── Genre chips ── */
.mp3t-genres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.mp3t-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--mp3t-chip); color: var(--mp3t-text);
  border: 1px solid var(--mp3t-border);
  border-radius: 999px; padding: 6px 14px;
  font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
}
a.mp3t-chip:hover, button.mp3t-chip:hover { border-color: var(--mp3t-accent); color: var(--mp3t-accent); }
.mp3t-chip--lg { padding: 9px 16px; font-size: 14px; }
.mp3t-chip__count {
  background: var(--mp3t-accent); color: var(--mp3t-accent-text);
  border-radius: 999px; font-size: 11px; padding: 1px 8px; font-weight: 800;
}
.mp3t-chip--voice { background: rgba(168, 85, 247, 0.15); border-color: rgba(168, 85, 247, 0.4); }

/* ── Sections ── */
.mp3t-section { margin: 34px 0; }
.mp3t-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.mp3t-section__head h3 { margin: 0; font-size: clamp(19px, 2.6vw, 24px); font-weight: 800; }
.mp3t-section__count { color: var(--mp3t-muted); font-size: 14px; margin: 0; }
.mp3t-link { background: none; border: 0; color: var(--mp3t-accent); font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; }
.mp3t-link:hover { text-decoration: underline; }

/* ── Tabs ── */
.mp3t-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.mp3t-tab {
  border: 1px solid var(--mp3t-border); background: var(--mp3t-surface);
  color: var(--mp3t-muted); border-radius: 999px;
  padding: 9px 22px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.mp3t-tab.is-active, .mp3t-tab:hover { background: var(--mp3t-accent); border-color: var(--mp3t-accent); color: var(--mp3t-accent-text); }

/* ── Grid / cards ── */
.mp3t-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.mp3t-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.mp3t-card {
  background: var(--mp3t-surface);
  border: 1px solid var(--mp3t-border);
  border-radius: var(--mp3t-radius);
  overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
}
.mp3t-card:hover { transform: translateY(-4px); box-shadow: var(--mp3t-shadow); border-color: var(--mp3t-accent); }
.mp3t-card__art { position: relative; display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--mp3t-surface-2); }
.mp3t-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.mp3t-card:hover .mp3t-card__art img { transform: scale(1.06); }
.mp3t-card__overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(transparent 40%, rgba(0,0,0,0.55));
  opacity: 0; transition: opacity 0.2s;
}
.mp3t-card:hover .mp3t-card__overlay, .mp3t-card__overlay:focus-within { opacity: 1; }
.mp3t-card__play {
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--mp3t-accent); color: var(--mp3t-accent-text);
  font-size: 20px; box-shadow: var(--mp3t-shadow);
}
.mp3t-card__body { padding: 14px 15px 15px; }
.mp3t-card__title { margin: 0 0 4px; font-size: 15px; font-weight: 700; line-height: 1.35; }
.mp3t-card__title a { color: var(--mp3t-text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp3t-card__title a:hover { color: var(--mp3t-accent); }
.mp3t-card__artist { margin: 0; color: var(--mp3t-muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp3t-card__meta { margin: 8px 0 12px; font-size: 12.5px; color: var(--mp3t-muted); display: flex; gap: 6px; align-items: center; }
.mp3t-card__actions { display: flex; gap: 8px; }
.mp3t-card__actions .mp3t-btn { flex: 1; justify-content: center; }

.mp3t-badge {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,0.72); color: #fff;
  font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.mp3t-badge--voice { background: var(--mp3t-accent-2); }

/* Rail (horizontal scroll) */
.mp3t-rail { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.mp3t-rail::-webkit-scrollbar { height: 8px; }
.mp3t-rail::-webkit-scrollbar-thumb { background: var(--mp3t-border); border-radius: 8px; }
.mp3t-card--rail { flex: 0 0 220px; scroll-snap-align: start; }

/* ── Buttons ── */
.mp3t-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 12px; font-weight: 700; font-size: 15px;
  padding: 12px 20px; cursor: pointer; text-decoration: none;
  border: 1px solid transparent; transition: filter 0.15s, transform 0.15s;
}
.mp3t-btn:hover { filter: brightness(1.08); }
.mp3t-btn:active { transform: scale(0.98); }
.mp3t-btn--primary { background: var(--mp3t-gradient); color: #fff; border: 0; }
.mp3t-btn--ghost { background: transparent; color: var(--mp3t-text); border-color: var(--mp3t-border); }
.mp3t-btn--ghost:hover { border-color: var(--mp3t-accent); color: var(--mp3t-accent); }
.mp3t-btn--sm { padding: 9px 12px; font-size: 13px; border-radius: 10px; }
.mp3t-btn--lg { padding: 14px 24px; font-size: 16px; }
.mp3t-btn[hidden] { display: none; }

.mp3t-download__icon { font-size: 22px; }
.mp3t-download__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
.mp3t-download__text small { font-weight: 500; opacity: 0.85; font-size: 12px; }

/* ── Chart (popular) ── */
.mp3t-chart { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mp3t-chart__row {
  display: flex; align-items: center; gap: 14px;
  background: var(--mp3t-surface); border: 1px solid var(--mp3t-border);
  border-radius: 14px; padding: 10px 14px;
}
.mp3t-chart__row:hover { border-color: var(--mp3t-accent); }
.mp3t-chart__rank { font-size: 22px; font-weight: 900; color: var(--mp3t-muted); width: 28px; text-align: center; }
.mp3t-chart__row:nth-child(1) .mp3t-chart__rank { color: #f59e0b; }
.mp3t-chart__row:nth-child(2) .mp3t-chart__rank { color: #9ca3af; }
.mp3t-chart__row:nth-child(3) .mp3t-chart__rank { color: #d97706; }
.mp3t-chart__art { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.mp3t-chart__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp3t-chart__title { font-weight: 700; color: var(--mp3t-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp3t-chart__artist { color: var(--mp3t-muted); font-size: 13px; }
.mp3t-chart__count { color: var(--mp3t-muted); font-size: 13px; font-weight: 700; white-space: nowrap; }

.mp3t-iconbtn {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  border: 1px solid var(--mp3t-border); background: var(--mp3t-chip);
  color: var(--mp3t-text); cursor: pointer; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.mp3t-iconbtn:hover { background: var(--mp3t-accent); border-color: var(--mp3t-accent); color: var(--mp3t-accent-text); }
.mp3t-iconbtn--dl { border-radius: 10px; }

/* ── Load more ── */
.mp3t-more { text-align: center; margin-top: 24px; }
.mp3t-more__status { color: var(--mp3t-muted); font-size: 14px; min-height: 1.5em; }
.mp3t-empty { text-align: center; color: var(--mp3t-muted); padding: 40px 0; }

/* ── Inline player ── */
.mp3t-player {
  display: flex; gap: 14px; align-items: center;
  background: var(--mp3t-surface-2);
  border: 1px solid var(--mp3t-border);
  border-radius: 16px; padding: 14px 16px;
}
.mp3t-player__toggle {
  flex: none; width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--mp3t-gradient); color: #fff; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.mp3t-player__main { flex: 1; min-width: 0; }
.mp3t-player__top { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; margin-bottom: 6px; }
.mp3t-player__live { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp3t-player__time { color: var(--mp3t-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp3t-player__seek { width: 100%; accent-color: var(--mp3t-accent); cursor: pointer; }
.mp3t-player__bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.mp3t-player__speeds { display: flex; gap: 4px; }
.mp3t-player__speeds button {
  background: transparent; border: 1px solid var(--mp3t-border); color: var(--mp3t-muted);
  border-radius: 8px; font-size: 12px; padding: 3px 9px; cursor: pointer; font-weight: 700;
}
.mp3t-player__speeds button.is-active { color: var(--mp3t-accent); border-color: var(--mp3t-accent); }
.mp3t-player__vol { display: flex; align-items: center; gap: 8px; color: var(--mp3t-muted); }
.mp3t-player__vol input { width: 90px; accent-color: var(--mp3t-accent); }

/* ── Sticky player ── */
.mp3t-sticky {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 9999;
  display: flex; align-items: center; gap: 12px;
  background: var(--mp3t-surface); border: 1px solid var(--mp3t-border);
  border-radius: 18px; padding: 10px 14px; box-shadow: var(--mp3t-shadow);
  max-width: 900px; margin: 0 auto;
  color: var(--mp3t-text);
  font-family: inherit;
}
.mp3t-sticky[hidden] { display: none; }
.mp3t-sticky__art { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; }
.mp3t-sticky__meta { display: flex; flex-direction: column; min-width: 0; max-width: 220px; }
.mp3t-sticky__title { font-weight: 700; font-size: 14px; color: var(--mp3t-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp3t-sticky__artist { font-size: 12.5px; color: var(--mp3t-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp3t-sticky__btn {
  flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--mp3t-gradient); color: #fff; font-size: 17px;
}
.mp3t-sticky__seek { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.mp3t-sticky__seek input { flex: 1; accent-color: var(--mp3t-accent); }
.mp3t-sticky__time { font-size: 12px; color: var(--mp3t-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp3t-sticky__vol { display: flex; align-items: center; gap: 6px; color: var(--mp3t-muted); }
.mp3t-sticky__vol input { width: 80px; accent-color: var(--mp3t-accent); }
.mp3t-sticky__close { background: none; border: 0; color: var(--mp3t-muted); cursor: pointer; font-size: 16px; padding: 6px; }

/* ── Single page ── */
.mp3t-single-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; }
.mp3t-single { background: var(--mp3t-surface); border: 1px solid var(--mp3t-border); border-radius: 24px; padding: clamp(18px, 3.5vw, 36px); }
.mp3t-crumbs { font-size: 13.5px; color: var(--mp3t-muted); margin-bottom: 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.mp3t-crumbs a { color: var(--mp3t-muted); text-decoration: none; }
.mp3t-crumbs a:hover { color: var(--mp3t-accent); }
.mp3t-single__grid { display: grid; grid-template-columns: 340px 1fr; gap: clamp(20px, 4vw, 40px); }
.mp3t-single__art { position: relative; }
.mp3t-single__art img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 20px; box-shadow: var(--mp3t-shadow); display: block; }
.mp3t-single__art .mp3t-badge { top: 14px; right: 14px; font-size: 12px; }
.mp3t-single__genres { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.mp3t-single__title { font-size: clamp(26px, 4vw, 40px); line-height: 1.12; margin: 0 0 8px; font-weight: 800; }
.mp3t-single__artist { font-size: 18px; color: var(--mp3t-muted); margin: 0 0 18px; }
.mp3t-single__artist span { color: var(--mp3t-accent); font-weight: 700; }
.mp3t-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0 0 20px; padding: 16px 18px; background: var(--mp3t-surface-2); border: 1px solid var(--mp3t-border); border-radius: 14px; }
.mp3t-meta div { display: flex; gap: 8px; font-size: 14px; }
.mp3t-meta dt { color: var(--mp3t-muted); margin: 0; }
.mp3t-meta dd { margin: 0; font-weight: 700; }
.mp3t-single__actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0; }
.mp3t-single__desc { margin-top: 30px; border-top: 1px solid var(--mp3t-border); padding-top: 24px; }
.mp3t-single__desc h2, .mp3t-related h2 { font-size: 21px; font-weight: 800; margin: 0 0 14px; }
.mp3t-prose { color: var(--mp3t-text); }
.mp3t-prose p { margin: 0 0 1em; }
.mp3t-related { margin-top: 34px; }

/* Share */
.mp3t-share { display: flex; gap: 8px; flex-wrap: wrap; }
.mp3t-share__btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--mp3t-chip); border: 1px solid var(--mp3t-border);
  color: var(--mp3t-text); border-radius: 10px; padding: 8px 14px;
  font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.mp3t-share__btn:hover { border-color: var(--mp3t-accent); color: var(--mp3t-accent); }
.mp3t-share__btn--copy.is-copied { border-color: var(--mp3t-accent); color: var(--mp3t-accent); }

/* ── Archive ── */
.mp3t-archive-wrap { max-width: 1200px; margin: 0 auto; padding: 24px 16px 60px; }
.mp3t-archive__head { margin-bottom: 22px; }
.mp3t-archive__title { font-size: clamp(26px, 4vw, 38px); font-weight: 800; margin: 0 0 6px; }
.mp3t-archive__desc { color: var(--mp3t-muted); margin: 0; }
.mp3t-pagination { margin-top: 30px; text-align: center; }
.mp3t-pagination .nav-links { display: inline-flex; gap: 6px; }
.mp3t-pagination a, .mp3t-pagination span {
  padding: 9px 16px; border-radius: 10px; border: 1px solid var(--mp3t-border);
  background: var(--mp3t-surface); color: var(--mp3t-text); text-decoration: none; font-weight: 700; font-size: 14px;
}
.mp3t-pagination .current { background: var(--mp3t-accent); border-color: var(--mp3t-accent); color: var(--mp3t-accent-text); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .mp3t-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
  .mp3t-single__grid { grid-template-columns: 1fr; }
  .mp3t-single__art img { max-width: 420px; margin: 0 auto; }
  .mp3t-sticky__vol { display: none; }
}
@media (max-width: 600px) {
  .mp3t-searchbar__filters { grid-template-columns: 1fr; }
  .mp3t-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .mp3t-card__body { padding: 10px 11px 12px; }
  .mp3t-card__title { font-size: 13.5px; }
  .mp3t-card__actions { flex-direction: column; }
  .mp3t-chart__count { display: none; }
  .mp3t-sticky { gap: 8px; padding: 8px 10px; }
  .mp3t-sticky__meta { max-width: 110px; }
  .mp3t-sticky__time { display: none; }
  .mp3t-player { flex-direction: column; text-align: center; }
  .mp3t-player__main { width: 100%; }
  .mp3t-single__actions .mp3t-btn { flex: 1; justify-content: center; }
}
@media (max-width: 380px) {
  .mp3t-grid { grid-template-columns: 1fr; }
}

/* ── Voice tag (single page) ── */
.mp3t-voicetag {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(168, 85, 247, 0.1);
  border: 1px dashed rgba(168, 85, 247, 0.5);
  border-radius: 12px; padding: 10px 14px; margin-top: 14px;
  font-size: 14px;
}
.mp3t-voicetag__label { font-weight: 800; white-space: nowrap; }
.mp3t-voicetag__text { color: var(--mp3t-accent-2); }
.mp3t-voicetag__audio { flex: 1; min-width: 200px; height: 36px; }

/* ── Auto-appended box on tagged standard Posts ── */
.mp3t-postbox {
  background: var(--mp3t-surface);
  border: 1px solid var(--mp3t-border);
  border-radius: 18px;
  padding: clamp(16px, 3vw, 26px);
  margin: 26px 0;
}
.mp3t-postbox__title { margin: 0 0 14px; font-size: 20px; font-weight: 800; }
.mp3t-postbox .mp3t-player { margin-bottom: 14px; }
.mp3t-postbox__row { display: flex; gap: 10px; flex-wrap: wrap; }
.mp3t-postbox__meta { color: var(--mp3t-muted); font-size: 13.5px; margin: 12px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .mp3t-card, .mp3t-card__art img, .mp3t-btn { transition: none; }
}

/* ── Download Now button (auto-placed in post content) ── */
.mp3t-dl-big {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #ff6a00, #ff2d78);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 999px;
  margin: 12px 0;
  box-shadow: 0 6px 18px rgba(255, 45, 120, .35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.mp3t-dl-big:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255, 45, 120, .45);
}