/* ═══════════════════════════════════════════════════════════════════════════
   myCORE Profile page

   The /profile page renders through the theme (get_header/get_footer), so the
   active theme + its Customizer inline CSS (e.g. `body, button, input { color;
   font-size }`, heading colors, `button { padding; background }`) are present
   on the page and would otherwise re-theme our UI. Every rule below is scoped
   under #mycore-profile-root — an id selector outranks the theme's element/
   class selectors — and we pin color/font-size/padding explicitly so nothing
   leaks in. Do NOT drop the #mycore-profile-root prefixes.
   ═══════════════════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap");
.tg-container {
  width: 100%;
  max-width: unset;
}

:root {
  --mc-bg: #1a1a2e;
  --mc-bg-2: #232339;
  --mc-card: #212138;
  --mc-card-2: #282845;
  --mc-card-border: rgba(255, 255, 255, 0.08);
  --mc-bg-input: #15151f;
  --mc-text: #e9edf4;
  --mc-text-muted: #9aa0b5;
  --mc-accent: #f5a623;
  --mc-accent-hover:#ffba45;
  --mc-green: #43b06a;
  --mc-green-bg: rgba(67, 176, 106, 0.09);
  --mc-green-border:rgba(67, 176, 106, 0.4);
  --mc-radius: 12px;
  --mc-radius-lg: 16px;
  --mc-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --mc-transition: 0.2s ease;
  --mc-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── Theme container fixes ───────────────────────────────────────────────────
   The profile renders inside the theme's wrapper chain:
     #content.site-content > .tg-container > .mycore-portal-body > #mycore-profile-root
   Flash fixes `.tg-container { width: 1200px }` — a hard width, not a max-width — so on
   any viewport under ~1200px it is wider than the screen and scrolls the whole page
   sideways, leaving dead space beside the content.

   The portal page already neutralises this, but that rule lives in portal.css, which is
   NOT enqueued on /profile — so the profile never got it. These have to be duplicated
   here rather than shared, because the two pages load entirely separate stylesheets. */
body.mycore-profile-page .tg-container {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

/* Belt and braces: nothing may scroll this page horizontally. `clip` rather than
   `hidden`/`auto` so no scroll container is created — that would break `position:
   sticky` for anything added later, which is exactly the bug the portal side had. */
body.mycore-profile-page {
  overflow-x: clip;
}

/* Page background (theme content area) — applied on body so the whole page
   reads as the dark navy canvas the design calls for. */
body.mycore-profile-page,
body.mycore-profile-page .mycore-portal-body {
  margin: 0;
  background: var(--mc-bg);
  color: var(--mc-text);
  font-family: var(--mc-font);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* ─── Root reset: neutralize theme typography/button bleed ─────────────────── */
#mycore-profile-root {
  min-height: 100vh;
  font-family: var(--mc-font);
  color: var(--mc-text);
  font-size: 16px;
  line-height: 1.5;
}

#mycore-profile-root *,
#mycore-profile-root *::before,
#mycore-profile-root *::after {
  box-sizing: border-box;
}

#mycore-profile-root button,
#mycore-profile-root input,
#mycore-profile-root textarea,
#mycore-profile-root select {
  font-family: var(--mc-font);
  color: var(--mc-text);
  font-size: 16px;
  line-height: 1.5;
}

#mycore-profile-root h1,
#mycore-profile-root h2,
#mycore-profile-root h3,
#mycore-profile-root h4 {
  color: var(--mc-text);
  line-height: 1.2;
  margin: 0;
}

#mycore-profile-root p {
  margin: 0;
}

#mycore-profile-root .mc-pf-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 20px 56px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ─── Header ──────────────────────────────────────────────────────────────── */
#mycore-profile-root .mc-pf-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 2px;
}

#mycore-profile-root .mc-pf-header h1 {
  font-weight: 700;
  font-size: 1.7rem;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--mc-text);
}

#mycore-profile-root .mc-pf-header h1 span {
  color: inherit;
}

