/* Tunegether Embed Plugin, account dashboard styles.
   First-party page, so we reuse tg-card/tg-btn/tg-row from the site and
   only define what is plugin-specific. tgp- prefix throughout. */

.tgp-lede { color: #444; }
.tgp-note { font-size: 13px; color: #666; }
.tgp-fine { font-size: 12px; color: #888; }
.tgp-label { font-size: 13px; font-weight: 600; margin: 16px 0 6px; }
.tgp-error { color: #c81e1e; font-size: 13px; min-height: 18px; }

.tgp-input {
  font: inherit; font-size: 14px; padding: 9px 12px;
  border: 1px solid #ddd; border-radius: 10px; min-width: 0;
}
.tgp-row .tgp-input { flex: 1; }
.tgp-path { max-width: 220px; }

/* purchase modal */
.tgp-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.tgp-modal {
  background: #fff; border-radius: 16px; max-width: 440px; width: 100%;
  padding: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
.tgp-modal h2 { margin: 0 0 8px; }
.tgp-pay-wrap { margin: 12px 0; min-height: 120px; }
.tgp-modal .tgp-row { margin-top: 16px; }

/* track picker */
.tgp-picker { margin: 8px 0 4px; }
.tgp-track-list { max-height: 260px; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.tgp-track {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; font: inherit; padding: 10px 12px; border: 1px solid #e5e5e5;
  border-radius: 10px; background: #fff; cursor: pointer;
}
.tgp-track:hover { border-color: #8b5cf6; }
.tgp-track.tgp-current { border-color: #8b5cf6; background: #f6f3ff; }
.tgp-track-name { font-size: 14px; font-weight: 600; }
.tgp-track-vibes { font-size: 11px; color: #888; }
.tgp-current-song { font-size: 14px; }

/* site cards */
.tgp-site { border: 1px solid #e8e8e8; border-radius: 12px; padding: 14px; margin: 12px 0; }
.tgp-site-head { display: flex; align-items: center; gap: 10px; }
.tgp-pill {
  font-size: 11px; padding: 3px 10px; border-radius: 20px; background: #eee; color: #555;
  text-transform: capitalize;
}
.tgp-pill.tgp-active { background: #e6f9ee; color: #0e7a3d; }
.tgp-pill.tgp-trialing { background: #eef4ff; color: #2b5fc7; }
.tgp-pill.tgp-past_due { background: #fff4e0; color: #a05a00; }
.tgp-pill.tgp-canceled, .tgp-pill.tgp-none { background: #f5e8e8; color: #a33; }

.tgp-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-right: 16px; }
.tgp-pages { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.tgp-page-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.tgp-page-row code { background: #f4f4f4; padding: 3px 8px; border-radius: 6px; }
.tgp-mini {
  font-size: 12px; padding: 4px 10px; border-radius: 16px;
  border: 1px solid #ddd; background: #fff; cursor: pointer;
}
.tgp-danger {
  font-size: 12px; color: #a33; background: none; border: 0; cursor: pointer;
  padding: 0; margin-top: 12px; text-decoration: underline;
}

/* snippet box */
.tgp-snippet { margin: 6px 0; }
.tgp-code {
  display: block; font-size: 12px; background: #111; color: #9f9; border-radius: 8px;
  padding: 10px 12px; overflow-x: auto; white-space: nowrap; margin: 6px 0;
}

.tgp-add { border-top: 1px solid #eee; margin-top: 16px; padding-top: 8px; }