/* ============================================================
   SuperPageSpeedy — Analyzer UI  (Premium, scoped to analyzer)
   Glassy cards, gradient hero, glowing gauges, soft shadows.
   Brand blue/cyan palette. Does NOT touch global header/footer.
   ============================================================ */

:root {
  --an-bg: #eef2fb;
  --an-card: rgba(255, 255, 255, 0.82);
  --an-card-solid: #ffffff;
  --an-card-2: #f6f8fe;
  --an-ink: #0d1b2a;
  --an-ink-2: #5a6b85;
  --an-border: rgba(13, 27, 42, 0.09);
  --an-shadow: 0 22px 55px -22px rgba(20, 34, 61, 0.22);
  --an-shadow-sm: 0 10px 26px -14px rgba(20, 34, 61, 0.25);
  --an-radius: 22px;
  --an-radius-sm: 15px;
  --an-good: #11b366;
  --an-avg: #f5a524;
  --an-poor: #f4455f;
  --an-accent: #0a63ff;
  --an-accent-2: #18b8ff;
  --an-track: #e8edf7;
  --an-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
[data-theme="dark"] {
  --an-bg: #070b16;
  --an-card: rgba(20, 28, 46, 0.72);
  --an-card-solid: #121a2e;
  --an-card-2: rgba(255, 255, 255, 0.045);
  --an-ink: #eef3fc;
  --an-ink-2: #9fb0cb;
  --an-border: rgba(255, 255, 255, 0.10);
  --an-shadow: 0 26px 64px -24px rgba(0, 0, 0, 0.75);
  --an-shadow-sm: 0 12px 30px -16px rgba(0, 0, 0, 0.6);
  --an-track: rgba(255, 255, 255, 0.10);
}

#analyzerApp { position: relative; color: var(--an-ink); }
.an-wrap { position: relative; z-index: 1; }
.an-bg-grad {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 45% at 12% 0%,  rgba(10,99,255,.16), transparent 60%),
    radial-gradient(50% 45% at 96% 8%,  rgba(24,184,255,.16), transparent 60%),
    radial-gradient(45% 40% at 82% 100%, rgba(17,179,102,.12), transparent 60%),
    var(--an-bg);
}
.analyzer-result { overflow: visible; }

/* ---------- Theme toggle ---------- */
.an-theme-toggle {
  position: fixed; right: 18px; top: 84px; z-index: 50;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--an-border); background: var(--an-card);
  color: var(--an-ink); cursor: pointer; box-shadow: var(--an-shadow);
  display: grid; place-items: center; transition: transform .25s, box-shadow .25s;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.an-theme-toggle:hover { transform: scale(1.08) rotate(12deg); }