#mycore-profile-root .mc-pf-email {
  color: var(--mc-text-muted);
  margin-top: 5px;
  font-size: 16px;
}

#mycore-profile-root .mc-pf-settings-link {
  background: none;
  border: none;
  color: var(--mc-accent);
  padding: 4px 2px;
  margin: 0;
  width: auto;
  font-family: var(--mc-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 0;
  cursor: pointer;
  transition: color var(--mc-transition);
}

#mycore-profile-root .mc-pf-settings-link:hover {
  color: var(--mc-accent-hover);
  background: none;
}

/* ─── Cards ───────────────────────────────────────────────────────────────── */
#mycore-profile-root .mc-pf-card {
  background: var(--mc-card);
  border: 1px solid var(--mc-card-border);
  border-radius: var(--mc-radius-lg);
  padding: 22px 24px;
}

#mycore-profile-root .mc-pf-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#mycore-profile-root .mc-pf-empty {
  text-align: center;
  padding: 44px 24px;
}

#mycore-profile-root .mc-pf-empty h2 {
  font-weight: 700;
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--mc-text);
}

#mycore-profile-root .mc-pf-empty p {
  color: var(--mc-text-muted);
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.6;
}

/* ─── Tabs ────────────────────────────────────────────────────────────────── */
/* Single row that scrolls horizontally when there are more tabs than fit (like a
   browser tab strip) instead of wrapping onto several rows. */
#mycore-profile-root .mc-pf-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--mc-card-border) transparent;
  padding-bottom: 6px; /* room for the scrollbar so it doesn't overlap the tabs */
}

#mycore-profile-root .mc-pf-tabs::-webkit-scrollbar {
  height: 6px;
}

#mycore-profile-root .mc-pf-tabs::-webkit-scrollbar-track {
  background: transparent;
}

#mycore-profile-root .mc-pf-tabs::-webkit-scrollbar-thumb {
  background: var(--mc-card-border);
  border-radius: 3px;
}

#mycore-profile-root .mc-pf-tabs::-webkit-scrollbar-thumb:hover {
  background: var(--mc-text-muted);
}

#mycore-profile-root .mc-pf-tab {
  flex: 0 0 auto;
  white-space: nowrap;
  background: var(--mc-card);
  border: 1px solid var(--mc-card-border);
  color: var(--mc-text-muted);
  border-radius: 8px;
  padding: 8px 16px;
  font-family: var(--mc-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition: all var(--mc-transition);
}

#mycore-profile-root .mc-pf-tab:hover {
  color: var(--mc-text);
}

#mycore-profile-root .mc-pf-tab.is-active {
  background: var(--mc-accent);
  color: #15110a;
  border-color: transparent;
}

/* ─── Primary type card ──────────────────────────────────────────────────── */
#mycore-profile-root .mc-pf-type-card {
  display: flex;
  gap: 18px;
  align-items: center;
  border-left: 5px solid #FAB035;
}

#mycore-profile-root .mc-pf-type-card.is-loading {
  color: var(--mc-text-muted);
  align-items: center;
}

#mycore-profile-root .mc-pf-type-badge {
  flex: 0 0 auto;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 700;
  color: #15110a;
  background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-hover));
}

#mycore-profile-root .mc-pf-type-body {
  min-width: 0;
}

#mycore-profile-root .mc-pf-type-title {
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 3px;
  color: var(--mc-text);
}

#mycore-profile-root .mc-pf-type-eyebrow {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mc-text-muted);
  margin-bottom: 8px;
}

#mycore-profile-root .mc-pf-type-body p {
  margin: 0;
  color: var(--mc-text-muted);
  font-size: 16px;
  line-height: 1.6;
}

/* CORE Motivators — the list that replaced the quadrant line. Kept tight so the card
   doesn't grow much: the type description still follows it. */
#mycore-profile-root .mc-pf-motivators {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#mycore-profile-root .mc-pf-motivators li {
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--mc-bg-input);
  border: 1px solid var(--mc-card-border);
  color: var(--mc-text);
  font-size: 14px;
  line-height: 1.35;
}

