:root{
  --bg:#f8fafc; --surface:#ffffff; --text:#0f172a; --muted:#64748b; --brand:#7C3AED; --brand-2:#4F46E5; --accent:#06B6D4; --danger:#ef4444; --border:#e5e7eb;
  --shadow:0 10px 30px rgba(2,6,23,0.06);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b1220; --surface:#0f172a; --text:#e2e8f0; --muted:#94a3b8; --brand:#a78bfa; --brand-2:#818cf8; --accent:#22d3ee; --danger:#f87171; --border:#1f2a44; --shadow:0 10px 30px rgba(0,0,0,0.35) }
}
body[data-theme='light']{ --bg:#f8fafc; --surface:#ffffff; --text:#0f172a; --muted:#64748b; --brand:#7C3AED; --brand-2:#4F46E5; --accent:#06B6D4; --danger:#ef4444; --border:#e5e7eb; --shadow:0 10px 30px rgba(2,6,23,0.06) }
body[data-theme='dark']{ --bg:#0b1220; --surface:#0f172a; --text:#e2e8f0; --muted:#94a3b8; --brand:#a78bfa; --brand-2:#818cf8; --accent:#22d3ee; --danger:#f87171; --border:#1f2a44; --shadow:0 10px 30px rgba(0,0,0,0.35) }


html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased;}
.container{width:min(1140px,92%);margin:0 auto}
.hidden{display:none}
.muted{color:var(--muted)}
.mt{margin-top:20px}
.shadow{box-shadow:var(--shadow)}
.rounded{border-radius:14px}


.navbar{position:sticky;top:0;z-index:50;background:linear-gradient(to bottom, rgba(255,255,255,0.85), rgba(255,255,255,0.65));backdrop-filter: blur(12px);border-bottom:1px solid var(--border)}
body[data-theme='dark'] .navbar{background:linear-gradient(to bottom, rgba(15,23,42,0.85), rgba(15,23,42,0.6))}
.navbar .inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand a{color:var(--text);text-decoration:none;font-weight:800;font-size:20px;display:inline-flex;align-items:center;gap:8px}
/*.brand a::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(34,197,94,0.15)}*/
.menu{display:flex;gap:10px;list-style:none;margin:0;padding:0}
.menu a{color:var(--muted);text-decoration:none;padding:9px 12px;border-radius:10px}
.menu a:hover{background:rgba(37,99,235,0.08);color:var(--brand)}
.right-tools{display:flex;align-items:center;gap:10px}
#themeToggle,.menu-toggle{background:transparent;border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:10px;cursor:pointer}
.menu-toggle{display:none}
.lang{position:relative}
.lang-menu{display:none;position:absolute;right:0;top:42px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 8px;min-width:160px;list-style:none;margin:0;box-shadow:var(--shadow)}
.lang-menu li a{display:block;color:var(--text);text-decoration:none;padding:8px 10px;border-radius:8px}
.lang-menu li a:hover{background:rgba(37,99,235,0.08);color:var(--brand)}


.hero{position:relative;padding:72px 0 36px;overflow:hidden}
.hero-bg{position:absolute;inset:-20% -10% auto -10%;height:320px;background:radial-gradient(1200px 300px at 50% -20%, rgba(124,58,237,.28), transparent 60%), radial-gradient(600px 220px at 10% 0%, rgba(6,182,212,.18), transparent 60%), radial-gradient(650px 220px at 90% -5%, rgba(79,70,229,.22), transparent 60%);pointer-events:none;filter:blur(18px)}
.hero h1{font-size:34px;margin:0 0 8px;font-weight:800;letter-spacing:.1px}
.hero .sub{margin:0 0 22px;color:var(--muted)}
.hero .search{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin: 0 20px;}
.hero input[type="url"], #url{flex:0 1 500px;width:100%;min-width:220px;padding:18px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:12px;outline:none;transition:border-color .15s ease, box-shadow .15s ease}
.hero input[type="url"]::placeholder, #url::placeholder{color:var(--muted);opacity:.85}
.hero input[type="url"]:focus, #url:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.actions{display:flex;gap:10px}
.trust-line{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;background:rgba(124,58,237,.12);color:var(--brand);border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-size:12px}
.primary{background:linear-gradient(135deg, var(--brand), var(--brand-2));border:none;color:#fff;padding:12px 18px;border-radius:12px;cursor:pointer;box-shadow:0 12px 24px rgba(37,99,235,.25)}
.primary.small{padding:8px 12px;border-radius:10px}
.primary:hover{filter:brightness(1.05)}
.secondary{background:transparent;border:1px solid var(--border);color:var(--text);padding:12px 18px;border-radius:12px;cursor:pointer}
.icon-btn{background:transparent;border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:10px;cursor:pointer}
.error{margin-top:10px;color:var(--danger)}


.results{padding:28px 0 50px}
.grid{display:grid;grid-template-columns:340px 1fr;gap:20px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.card img{width:100%;height:auto;border-radius:12px;display:block}
.card h3{margin:12px 0 0;font-size:18px}
.table-wrap{overflow:auto;max-height:520px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table thead th{position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--border);text-align:left;padding:12px}
.table tbody td{padding:12px;border-bottom:1px solid var(--border)}
.badge{display:inline-block;background:rgba(124,58,237,.12);color:var(--brand);padding:3px 8px;border-radius:999px;font-size:12px}
.badge.secondary{background:rgba(6,182,212,.12);color:var(--accent)}

/* Features & FAQ */
.features{padding:8px 0 48px;background:linear-gradient(to bottom, rgba(37,99,235,.04), transparent 58%)}
.features .grid{grid-template-columns:repeat(3,1fr)}
.faq details{border-top:1px solid var(--border)}
.faq details:first-child{border-top:none}
.faq summary{cursor:pointer;padding:12px 2px;outline:none}
.faq summary::-webkit-details-marker{display:none}
.faq details[open] summary{color:var(--brand)}
.features .card h3::after{content:"";display:block;width:36px;height:3px;border-radius:2px;margin-top:6px;background:linear-gradient(90deg,var(--brand),var(--accent))}

/* How-to */
.howto{padding:8px 0 50px;background:linear-gradient(to bottom, rgba(34,197,94,.04), transparent 60%)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{display:flex;gap:12px;align-items:flex-start}
.step .num{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, var(--brand), var(--brand-2));color:#fff;font-weight:700}
.step .step-title{font-weight:700}


.modal-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.6);display:flex;align-items:center;justify-content:center;padding:16px;z-index:40}
.modal{width:min(700px,100%);background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px 16px 18px;position:relative;box-shadow:var(--shadow)}
.modal-header{display:flex;gap:12px;align-items:center;margin-bottom:6px}
.modal-header img{width:112px;height:63px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
.progress{height:10px;background:rgba(2,6,23,.06);border:1px solid var(--border);border-radius:999px;overflow:hidden;margin:8px 0}
.progress .bar{height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.progress-meta{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:14px}


.footer{padding:30px 0;border-top:1px solid var(--border);margin-top:36px;background:linear-gradient(to top, rgba(2,6,23,.04), transparent)}
.footer .links{display:flex;gap:16px;flex-wrap:wrap}
.footer .links a{color:var(--muted);text-decoration:none}
.footer .links a:hover{color:var(--text)}
.footer .copy{margin-top:8px;color:var(--muted)}



#results .table thead th{text-align: center;}

.suggestions {
  position: absolute;
  background: white;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 400px;
  max-height: 200px;
  text-align: left;
  overflow-y: auto;
  z-index: 1000;
  top: 220px;
  left: 600px;
}
.suggestions li {
  padding: 6px 10px;
  cursor: pointer;
}
.suggestions li:hover {
  background: #f0f0f0;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.result-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
  cursor: pointer;
}

.result-card:hover {
  transform: translateY(-3px);
}

.result-card img {
  width: 100%;
  height: auto;
  display: block;
}

.result-card .title {
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

/* loading start */

/* 内容容器 */
.content-box {
  position: relative;
  width: 400px;
  height: 200px;
  border: 1px solid #ccc;
  margin: 50px auto;
  padding: 20px;
  box-sizing: border-box;
}


.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  display: none;
  flex-direction: column;
}


.spinner {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

.loading-text {
  margin-top: 10px;
  font-size: 14px;
  color: #555;
}
#formats a, #downloadArea a{
  text-decoration: none!important;
}

.primary.small {
  font-size: 16px;
  padding: 7px 10px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* loading end */

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


@media (max-width: 920px){
  .grid{grid-template-columns:1fr}
  .features .grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .menu-toggle{display:inline-flex}
  .navbar .inner{position:relative}
  .menu{display:none;position:absolute;right:0;top:54px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px;flex-direction:column;min-width:180px;box-shadow:var(--shadow)}
  .menu.active{display:flex}
}

@media (max-width: 720px){
  .hero input[type="url"], #url{flex:1 1 100%;max-width:100%}

  .suggestions {
    left: 36px;
    top: 275px;
    width: 300px;
  }
}


@media (max-width: 640px){
  #results .card{padding:12px}
  #results .card h3{font-size:16px}
  #results .table thead th, #results .table tbody td{padding:10px}
}
@media (max-width: 520px){

  #results thead th:nth-child(2),
  #results tbody td:nth-child(2),
  #results thead th:nth-child(3),
  #results tbody td:nth-child(3){
    display:none;
  }
  #results .card:first-child {
    order: 2;
  }
  #results .card:last-child {
    order: 1;
  }



}