/* Styles for /analyze, /report/:slug, and the homepage mini analyzer section.
   Uses design tokens from /style.css (defined on :root there). */

/* ─── Shared section scaffolding ────────────────────────────────────────── */
.rp-eyebrow {
  display: inline-block;
  background: var(--yellow-soft);
  border: 1px solid var(--yellow-border);
  color: #7a6200;
  padding: 5px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 16px;
}
.rp-section-head { max-width: 720px; margin-bottom: 40px; }
.rp-section-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.rp-section-head h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.15;
  color: var(--black);
  margin-bottom: 10px;
}
.rp-section-sub {
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.6;
}

/* ─── Analyze page hero ──────────────────────────────────────────────────── */
.an-hero {
  padding: 72px 0 88px;
  background:
    radial-gradient(1200px 560px at 15% -10%, #fef9e7 0%, transparent 55%),
    radial-gradient(900px 500px at 100% 100%, #f8f7f4 0%, transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
.an-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.an-hero-copy h1 {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -1.8px;
  color: var(--black);
  margin-bottom: 20px;
}
.an-hero-copy h1 em {
  font-style: normal;
  color: #b88e00;
  background: linear-gradient(180deg, transparent 62%, rgba(245,200,0,0.35) 62%);
  padding: 0 4px;
}
.an-hero-sub {
  font-size: 17px;
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: 26px;
  max-width: 560px;
}

/* URL input + submit */
.an-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  max-width: 620px;
  margin-bottom: 14px;
}
.an-form-inputwrap {
  position: relative;
  display: flex;
  align-items: center;
}
.an-form-icon {
  position: absolute;
  left: 16px;
  color: var(--text-muted);
  pointer-events: none;
}
.an-form input[type="url"] {
  width: 100%;
  padding: 16px 18px 16px 46px;
  border: 1.5px solid var(--border-dark);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.an-form input[type="url"]:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 4px rgba(245, 200, 0, 0.18);
}
.an-form input[type="url"]::placeholder { color: var(--text-muted); }
.an-form .btn-primary { padding: 16px 24px; font-size: 15px; white-space: nowrap; }

.an-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--yellow-soft);
  border: 1px solid var(--yellow-border);
  color: #6a5200;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 620px;
  margin-bottom: 10px;
}
.an-notice svg { flex-shrink: 0; margin-top: 2px; }

.an-status { min-height: 22px; font-size: 14px; color: var(--text-muted); margin: 8px 0 0; }
.an-status-working { color: var(--text-2); }
.an-status-error { color: var(--error); }

.an-hero-stats { display: flex; gap: 28px; margin-top: 28px; flex-wrap: wrap; }
.an-stat strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--black);
  letter-spacing: -0.6px;
}
.an-stat span { font-size: 13px; color: var(--text-muted); }

