*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:#f0f2f5;color:#1a1a2e;line-height:1.6;min-height:100vh}
.container{max-width:900px;margin:0 auto;padding:2rem 1rem}

header{text-align:center;margin-bottom:1.25rem}
header h1{font-size:1.75rem;font-weight:700}
.subtitle{color:#64748b;margin-top:.35rem}

/* Proxy tip */
.proxy-tip{margin-bottom:1.5rem}
.proxy-tip details{background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:.6rem 1rem;font-size:.82rem;color:#92400e}
.proxy-tip summary{cursor:pointer;font-weight:600;font-size:.85rem}
.proxy-tip p{margin-top:.5rem;line-height:1.6;color:#78350f}
.proxy-tip code{background:#fef3c7;padding:.1rem .3rem;border-radius:3px;font-size:.78rem}

/* Loading */
.loading{text-align:center;padding:5rem 0;color:#64748b}
.spinner{width:36px;height:36px;border:3px solid #e2e8f0;border-top-color:#3b82f6;border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 1rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* Score */
.score-section{text-align:center;margin-bottom:1.5rem}
.score-ring{position:relative;width:150px;height:150px;margin:0 auto 1rem}
.score-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:#e2e8f0;stroke-width:8}
.ring-fill{fill:none;stroke:#22c55e;stroke-width:8;stroke-linecap:round;stroke-dasharray:326.73;stroke-dashoffset:326.73;transition:stroke-dashoffset 1s ease-out,stroke .5s}
.score-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.score-num{font-size:2.5rem;font-weight:800;line-height:1}
.score-unit{font-size:.8rem;color:#64748b;margin-top:2px}
.score-verdict{font-size:1.2rem;font-weight:700;margin-bottom:.35rem}
.score-desc{color:#64748b;font-size:.9rem;max-width:500px;margin:0 auto}

/* Cloudflare card */
.cf-card{margin-bottom:1rem}
.cf-card h3{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.tag-inline{font-size:.65rem;font-weight:500;background:#fff3cd;color:#856404;padding:.15rem .4rem;border-radius:4px}
.card-hint{font-size:.75rem;color:#94a3b8;margin-bottom:.75rem;margin-top:-.25rem}
.cf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.cf-item{display:flex;flex-direction:column;padding:.5rem .75rem;background:#f8fafc;border-radius:8px;font-size:.85rem}
.cf-item dt{color:#64748b;font-size:.75rem;margin-bottom:.15rem}
.cf-item dd{font-weight:600;color:#1e293b}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1rem}

/* Card */
.card{background:#fff;border-radius:12px;padding:1.25rem;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.card h3{font-size:.9rem;font-weight:600;color:#334155;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid #f1f5f9}

/* Info list */
.info-list{display:flex;flex-direction:column;gap:.1rem}
.info-item{display:flex;justify-content:space-between;align-items:flex-start;padding:.35rem 0;font-size:.85rem}
.info-item dt{color:#64748b;flex-shrink:0;margin-right:1rem}
.info-item dd{color:#1e293b;font-weight:500;text-align:right;word-break:break-all}

/* IP Type Hero */
.ip-type-hero{display:flex;align-items:center;gap:.75rem;padding:.75rem;margin-bottom:.75rem;border-radius:8px;background:#f8fafc}
.ip-type-label{font-size:1.3rem;font-weight:800}
.ip-type-tag{font-size:.72rem;font-weight:600;padding:.15rem .45rem;border-radius:4px}
.ip-type-tag.good{background:#dcfce7;color:#166534}
.ip-type-tag.warn{background:#fef3c7;color:#92400e}
.ip-type-tag.bad{background:#fee2e2;color:#991b1b}

/* Badges */
.badges{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.badge{display:flex;flex-direction:column;align-items:center;padding:.6rem .5rem;border-radius:8px;background:#f8fafc;text-align:center;gap:.25rem}
.badge-label{font-size:.75rem;color:#64748b}
.badge-val{font-size:.75rem;font-weight:600;padding:.1rem .4rem;border-radius:4px}
.badge-val.yes{color:#dc2626;background:#fef2f2}
.badge-val.no{color:#16a34a;background:#f0fdf4}
.badge-val.pos{color:#16a34a;background:#f0fdf4}
.badge-val.neg{color:#94a3b8;background:#f8fafc}
.badge-val.unknown{color:#64748b;background:#f1f5f9}

/* Consistency check values */
.consist-ok{color:#16a34a;font-weight:600}
.consist-warn{color:#f59e0b;font-weight:600}
.consist-bad{color:#ef4444;font-weight:600}

/* Factors */
.factors-card{margin-bottom:1rem}
.factor{display:flex;align-items:center;padding:.65rem .75rem;margin-bottom:.45rem;border-radius:8px;font-size:.85rem;gap:.5rem}
.factor.high{background:#fef2f2;border-left:3px solid #ef4444}
.factor.medium{background:#fffbeb;border-left:3px solid #f59e0b}
.factor.low{background:#f0fdf4;border-left:3px solid #22c55e}
.factor-name{font-weight:600;white-space:nowrap}
.factor-detail{color:#64748b;flex:1;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.factor-pts{font-weight:700;flex-shrink:0;min-width:36px;text-align:right}
.factor-pts.high{color:#ef4444}
.factor-pts.medium{color:#f59e0b}
.factor-pts.low{color:#22c55e}

/* CTA */
.cta{margin-bottom:1.25rem}
.cta-inner{background:linear-gradient(135deg,#1e293b,#334155);border-radius:12px;padding:1.75rem;color:#fff}
.cta-inner h3{font-size:1.1rem;font-weight:700;margin-bottom:.75rem}
.cta-inner p{color:#cbd5e1;font-size:.9rem;margin-bottom:.6rem;line-height:1.7}
.cta-inner strong{color:#fbbf24}
.cta-link{text-decoration:none;display:block;margin:1rem 0}
.cta-provider{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:1rem 1.15rem;position:relative;transition:background .2s}
.cta-provider:hover{background:rgba(255,255,255,.14)}
.provider-name{display:block;font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:.2rem}
.provider-desc{display:block;font-size:.82rem;color:#94a3b8}
.provider-badge{position:absolute;top:.7rem;right:.7rem;background:#22c55e;color:#fff;font-size:.72rem;font-weight:600;padding:.12rem .45rem;border-radius:4px}
.cta-fine{font-size:.75rem!important;color:#64748b!important;margin-bottom:0!important}

/* Recheck */
.recheck{display:block;margin:0 auto 1rem;padding:.6rem 1.5rem;background:#fff;border:1px solid #e2e8f0;border-radius:8px;font-size:.88rem;color:#334155;cursor:pointer;transition:border-color .2s}
.recheck:hover{border-color:#94a3b8}

/* Latency */
.latency-val{font-weight:600}
.latency-val.fast{color:#22c55e}
.latency-val.medium{color:#f59e0b}
.latency-val.slow{color:#ef4444}
.latency-val.fail{color:#ef4444}

/* IP History */
.history-card{margin-bottom:1rem}
.history-item{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0;font-size:.82rem;border-bottom:1px solid #f1f5f9}
.history-item:last-child{border-bottom:none}
.history-ip{font-weight:600;color:#1e293b}
.history-loc{color:#64748b}
.history-time{color:#94a3b8;font-size:.75rem}
.history-current{background:#f0fdf4;padding:.15rem .4rem;border-radius:4px;font-size:.7rem;color:#16a34a;font-weight:600}

footer{text-align:center;padding:1rem 0;color:#94a3b8;font-size:.8rem}

@media(max-width:640px){
  .grid{grid-template-columns:1fr}
  .cf-grid{grid-template-columns:repeat(2,1fr)}
  header h1{font-size:1.35rem}
  .container{padding:1rem .75rem}
  .score-ring{width:130px;height:130px}
  .score-num{font-size:2rem}
}