/* =============================================================================
 * Creator Monetization - /my/wishlist/ + /my/services/ panel styles
 * Theme-aware via site CSS vars (--main-background, --input-bg, etc.).
 * Works with both html.light and default dark theme.
 * ============================================================================= */

.cm-panel {
  max-width: 880px;
  margin: 0 auto;
  padding: 16px 0 32px;
  color: var(--color-inverse, #fff);
}

.cm-panel__header {
  margin: 0 0 18px;
}
.cm-panel__title {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-inverse, #fff);
}
.cm-panel__subtitle {
  margin: 0;
  color: var(--desc-heading-color, #8c8c8c);
  font-size: 14px;
}

/* ---------- warnings / flash messages ---------- */
.cm-warning {
  background: rgba(245, 158, 11, .12);
  border: 1px solid rgba(245, 158, 11, .5);
  color: var(--color-inverse, #fff);
  padding: 12px 14px;
  border-radius: 6px;
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.45;
}
.cm-warning a { color: #f59e0b; font-weight: 600; }

.cm-flash {
  border: 1px solid;
  padding: 10px 12px;
  border-radius: 6px;
  margin: 0 0 16px;
  font-size: 14px;
}
.cm-flash--success {
  background: rgba(34, 197, 94, .12);
  border-color: rgba(34, 197, 94, .55);
}
.cm-flash--error {
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .55);
}

/* ---------- form card ---------- */
.cm-form-card {
  background: var(--profile-bg, #070707);
  border: 1px solid var(--desc-box-border-color, rgba(255,255,255,.08));
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 20px;
}
.cm-form-card > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: var(--color-inverse, #fff);
  list-style: none;
  padding: 4px 0;
  user-select: none;
}
.cm-form-card > summary::-webkit-details-marker { display: none; }
.cm-form-card > summary::before {
  content: '+ ';
  display: inline-block;
  width: 1em;
  color: var(--primary-color, #1a81c5);
  font-weight: 700;
}
.cm-form-card[open] > summary::before { content: '- '; }

.cm-form-body { margin-top: 14px; }

.cm-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cm-form-field { display: flex; flex-direction: column; }
.cm-form-field--full { grid-column: 1 / -1; }

.cm-form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-inverse, #fff);
  opacity: .85;
  margin: 0 0 4px;
}

.cm-form-input,
.cm-form-select,
.cm-form-textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--input-bg, #1d1d1d);
  color: var(--color-inverse, #fff);
  border: 1px solid var(--desc-box-border-color, rgba(255,255,255,.12));
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}
.cm-form-input:focus,
.cm-form-select:focus,
.cm-form-textarea:focus {
  outline: none;
  border-color: var(--primary-color, #1a81c5);
  box-shadow: 0 0 0 2px rgba(26, 129, 197, .25);
}
.cm-form-textarea { resize: vertical; min-height: 70px; }
.cm-form-input::placeholder,
.cm-form-textarea::placeholder { color: var(--desc-heading-color, #8c8c8c); opacity: .7; }

/* file upload */
.cm-form-file {
  display: block;
  width: 100%;
  padding: 8px 10px;
  background: var(--input-bg, #1d1d1d);
  color: var(--color-inverse, #fff);
  border: 1px dashed var(--desc-box-border-color, rgba(255,255,255,.25));
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  box-sizing: border-box;
}
.cm-form-file::file-selector-button {
  background: var(--btn-bg, #070707);
  color: var(--color-inverse, #fff);
  border: 1px solid var(--desc-box-border-color, rgba(255,255,255,.2));
  padding: 4px 10px;
  border-radius: 3px;
  margin-right: 10px;
  cursor: pointer;
  font-size: 12px;
}
.cm-form-file::file-selector-button:hover { background: var(--tags-link-bg-hover, #383838); }

.cm-image-preview-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  padding: 8px;
  background: var(--input-bg, #1d1d1d);
  border: 1px solid var(--desc-box-border-color, rgba(255,255,255,.12));
  border-radius: 4px;
}
.cm-image-preview {
  width: 60px; height: 60px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--img-placeholder-bg, #000);
}
.cm-image-preview-meta { flex: 1; font-size: 12px; color: var(--desc-heading-color, #8c8c8c); }
.cm-image-preview-meta label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* ---------- buttons ---------- */
.cm-btn {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s, transform .05s;
}
.cm-btn:active { transform: translateY(1px); }
.cm-btn:hover { opacity: .9; }
.cm-btn--primary {
  background: var(--primary-color, #1a81c5);
  color: #fff;
}
.cm-btn--ghost {
  background: transparent;
  color: var(--color-inverse, #fff);
  border-color: var(--desc-box-border-color, rgba(255,255,255,.25));
}
.cm-btn--danger {
  background: transparent;
  color: #ef4444;
  border-color: #ef4444;
}
.cm-btn--sm { padding: 4px 10px; font-size: 12px; font-weight: 500; }

.cm-form-actions { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- item list ---------- */
.cm-list-header {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-inverse, #fff);
}
.cm-list-empty {
  background: var(--profile-bg, #070707);
  border: 1px dashed var(--desc-box-border-color, rgba(255,255,255,.15));
  padding: 28px;
  text-align: center;
  border-radius: 8px;
  color: var(--desc-heading-color, #8c8c8c);
}
.cm-list { display: grid; gap: 10px; }

.cm-item-card {
  background: var(--profile-bg, #070707);
  border: 1px solid var(--desc-box-border-color, rgba(255,255,255,.08));
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.cm-item-card--inactive { opacity: .55; }

.cm-item-card__thumb {
  width: 80px; height: 80px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--img-placeholder-bg, #000);
}
.cm-item-card__body { flex: 1; min-width: 0; }

.cm-item-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.cm-item-card__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-inverse, #fff);
}
.cm-item-card__desc {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--desc-heading-color, #c0c0c0);
}
.cm-item-card__meta {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--color-inverse, #fff);
  opacity: .85;
  margin: 6px 0 10px;
  flex-wrap: wrap;
}

/* status pill */
.cm-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 500;
}
.cm-pill--active   { background: rgba(34, 197, 94, .18); color: #4ade80; }
.cm-pill--done     { background: rgba(59, 130, 246, .18); color: #60a5fa; }
.cm-pill--hidden   { background: rgba(255, 255, 255, .08); color: var(--desc-heading-color, #8c8c8c); }

/* progress bar */
.cm-progress {
  margin: 6px 0 4px;
  font-size: 12px;
  color: var(--color-inverse, #fff);
  opacity: .9;
}
.cm-progress__bar {
  width: 100%;
  height: 6px;
  background: var(--input-bg, #1d1d1d);
  border: 1px solid var(--desc-box-border-color, rgba(255,255,255,.08));
  border-radius: 3px;
  overflow: hidden;
  margin-top: 3px;
}
.cm-progress__fill {
  height: 100%;
  background: var(--primary-color, #1a81c5);
  transition: width .25s;
}
.cm-progress__fill--full { background: #22c55e; }

.cm-item-card__actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.cm-item-card__external {
  margin-left: auto;
  color: var(--desc-heading-color, #8c8c8c);
  font-size: 12px;
  text-decoration: none;
}
.cm-item-card__external:hover { color: var(--primary-color, #1a81c5); }

/* ---------- light theme tweaks (when html.light) ---------- */
html.light .cm-warning   { background: rgba(245, 158, 11, .12); color: #92400e; }
html.light .cm-warning a { color: #92400e; }
html.light .cm-flash--success { color: #15803d; }
html.light .cm-flash--error   { color: #b91c1c; }
html.light .cm-pill--active   { background: rgba(34, 197, 94, .15); color: #15803d; }
html.light .cm-pill--done     { background: rgba(59, 130, 246, .15); color: #1e40af; }

/* ---------- responsive ---------- */
@media (max-width: 600px) {
  .cm-form-grid { grid-template-columns: 1fr; }
  .cm-item-card { flex-direction: column; }
  .cm-item-card__thumb { width: 100%; height: 160px; }
}