/* Preview "browser" card on the right */
.an-hero-visual { display: flex; justify-content: center; align-items: center; }
.an-visual-card {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 14, 12, 0.08), 0 2px 6px rgba(15, 14, 12, 0.04);
  transform: rotate(-0.6deg);
}
.an-visual-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.an-visual-dots { display: flex; gap: 6px; }
.an-visual-dots span { width: 10px; height: 10px; border-radius: 50%; background: #d0cdc5; }
.an-visual-dots span:first-child { background: #ff5f57; }
.an-visual-dots span:nth-child(2) { background: #febc2e; }
.an-visual-dots span:last-child { background: #28c840; }
.an-visual-url {
  font-size: 12px;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.an-visual-body { padding: 22px 20px 24px; }
.an-visual-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px dashed var(--border);
}
.an-visual-ring { position: relative; width: 86px; height: 86px; flex-shrink: 0; }
.an-visual-ring svg { width: 100%; height: 100%; }
.an-visual-ring-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; color: #ca8a04;
  letter-spacing: -0.6px;
}
.an-visual-title { font-size: 20px; font-weight: 800; color: var(--black); letter-spacing: -0.4px; }
.an-visual-meta { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.an-visual-list { display: flex; flex-direction: column; gap: 10px; }
.an-visual-item {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: var(--text);
}
.an-visual-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; padding: 4px 0;
  border-radius: 99px; font-weight: 800; font-size: 13px;
}
.an-visual-pill-red { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
.an-visual-pill-amber { background: rgba(202, 138, 4, 0.12); color: #ca8a04; }
.an-visual-pill-green { background: rgba(22, 163, 74, 0.11); color: #16a34a; }

/* Analyze · how section (reuses .how-grid + .how-step from style.css) */
.an-how { padding: 88px 0; background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.an-how .rp-section-head { margin-bottom: 44px; }

/* Analyze · final CTA */
.an-final { padding: 80px 0; background: var(--bg); }
.an-final-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.an-final-inner h2 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--black);
  margin-bottom: 12px;
}
.an-final-inner p { font-size: 16px; color: var(--text-2); margin-bottom: 22px; }

/* ─── Report page ──────────────────────────────────────────────────────── */
.rp-main { background: var(--bg); }

.rp-hero {
  padding: 68px 0 80px;
  background:
    radial-gradient(900px 500px at 90% -10%, #fef9e7 0%, transparent 55%),
    radial-gradient(900px 500px at -10% 110%, #f8f7f4 0%, transparent 55%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
.rp-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.rp-hero-meta h1 {
  font-size: clamp(30px, 4.2vw, 50px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -1.6px;
  color: var(--black);
  margin-bottom: 14px;
}
.rp-hero-sub { font-size: 15px; color: var(--text-muted); margin-bottom: 20px; }
.rp-hero-sub a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--border-dark); }
.rp-hero-sub a:hover { color: var(--black); }
.rp-dot { margin: 0 8px; color: var(--border-dark); }

.rp-summary {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  max-width: 560px;
  margin-bottom: 28px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--yellow);
  border-radius: var(--radius-sm);
}
.rp-cta-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Score ring */
.rp-hero-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
}
.rp-score-ring {
  position: relative;
  width: 260px;
  height: 260px;
  max-width: 100%;
}
.rp-score-ring .sr-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 8px 20px rgba(15, 14, 12, 0.08));
}
.rp-score-ring .sr-fill {
  transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.rp-score-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.rp-score-num {
  font-size: 84px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -3px;
  font-variant-numeric: tabular-nums;
}
.rp-score-denom {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 8px;
}
.rp-score-verdict { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; }
.rp-score-legend {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  max-width: 280px;
  line-height: 1.5;
}

/* Enhance section — 4 style variants per worst photo */
.rp-enhance {
  padding: 88px 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.rp-enhance-stack { display: flex; flex-direction: column; gap: 28px; }
.rp-enhance-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.rp-enhance-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 16px;
  gap: 16px;
  border-bottom: 1px solid var(--border);
}
.rp-enhance-head-main { min-width: 0; flex: 1; }
.rp-enhance-title {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--black);
  letter-spacing: -0.3px;
  margin-bottom: 8px;
  line-height: 1.3;
  text-decoration: none;
}
.rp-enhance-title:hover { text-decoration: underline; }
.rp-enhance-head-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.rp-enhance-score-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.01em;
}
.rp-issues {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rp-issues li {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(220, 38, 38, 0.08);
  color: #9a1e1e;
  border: 1px solid rgba(220, 38, 38, 0.15);
}

/* Side-by-side original + active EcomFlash render */
.rp-enhance-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--border);
}
.rp-enhance-side {
  margin: 0;
  position: relative;
  background: #f8f7f4;
  overflow: hidden;
}
.rp-enhance-side img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: opacity 0.25s ease;
}
.rp-enhance-side figcaption {
  position: absolute;
  top: 12px;
  left: 12px;
  pointer-events: none;
}
.rp-enhance-side-after figcaption { left: auto; right: 12px; }
.rp-enhance-tag {
  display: inline-block;
  background: rgba(15, 14, 12, 0.78);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rp-enhance-tag-after { background: var(--yellow); color: var(--black); }

/* Tab strip */
.rp-enhance-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.rp-enhance-tab {
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: all 0.15s;
  letter-spacing: -0.1px;
}
.rp-enhance-tab:hover {
  background: var(--bg-soft);
  color: var(--black);
}
.rp-enhance-tab.active {
  background: var(--yellow-soft);
  border-color: var(--yellow);
  color: #6a5200;
}
.rp-enhance-tab-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  transition: background 0.15s, color 0.15s;
}
.rp-enhance-tab.active .rp-enhance-tab-num {
  background: var(--yellow);
  color: var(--black);
}