/* Locked placeholder (no report owned): same card, copy centered, neutral border so
   nothing about the hidden type leaks. min-height matches the populated type card. */
#mycore-profile-root .mc-pf-type-card.mc-pf-type-locked {
  justify-content: center;
  text-align: center;
  border-left: 1px solid var(--mc-card-border);
  min-height: 119px;
}

#mycore-profile-root .mc-pf-type-locked-body {
  color: var(--mc-text-muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 560px;
}

#mycore-profile-root .mc-pf-type-locked-body :first-child {
  margin-top: 0;
}

#mycore-profile-root .mc-pf-type-locked-body :last-child {
  margin-bottom: 0;
}

/* ─── Bundle (centered) ──────────────────────────────────────────────────── */
#mycore-profile-root .mc-pf-bundle {
  background: var(--mc-card-2);
  text-align: center;
  padding: 28px 24px;
}

#mycore-profile-root .mc-pf-bundle h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--mc-text);
}

#mycore-profile-root .mc-pf-bundle p {
  margin: 0 auto 18px;
  color: var(--mc-text-muted);
  max-width: 420px;
  font-size: 16px;
  line-height: 1.6;
}

#mycore-profile-root .mc-pf-price {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--mc-text);
}

#mycore-profile-root .mc-pf-price span {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--mc-text-muted);
}

/* ─── Reports ─────────────────────────────────────────────────────────────── */
#mycore-profile-root .mc-pf-reports-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  flex-wrap: wrap;
  gap: 6px;
}

#mycore-profile-root .mc-pf-reports-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--mc-text);
}

#mycore-profile-root .mc-pf-coupon-note {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--mc-accent);
}

#mycore-profile-root .mc-pf-price-strike {
  text-decoration: line-through;
  opacity: 0.6;
  font-weight: 500;
  margin-right: 5px;
}

#mycore-profile-root .mc-pf-charts-head {
  margin-top: 24px;
}

/* "Take your survey" card — shown for a linked survey that hasn't been completed */
#mycore-profile-root .mc-pf-take-survey {
  text-align: center;
  padding: 40px 24px;
}

#mycore-profile-root .mc-pf-take-survey h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--mc-text);
}

#mycore-profile-root .mc-pf-take-survey p {
  margin: 0 auto 20px;
  color: var(--mc-text-muted);
  max-width: 420px;
  line-height: 1.6;
}

/* Demographics promo (earn-a-coupon callout under Reports) */
#mycore-profile-root .mc-pf-demo-promo {
  border: 1px solid var(--mc-green-border);
  text-align: center;
  margin-top: 16px;
}

#mycore-profile-root .mc-pf-demo-promo-body {
  color: var(--mc-text-muted);
  line-height: 1.6;
}

#mycore-profile-root .mc-pf-demo-promo-body h1,
#mycore-profile-root .mc-pf-demo-promo-body h2,
#mycore-profile-root .mc-pf-demo-promo-body h3 {
  color: var(--mc-text);
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 18px;
}

#mycore-profile-root .mc-pf-demo-promo-body p {
  margin: 0 auto 6px;
  max-width: 480px;
}

#mycore-profile-root .mc-pf-demo-promo .mc-btn {
  margin-top: 14px;
}

#mycore-profile-root .mc-pf-reports-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px;
}

#mycore-profile-root .mc-pf-report {
  background: var(--mc-card);
  border: 1px solid var(--mc-card-border);
  border-radius: var(--mc-radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#mycore-profile-root .mc-pf-report.is-unlocked {
  border-color: var(--mc-green-border);
  background: var(--mc-green-bg);
}

#mycore-profile-root .mc-pf-report h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--mc-text);
}

#mycore-profile-root .mc-pf-report p {
  margin: 0;
  color: var(--mc-text-muted);
  font-size: 15px;
  line-height: 1.5;
  flex: 1;
}

#mycore-profile-root .mc-pf-tag {
  align-self: flex-start;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  color: var(--mc-text-muted);
  background: rgba(255, 255, 255, 0.05);
}

