/* Watchlist group picker popup — theme via --fgp-* (set by mockup-theme-init / mockup-global-template) */

.fav-group-pop {
  position: fixed;
  z-index: 13000;
  width: 230px;
  background: var(--fgp-bg, #0e0e28);
  border: 1px solid var(--fgp-border, rgba(245, 158, 11, .3));
  border-radius: 10px;
  box-shadow: var(--fgp-shadow, 0 8px 32px rgba(0, 0, 0, .7));
  overflow: hidden;
  display: none;
  color: var(--fgp-text, var(--text-primary, #f1f5f9));
  animation: fgpIn .15s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes fgpIn {
  from {
    opacity: 0;
    transform: scale(.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.fgp-header {
  padding: 9px 12px 7px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fgp-text-secondary, var(--text-secondary, #94a3b8));
  background: var(--fgp-header-bg, linear-gradient(135deg, rgba(245, 158, 11, .1), rgba(124, 58, 237, .06)));
  border-bottom: 1px solid var(--fgp-header-border, rgba(245, 158, 11, .15));
  display: flex;
  align-items: center;
  gap: 6px;
}

.fgp-header strong {
  color: var(--fgp-strong, #f59e0b);
}

.fgp-empty {
  padding: 12px;
  font-size: 0.72rem;
  color: var(--fgp-text-muted, var(--text-muted, #64748b));
  text-align: center;
  font-style: italic;
}

.fgp-groups {
  max-height: 160px;
  overflow-y: auto;
  padding: 6px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--fgp-scroll-thumb, rgba(255, 255, 255, .12)) transparent;
}

.fgp-groups::-webkit-scrollbar {
  width: 4px;
}

.fgp-groups::-webkit-scrollbar-thumb {
  background: var(--fgp-scroll-thumb, rgba(255, 255, 255, .12));
  border-radius: 99px;
}

.fgp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.74rem;
  color: var(--fgp-text-secondary, var(--text-secondary, #94a3b8));
  transition: background .12s;
}

.fgp-row:hover {
  background: var(--fgp-row-hover, rgba(255, 255, 255, .04));
}

.fgp-row input[type="checkbox"] {
  accent-color: var(--yellow, #f59e0b);
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  cursor: pointer;
}

.fgp-gname {
  flex: 1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fgp-text, var(--text-primary, #f1f5f9));
}

.fgp-gcnt {
  font-size: 0.68rem;
  color: var(--fgp-text-muted, var(--text-muted, #64748b));
  white-space: nowrap;
}

.fgp-new-row {
  display: flex;
  gap: 5px;
  padding: 8px 10px;
  border-top: 1px solid var(--fgp-divider, var(--border, rgba(255, 255, 255, .08)));
}

.fgp-new-input {
  flex: 1;
  background: var(--fgp-input-bg, var(--surface-input, rgba(255, 255, 255, .05)));
  border: 1px solid var(--fgp-input-border, var(--border, rgba(255, 255, 255, .08)));
  border-radius: 6px;
  color: var(--fgp-text, var(--text-primary, #f1f5f9));
  font-size: 0.72rem;
  font-family: inherit;
  padding: 5px 8px;
  outline: none;
  transition: border-color .15s;
}

.fgp-new-input:focus {
  border-color: var(--fgp-focus-border, rgba(245, 158, 11, .45));
}

.fgp-new-input::placeholder {
  color: var(--fgp-text-muted, var(--text-muted, #64748b));
}

.fgp-new-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: var(--fgp-new-btn-bg, rgba(245, 158, 11, .18));
  color: var(--yellow, #f59e0b);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  flex-shrink: 0;
}

.fgp-new-btn:hover {
  background: var(--fgp-new-btn-hover, rgba(245, 158, 11, .35));
}

.fgp-footer {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--fgp-divider, var(--border, rgba(255, 255, 255, .08)));
  background: var(--fgp-footer-bg, rgba(8, 8, 22, .6));
}

.fgp-save-btn {
  flex: 1;
  padding: 5px;
  border-radius: 6px;
  border: none;
  background: linear-gradient(135deg, var(--yellow, #f59e0b), #d97706);
  color: var(--fgp-save-text, #000);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s;
}

.fgp-save-btn:hover {
  opacity: .92;
}

.fgp-cancel-btn {
  flex: 1;
  padding: 5px;
  border-radius: 6px;
  border: 1px solid var(--fgp-input-border, var(--border, rgba(255, 255, 255, .08)));
  background: transparent;
  color: var(--fgp-text-muted, var(--text-muted, #64748b));
  font-size: 0.72rem;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
}

.fgp-cancel-btn:hover {
  background: var(--fgp-cancel-hover, rgba(255, 255, 255, .06));
  color: var(--fgp-text-secondary, var(--text-secondary, #94a3b8));
}