/**
 * Manage subscription page — high-contrast overrides.
 * Loaded after theme.css so content is readable (not "everything dark").
 */
body.page-manage-subscription {
  --text: #eef1f5;
  --text-muted: #c5ced9;
  --text-subtle: #a8b4c4;
  --bg: #252b33;
  --surface: #2d343e;
  --surface-elevated: #363d48;
  --surface-hover: #3d4552;
  --border: rgba(255, 255, 255, 0.12);
  --border-soft: rgba(255, 255, 255, 0.08);
}

body.page-manage-subscription .container-main {
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none !important;
}

/* Ensure no modal backdrop covers content when modal is closed */
body.page-manage-subscription .modal-backdrop:not(.open) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.page-manage-subscription .dr-section-title,
body.page-manage-subscription h1 {
  color: #eef1f5 !important;
}

body.page-manage-subscription .dr-muted,
body.page-manage-subscription .subscription-step-subtext,
body.page-manage-subscription .subscription-dropzone-label,
body.page-manage-subscription .subscription-status-item .label,
body.page-manage-subscription .form-label {
  color: #c5ced9 !important;
}

body.page-manage-subscription .dr-card-title,
body.page-manage-subscription .subscription-step-title,
body.page-manage-subscription h2,
body.page-manage-subscription h3 {
  color: #eef1f5 !important;
}

body.page-manage-subscription .subscription-step-label {
  color: #b8c2d0 !important;
}

body.page-manage-subscription .surface-card,
body.page-manage-subscription .subscription-hero-card {
  background: #2f3640 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* "Load your key to get started" — green hue + border glow (overrides generic hero card) */
body.page-manage-subscription .subscription-hero-card.subscription-hero-card-green {
  background: linear-gradient(160deg, rgba(45, 157, 110, 0.22) 0%, rgba(45, 157, 110, 0.08) 50%, rgba(42, 56, 48, 0.95) 100%) !important;
  border: 1px solid rgba(45, 157, 110, 0.5) !important;
  box-shadow: 0 0 0 1px rgba(45, 157, 110, 0.2), 0 0 24px rgba(45, 157, 110, 0.15) !important;
}

/* Section header icons: Material Icons with visible glow */
body.page-manage-subscription .subscription-header-icon {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.25));
  vertical-align: middle;
  margin-right: 0.35rem;
}

/* Primary actions: same green as hero card with glow (Load subscription, Recover key, Download keys) */
body.page-manage-subscription .pill-subscription-green {
  background: linear-gradient(180deg, rgba(45, 157, 110, 0.35) 0%, rgba(45, 157, 110, 0.2) 100%) !important;
  border: 1px solid rgba(45, 157, 110, 0.6) !important;
  color: #e8f5e9 !important;
  box-shadow: 0 0 0 1px rgba(45, 157, 110, 0.25), 0 0 16px rgba(45, 157, 110, 0.2) !important;
}
body.page-manage-subscription .pill-subscription-green:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(45, 157, 110, 0.45) 0%, rgba(45, 157, 110, 0.28) 100%) !important;
  border-color: rgba(45, 157, 110, 0.75) !important;
  box-shadow: 0 0 0 1px rgba(45, 157, 110, 0.35), 0 0 20px rgba(45, 157, 110, 0.3) !important;
}

/* Change plan / Cancel: keep secondary grey but stand out with border and subtle glow */
body.page-manage-subscription .pill-subscription-secondary {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #eef1f5 !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 12px rgba(255, 255, 255, 0.06) !important;
}
body.page-manage-subscription .pill-subscription-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 16px rgba(255, 255, 255, 0.1) !important;
}

/* Rotate subscription key: keep danger red but stand out with stronger border and glow */
body.page-manage-subscription .pill-subscription-danger {
  background: rgba(248, 113, 113, 0.25) !important;
  border: 1px solid rgba(248, 113, 113, 0.6) !important;
  color: #ffebee !important;
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.2), 0 0 14px rgba(248, 113, 113, 0.2) !important;
}
body.page-manage-subscription .pill-subscription-danger:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.35) !important;
  border-color: rgba(248, 113, 113, 0.75) !important;
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.3), 0 0 20px rgba(248, 113, 113, 0.3) !important;
}

body.page-manage-subscription .subscription-step-card.subscription-step-blue {
  background: linear-gradient(160deg, rgba(59, 130, 246, 0.25) 0%, rgba(59, 130, 246, 0.1) 50%, #2f3640 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.5) !important;
}

body.page-manage-subscription .subscription-step-card.subscription-step-orange {
  background: linear-gradient(135deg, rgba(255, 149, 0, 0.18) 0%, rgba(255, 149, 0, 0.06) 60%, #2f3640 100%) !important;
  border: 1px solid rgba(255, 149, 0, 0.45) !important;
}

body.page-manage-subscription .subscription-step-card.subscription-step-purple {
  background: linear-gradient(160deg, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0.08) 50%, #2f3640 100%) !important;
  border: 1px solid rgba(139, 92, 246, 0.5) !important;
}

body.page-manage-subscription .subscription-step-card.subscription-step-teal {
  background: linear-gradient(160deg, rgba(20, 184, 166, 0.22) 0%, rgba(20, 184, 166, 0.08) 50%, #2f3640 100%) !important;
  border: 1px solid rgba(20, 184, 166, 0.5) !important;
}

body.page-manage-subscription .subscription-segment-controls {
  background: rgba(255, 255, 255, 0.1) !important;
}

body.page-manage-subscription .subscription-segment-btn {
  color: #c5ced9 !important;
}

body.page-manage-subscription .subscription-segment-btn.is-active {
  background: #3d4552 !important;
  color: #eef1f5 !important;
}

body.page-manage-subscription .subscription-dropzone {
  background: #2a3039 !important;
  border: 2px dashed rgba(255, 255, 255, 0.2) !important;
}

body.page-manage-subscription .subscription-dropzone:hover,
body.page-manage-subscription .subscription-dropzone.subscription-dropzone-hover {
  border-color: #68a8e3 !important;
  background: rgba(59, 130, 246, 0.15) !important;
}

body.page-manage-subscription .subscription-status-item {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.page-manage-subscription .subscription-status-item .value {
  color: #eef1f5 !important;
}

body.page-manage-subscription .form-input,
body.page-manage-subscription textarea.form-input {
  background: #252b33 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #eef1f5 !important;
}

body.page-manage-subscription .form-input::placeholder {
  color: #9ca3af !important;
}

body.page-manage-subscription .pill {
  color: #eef1f5;
}

body.page-manage-subscription .text-muted {
  color: #c5ced9 !important;
}

body.page-manage-subscription small,
body.page-manage-subscription .small {
  color: #c5ced9 !important;
}