#mycore-profile-root .mc-pf-tag-on {
  color: var(--mc-green);
  background: var(--mc-green-bg);
}

#mycore-profile-root .mc-pf-report-link {
  color: var(--mc-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}

#mycore-profile-root .mc-pf-report-link:hover {
  color: var(--mc-accent-hover);
}

/* Per-report Buy button — compact, left-aligned to sit like the report link. */
#mycore-profile-root .mc-pf-buy {
  align-self: flex-start;
  padding: 8px 18px;
  font-size: 14px;
}

#mycore-profile-root .mc-pf-buy:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ─── Lower sections (centered) ──────────────────────────────────────────── */
#mycore-profile-root .mc-pf-section {
  text-align: center;
}

#mycore-profile-root .mc-pf-section h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--mc-text);
}

#mycore-profile-root .mc-pf-section p {
  margin: 0 auto 16px;
  color: var(--mc-text-muted);
  line-height: 1.6;
  font-size: 16px;
  max-width: 520px;
}

#mycore-profile-root .mc-pf-section-inline {
  padding: 18px 24px;
}

#mycore-profile-root .mc-pf-section-inline h3 {
  font-size: 18px;
}

#mycore-profile-root .mc-pf-inline-form {
  display: flex;
  gap: 10px;
  justify-content: center;
  max-width: 480px;
  margin: 0 auto;
}

#mycore-profile-root .mc-pf-inline-form input {
  flex: 1;
  min-width: 0;
  height: auto;
  padding: 11px 16px;
  border-radius: 8px;
  border: 1px solid var(--mc-card-border);
  background: var(--mc-bg-input);
  color: var(--mc-text);
  font-family: var(--mc-font);
  font-size: 16px;
  line-height: 1.5;
  outline: none;
  transition: border-color var(--mc-transition);
}

#mycore-profile-root .mc-pf-inline-form input:focus {
  border-color: var(--mc-accent);
}

#mycore-profile-root .mc-pf-inline-form input::placeholder {
  color: var(--mc-text-muted);
}

#mycore-profile-root .mc-pf-inline-form .mc-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

#mycore-profile-root .mc-pf-note {
  margin-top: 12px;
  font-size: 15px;
  color: var(--mc-green);
  display: none;
}

#mycore-profile-root .mc-pf-note.is-visible {
  display: block;
}

#mycore-profile-root .mc-pf-note.is-error {
  color: var(--mc-accent);
}

/* Share is gated until a report is purchased on the active survey. */
#mycore-profile-root .mc-pf-locked-note {
  margin: 0;
  font-size: 15px;
  color: var(--mc-text-muted);
  font-style: italic;
}

/* Read-only share link + its Copy button. */
#mycore-profile-root .mc-pf-copy-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

#mycore-profile-root .mc-pf-copy-row input {
  flex: 1;
  min-width: 0;
  padding: 11px 16px;
  border-radius: 8px;
  border: 1px solid var(--mc-card-border);
  background: var(--mc-bg-input);
  color: var(--mc-text-muted);
  font-family: var(--mc-font);
  font-size: 14px;
  line-height: 1.5;
  outline: none;
  /* Long invite URL: keep it on one line and let the caret scroll it, rather than
     letting it stretch the modal. */
  text-overflow: ellipsis;
}

/* `.mc-modal .mc-btn { width: 100% }` (_modal.scss) makes every button in a modal full
   width and stacked — right for the action buttons, fatal here: the Copy button took the
   whole row and squashed the link field to nothing. Matched with equal specificity plus
   the extra class so this wins inside the copy row only. */
#mycore-profile-root .mc-modal .mc-pf-copy-row .mc-btn,
#mycore-profile-root .mc-pf-copy-row .mc-btn {
  flex: 0 0 auto;
  width: auto;
  margin-top: 0;
  white-space: nowrap;
  /* Fixed width so swapping the label to "Copied" doesn't resize the button. */
  min-width: 104px;
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */
#mycore-profile-root .mc-pf-footer {
  text-align: center;
  color: var(--mc-text-muted);
  font-size: 12px;
  margin-top: 16px;
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
#mycore-profile-root .mc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 11px 24px;
  border-radius: 8px;
  border: none;
  font-family: var(--mc-font);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--mc-transition);
}

