.sgs { --good: #0D9488; --mid: #D97706; --bad: #DC2626; }
.sgs-form { display: flex; gap: .6rem; background: #fff; padding: .5rem; border-radius: 14px; box-shadow: 0 18px 40px -20px rgba(15,42,68,.45); max-width: 640px; }
.sgs-form input[type=text] { flex: 1; min-width: 0; font: inherit; font-size: 16px; border: 0; padding: .8rem .9rem; color: #0F2A44; background: transparent; outline: none; }
.sgs-form button, .sgs-unlock-form button { font: inherit; font-weight: 700; background: var(--wp--preset--color--teal); color: #fff; border: 0; border-radius: 10px; padding: .8rem 1.3rem; cursor: pointer; white-space: nowrap; }
.sgs-form button:hover, .sgs-unlock-form button:hover { background: var(--wp--preset--color--teal-dark); }
.sgs-form button:disabled { opacity: .6; cursor: wait; }
.sgs-note { font-size: .85rem; margin: .7rem 0 0; opacity: .85; }
.sgs-out:empty { display: none; }
.sgs-out { margin-top: 2rem; color: var(--wp--preset--color--ink); }

.sgs-loading, .sgs-error, .sgs-report { background: #fff; border-radius: 16px; padding: 2rem 1.5rem; box-shadow: 0 20px 50px -24px rgba(15,42,68,.35); border: 1px solid var(--wp--preset--color--line); }
.sgs-loading { text-align: center; }
.sgs-spin { width: 46px; height: 46px; margin: 0 auto 1rem; border-radius: 50%; border: 4px solid #CCFBF1; border-top-color: var(--wp--preset--color--teal); animation: sgs-r .9s linear infinite; }
@keyframes sgs-r { to { transform: rotate(360deg); } }
.sgs-host { font-weight: 800; color: #0F2A44; font-size: 1.2rem; margin: 0; }
.sgs-step { color: var(--wp--preset--color--muted); margin: .4rem 0 1rem; }
.sgs-bar { height: 8px; background: var(--wp--preset--color--mist); border-radius: 8px; overflow: hidden; max-width: 420px; margin: 0 auto; }
.sgs-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2DD4BF, #0D9488); transition: width .6s ease; border-radius: 8px; }
.sgs-small { font-size: .85rem; color: var(--wp--preset--color--muted); }
.sgs-error { border-left: 5px solid var(--bad); }
.sgs-error a { font-weight: 700; }

.sgs-report h2 { margin: 0; font-size: 1.6rem; word-break: break-word; }
.sgs-report h3 { margin: 2rem 0 .8rem; font-size: 1.2rem; }
.sgs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.sgs-kicker { text-transform: uppercase; font-size: .75rem; letter-spacing: .08em; font-weight: 700; color: var(--wp--preset--color--teal-dark); margin: 0; }
.sgs-copy { font: inherit; font-size: .85rem; font-weight: 600; background: var(--wp--preset--color--mist); border: 1px solid var(--wp--preset--color--line); border-radius: 8px; padding: .5rem .8rem; cursor: pointer; color: #0F2A44; }

.sgs-rings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.5rem; }
.sgs-ring { position: relative; text-align: center; }
.sgs-ring svg { width: 100%; max-width: 110px; transform: rotate(-90deg); display: block; margin: 0 auto; }
.sgs-ring circle { fill: none; stroke-width: 7; }
.sgs-ring .t { stroke: var(--wp--preset--color--mist); }
.sgs-ring .v { stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
.sgs-ring.good .v { stroke: var(--good); } .sgs-ring.mid .v { stroke: var(--mid); } .sgs-ring.bad .v { stroke: var(--bad); }
.sgs-ring b { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; max-width: 110px; margin: 0 auto; display: grid; place-items: center; font-size: 1.7rem; font-weight: 800; }
.sgs-ring.good b { color: var(--good); } .sgs-ring.mid b { color: var(--mid); } .sgs-ring.bad b { color: var(--bad); }
.sgs-ring span { display: block; margin-top: .4rem; font-weight: 700; font-size: .9rem; color: #0F2A44; }

.sgs-metrics { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: .6rem; }
.sgs-metrics li { display: flex; justify-content: space-between; gap: .5rem; padding: .7rem .9rem; border-radius: 10px; background: var(--wp--preset--color--mist); font-size: .9rem; border-left: 4px solid; }
.sgs-metrics li.good { border-color: var(--good); } .sgs-metrics li.mid { border-color: var(--mid); } .sgs-metrics li.bad { border-color: var(--bad); }

.sgs-issues { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.sgs-issue { border: 1px solid var(--wp--preset--color--line); border-radius: 12px; padding: 1rem 1.1rem; border-left: 5px solid; }
.sgs-issue.high { border-left-color: var(--bad); } .sgs-issue.medium { border-left-color: var(--mid); } .sgs-issue.low { border-left-color: #94A3B8; }
.sgs-issue h4 { margin: .35rem 0 .3rem; font-size: 1rem; color: #0F2A44; }
.sgs-issue h4 em { font-style: normal; font-weight: 600; color: var(--wp--preset--color--muted); font-size: .9rem; }
.sgs-issue p { margin: 0; font-size: .9rem; color: var(--wp--preset--color--muted); }
.sgs-issue .lvl, .sgs-issue .cat { display: inline-block; font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 6px; margin-right: .3rem; }
.sgs-issue.high .lvl { background: #FEE2E2; color: #991B1B; } .sgs-issue.medium .lvl { background: #FEF3C7; color: #92400E; } .sgs-issue.low .lvl { background: #F1F5F9; color: #475569; }
.sgs-issue .cat { background: #CCFBF1; color: #134E4A; }

.sgs-lock { position: relative; margin-top: .7rem; }
.sgs-blur { filter: blur(5px); opacity: .6; pointer-events: none; user-select: none; }
.sgs-unlock { position: relative; margin-top: -4rem; background: #fff; border: 2px solid var(--wp--preset--color--teal); border-radius: 16px; padding: 1.5rem; box-shadow: 0 20px 40px -20px rgba(13,148,136,.5); }
.sgs-unlock h3 { margin-top: 0; }
.sgs-unlock-form { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.sgs-unlock-form input[type=text], .sgs-unlock-form input[type=email], .sgs-unlock-form input[type=tel] { font: inherit; font-size: 16px; padding: .75rem .8rem; border: 1px solid #CBD5E1; border-radius: 8px; min-width: 0; }
.sgs-unlock-form input[type=tel] { grid-column: 1 / -1; }
.sgs-unlock-form .sgs-gdpr { grid-column: 1 / -1; font-size: .85rem; color: var(--wp--preset--color--muted); display: flex; gap: .5rem; align-items: flex-start; }
.sgs-unlock-form button { grid-column: 1 / -1; justify-self: start; }
.sgs-err { grid-column: 1 / -1; color: var(--bad); font-weight: 600; margin: 0; font-size: .9rem; }

.sgs-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.sgs-checks li { display: grid; grid-template-columns: 1.6rem 1fr; column-gap: .5rem; padding: .7rem .9rem; border-radius: 10px; background: var(--wp--preset--color--mist); font-size: .9rem; }
.sgs-checks li::before { grid-row: span 2; font-weight: 800; }
.sgs-checks li.ok::before { content: "✓"; color: var(--good); } .sgs-checks li.no::before { content: "✗"; color: var(--bad); }
.sgs-checks b { color: #0F2A44; } .sgs-checks span { color: var(--wp--preset--color--muted); }
.sgs-cta { margin-top: 2rem; padding: 1.5rem; border-radius: 14px; background: #0F2A44; color: #CBD5E1; }
.sgs-cta h3 { color: #fff; margin-top: 0; }

@media (max-width: 600px) {
  .sgs-form { flex-direction: column; }
  .sgs-form button { width: 100%; }
  .sgs-rings { grid-template-columns: repeat(2, 1fr); }
  .sgs-unlock-form { grid-template-columns: 1fr; }
  .sgs-loading, .sgs-error, .sgs-report { padding: 1.5rem 1rem; }
}

/* Report sits inside the dark hero – reset its colours */
.sgs-out, .sg-hero .sgs-out { color: #1E293B; }
.sgs-out h2, .sgs-out h3, .sgs-out h4, .sg-hero .sgs-out h2, .sg-hero .sgs-out h3 { color: #0F2A44; }
.sgs-out p, .sg-hero .sgs-out p { color: #475569; }
.sg-hero .sgs-out .sgs-host { color: #0F2A44; }
.sg-hero .sgs-out .sgs-kicker { color: #0B7A70; }
.sg-hero .sgs-out .sgs-err { color: var(--bad); }
.sgs-cta p, .sg-hero .sgs-cta p { color: #CBD5E1; }
.sgs-cta h3, .sg-hero .sgs-cta h3 { color: #fff; }
.sgs-gdpr span { flex: 1; }