/* ===== Ranking Page — 商业严谨布局 ===== */

/* ===== HERO ===== */
#section-ranking.app-section.active{padding-top:0}
.ranking-hero{
  text-align:center;padding:48px var(--pad) 32px;
  max-width:800px;margin:0 auto;
}
.ranking-hero__label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.6875rem;font-weight:600;letter-spacing:.06em;
  color:var(--brand);background:var(--brand-light);
  padding:4px 12px;border-radius:99px;margin-bottom:16px;
  text-transform:uppercase;
}
.ranking-hero__dot{width:6px;height:6px;border-radius:50%;background:var(--brand);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.ranking-hero h1{
  font-size:2.125rem;font-weight:700;letter-spacing:-.02em;margin-bottom:8px;
  line-height:1.25;color:var(--text);
}
.ranking-hero h1 em{font-style:normal;color:var(--brand)}
.ranking-hero p{font-size:.875rem;color:var(--text-tertiary);max-width:560px;margin:0 auto 24px}
.ranking-hero__metrics{
  display:flex;justify-content:center;gap:40px;flex-wrap:wrap;
}
.hero-metric{text-align:center}
.hero-metric__value{font-size:1.75rem;font-weight:700;color:var(--text);font-family:var(--font-mono);line-height:1.1}
.hero-metric__label{font-size:.6875rem;color:var(--text-tertiary);margin-top:4px;text-transform:uppercase;letter-spacing:.04em}

/* ===== TOOLBAR ===== */
.ranking-toolbar{
  max-width:var(--max-w);margin:0 auto;padding:20px var(--pad);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--bg-primary);border:1px solid var(--border);
  border-radius:var(--r-lg);margin-bottom:16px;
}
.toolbar-group{display:flex;align-items:center;gap:6px}
.toolbar-label{font-size:.6875rem;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin-right:2px}
.chip{
  display:inline-flex;align-items:center;padding:5px 14px;
  font-size:.75rem;font-weight:500;border-radius:99px;
  background:var(--bg-secondary);color:var(--text-secondary);
  border:1px solid transparent;cursor:pointer;
  transition:all var(--fast);font-family:inherit;
}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.toolbar-search{
  display:flex;align-items:center;gap:6px;padding:5px 12px;
  background:var(--bg-secondary);border:1px solid var(--border);
  border-radius:var(--r);margin-left:auto;min-width:200px;
  transition:border-color var(--fast);
}
.toolbar-search:focus-within{border-color:var(--brand);background:var(--bg-primary)}
.toolbar-search svg{color:var(--text-tertiary);flex-shrink:0}
.toolbar-search input{
  border:none;background:none;outline:none;font-size:.8125rem;
  color:var(--text);width:100%;font-family:inherit;
}
.toolbar-search input::placeholder{color:var(--text-muted)}
.toolbar-count{font-size:.75rem;color:var(--text-tertiary);white-space:nowrap}
.filter-select{
  padding:5px 28px 5px 10px;font-size:.75rem;font-family:inherit;
  color:var(--text);background:var(--bg-secondary);
  border:1px solid var(--border);border-radius:var(--r);cursor:pointer;outline:none;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4 4L7 1' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  transition:border-color var(--fast);
}
.filter-select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(26,86,219,.1)}

/* ===== RANKING HEADER ROW ===== */
.ranking-hdr{
  max-width:var(--max-w);margin:0 auto;padding:12px var(--pad);
  display:flex;align-items:center;gap:12px;
  font-size:.6875rem;font-weight:600;color:var(--text-tertiary);
  text-transform:uppercase;letter-spacing:.05em;
  background:var(--bg-secondary);border:1px solid var(--border);
  border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:none;
}
.ranking-hdr__provider{flex:1;min-width:180px}
.ranking-hdr__auth{width:100px;text-align:center}
.ranking-hdr__price{width:200px;text-align:center}
.ranking-hdr__pay{width:60px;text-align:center}
.ranking-hdr__rating{width:80px;text-align:center}
.ranking-hdr__latency{width:70px;text-align:center}
.ranking-hdr__actions{width:90px;text-align:center}

/* ===== RANKING CARDS ===== */
.ranking-cards{
  max-width:var(--max-w);margin:0 auto;padding:0 var(--pad) 48px;
}
.ranking-cards > * + *{margin-top:2px}
.ranking-card{
  background:var(--bg-primary);border:1px solid var(--border);
  transition:all var(--fast);cursor:default;
}
.ranking-card:first-of-type{border-radius:0}
.ranking-card:last-of-type{border-radius:0 0 var(--r-lg) var(--r-lg)}
.ranking-card:hover{border-color:var(--brand-border);box-shadow:var(--shadow-sm);position:relative;z-index:1}
.ranking-card.tier-warn{background:var(--warning-bg);border-left:3px solid var(--warning)}
.ranking-card.tier-fake{background:var(--danger-bg);border-left:3px solid var(--danger);opacity:.9}
.card-row{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  flex-wrap:nowrap;overflow-x:auto;
}
.card-col{flex-shrink:0}
.card-col--provider{flex:1;min-width:180px}
.card-col--auth{width:100px;text-align:center}
.card-col--price{width:200px}
.card-col--pay{width:60px;text-align:center}
.card-col--rating{width:80px;text-align:center}
.card-col--latency{width:70px;text-align:center}
.card-col--actions{width:90px;text-align:center}