#mycore-profile-root .mc-btn-primary {
  background: var(--mc-accent);
  color: #15110a;
}

#mycore-profile-root .mc-btn-primary:hover {
  background: var(--mc-accent-hover);
  color: #15110a;
}

#mycore-profile-root .mc-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#mycore-profile-root .mc-btn-secondary {
  background: transparent;
  color: var(--mc-text);
  border: 1px solid var(--mc-card-border);
}

#mycore-profile-root .mc-btn-secondary:hover {
  border-color: var(--mc-text-muted);
  color: var(--mc-text);
}

/* ─── Spinner ─────────────────────────────────────────────────────────────── */
#mycore-profile-root .mc-pf-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--mc-card-border);
  border-top-color: var(--mc-accent);
  display: inline-block;
  animation: mcSpin 0.8s linear infinite;
}

@keyframes mcSpin {
  to {
    transform: rotate(360deg);
  }
}
/* ─── Auth (logged-out login / register) ──────────────────────────────────── */
#mycore-profile-root .mc-auth-shell {
  max-width: 440px;
  min-height: calc(100vh - 40px);
  justify-content: center;
  padding: 40px 20px 64px;
}

#mycore-profile-root .mc-auth-card {
  background: var(--mc-bg-2);
  border: 1px solid var(--mc-card-border);
  border-radius: var(--mc-radius-lg);
  box-shadow: var(--mc-shadow);
  padding: 36px 32px 28px;
  animation: mcAuthIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#mycore-profile-root .mc-auth-head {
  text-align: center;
  margin-bottom: 24px;
}

#mycore-profile-root .mc-auth-head h1 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 8px;
}

#mycore-profile-root .mc-auth-head p {
  color: var(--mc-text-muted);
  font-size: 15px;
  line-height: 1.5;
}

#mycore-profile-root .mc-auth-form {
  display: block;
}

#mycore-profile-root .mc-auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

#mycore-profile-root .mc-auth-row .mc-field-group {
  margin-bottom: 16px;
}

/* Inline error — collapsed until it has a message. */
#mycore-profile-root .mc-auth-error {
  color: #ff6b6b;
  font-size: 14px;
  line-height: 1.4;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--mc-transition), opacity var(--mc-transition), margin var(--mc-transition);
}

#mycore-profile-root .mc-auth-error.is-visible {
  max-height: 80px;
  opacity: 1;
  margin: -4px 0 14px;
}

/* Submit button — spinner swaps in over the label while busy. */
#mycore-profile-root .mc-auth-submit {
  width: 100%;
  position: relative;
  margin-top: 4px;
}

#mycore-profile-root .mc-auth-submit .mc-auth-label {
  transition: opacity var(--mc-transition);
}

#mycore-profile-root .mc-auth-submit.is-busy .mc-auth-label {
  opacity: 0;
}

#mycore-profile-root .mc-auth-submit.is-busy {
  cursor: default;
}

#mycore-profile-root .mc-auth-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid rgba(21, 17, 10, 0.35);
  border-top-color: #15110a;
  opacity: 0;
  animation: mcSpin 0.8s linear infinite;
}

#mycore-profile-root .mc-auth-submit.is-busy .mc-auth-spinner {
  opacity: 1;
}

/* Login ⇄ register toggle. */
#mycore-profile-root .mc-auth-toggle {
  text-align: center;
  color: var(--mc-text-muted);
  font-size: 15px;
  margin-top: 20px;
}

#mycore-profile-root .mc-auth-switch {
  background: none;
  border: none;
  padding: 0;
  color: var(--mc-accent);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--mc-transition);
}

#mycore-profile-root .mc-auth-switch:hover {
  color: var(--mc-accent-hover);
  text-decoration: underline;
}

/* Success hand-off state. */
#mycore-profile-root .mc-auth-done {
  text-align: center;
  padding: 44px 32px;
}