/* ---------- Hero ---------- */
.an-simple-hero { padding: 96px 0 40px; text-align: center; font-family: var(--an-font); overflow: visible; }
.an-simple-inner { max-width: 740px; margin: 0 auto; }
.an-simple-title {
  font-size: clamp(34px, 5.4vw, 54px); font-weight: 800; letter-spacing: -1.2px; line-height: 1.05; margin: 0 0 16px;
  background: linear-gradient(115deg, #1f2d4d 0%, var(--an-accent) 45%, var(--an-accent-2) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.an-simple-sub { color: var(--an-ink-2); font-size: 17px; line-height: 1.65; margin: 0 auto 36px; max-width: 600px; }

.analyzer-form { display: block; font-family: var(--an-font); }
.input-wrap {
  display: flex; align-items: center; gap: 8px; max-width: 620px; margin: 0 auto;
  background: #ffffff; border: 1.5px solid #dbe7ff; border-radius: 999px;
  padding: 7px 7px 7px 20px; box-shadow: 0 18px 44px -20px rgba(10,99,255,.30);
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.input-wrap:focus-within { box-shadow: 0 26px 64px -22px rgba(10,99,255,.45); border-color: rgba(10,99,255,.6); transform: translateY(-1px); }
.search-ic { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--an-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.input-wrap input {
  flex: 1; border: none; outline: none; background: transparent; font-size: 16px; color: #0d1b2a;
  padding: 12px 6px; font-family: var(--an-font);
}
.input-wrap input::placeholder { color: #8a98b5; opacity: 1; }
[data-theme="dark"] .input-wrap { background: #0f1830; border-color: rgba(255,255,255,.14); }
[data-theme="dark"] .input-wrap input { color: #eef3fc; }
[data-theme="dark"] .input-wrap input::placeholder { color: #8a98b5; }
.btn-premium {
  border: none; cursor: pointer; font-family: var(--an-font); font-weight: 700; font-size: 15px; color: #fff;
  padding: 13px 30px; border-radius: 999px; white-space: nowrap; position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--an-accent), var(--an-accent-2));
  box-shadow: 0 14px 30px -10px rgba(10,99,255,.75); transition: transform .2s, box-shadow .2s, filter .2s;
}
.btn-premium:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -12px rgba(10,99,255,.85); filter: brightness(1.05); }
.btn-premium:active { transform: translateY(0); }
.btn-premium::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-20deg); transition: left .6s;
}
.btn-premium:hover::after { left: 150%; }
@media (max-width: 600px){
  .an-simple-hero { padding-top: 80px; }
  .input-wrap { flex-direction: column; border-radius: 22px; padding: 12px; gap: 10px; }
  .input-wrap input { width: 100%; text-align: center; }
  .btn-premium { width: 100%; }
}

/* ---------- Cards (glassy) ---------- */
.an-card {
  background: var(--an-card); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--an-border); border-radius: var(--an-radius);
  box-shadow: var(--an-shadow); padding: 22px; position: relative;
  transition: transform .25s, box-shadow .25s;
}
.an-card:hover { transform: translateY(-3px); box-shadow: 0 30px 64px -22px rgba(20,34,61,.28); }
.an-overall { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* ---------- Result header ---------- */
.an-result-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: space-between;
  margin: 26px 0 22px; padding: 18px 22px;
  background: var(--an-card); border: 1px solid var(--an-border); border-radius: var(--an-radius);
  box-shadow: var(--an-shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.an-result-url { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.an-result-url strong { font-size: 17px; color: var(--an-ink); word-break: break-all; }
.an-strat-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .5px; padding: 4px 11px; border-radius: 999px; color: #fff;
  background: linear-gradient(120deg, var(--an-accent), var(--an-accent-2));
  box-shadow: 0 6px 16px -8px rgba(10,99,255,.8);
}

/* ---------- Section titles ---------- */
.an-section { margin: 36px 0 16px; }
.an-section h2 { font-size: 23px; color: var(--an-ink); margin: 0 0 4px; letter-spacing: -.3px; position: relative; padding-left: 15px; }
.an-section h2::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 23px; border-radius: 4px; background: linear-gradient(180deg, var(--an-accent), var(--an-accent-2));
}
.an-section h2 small { color: var(--an-ink-2); font-weight: 600; font-size: 13px; }
.an-section p { color: var(--an-ink-2); margin: 4px 0 0; }

/* ---------- Rings (placeholder + gauges) ---------- */
.an-ring { position: relative; width: 180px; height: 180px; }
.an-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.an-ring .bg { fill: none; stroke: var(--an-track); stroke-width: 12; }
.an-ring .fg { fill: none; stroke: var(--an-good); stroke-width: 12; stroke-linecap: round;
  stroke-dasharray: 502; stroke-dashoffset: 502; transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1), stroke .4s; }
.an-ring .num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 46px; font-weight: 800; color: var(--an-ink); }
.an-ring .num small { font-size: 14px; color: var(--an-ink-2); display: block; font-weight: 600; }

.an-band { margin-top: 12px; font-weight: 800; font-size: 18px; }
.an-band.poor { color: var(--an-poor); } .an-band.average { color: var(--an-avg); } .an-band.good { color: var(--an-good); }
.an-sub { color: var(--an-ink-2); font-size: 13px; margin-top: 2px; }

/* ---------- Core Web Vitals ---------- */
.an-cwv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 480px){ .an-cwv { grid-template-columns: 1fr; } }
.an-cwv-card {
  border-left: 4px solid var(--an-good); border-radius: var(--an-radius-sm);
  background: var(--an-card-2); border: 1px solid var(--an-border); border-left-width: 4px; padding: 16px;
  transition: transform .2s, box-shadow .2s;
}
.an-cwv-card:hover { transform: translateY(-2px); box-shadow: var(--an-shadow-sm); }
.an-cwv-card .top { display: flex; justify-content: space-between; align-items: center; }
.an-cwv-abbr { font-weight: 800; font-size: 18px; color: var(--an-ink); letter-spacing: .5px; }
.an-cwv-status { font-size: 12px; font-weight: 700; }
.an-cwv-val { font-size: 30px; font-weight: 800; color: var(--an-ink); margin: 8px 0 2px; }
.an-cwv-name { color: var(--an-ink-2); font-size: 13px; }

