/* Converter widget — matches the site's dark theme (global.css). */

.cx-wrap { max-width: 560px; margin: 0 auto; }

.cx-bar {
  display: flex;
  gap: 8px;
  background: #161d21;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 6px 6px 6px 14px;
  transition: border-color .18s, box-shadow .18s;
}
.cx-bar:focus-within {
  border-color: rgba(29,185,84,0.55);
  box-shadow: 0 0 0 4px rgba(29,185,84,0.12);
}
.cx-input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none;
  color: #fff; font-family: inherit; font-size: 16px; padding: 10px 0;
}
.cx-input::placeholder { color: #7d8a8f; }
.cx-go {
  flex: none; border: 0; border-radius: 8px;
  background: #fff; color: #000; font-family: inherit; font-weight: 700;
  font-size: 15px; padding: 0 18px; cursor: pointer;
  transition: filter .15s, transform .1s;
}
.cx-go:hover { filter: brightness(.9); }
.cx-go:active { transform: translateY(1px); }
.cx-go:disabled { opacity: .5; cursor: default; }

.cx-opts {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px; color: #b9c6c2; font-size: 14px;
}
.cx-opts select {
  background: #161d21; color: #fff;
  border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;
  padding: 6px 8px; font-family: inherit; font-size: 14px; cursor: pointer;
}
.cx-tip { text-align: center; color: #8fa1a6; font-size: 13px; margin: 10px 0 0; }

#cx-status { margin-top: 20px; }

.cx-note {
  border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
  padding: 14px 16px; color: #b9c6c2; text-align: left; font-size: 15px; line-height: 1.45;
}
.cx-note.err { border-color: rgba(232,96,96,0.5); color: #f2b8b8; background: rgba(232,96,96,0.06); }
.cx-spin {
  display: inline-block; width: 15px; height: 15px; vertical-align: -3px; margin-right: 9px;
  border: 2px solid rgba(29,185,84,0.25); border-top-color: #1db954; border-radius: 50%;
  animation: cx-spin .7s linear infinite;
}
@keyframes cx-spin { to { transform: rotate(360deg); } }

.cx-card {
  margin-top: 20px; text-align: left;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 16px;
  overflow: hidden; background: #131a1d;
}
.cx-side { display: flex; gap: 14px; align-items: center; padding: 16px; }
.cx-art {
  flex: none; width: 72px; height: 72px; border-radius: 8px; object-fit: cover;
  background: #1e272c; box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
/* override global.css ".project img { width: 100% }" */
#converter .cx-art { width: 72px; height: 72px; margin-top: 0; }
.cx-meta { flex: 1; min-width: 0; }
.cx-badge {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
}
.cx-badge .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cx-badge.spotify { color: #1db954; } .cx-badge.spotify .dot { background: #1db954; }
.cx-badge.apple { color: #fa2d48; } .cx-badge.apple .dot { background: #fa2d48; }
.cx-ttl { font-family: 'Merriweather', serif; font-size: 18px; line-height: 1.2; margin: 0 0 3px; }
.cx-artist { color: #cdd8d5; font-size: 13px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cx-acts { flex: none; display: flex; flex-direction: column; gap: 6px; }
.cx-btn {
  border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.04);
  color: #fff; text-decoration: none; text-align: center; font-family: inherit;
  font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 8px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.cx-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); text-decoration: none; }
.cx-btn.copied { color: #1db954; border-color: rgba(29,185,84,0.6); }

.cx-arrow {
  text-align: center; padding: 8px; font-size: 12px; letter-spacing: .06em; color: #8fa1a6;
  background: #0d1214; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cx-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 16px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 12px; color: #8fa1a6;
}
.cx-foot a { color: #1db954; }
.cx-warn { padding: 11px 16px; border-top: 1px solid rgba(255,255,255,0.1); color: #e8c98a; font-size: 12px; line-height: 1.5; }

@media (max-width: 576px) {
  .cx-artist { white-space: normal; }
  .cx-side { gap: 12px; }
  .cx-art { width: 60px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) { .cx-spin { animation: none; } .cx-bar, .cx-go, .cx-btn { transition: none; } }