#mycore-profile-root .mc-auth-done h1 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 6px;
}

#mycore-profile-root .mc-auth-done p {
  color: var(--mc-text-muted);
  font-size: 15px;
}

#mycore-profile-root .mc-auth-check {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--mc-green-bg);
  border: 1px solid var(--mc-green-border);
  color: var(--mc-green);
  font-size: 28px;
  line-height: 56px;
  animation: mcAuthPop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes mcAuthIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes mcAuthPop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  60% {
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes mcShake {
  10%, 90% {
    transform: translateX(-1px);
  }
  20%, 80% {
    transform: translateX(2px);
  }
  30%, 50%, 70% {
    transform: translateX(-5px);
  }
  40%, 60% {
    transform: translateX(5px);
  }
}
#mycore-profile-root .mc-auth-card.mc-shake {
  animation: mcShake 0.4s ease both;
}

@media (max-width: 480px) {
  #mycore-profile-root .mc-auth-card {
    padding: 28px 22px 24px;
  }
  #mycore-profile-root .mc-auth-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  #mycore-profile-root .mc-auth-head h1 {
    font-size: 23px;
  }
}
/* ─── Modal ───────────────────────────────────────────────────────────────── */
#mycore-profile-root .mc-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(5, 7, 12, 0.82);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#mycore-profile-root .mc-modal {
  background: var(--mc-bg-2);
  border: 1px solid var(--mc-card-border);
  border-radius: var(--mc-radius-lg);
  padding: 32px;
  max-width: 440px;
  width: 100%;
  box-shadow: var(--mc-shadow);
}

/* ── Report viewer (iframe over the profile) ───────────────────────────────── */
#mycore-profile-root .mc-pf-report-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(5, 7, 12, 0.82);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#mycore-profile-root .mc-pf-report-modal {
  background: var(--mc-bg-2);
  border: 1px solid var(--mc-card-border);
  border-radius: var(--mc-radius-lg);
  width: 100%;
  max-width: 960px;
  height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--mc-shadow);
}

#mycore-profile-root .mc-pf-report-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--mc-card-border);
  flex-wrap: wrap;
}

#mycore-profile-root .mc-pf-report-bar h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--mc-text);
}

#mycore-profile-root .mc-pf-report-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

#mycore-profile-root .mc-pf-report-icon {
  padding: 8px 10px;
  line-height: 0;
  display: inline-flex;
  align-items: center;
}

#mycore-profile-root .mc-pf-report-frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #fff;
}

/* Fullscreen: the modal (bar + iframe) fills the screen; the bar stays reachable. */
#mycore-profile-root .mc-pf-report-modal:fullscreen,
#mycore-profile-root .mc-pf-report-modal:-webkit-full-screen,
#mycore-profile-root .mc-pf-report-modal.is-fullscreen {
  max-width: none;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
}

#mycore-profile-root .mc-pf-report-modal.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 10001;
}

#mycore-profile-root .mc-modal h2 {
  font-weight: 700;
  margin: 0 0 8px;
  text-align: center;
  font-size: 1.3rem;
  color: var(--mc-text);
}

#mycore-profile-root .mc-modal-subtitle {
  color: var(--mc-text-muted);
  text-align: center;
  margin-bottom: 22px;
  font-size: 16px;
}

#mycore-profile-root .mc-modal .mc-btn {
  width: 100%;
  margin-top: 8px;
}

/* Shared button stack — used in the settings modal and the logged-out card. */
#mycore-profile-root .mc-modal-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

#mycore-profile-root .mc-modal-actions .mc-btn {
  margin-top: 0;
}

#mycore-profile-root .mc-field-group {
  margin-bottom: 16px;
}

#mycore-profile-root .mc-field-group label {
  display: block;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--mc-text-muted);
  margin-bottom: 6px;
}