/* ---------- Metric strip ---------- */
.an-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.an-ms {
  background: var(--an-card-2); border: 1px solid var(--an-border); border-radius: var(--an-radius-sm);
  padding: 16px; text-align: center; transition: transform .2s, box-shadow .2s;
}
.an-ms:hover { transform: translateY(-2px); box-shadow: var(--an-shadow-sm); }
.an-ms .ic { font-size: 20px; }
.an-ms b { display: block; font-size: 18px; color: var(--an-ink); margin-top: 4px; }
.an-ms small { color: var(--an-ink-2); font-size: 11px; }

/* ---------- Screenshot ---------- */
.an-shot { width: 100%; border-radius: var(--an-radius-sm); border: 1px solid var(--an-border); margin-top: 10px; box-shadow: var(--an-shadow-sm); }

/* ---------- Findings / issues ---------- */
.an-issues { display: grid; gap: 12px; }
.an-issue {
  display: flex; gap: 14px; padding: 16px 18px; border: 1px solid var(--an-border); border-radius: var(--an-radius-sm);
  background: var(--an-card-2); transition: transform .2s, box-shadow .2s;
}
.an-issue:hover { transform: translateY(-2px); box-shadow: var(--an-shadow-sm); }
.an-issue .f-ic { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; color: #fff; }
.an-issue.critical .f-ic { background: var(--an-poor); }
.an-issue.high .f-ic { background: #f9703e; }
.an-issue.medium .f-ic { background: var(--an-avg); }
.an-issue.low .f-ic { background: #6b7a90; }
.an-issue .f-body { flex: 1; min-width: 0; }
.an-issue h4 { margin: 0 0 4px; color: var(--an-ink); font-size: 15px; }
.an-issue p { margin: 0; color: var(--an-ink-2); font-size: 13px; line-height: 1.55; }
.an-issue .f-meta { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.an-tag { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--an-track); color: var(--an-ink-2); }

/* ---------- Recommendations ---------- */
.an-recs { display: grid; gap: 12px; }
.an-rec {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--an-radius-sm);
  border: 1px solid var(--an-border); background: var(--an-card);
}
.an-rec .pri { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(120deg, var(--an-accent), var(--an-accent-2)); }
.an-rec h4 { margin: 0 0 4px; color: var(--an-ink); }
.an-rec p { margin: 0; color: var(--an-ink-2); font-size: 13px; }

/* ---------- Strategy & metric pills ---------- */
.an-strat-pills { display: flex; gap: 8px; }
.an-strat-pill, .an-metric-tab {
  border: 1px solid var(--an-border); background: var(--an-card); color: var(--an-ink-2);
  padding: 8px 16px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 13px; transition: .2s;
}
.an-strat-pill:hover, .an-metric-tab:hover { border-color: var(--an-accent); color: var(--an-accent); }
.an-strat-pill.active, .an-metric-tab.active {
  background: linear-gradient(120deg, var(--an-accent), var(--an-accent-2)); color: #fff; border-color: transparent;
  box-shadow: 0 10px 22px -10px rgba(10,99,255,.8);
}
.an-metric-tabs { margin: 0 0 14px; }

/* ---------- Buttons ---------- */
.an-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 12px;
  border: 1px solid var(--an-border); background: var(--an-card); color: var(--an-ink); cursor: pointer;
  font-weight: 600; font-size: 14px; transition: .2s; text-decoration: none;
}
.an-btn:hover { border-color: var(--an-accent); color: var(--an-accent); }
.an-btn.primary { background: linear-gradient(120deg, var(--an-accent), var(--an-accent-2)); color: #fff; border: none; box-shadow: 0 12px 26px -12px rgba(10,99,255,.8); }
.an-btn.primary:hover { filter: brightness(1.07); color: #fff; }
.an-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0; }

/* ---------- 4 category gauge cards ---------- */
.an-cat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 760px){ .an-cat-cards { grid-template-columns: repeat(2, 1fr); } }
.an-cat-gauge {
  display: flex; flex-direction: column; align-items: center; cursor: pointer; padding: 22px 16px;
  background: var(--an-card); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--an-border); border-radius: var(--an-radius); box-shadow: var(--an-shadow);
  transition: transform .25s, box-shadow .25s;
}
.an-cat-gauge:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -22px rgba(20,34,61,.3); }
.an-cat-gauge .g-ring { position: relative; width: 128px; height: 128px; margin-top: 4px; }
.an-cat-gauge .g-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.an-cat-gauge .g-ring .bg { fill: none; stroke: var(--an-track); stroke-width: 10; }
.an-cat-gauge .g-ring .fg { fill: none; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 339; stroke-dashoffset: 339;
  transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 7px var(--c)); }