/* Table */
.rp-table-section { padding: 88px 0; }
.rp-table-wrap {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}
.rp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.rp-table thead th {
  text-align: left;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.rp-table tbody tr { border-bottom: 1px solid var(--border); }
.rp-table tbody tr:last-child { border-bottom: none; }
.rp-table tbody tr:hover { background: var(--bg-soft); }
.rp-table td { padding: 12px 16px; vertical-align: middle; }
.rp-t-img img {
  width: 52px; height: 52px; object-fit: cover;
  border-radius: 8px; display: block; border: 1px solid var(--border);
}
.rp-t-title { font-weight: 600; }
.rp-t-title a { color: var(--text); }
.rp-t-title a:hover { color: var(--black); text-decoration: underline; }
.rp-t-score-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; padding: 5px 12px;
  border-radius: 99px; font-weight: 800; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.rp-t-note { color: var(--text-muted); font-size: 13px; max-width: 320px; }

/* Email capture */
.rp-capture {
  padding: 72px 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.rp-capture-card {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 32px;
  box-shadow: var(--shadow);
}
.rp-capture-text h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--black);
  margin-bottom: 8px;
}
.rp-capture-text p { font-size: 15px; color: var(--text-2); margin-bottom: 22px; }
.rp-capture-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}
.rp-capture-form input[type="email"] {
  padding: 13px 16px;
  border: 1.5px solid var(--border-dark);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rp-capture-form input[type="email"]:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 4px rgba(245, 200, 0, 0.18);
}
.rp-capture-form .btn-primary { padding: 13px 22px; font-size: 14px; white-space: nowrap; }
.rp-capture-status { font-size: 14px; margin-top: 14px; min-height: 20px; }

/* Final dark CTA */
.rp-final { padding: 88px 0; background: var(--black); color: #fff; }
.rp-final-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.rp-final-inner h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 800;
  letter-spacing: -1px;
  color: #fff;
  margin-bottom: 14px;
}
.rp-final-inner p { font-size: 16px; color: #c8c4bc; line-height: 1.65; margin-bottom: 26px; }

/* ─── Homepage mini analyzer section ────────────────────────────────────── */
.hp-analyze {
  padding: 96px 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.hp-analyze-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  background:
    radial-gradient(600px 400px at 100% 0%, #fef9e7 0%, transparent 55%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 48px 52px;
  box-shadow: 0 20px 50px rgba(15, 14, 12, 0.06), 0 2px 6px rgba(15, 14, 12, 0.03);
  overflow: hidden;
}
.hp-analyze-copy .hp-analyze-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--yellow-soft);
  border: 1px solid var(--yellow-border);
  color: #7a6200;
  padding: 5px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 18px;
}
.hp-analyze-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--yellow);
}
.hp-analyze h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 900;
  letter-spacing: -1.2px;
  line-height: 1.1;
  color: var(--black);
  margin-bottom: 14px;
}
.hp-analyze p {
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: 22px;
  max-width: 500px;
}
.hp-analyze-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  max-width: 520px;
  margin-bottom: 10px;
}
.hp-analyze-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.hp-analyze-input-wrap svg {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  pointer-events: none;
}
.hp-analyze-form input[type="url"] {
  width: 100%;
  padding: 14px 16px 14px 42px;
  border: 1.5px solid var(--border-dark);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hp-analyze-form input[type="url"]:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 4px rgba(245, 200, 0, 0.18);
}
.hp-analyze-form .btn-primary { padding: 14px 22px; font-size: 14px; white-space: nowrap; }
.hp-analyze-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
  margin-bottom: 0px !important;
}
.hp-analyze-note strong { color: var(--text-2); font-weight: 700; }