#mycore-profile-root .mc-field-group input,
#mycore-profile-root .mc-field-group textarea,
#mycore-profile-root .mc-field-group select {
  width: 100%;
  box-sizing: border-box;
  height: auto;
  padding: 11px 16px;
  border-radius: 8px;
  border: 1px solid var(--mc-card-border);
  background: var(--mc-bg-input);
  color: var(--mc-text);
  font-size: 16px;
  line-height: 1.5;
  font-family: var(--mc-font);
  outline: none;
  resize: vertical;
}

#mycore-profile-root .mc-field-group input:focus,
#mycore-profile-root .mc-field-group textarea:focus,
#mycore-profile-root .mc-field-group select:focus {
  border-color: var(--mc-accent);
}

/* Password input with a show/hide eye button pinned inside its right edge. */
#mycore-profile-root .mc-pw-wrap {
  position: relative;
}

#mycore-profile-root .mc-field-group .mc-pw-wrap input {
  display: block;
  padding-right: 48px;
}

#mycore-profile-root .mc-pw-toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0 8px 8px 0;
  background: transparent;
  color: var(--mc-text-muted);
  cursor: pointer;
  transition: color var(--mc-transition);
}

#mycore-profile-root .mc-pw-toggle:hover {
  color: var(--mc-text);
}

#mycore-profile-root .mc-pw-toggle:focus-visible {
  color: var(--mc-text);
  outline: 2px solid var(--mc-accent);
  outline-offset: -2px;
}

#mycore-profile-root .mc-pw-toggle svg {
  display: block;
}

/* A <select> ignores most of the above unless its native chrome is switched off, so it
   rendered as a stock light-grey OS control next to the dark inputs. Drop the native
   appearance, draw our own chevron, and set color-scheme so the dropdown list the OS
   opens is dark too rather than a white flash. */
#mycore-profile-root .mc-field-group select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  color-scheme: dark;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23B5C3C8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

:root[data-mc-theme=light] #mycore-profile-root .mc-field-group select {
  color-scheme: light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23566' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

#mycore-profile-root .mc-modal .mc-pf-note {
  text-align: center;
}

/* Purchase-complete confirmation popup */
#mycore-profile-root .mc-pf-done-modal {
  text-align: center;
}

#mycore-profile-root .mc-pf-done-check {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: #15110a;
  background: var(--mc-green);
}

#mycore-profile-root .mc-pf-done-modal .mc-btn {
  width: 100%;
  margin-top: 8px;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  #mycore-profile-root .mc-pf-reports-grid {
    grid-template-columns: 1fr;
  }
  #mycore-profile-root .mc-pf-type-card {
    flex-direction: column;
    text-align: center;
  }
  #mycore-profile-root .mc-pf-inline-form {
    flex-direction: column;
  }
}
/* ─── Theme toggle button ─────────────────────────────────────────────────────
   Rendered on <body> (outside #mycore-profile-root), so every property is pinned
   explicitly to stay clear of the active theme's button styling. */
body.mycore-profile-page .mc-theme-toggle {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 10001;
  width: 42px;
  height: 42px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--mc-card-border);
  background: var(--mc-card);
  color: var(--mc-accent);
  font-family: var(--mc-font);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--mc-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--mc-transition), background var(--mc-transition);
}

body.mycore-profile-page .mc-theme-toggle:hover {
  transform: translateY(-1px);
  background: var(--mc-bg-2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Light mode — activated by data-mc-theme="light" on <html>. Dark stays the
   default; these rules only override the variables and the few hardcoded colors.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-mc-theme=light] {
  --mc-bg: #f4f4f9;
  --mc-bg-2: #ffffff;
  --mc-card: #ffffff;
  --mc-card-2: #f3f3f8;
  --mc-card-border: rgba(20,20,55,0.10);
  --mc-bg-input: #f1f1f6;
  --mc-text: #1e2233;
  --mc-text-muted: #6a708a;
  --mc-shadow: 0 10px 40px rgba(40,40,90,0.12);
}

:root[data-mc-theme=light] #mycore-profile-root .mc-pf-tag {
  background: rgba(20, 20, 55, 0.05);
}

:root[data-mc-theme=light] #mycore-profile-root .mc-overlay {
  background: rgba(40, 40, 70, 0.45);
}