/* 线路检测 / 结果页 v3 */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#ffffff;
  --text:#1c1c1e;
  --muted:#6e6e73;
  --card:#ffffff;
  --primary:#4a90d9;
}
html[data-theme="dark"]{
  --bg:#000000;
  --text:#e8eef5;
  --muted:#9aabbd;
  --card:#1a1a1a;
  --primary:#ff4757;
}
html,body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--text);
  min-height:100%;
  touch-action:manipulation;
  -webkit-text-size-adjust:100%;
}
body.go-body{
  min-height:100vh;
  background:#fff;
}
html[data-theme="dark"] body.go-body{background:#000}
body.go-body #app{min-height:100vh;background:var(--bg)}

.detect-page{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:24px;text-align:center;
}
.detect-dots{display:flex;gap:18px;margin-bottom:24px;align-items:flex-end;height:36px}
.detect-dots span{
  border-radius:50%;
  animation:orbFloat 1.2s ease-in-out infinite;
}
.detect-dots .d1{width:12px;height:12px;background:#ff5cad;box-shadow:0 0 18px #ff5cad;animation-delay:0s}
.detect-dots .d2{width:18px;height:18px;background:#3dd6f5;box-shadow:0 0 22px #3dd6f5;animation-delay:.15s}
.detect-dots .d3{width:14px;height:14px;background:#ffb347;box-shadow:0 0 18px #ffb347;animation-delay:.3s}
@keyframes orbFloat{
  0%,100%{transform:translateY(0) scale(1);opacity:.75}
  50%{transform:translateY(-12px) scale(1.35);opacity:1}
}
.detect-title{
  font-size:18px;font-weight:700;color:var(--primary);
  margin-bottom:10px;letter-spacing:.5px;
}
.detect-status{font-size:14px;color:var(--muted);margin-bottom:26px}
.detect-status .dots{
  display:inline-flex;gap:3px;margin-left:2px;vertical-align:middle;
}
.detect-status .dots i{
  width:6px;height:6px;border-radius:50%;
  display:inline-block !important;
  animation:dotColor 1.2s ease-in-out infinite;
}
.detect-status .dots i:nth-child(1){background:#ff5cad;animation-delay:0s}
.detect-status .dots i:nth-child(2){background:#3dd6f5;animation-delay:.2s}
.detect-status .dots i:nth-child(3){background:#ffb347;animation-delay:.4s}
@keyframes dotColor{
  0%,100%{transform:translateY(0);opacity:.35}
  50%{transform:translateY(-3px);opacity:1;box-shadow:0 0 8px currentColor}
}
.detect-bar{
  width:min(280px,70vw);height:6px;border-radius:99px;
  background:linear-gradient(90deg,#ffe0f0,#e0e8ff);
  overflow:hidden;
}
.detect-bar > i{
  display:block !important;height:100%;width:0;
  background:linear-gradient(90deg,#ff8ab8,#8aa8ff);
  border-radius:99px;transition:width .15s;
}

.result-page{
  width:100%;max-width:none;margin:0;padding:20px 18px 56px;
  animation:fadeIn .35s ease;
  min-height:100vh;
  position:relative;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.back-top{
  display:inline-flex;align-items:center;gap:4px;
  margin:4px 0 12px;padding:8px 2px;
  color:var(--primary);text-decoration:none;
  font-size:14px;font-weight:600;
}
.back-top:active{opacity:.7}
.result-title{
  text-align:center;font-size:22px;font-weight:700;
  color:var(--primary);margin-bottom:22px;
}
.recommend{
  background:linear-gradient(135deg,#5b8def 0%,#8b6cf0 100%);
  border-radius:20px;padding:22px 20px 18px;color:#fff;
  box-shadow:0 10px 30px rgba(91,141,239,.35);
  margin-bottom:28px;
}
.rec-label{font-size:13px;opacity:.9;margin-bottom:10px}
.rec-url{
  font-size:16px;font-weight:700;word-break:break-all;
  line-height:1.4;margin-bottom:8px;
}
.rec-speed{font-size:13px;opacity:.85;margin-bottom:16px}
.rec-actions{display:flex;gap:10px}
.btn-enter,.btn-copy{
  flex:1;text-align:center;border:none;cursor:pointer;
  padding:12px 10px;border-radius:12px;font-size:14px;font-weight:600;
  text-decoration:none;color:#fff;
}
.btn-enter{background:linear-gradient(135deg,#4a90d9,#6c5ce7)}
.btn-copy{background:linear-gradient(135deg,#ff9a56,#ff6b9d)}

.other-title{font-size:16px;font-weight:700;margin-bottom:14px}
.line-list{display:flex;flex-direction:column;gap:12px}
.line-item{
  background:var(--card);border-radius:14px;padding:14px 14px 14px 18px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.04);
}
html[data-theme="dark"] .line-item{border-color:#2a2a2a;box-shadow:none}
.badge{
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;flex-shrink:0;
}
.badge.b1{background:#4a90d9}
.badge.b2{background:#e84393}
.badge.b3{background:#00b894}
.badge.b4{background:#fdcb6e;color:#333}
.badge.b5{background:#6c5ce7}
.badge.b6{background:#00cec9}
.line-info{flex:1;min-width:0}
.line-url{
  font-size:14px;font-weight:600;color:var(--primary);
  word-break:break-all;line-height:1.35;margin-bottom:4px;
}
.line-speed{font-size:12px;color:var(--muted)}
.line-actions{display:flex;gap:6px;flex-shrink:0}
.btn-s-copy,.btn-s-go{
  border:none;border-radius:8px;padding:7px 12px;
  font-size:12px;cursor:pointer;text-decoration:none;color:#fff;font-weight:600;
}
.btn-s-copy{background:#ff9a6b}
.btn-s-go{background:#3ecfba}

.empty{text-align:center;padding:24px;color:var(--muted)}

@media(max-width:420px){
  .rec-url{font-size:14px}
  .line-item{flex-wrap:wrap}
  .line-actions{width:100%;justify-content:flex-end}
}