.an-cat-gauge .g-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 32px; font-weight: 800; color: var(--an-ink); }
.an-cat-gauge .g-label { margin-top: 10px; font-weight: 700; color: var(--an-ink); font-size: 14px; }
.an-cat-gauge .g-score { font-size: 12px; margin-top: 3px; font-weight: 600; }

/* ---------- Main two-column layout ---------- */
.an-main-grid { display: grid; grid-template-columns: 1.6fr .95fr; gap: 24px; align-items: start; }
.an-main-col, .an-side-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.an-side-col { position: relative; }
.an-sticky { position: sticky; top: 18px; }
@media (max-width: 980px){ .an-main-grid { grid-template-columns: 1fr; } .an-sticky { position: static; } }

/* ---------- Category issue sections ---------- */
.an-cat-section {
  background: var(--an-card); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--an-border); border-radius: var(--an-radius); padding: 20px; box-shadow: var(--an-shadow);
  scroll-margin-top: 16px;
}
.an-cat-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.an-cat-head h3 { margin: 0; font-size: 19px; }
.an-cat-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }
.an-cat-score { margin-left: auto; font-weight: 700; font-size: 14px; }

/* ---------- How-to-fix note ---------- */
.an-fix {
  margin: 8px 0 4px; padding: 9px 12px; font-size: 13px; line-height: 1.55; color: var(--an-ink);
  background: color-mix(in srgb, var(--an-accent) 9%, var(--an-card)); border-left: 3px solid var(--an-accent); border-radius: 8px;
}
[data-theme="dark"] .an-fix { color: #e7ecf5; }

/* ---------- Charts ---------- */
.an-chart { width: 100%; height: 300px; }
.an-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px){ .an-grid-2 { grid-template-columns: 1fr; } }

/* ---------- Skeleton loaders ---------- */
.an-skeleton { background: linear-gradient(90deg, var(--an-track) 25%, rgba(140,160,200,.18) 37%, var(--an-track) 63%);
  background-size: 400% 100%; animation: an-shimmer 1.3s infinite; border-radius: 10px; }
@keyframes an-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.an-sk-ring { width: 180px; height: 180px; border-radius: 50%; margin: 0 auto; }
.an-sk-line { height: 14px; margin: 8px 0; }
.an-sk-card { height: 120px; }
.an-loading { display: grid; gap: 16px; }

/* ---------- Reveal-on-load ---------- */
.an-reveal { opacity: 0; transform: translateY(14px); transition: .55s cubic-bezier(.2,.8,.2,1); }
.an-reveal.show { opacity: 1; transform: none; }

/* ---------- Error box ---------- */
.error-box { background: var(--an-card); border: 1px solid var(--an-poor); border-left-width: 4px;
  border-radius: var(--an-radius-sm); padding: 18px 20px; color: var(--an-ink); box-shadow: var(--an-shadow); }
.error-box p { color: var(--an-ink-2); margin: 6px 0 0; }