/* Visual preview (mini score card) */
.hp-analyze-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hp-analyze-preview {
  width: 100%;
  max-width: 340px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 22px 24px;
  box-shadow: 0 16px 40px rgba(15, 14, 12, 0.08);
  transform: rotate(1deg);
}
.hp-analyze-preview-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px dashed var(--border);
}
.hp-analyze-preview-ring { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
.hp-analyze-preview-ring svg { width: 100%; height: 100%; }
.hp-analyze-preview-ring-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: #ca8a04;
  letter-spacing: -0.5px;
}
.hp-analyze-preview-title { font-size: 15px; font-weight: 800; color: var(--black); letter-spacing: -0.3px; }
.hp-analyze-preview-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.hp-analyze-preview-list { display: flex; flex-direction: column; gap: 8px; }
.hp-analyze-preview-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--text);
}
.hp-analyze-preview-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; padding: 3px 0;
  border-radius: 99px; font-weight: 800; font-size: 12px;
}
.hp-analyze-preview-pill-red { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
.hp-analyze-preview-pill-amber { background: rgba(202, 138, 4, 0.12); color: #ca8a04; }
.hp-analyze-preview-pill-green { background: rgba(22, 163, 74, 0.11); color: #16a34a; }

/* ─── Premium loading modal (analyze page) — light theme ─────────────────── */
.al-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.al-overlay.open { display: flex; animation: alFadeIn 0.32s ease-out both; }
@keyframes alFadeIn { from { opacity: 0; } to { opacity: 1; } }

.al-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(245, 200, 0, 0.14), transparent 60%),
    radial-gradient(900px 500px at 80% 100%, rgba(245, 200, 0, 0.08), transparent 60%),
    rgba(250, 248, 243, 0.78);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.al-modal {
  position: relative;
  width: 100%; max-width: 720px;
  background: #ffffff;
  border: 1px solid var(--border, #e8e5dc);
  border-radius: 20px;
  padding: 28px 28px 22px;
  box-shadow:
    0 32px 64px -16px rgba(35, 33, 25, 0.18),
    0 0 0 1px rgba(245, 200, 0, 0.05) inset,
    0 8px 24px -10px rgba(245, 200, 0, 0.18);
  color: var(--text, #2a2721);
  overflow: hidden;
  animation: alModalIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes alModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.al-modal::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(380px 180px at 50% -30%, rgba(245, 200, 0, 0.16), transparent 70%),
    radial-gradient(500px 240px at 100% 120%, rgba(245, 200, 0, 0.06), transparent 70%);
  pointer-events: none;
}

.al-head {
  position: relative;
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 22px;
}

.al-icon {
  position: relative;
  width: 68px; height: 68px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.al-icon-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(245, 200, 0, 0.55);
  animation: alRingPulse 2.4s ease-out infinite;
}
.al-icon-ring-2 { animation-delay: 1.2s; border-color: rgba(245, 200, 0, 0.4); }
@keyframes alRingPulse {
  0% { transform: scale(0.85); opacity: 0.9; }
  100% { transform: scale(1.45); opacity: 0; }
}
.al-icon-core {
  position: relative; z-index: 2;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff3b8, #fde68a);
  border: 1px solid rgba(245, 200, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(245, 200, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.al-icon-core svg { stroke: #7a6200; transition: transform 0.4s ease; }
.al-spark {
  position: absolute;
  width: 4px; height: 4px; border-radius: 50%;
  background: #f5c800;
  box-shadow: 0 0 6px rgba(245, 200, 0, 0.9);
  opacity: 0;
}
.al-spark-1 { top: 6px; left: 10px; animation: alSpark 2.8s ease-in-out 0s infinite; }
.al-spark-2 { bottom: 8px; right: 6px; animation: alSpark 2.8s ease-in-out 0.9s infinite; }
.al-spark-3 { top: 50%; right: 0; animation: alSpark 2.8s ease-in-out 1.6s infinite; }
@keyframes alSpark {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  40% { opacity: 1; transform: scale(1.1); }
  60% { opacity: 0.6; transform: scale(1); }
}

.al-head-text { min-width: 0; flex: 1; }
.al-phase-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase;
  color: #7a6200;
  background: #fef9e7;
  border: 1px solid #f5e4a3;
  padding: 3px 10px; border-radius: 999px;
  margin-bottom: 8px;
}
.al-phase-title {
  font-size: 22px; font-weight: 800; letter-spacing: -0.4px;
  color: var(--black, #0a0a0a); margin: 0 0 4px;
  line-height: 1.2;
}
.al-phase-sub {
  font-size: 13.5px; color: var(--text-muted, #6a6864);
  margin: 0; line-height: 1.45;
}

.al-progress { position: relative; margin-bottom: 20px; }
.al-progress-bar {
  position: relative;
  height: 8px; border-radius: 999px;
  background: #f4f1ea;
  border: 1px solid #eae6db;
  overflow: hidden;
}
.al-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #f5c800, #ffd93d, #f5c800);
  background-size: 200% 100%;
  border-radius: 999px;
  transition: width 1.1s cubic-bezier(0.4, 0, 0.2, 1);
  animation: alShimmer 2.4s linear infinite;
  box-shadow: 0 0 10px rgba(245, 200, 0, 0.5);
}
@keyframes alShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.al-progress-pct {
  position: absolute; right: 0; top: -22px;
  font-size: 12px; font-weight: 700;
  color: #7a6200;
  font-variant-numeric: tabular-nums;
}

.al-steps {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  margin-bottom: 20px;
  padding-top: 6px;
}
.al-steps::before {
  content: "";
  position: absolute;
  top: 20px; left: 12.5%; right: 12.5%;
  height: 1px; background: #eae6db;
  z-index: 0;
}
.al-step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: all 0.4s ease;
}
.al-step-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid #e0dcd0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: #8a8680;
  transition: all 0.4s ease;
}
.al-step-dot span { display: block; }
.al-step-label {
  font-size: 11px; font-weight: 600;
  color: #8a8680;
  letter-spacing: 0.2px;
  transition: color 0.4s ease;
}
.al-step.al-step-active .al-step-dot {
  background: #fef9e7;
  border-color: #f5c800;
  color: #7a6200;
  box-shadow: 0 0 0 4px rgba(245, 200, 0, 0.14), 0 4px 14px rgba(245, 200, 0, 0.35);
  animation: alStepPulse 1.6s ease-in-out infinite;
}
.al-step.al-step-active .al-step-label { color: #7a6200; }
@keyframes alStepPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(245, 200, 0, 0.12), 0 4px 14px rgba(245, 200, 0, 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(245, 200, 0, 0.06), 0 6px 18px rgba(245, 200, 0, 0.5); }
}
.al-step.al-step-done .al-step-dot {
  background: #f5c800; border-color: #f5c800;
  color: #0a0a0a;
  box-shadow: 0 2px 6px rgba(245, 200, 0, 0.4);
}
.al-step.al-step-done .al-step-dot span { display: none; }
.al-step.al-step-done .al-step-dot::after {
  content: ""; width: 10px; height: 6px;
  border-left: 2px solid #0a0a0a; border-bottom: 2px solid #0a0a0a;
  transform: rotate(-45deg) translate(1px, -1px);
}
.al-step.al-step-done .al-step-label { color: var(--text, #2a2721); }

.al-log {
  position: relative;
  background: #faf8f3;
  border: 1px solid #eae6db;
  border-radius: 12px;
  padding: 14px 16px;
  height: 128px;
  overflow: hidden;
  margin-bottom: 16px;
}
.al-log::after {
  content: ""; position: absolute;
  bottom: 0; left: 0; right: 0; height: 40px;
  background: linear-gradient(180deg, transparent, #faf8f3 85%);
  pointer-events: none;
  border-radius: 0 0 12px 12px;
}
.al-log-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #8a8680;
  margin-bottom: 10px;
}
.al-log-list {
  list-style: none; margin: 0; padding: 0;
  font-size: 12.5px;
  color: #4a4744;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.al-log-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0;
  animation: alLogIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.al-log-list li::before {
  content: "›"; color: #ca8a04; font-weight: 800;
  flex-shrink: 0;
}
@keyframes alLogIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.al-footer {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 12px; color: #8a8680;
  padding-top: 2px;
}
.al-foot-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
  animation: alFootPulse 1.4s ease-in-out infinite;
}
@keyframes alFootPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.al-modal.al-error .al-icon-core {
  background: linear-gradient(180deg, #fee2e2, #fecaca);
  border-color: rgba(220, 38, 38, 0.55);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.al-modal.al-error .al-icon-core svg { stroke: #991b1b; }
.al-modal.al-error .al-icon-ring { border-color: rgba(220, 38, 38, 0.45); }
.al-modal.al-error .al-phase-tag {
  color: #991b1b; background: #fef2f2; border-color: rgba(220, 38, 38, 0.25);
}
.al-modal.al-error .al-progress-fill { background: #dc2626; box-shadow: 0 0 10px rgba(220, 38, 38, 0.45); }
.al-modal.al-error .al-foot-dot { background: #dc2626; box-shadow: 0 0 8px rgba(220, 38, 38, 0.6); }

.al-modal.al-success .al-progress-fill {
  background: linear-gradient(90deg, #22c55e, #4ade80);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

@media (max-width: 560px) {
  .al-modal { padding: 22px 20px 18px; border-radius: 16px; }
  .al-head { gap: 14px; margin-bottom: 18px; }
  .al-icon { width: 56px; height: 56px; }
  .al-icon-core { width: 40px; height: 40px; }
  .al-phase-title { font-size: 18px; }
  .al-phase-sub { font-size: 12.5px; }
  .al-step-label { font-size: 10px; }
  .al-log { height: 108px; padding: 12px 14px; }
  .al-log-list { font-size: 11.5px; }
}

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .an-hero { padding: 48px 0 64px; }
  .an-hero-layout { grid-template-columns: 1fr; gap: 40px; }
  .an-hero-visual { order: 2; }
  .an-visual-card { max-width: 420px; }

  .rp-hero { padding: 48px 0 60px; }
  .rp-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .rp-hero-score { order: -1; padding: 0; }
  .rp-score-ring { width: 220px; height: 220px; }
  .rp-score-num { font-size: 72px; letter-spacing: -2px; }

  .rp-enhance, .rp-table-section, .an-how, .rp-capture, .rp-final, .an-final, .hp-analyze { padding: 60px 0; }

  .hp-analyze-card { grid-template-columns: 1fr; gap: 32px; padding: 36px 28px; }
  .hp-analyze-visual { order: 2; }
}

@media (max-width: 600px) {
  .an-form { grid-template-columns: 1fr; }
  .an-form .btn-primary { width: 100%; }
  .an-form input[type="url"] { padding: 14px 16px 14px 42px; }
  .an-form-icon { left: 14px; }

  .an-hero-copy h1 { font-size: 34px; letter-spacing: -1.2px; }
  .rp-hero-meta h1 { font-size: 30px; letter-spacing: -1px; }
  .rp-score-ring { width: 200px; height: 200px; }
  .rp-score-num { font-size: 64px; }

  .rp-enhance-head { flex-direction: column; padding: 16px 18px 14px; }
  .rp-enhance-split { grid-template-columns: 1fr; }
  .rp-enhance-tabs { grid-template-columns: repeat(2, 1fr); padding: 10px; gap: 6px; }
  .rp-enhance-tab { padding: 10px 12px; font-size: 13px; }
  .rp-enhance-tag { font-size: 10px; padding: 4px 8px; }

  .rp-capture-form { grid-template-columns: 1fr; }
  .rp-capture-card { padding: 28px 20px; }
  .rp-t-note { display: none; }
  .rp-table td, .rp-table thead th { padding: 10px 12px; }
  .rp-t-img img { width: 42px; height: 42px; }

  .an-hero-stats { gap: 20px; }
  .an-stat strong { font-size: 20px; }

  .hp-analyze-form { grid-template-columns: 1fr; }
  .hp-analyze-form .btn-primary { width: 100%; }
  .hp-analyze-card { padding: 28px 22px; }
  .hp-analyze-preview { transform: none; }
}