/* ===================================================
   SEO & Speed Analysis — Soft, light style
   Matches overview: white cards, #e5e7eb borders,
   10px radius, gentle tones, subtle everything
   =================================================== */

/* ===== SHARED ===== */
.analysis-results { animation: analysisFadeIn 0.3s ease; }
@keyframes analysisFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --- Demo Banner --- */
.analysis-demo-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 14px;
  font-size: 12px;
  color: #9ca3af;
}
.analysis-demo-banner i { font-size: 13px; color: #d1d5db; flex-shrink: 0; }
.analysis-demo-banner strong { font-weight: 600; color: #6b7280; }

/* --- Score Hero Card --- */
.analysis-hero {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.analysis-score-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: conic-gradient(var(--ring-color) var(--ring-pct), #f3f4f6 0);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.analysis-score-ring::before {
  content: '';
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
}
.analysis-score-number {
  position: relative;
  z-index: 1;
  font-size: 20px;
  font-weight: 600;
  color: #111827;
  line-height: 1;
}
.analysis-score-number small {
  font-size: 11px;
  font-weight: 400;
  color: #d1d5db;
}

.analysis-hero-info { flex: 1; min-width: 180px; }
.analysis-hero-title {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 3px 0;
}
.analysis-hero-url {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 10px;
  word-break: break-all;
}
.analysis-hero-url a { color: #f97316; text-decoration: none; }
.analysis-hero-url a:hover { text-decoration: underline; color: #ea580c; }

/* --- Stat Pills --- */
.analysis-stat-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.analysis-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid #e5e7eb;
  background: #fafafa;
  color: #6b7280;
}
.analysis-pill i { font-size: 10px; }
.pill-orange { background: #fffbf5; border-color: #fde6c8; color: #b45309; }
.pill-orange i { color: #f97316; }
.pill-red    { background: #fef7f7; border-color: #fde0e0; color: #b91c1c; }
.pill-red i { color: #ef4444; }
.pill-blue   { background: #f7f9ff; border-color: #dfe6f5; color: #4b5eaa; }
.pill-blue i { color: #6366f1; }
.pill-gray   { background: #fafafa; border-color: #e5e7eb; color: #6b7280; }
.pill-gray i { color: #9ca3af; }

/* --- Quick Stats --- */
.analysis-quick-stats {
  display: flex;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
}
.analysis-quick-stat {
  text-align: center;
  min-width: 64px;
  padding: 8px 10px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}
.analysis-quick-stat-val {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  line-height: 1.2;
}
.analysis-quick-stat-label {
  font-size: 9px;
  font-weight: 500;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* ===== SECTION CARDS ===== */
.analysis-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.analysis-card-header {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f3f4f6;
}
.analysis-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.analysis-card-title i {
  color: #f97316;
  font-size: 12px;
}
.analysis-card-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  background: #fafafa;
  color: #9ca3af;
  border: 1px solid #e5e7eb;
}

/* ===== METRIC ROWS ===== */
.analysis-metrics {
  display: flex;
  flex-direction: column;
}
.analysis-metric-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid #f9fafb;
  transition: background 0.15s;
}
.analysis-metric-row:last-child { border-bottom: none; }
.analysis-metric-row:hover { background: #fafafa; }

.metric-label {
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  min-width: 150px;
  flex-shrink: 0;
}
.metric-value {
  flex: 1;
  font-size: 12px;
  color: #9ca3af;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.metric-value code {
  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
  font-size: 11px;
  background: #f3f4f6;
  padding: 1px 5px;
  border-radius: 3px;
  color: #6b7280;
}

/* --- Status Tags --- */
.metric-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tag-pass    { background: #fff7ed; color: #c2410c; }
.tag-warn    { background: #fffbeb; color: #a16207; }
.tag-fail    { background: #fef2f2; color: #b91c1c; }
.tag-na      { background: #f9fafb; color: #d1d5db; }
.tag-info    { background: #f0f4ff; color: #4b5eaa; }

/* ===== PROGRESS BARS (Speed) ===== */
.metric-bar-wrap {
  flex: 1;
  min-width: 80px;
}
.metric-bar-track {
  height: 5px;
  background: #f3f4f6;
  border-radius: 3px;
  overflow: hidden;
}
.metric-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: #fdba74;
  transition: width 0.6s ease;
}
.metric-bar-fill.bar-fast { background: #fdba74; }
.metric-bar-fill.bar-mid  { background: #fbbf24; }
.metric-bar-fill.bar-slow { background: #fca5a5; }

.metric-ms {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  min-width: 80px;
  text-align: right;
  flex-shrink: 0;
}
.metric-ms small {
  font-size: 10px;
  font-weight: 400;
  color: #d1d5db;
  margin-left: 1px;
}

/* ===== 2-COL GRID (SEO) ===== */
.analysis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.analysis-grid .analysis-card { margin-bottom: 0; }

/* ===== SCREENSHOTS ===== */
.analysis-screenshot {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.analysis-screenshot img {
  width: 100%;
  display: block;
  cursor: pointer;
}
.analysis-screenshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  padding: 14px;
}
.analysis-screenshot-thumb { text-align: center; }
.analysis-screenshot-thumb img {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.analysis-screenshot-thumb img:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.analysis-screenshot-thumb span {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: #9ca3af;
}

/* ===== EMPTY / LOADING ===== */
.tab-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  gap: 16px;
}
.tab-loading-text {
  font-size: 13px;
  color: #9ca3af;
  font-weight: 500;
}
.seo-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: #d1d5db;
  gap: 8px;
}
.seo-empty-state i { font-size: 24px; opacity: 0.4; }

/* ===== MISC ===== */
.speed-tab-main-content { padding: 0; }

.expand-toggle {
  color: #f97316 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  cursor: pointer;
  padding: 4px 0;
}
.expand-toggle:hover { color: #ea580c !important; }
.expandable-list {
  background: #fafafa;
  border-radius: 6px;
  padding: 8px 12px 8px 24px;
  margin: 6px 0;
  border: 1px solid #f3f4f6;
  max-height: 200px;
  overflow-y: auto;
}
.expandable-list li { font-size: 11px; color: #9ca3af; margin-bottom: 3px; }
.expandable-list a { color: #f97316; font-size: 11px; }

.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #fff7ed;
  color: #f97316;
  border: 1px solid #fde6c8;
}

/* --- Metric value multiline --- */
.metric-value.multiline {
  white-space: normal;
  line-height: 1.5;
}

/* --- Metric sub-detail (small text below value) --- */
.metric-sub {
  font-size: 10px;
  color: #d1d5db;
  margin-top: 1px;
}

/* --- Length indicator bar --- */
.length-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}
.length-bar-track {
  flex: 1;
  height: 3px;
  background: #f3f4f6;
  border-radius: 2px;
  overflow: hidden;
  max-width: 100px;
}
.length-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}
.length-bar-fill.len-good { background: #fdba74; }
.length-bar-fill.len-short { background: #fbbf24; }
.length-bar-fill.len-long { background: #fca5a5; }
.length-bar span {
  font-size: 10px;
  color: #d1d5db;
}

/* --- Issue detail list --- */
.issue-detail-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
}
.issue-detail-list li {
  font-size: 11px;
  color: #9ca3af;
  padding: 3px 0;
  border-bottom: 1px solid #f9fafb;
  word-break: break-all;
}
.issue-detail-list li:last-child { border-bottom: none; }
.issue-detail-list li code {
  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
  font-size: 10px;
  background: #f3f4f6;
  padding: 1px 4px;
  border-radius: 2px;
  color: #6b7280;
}

/* --- Full-width card --- */
.analysis-card-full {
  grid-column: 1 / -1;
}

/* --- Issues summary card --- */
.issues-summary {
  padding: 14px 18px;
}
.issues-summary .issue-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #f9fafb;
  font-size: 12px;
  color: #6b7280;
}
.issues-summary .issue-item:last-child { border-bottom: none; }
.issues-summary .issue-item i {
  font-size: 10px;
  margin-top: 3px;
  flex-shrink: 0;
}
.issues-summary .issue-item i.issue-warn { color: #f59e0b; }
.issues-summary .issue-item i.issue-err { color: #ef4444; }
.issues-summary .issue-item i.issue-info { color: #6366f1; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .analysis-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .analysis-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
  }
  .analysis-quick-stats { margin-left: 0; width: 100%; }
  .analysis-quick-stat { flex: 1; }
  .analysis-metric-row { flex-wrap: wrap; gap: 6px; }
  .metric-label { min-width: 100%; }
  .metric-bar-wrap { min-width: 100%; }
  .metric-ms { min-width: auto; }
}