.wp-ht-speed-analyzer{background:#fff;position:relative;overflow:visible;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;}
.wp-ht-speed-analyzer *{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif}
.wp-ht-speed-analyzer[data-speed-roast]{isolation:isolate; position:relative; margin-bottom: 20px;}
.wp-ht-speed-analyzer[data-speed-roast]>.wp-ht-loading{display:none!important}
.speed-roast-intro h3{margin:0 0 4px;font-size:1.6rem;font-weight:700}
.speed-roast-intro p{margin:0 0 16px;color:#475569}
.speed-roast-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:16px}
.speed-roast-form__group{display:flex;flex-direction:column;gap:4px}
.speed-roast-form__group input{border-radius:10px;border:1px solid #cbd5f5;padding:10px 14px;font-size:1rem}
.speed-roast-form__row{display:flex;flex-direction:column;gap:4px}
.speed-roast-form__row select{border-radius:10px;border:1px solid #cbd5f5;padding:10px 14px}
.speed-roast-form__row--checkbox{justify-content:flex-end}
.speed-roast-form__row--checkbox label{display:flex;align-items:center;gap:8px}
.speed-roast-form__actions{display:flex;align-items:flex-end}
.speed-roast-form__actions .button{width:100%}

.speed-roast-status{min-height:20px;font-weight:600;color:#b91c1c;margin-bottom:16px}
.speed-roast-status.is-success{color:#0f766e}
.speed-roast-status .spinner{display:inline-block;width:18px;height:18px;border-radius:50%;border:3px solid #cbd5f5;border-top-color:#2563eb;animation:wphtspin .8s linear infinite;margin-right:8px}

.speed-roast-dashboard{display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:0;opacity:0;pointer-events:none;transform:translateY(30px);max-height:0;overflow:hidden;transition:opacity .35s ease,transform .35s ease,max-height .35s ease}
.speed-roast-dashboard__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.speed-roast-dashboard.is-ready{opacity:1;pointer-events:auto;transform:translateY(0);max-height:9999px;margin-bottom:24px}
@media (min-width:600px){
.speed-roast-card_wrapper{display:flex;gap:24px;overflow:visible}

}
.speed-roast-card{font-family:inherit; margin-top: 10px}
.speed-roast-card__preview{border-radius:16px;overflow:hidden;padding-bottom:12px;max-width:100%}
.speed-roast-card__preview canvas{width:100%!important;height:auto!important;display:block;border-radius:16px;background:#0a0a12;max-width:100%}

/* Live HTML Card Styles */
.speed-roast-card__html {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}
.roast-card__url {
    color: #f8fafc !important
}
.roast-card {
  background: #0a0a12;
  color: #f8fafc;
  padding: 40px;
  border-radius: 16px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  position: relative;
}

.roast-card__header {
  margin-bottom: 30px;
}

.roast-card__title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #f8fafc;
  line-height: 1.3;
}

.roast-card__url {
  font-size: 16px;
  color: #cbd5f5;
  margin: 0;
}

.roast-card__url span {
  word-break: break-all;
}

.roast-card__score {
  margin-bottom: 30px;
}

.roast-card__score-value {
  font-size: 48px;
  font-weight: 700;
  color: #f8fafc;
  margin: 0 0 10px;
  line-height: 1;
}

.roast-card__verdict {
  font-size: 24px;
  font-weight: 700;
  color: #f8fafc;
  margin: 0 0 8px;
  line-height: 1.3;
}

.roast-card__verdict-line {
  font-size: 18px;
  color: #57ffff;
  line-height: 1.5;
}
.roast-card__verdict-line[data-band="elite_site"],
.roast-card__verdict-line[data-band="above_average"] {
  color: #16a34a;
}
.roast-card__verdict-line[data-band="decent"] {
  color: #f97316;
}
.roast-card__verdict-line[data-band="slowish"],
.roast-card__verdict-line[data-band="painfully_slow"] {
  color: #dc2626;
}

.roast-card__metrics {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}

.roast-card__metrics-title {
  font-size: 20px;
  font-weight: 700;
  color: #0a0a12;
  margin: 0 0 16px;
}

.roast-card__metrics-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.roast-metric-item {
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 16px;
}

.roast-metric-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.roast-metric-item__label {
  font-size: 16px;
  font-weight: 600;
  color: #0a0a12;
  margin: 0 0 4px;
}

.roast-metric-item__roast {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.roast-metric-item__roast.excellent { color: #22c55e; }
.roast-metric-item__roast.good { color: #16a34a; }
.roast-metric-item__roast.needs_improvement { color: #f97316; }
.roast-metric-item__roast.bad { color: #dc2626; }
.roast-metric-item__roast.missing { color: #475569; }

.roast-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.roast-card__footer-url {
  font-size: 13px;
  color: #cbd5f5;
}

.roast-card__footer-share {
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
}

.speed-roast-card__actions{display:flex;gap:12px;flex-wrap:wrap}
.speed-roast-card__actions .button{flex:1;min-width:150px;border-radius:12px;background:linear-gradient(90deg,#0ea5e9,#38bdf8);color:#0f172a;font-weight:600;border:none}
.speed-roast-card__actions .button:hover{filter:brightness(.95)}
.speed-roast-card__actions .button.button-secondary{background:#fff;border:1px solid #bae6fd;color:#0f172a}

.speed-roast-share{color:#0f172a;border-radius:22px;opacity:0;transform:translateY(30px);}
.speed-roast-share.is-visible{animation:roastSlide .5s ease forwards}
.speed-roast-share p{margin:0 0 16px;font-weight:600; }
.speed-roast-share__row{display:flex;flex-direction:column;gap:12px}
.speed-roast-share .button{width:100%;border-radius:12px;background:#06b6d4;border:none;color:#04121f;font-weight:600}
.speed-roast-share .button.button-secondary{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff}
.speed-roast-share .button:hover{filter:brightness(1.05)}

.speed-roast-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.speed-roast-metric{border:1px solid #e2e8f0;border-radius:16px;padding:18px;background:#fff;opacity:0;transform:translateY(14px)}
.speed-roast-metric.is-visible{animation:roastStagger .45s ease forwards}
.speed-roast-metric__header{display:flex;flex-direction:column;align-items:baseline;margin-bottom:12px; gap: 10px}
.speed-roast-metric__label{font-weight:600;color:#0f172a}
.speed-roast-badge{border-radius:999px;padding:4px 10px;font-size:.8rem;font-weight:600;text-transform:capitalize}
.speed-roast-badge--excellent{background:#ecfccb;color:#365314}
.speed-roast-badge--good{background:#dcfce7;color:#14532d}
.speed-roast-badge--needs_improvement{background:#fef9c3;color:#854d0e}
.speed-roast-badge--bad{background:#fee2e2;color:#7f1d1d}
.speed-roast-metric__value{font-size:2rem;font-weight:700;margin:0;color:#0f172a}
.speed-roast-metric__roast{margin-top:8px;color:#475569;font-size:.95rem}
.speed-roast-compare-label{font-size:.85rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}

.speed-roast-loading-overlay{position:absolute;inset:0;background:rgba(5,11,26,.8);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:1.1rem;z-index:2;opacity:0;pointer-events:none;transition:opacity .2s ease}
.speed-roast-loading-overlay.is-visible{opacity:1;pointer-events:auto}
.speed-roast-loading-overlay .spinner{width:28px;height:28px;margin-right:10px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:wphtspin 1s linear infinite}

@keyframes roastFade{from{opacity:.4;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes roastStagger{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes roastSlide{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:600px){
  .speed-roast-form{grid-template-columns:1fr}
  .speed-roast-card__actions,.speed-roast-share__row{flex-direction:column}
  .speed-roast-share__row{ margin-top: 10px}
  .speed-roast-card_wrapper {flex-direction: column;}
  .speed-roast-card__preview{max-width:100%;overflow:hidden;padding-bottom:8px}
  .speed-roast-card__preview canvas{width:100%!important;max-width:100%!important;height:auto!important;object-fit:contain}
  .speed-roast-intro h3{font-size:1.3rem}
  .speed-roast-intro p{font-size:0.9rem}
  .speed-roast-card__actions .button{min-width:100%;font-size:0.95rem;padding:10px}
  .speed-roast-share{padding:18px;border-radius:16px}
  .speed-roast-share p{font-size:0.95rem;margin-bottom:12px}
  .speed-roast-metrics{grid-template-columns:1fr}
  .speed-roast-metric{padding:14px}
  .speed-roast-metric__value{font-size:1.5rem}
  
  /* HTML Card Mobile Styles */
  .roast-card {
    padding: 24px;
  }
  .roast-card__title {
    font-size: 18px;
  }
  .roast-card__url {
    font-size: 14px;
  }
  .roast-card__score-value {
    font-size: 36px;
  }
  .roast-card__verdict {
    font-size: 20px;
  }
  .roast-card__verdict-line {
    font-size: 15px;
  }
  .roast-card__metrics {
    padding: 16px;
  }
  .roast-card__metrics-title {
    font-size: 16px;
  }
  .roast-metric-item__label {
    font-size: 14px;
  }
  .roast-metric-item__roast {
    font-size: 13px;
  }
  .roast-card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .roast-card__footer-url {
    font-size: 11px;
  }
  .roast-card__footer-share {
    font-size: 12px;
  }
}

@media (max-width:400px){
  .speed-roast-intro h3{font-size:1.2rem}
  .speed-roast-intro p{font-size:0.85rem}
  .speed-roast-form__group input,
  .speed-roast-form__row select{font-size:0.9rem;padding:8px 12px}
  .speed-roast-card__actions .button{font-size:0.9rem;padding:8px}
  .speed-roast-share{padding:14px}
  .speed-roast-metric__value{font-size:1.3rem}
  .speed-roast-share__row, .speed-roast-share {
    margin-top: 10px;
  }
}