/* Brand — match MyCreativePlan: teal → aqua gradient */
:root{
  --mc-teal:#00c875;
  --mc-aqua:#00fff0;
  --mc-dark:#0e1f1d;
  --mc-ink:#0b1b1a;
  --mc-soft:#f7f7f7;
  --mc-border:#e8ecec;
}

.mc-seo-panel .components-base-control + .components-base-control{ margin-top:12px; }

/* Header score card */
.mc-header{
  display:flex; gap:14px; align-items:center;
  background:linear-gradient(135deg,#ffffff 0%,#f7fffd 70%);
  border:1px solid var(--mc-border); border-radius:16px; padding:12px 14px; margin-bottom:12px;
  position:relative; overflow:hidden;
}
.mc-header-left{ width:92px; height:92px; display:flex; align-items:center; justify-content:center; }
.mc-header-right{ flex:1; min-width:0; }
.mc-level{ font-weight:800; font-size:18px; color:var(--mc-ink); margin-bottom:6px; }
.mc-bar{ width:100%; height:10px; background:#eceff1; border-radius:999px; overflow:hidden; }
.mc-bar-fill{
  height:100%;
  background:linear-gradient(90deg,var(--mc-teal),var(--mc-aqua));
  border-radius:999px;
  transition:width .4s ease;
}
.mc-badges{ margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; }
.mc-chip{
  display:inline-block; background:#eefdf7; border:1px solid #d4f7e8;
  color:#0c3f33; border-radius:999px; padding:2px 10px; font-size:12px; font-weight:600;
}
.mc-confetti{ position:absolute; right:10px; top:8px; font-size:22px; animation:pop 0.9s ease; }
@keyframes pop { 0%{transform:scale(.4);opacity:0} 60%{transform:scale(1.2);opacity:1} 100%{transform:scale(1);opacity:0} }

/* Score ring */
.mc-ring{ width:92px; height:92px; }
.mc-ring .track{ fill:none; stroke:#e6f2ee; stroke-width:10; }
.mc-ring .prog{
  fill:none; stroke:url(#mc-grad);
  stroke-linecap:round; stroke-width:10; transform:rotate(-90deg); transform-origin:50% 50%;
}
.mc-ring-text{ font-size:18px; font-weight:800; fill:#0b1b1a; }

/* Gradient stroke (inline fallback) */
.mc-ring defs, .mc-ring linearGradient { }
.mc-ring{ --mc-g1: var(--mc-teal); --mc-g2: var(--mc-aqua); }
.mc-ring .prog{ stroke: url(#mc-grad); }
.mc-ring::before{ content:''; }

.mc-card{
  background:#fff; border:1px solid var(--mc-border); border-radius:14px; padding:12px 14px; margin-top:12px;
}
.mc-card-title{ font-weight:700; color:#0b1b1a; margin-bottom:8px; }
.mc-checks{ margin:8px 0 0 18px; }
.mc-checks li{ display:flex; gap:6px; align-items:center; margin:4px 0; }
.good{ color:#139e52; font-weight:600; }
.bad { color:#e53935; font-weight:600; }
.warn{ color:#ff9800; font-weight:600; }

.mc-wins{ margin:6px 0 0 18px; }
.mc-wins li{ margin:4px 0; }
.mc-wins-done{ margin:0; color:#0b1b1a; }

.mc-i{
  display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid #c6dcd6; font-size:11px; cursor:help; color:#0b1b1a; background:#fff;
}

/* Footer text */
.mc-foot{ color:#586664; font-size:12px; margin-top:10px; }

/* SVG gradient for ring */
.mc-ring > defs { }
.mc-ring { position:relative; }
.mc-ring::after{
  /* inject gradient via CSS (works as fallback visual only) */
  content:''; display:none;
}