/* Provider */
.provider-name-row{display:flex;align-items:center;gap:8px}
.provider-rank-num{
  font-family:var(--font-mono);font-size:.75rem;font-weight:600;
  color:var(--text-tertiary);min-width:26px;text-align:center;
}
.provider-rank-num.top1{color:#b45309}
.provider-rank-num.top2{color:#64748b}
.provider-rank-num.top3{color:#b45309}
.provider-link{font-weight:600;font-size:.875rem;color:var(--text);text-decoration:none}
.provider-link:hover{color:var(--brand);text-decoration:underline}
.provider-ext{font-size:.6875rem;color:var(--text-tertiary);margin-left:2px}
.provider-domain{display:block;font-size:.6875rem;color:var(--text-tertiary);font-family:var(--font-mono);margin-top:1px;margin-left:34px}
.provider-desc{display:block;font-size:.6875rem;color:var(--text-tertiary);margin-top:2px;margin-left:34px;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Auth badge */
.auth-badge{
  display:inline-flex;align-items:center;gap:3px;padding:3px 10px;
  border-radius:99px;font-size:.6875rem;font-weight:600;white-space:nowrap;
}
.auth-badge--clean{background:var(--success-bg);color:var(--success);border:1px solid var(--success-border)}
.auth-badge--warn{background:var(--warning-bg);color:var(--warning);border:1px solid var(--warning-border)}
.auth-badge--dirty{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-border)}
.auth-score{display:block;font-size:.625rem;color:var(--text-tertiary);margin-top:2px}

/* Price */
.price-mini{font-size:.75rem}
.price-mini-row{display:flex;justify-content:space-between;padding:2px 0;gap:8px}
.price-mini-model{color:var(--text-tertiary);font-size:.6875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}
.price-mini-val{font-family:var(--font-mono);font-size:.6875rem;color:var(--text);font-weight:500}
.price-mini-val.low{color:var(--success)}
.price-mini-val.high{color:var(--danger)}

/* Rating */
.rating-stars{color:#eab308;font-size:.75rem;letter-spacing:1px}
.rating-num{font-weight:600;font-size:.8125rem;color:var(--text)}
.rating-count{font-size:.625rem;color:var(--text-tertiary)}

/* Latency */
.latency-val{font-family:var(--font-mono);font-size:.75rem;font-weight:500}
.latency-val.fast{color:var(--success)}
.latency-val.slow{color:var(--warning)}

/* Card buttons */
.card-btn{
  display:inline-block;padding:4px 10px;font-size:.6875rem;font-weight:500;
  border-radius:var(--r-sm);cursor:pointer;text-decoration:none;
  transition:all var(--fast);font-family:inherit;white-space:nowrap;
  border:1px solid var(--border);background:var(--bg-primary);color:var(--text-secondary);
}
.card-btn:hover{text-decoration:none}
.card-btn--visit{background:var(--brand);color:#fff;border-color:var(--brand)}
.card-btn--visit:hover{background:var(--brand-hover);color:#fff}
.card-btn--ghost:hover{border-color:var(--brand);color:var(--brand)}

/* ===== CTA BOTTOM ===== */
.ranking-cta{
  max-width:var(--max-w);margin:0 auto 48px;padding:40px var(--pad);
  text-align:center;background:var(--brand);border-radius:var(--r-xl);
}
.ranking-cta h2{color:#fff;font-size:1.25rem;margin-bottom:4px}
.ranking-cta p{color:rgba(255,255,255,.75);font-size:.875rem;margin-bottom:20px}
.ranking-cta .btn-white{
  display:inline-block;padding:10px 28px;font-size:.875rem;font-weight:600;
  border-radius:var(--r);background:#fff;color:var(--brand);
  text-decoration:none;transition:all var(--fast);box-shadow:var(--shadow-md);
}
.ranking-cta .btn-white:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg);text-decoration:none}

/* ===== EMPTY STATE ===== */
.ranking-empty{text-align:center;padding:64px var(--pad);color:var(--text-tertiary)}
.ranking-empty__icon{font-size:2.5rem;margin-bottom:12px;opacity:.5}
.ranking-empty h3{color:var(--text-secondary);font-weight:500;font-size:1rem}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .card-row{flex-wrap:wrap;gap:8px}
  .card-col--provider{flex:1 1 100%;min-width:100%}
  .card-col--auth,.card-col--price,.card-col--pay,.card-col--rating,.card-col--latency{width:auto;flex:1;text-align:left}
  .card-col--actions{width:100%;text-align:right}
  .ranking-hdr{display:none}
  .ranking-hero h1{font-size:1.5rem}
  .hero-metric__value{font-size:1.25rem}
  .ranking-toolbar{flex-direction:column;align-items:stretch}
  .toolbar-search{margin-left:0;min-width:auto}
}
@media(max-width:600px){
  .ranking-hero{padding:32px var(--pad) 20px}
  .ranking-hero h1{font-size:1.25rem}
  .ranking-hero__metrics{gap:24px}
  .card-row{padding:12px}
  .ranking-cta{padding:28px var(--pad)}
}