:root {
  color-scheme: dark;
  --ink: #f3f5ff;
  --muted: #9da8c4;
  --cyan: #58e1de;
  --violet: #a78bfa;
  --panel: rgba(17, 25, 47, .82);
  --line: rgba(164, 184, 226, .14);
}

* { box-sizing: border-box; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 12% 0%, rgba(66, 111, 206, .2), transparent 38rem),
    radial-gradient(ellipse at 92% 18%, rgba(112, 64, 180, .18), transparent 34rem),
    #080d19;
  font-family: "DM Sans", sans-serif;
}
button, input, select { font: inherit; }
.shell { width: min(100% - 40px, 920px); margin: 48px auto 30px; }
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 375px;
  padding: clamp(32px, 7vw, 68px);
  border: 1px solid rgba(143, 167, 220, .2);
  border-radius: 30px;
  background: linear-gradient(120deg, rgba(22, 34, 63, .95), rgba(15, 21, 42, .78));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .28), inset 0 1px rgba(255,255,255,.06);
  animation: rise-in .7s cubic-bezier(.2,.75,.3,1) both;
}
.hero::before, .hero::after {
  position: absolute;
  z-index: -1;
  width: 290px;
  height: 290px;
  border: 1px solid rgba(88, 225, 222, .2);
  border-radius: 50%;
  box-shadow: 0 0 80px rgba(88,225,222,.1), inset 0 0 60px rgba(167,139,250,.08);
  content: "";
  right: -58px;
  top: -102px;
  animation: orbit-glow 12s ease-in-out infinite alternate;
}
.hero::after {
  width: 194px;
  height: 194px;
  right: 96px;
  top: 50px;
  border-color: rgba(167, 139, 250, .25);
  animation-delay: -4s;
}
.orb { display: none; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  border: 1px solid rgba(88,225,222,.25);
  border-radius: 999px;
  background: rgba(88,225,222,.07);
  color: #91f4ed;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow.small {
  display: block;
  padding: 0;
  margin: 0 0 7px;
  border: 0;
  background: none;
  color: #80deda;
  font-size: .67rem;
}
.pulse-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  animation: pulse 1.8s ease-in-out infinite;
}
.hero h1 {
  margin: 23px 0 14px;
  color: #f4f6ff;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.8rem, 8vw, 5.25rem);
  font-weight: 700;
  letter-spacing: -.065em;
  line-height: .98;
}
.hero h1 span {
  background: linear-gradient(95deg, #76f0e5 5%, #9bb6ff 52%, #c6a6ff 95%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-copy { max-width: 480px; margin: 18px 0 0; color: #aab5d0; font-size: 1rem; line-height: 1.7; }
.hero-foot { position: absolute; bottom: 25px; color: #8290ae; font-size: .78rem; }
.sparkle, footer span { color: var(--cyan); }
.panel {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
  backdrop-filter: blur(16px);
}
.settings { padding: clamp(22px, 5vw, 36px); margin-top: 24px; animation: rise-in .8s .08s both; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.section-title h2 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: 1.35rem; letter-spacing: -.03em; }
.limit-badge, .working-indicator {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(164,184,226,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: #bdc8e0;
  font-size: .73rem;
  white-space: nowrap;
}
.field-label { display: block; margin-bottom: 9px; color: #d4dcf1; font-size: .86rem; font-weight: 600; }
.url-field { position: relative; }
.url-icon { position: absolute; top: 50%; left: 15px; color: #77e2dd; transform: translateY(-50%); }
.url-field input, select {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(164,184,226,.2);
  border-radius: 12px;
  outline: none;
  background: rgba(7,13,27,.8);
  color: #f3f5ff;
  transition: border-color .2s, box-shadow .2s;
}
.url-field input { padding: 0 14px 0 42px; }
.url-field input:focus, select:focus { border-color: rgba(88,225,222,.75); box-shadow: 0 0 0 3px rgba(88,225,222,.12); }
.form-bottom { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-top: 22px; }
.page-limit { width: min(210px, 42%); }
select { padding: 0 12px; }
.primary-button, .secondary-button {
  display: inline-flex;
  min-height: 47px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 0 19px;
  border: 1px solid rgba(127,239,230,.45);
  border-radius: 12px;
  background: linear-gradient(100deg, #46cfc8, #829cfb 58%, #a983ed);
  color: #08111d;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(84,185,220,.16);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.primary-button:hover, .secondary-button:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 12px 30px rgba(84,185,220,.28); }
.primary-button:disabled { opacity: .65; cursor: wait; transform: none; }
.button-icon { font-size: 1.25rem; }
.button-arrow { margin-left: 8px; font-size: 1.1rem; }
.safety-note { display: flex; gap: 8px; margin: 17px 0 0; color: #8491ad; font-size: .76rem; line-height: 1.55; }
.safety-note span { color: var(--cyan); }
.activity { padding: 26px 30px; margin-top: 20px; animation: rise-in .4s both; }
.working-indicator { color: #9ae9de; }
.progress-track { height: 7px; overflow: hidden; margin-top: 24px; border-radius: 99px; background: rgba(255,255,255,.08); }
.progress-bar {
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #51dcd4, #9c8df3, #51dcd4);
  background-size: 200% 100%;
  animation: progress-shimmer 1.4s linear infinite, progress-travel 1.8s ease-in-out infinite alternate;
}
.status-message { color: var(--muted); font-size: .85rem; }
.results { margin-top: 44px; animation: rise-in .55s both; }
.results-title { margin-bottom: 18px; }
.secondary-button { min-height: 40px; padding: 0 14px; border-color: rgba(88,225,222,.3); background: rgba(88,225,222,.09); color: #a6f2ea; font-size: .83rem; box-shadow: none; }
.secondary-button:hover { color: white; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.metric-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 7px 12px;
  min-height: 144px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(22,32,57,.9), rgba(14,21,39,.9));
  box-shadow: 0 14px 38px rgba(0,0,0,.18);
  animation: rise-in .55s both;
  transition: transform .2s, border-color .2s;
}
.metric-card:nth-child(2) { animation-delay: .08s; }
.metric-card:nth-child(3) { animation-delay: .16s; }
.metric-card:hover { transform: translateY(-4px); border-color: rgba(88,225,222,.4); }
.metric-icon { grid-row: span 2; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; font-size: 1rem; }
.metric-icon.cyan { background: rgba(88,225,222,.12); color: #71e8df; }
.metric-icon.violet { background: rgba(167,139,250,.13); color: #b8a3ff; }
.metric-icon.blue { background: rgba(122,168,255,.13); color: #8cbaff; }
.metric-label { color: var(--muted); font-size: .78rem; }
.metric-value { grid-column: 2; font-family: "Space Grotesk", sans-serif; font-size: 1.75rem; line-height: 1; }
.metric-caption { grid-column: 2; color: #74809d; font-size: .7rem; }
.table-heading { margin: 34px 0 13px; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 17px; background: rgba(15,22,41,.8); }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: 14px 17px; border-bottom: 1px solid rgba(164,184,226,.09); font-size: .8rem; }
th { color: #8d9ab8; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; }
td { color: #d7dff3; }
tbody tr:last-child td { border-bottom: 0; }
td.url-cell { max-width: 470px; overflow-wrap: anywhere; color: #aab9dc; }
.status-pill { display: inline-flex; padding: 5px 9px; border-radius: 99px; background: rgba(88,225,222,.09); color: #8ae8dd; font-size: .7rem; white-space: nowrap; }
.status-pill.failed { background: rgba(248,113,113,.1); color: #ffa3a3; }
.links-panel { margin-top: 15px; }
.links-panel summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; cursor: pointer; font-weight: 600; list-style: none; }
.links-panel summary::-webkit-details-marker { display: none; }
.links-panel summary::before { color: var(--cyan); content: "＋"; }
.links-panel[open] summary::before { content: "−"; }
.links-panel summary span:first-of-type { flex: 1; }
.links-list { display: grid; gap: 9px; max-height: 320px; overflow: auto; padding: 0 22px 20px 44px; color: #aab9dc; font-size: .8rem; overflow-wrap: anywhere; }
.links-list a { color: #aab9dc; text-decoration-color: rgba(170,185,220,.3); }
.links-list a:hover { color: #8fece4; }
.error-panel { margin-top: 18px; padding: 16px 19px; border: 1px solid rgba(248,113,113,.25); border-radius: 14px; background: rgba(127,29,29,.16); color: #ffb0b0; line-height: 1.55; }
.hidden { display: none !important; }
footer { padding: 35px 0 10px; color: #74809d; text-align: center; font-size: .75rem; }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 50% { opacity: .55; box-shadow: 0 0 4px var(--cyan); } }
@keyframes orbit-glow { to { transform: translate(-16px, 16px) rotate(18deg); } }
@keyframes progress-shimmer { to { background-position: -200% 0; } }
@keyframes progress-travel { from { transform: translateX(-40%); } to { transform: translateX(190%); } }
@media (max-width: 640px) {
  .shell { width: min(100% - 26px, 920px); margin-top: 14px; }
  .hero { min-height: 365px; border-radius: 22px; }
  .hero::before { right: -180px; }
  .hero::after { right: -15px; }
  .hero-foot { right: 18px; left: 32px; bottom: 23px; font-size: .69rem; }
  .metrics { grid-template-columns: 1fr; gap: 10px; }
  .metric-card { min-height: 112px; }
  .form-bottom { align-items: stretch; flex-direction: column; gap: 16px; }
  .page-limit { width: 100%; }
  .primary-button { width: 100%; }
  .section-title h2 { font-size: 1.15rem; }
  .results-title { align-items: flex-end; }
  th, td { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}