:root{--bg:#0b1120;--card:#111a2e;--card2:#0f172a;--line:rgba(148,163,184,.14);--text:#e5edf7;--muted:#8fa0b8;--soft:#64748b;--accent:#38bdf8;--good:#10b981;--warn:#f59e0b;--bad:#ef4444;--r:16px}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Noto Sans CJK SC",sans-serif;
  padding:max(16px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));min-height:100vh}
.wrap{max-width:880px;margin:0 auto}
a{color:var(--accent)}
button{font:inherit;cursor:pointer;border:0;border-radius:12px;min-height:44px;padding:0 18px;background:var(--accent);color:#06202e;font-weight:700}
button:disabled{opacity:.6;cursor:default}
button.ghost{background:transparent;color:var(--text);border:1px solid var(--line);font-weight:600}
button.small{min-height:36px;padding:0 12px;font-size:13px}
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}
.brand img{border-radius:8px}
.tip{position:relative;background:#0f2a3a;border:1px solid rgba(56,189,248,.35);border-radius:12px;padding:12px 40px 12px 14px;margin-bottom:14px;font-size:14px}
.tip .x{position:absolute;right:4px;top:4px;min-height:36px;padding:0 10px;background:transparent;color:var(--muted);font-size:20px}
.search{display:flex;gap:8px;margin-bottom:14px}
.search input{flex:1;min-width:0;min-height:48px;background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--text);padding:0 14px;font:16px ui-monospace,SFMono-Regular,Menlo,monospace;outline:none}
.search input:focus{border-color:var(--accent)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:14px}
h2{font-size:14px;font-weight:700;color:var(--muted);letter-spacing:.04em;margin-bottom:12px}
.row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.row h2{margin:0}
.hero{display:flex;gap:16px;align-items:center;justify-content:space-between}
.hero-main{min-width:0;flex:1}
.label{font-size:12px;color:var(--soft);font-weight:700;letter-spacing:.06em}
.ip{font:800 30px/1.15 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent);word-break:break-all;margin:4px 0}
.sub{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card2);color:var(--muted);white-space:nowrap}
.chip.good{color:var(--good);border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.08)}
.chip.warn{color:var(--warn);border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.08)}
.chip.bad{color:var(--bad);border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08)}
.chip.mono{font-family:ui-monospace,Menlo,monospace;font-weight:600}
.ring{position:relative;width:118px;height:118px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:10}
.ring .track{stroke:rgba(148,163,184,.15)}
.ring .bar{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset .6s,stroke .3s}
.ring-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-txt b{font-size:32px;line-height:1}.ring-txt span{font-size:12px;color:var(--muted);margin-top:2px}
.scores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.score{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px}
.score .h{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.score .h b{color:var(--text);font-size:15px}
.meter{height:6px;border-radius:6px;background:rgba(148,163,184,.15);margin-top:8px;overflow:hidden}
.meter i{display:block;height:100%;width:0;border-radius:6px;background:var(--good);transition:width .5s}
.factors{list-style:none;margin-top:12px;display:grid;gap:6px}
.factors li{font-size:14px;padding:8px 10px;border-radius:10px;background:var(--card2);border-left:3px solid var(--good)}
.factors li.warn{border-left-color:var(--warn)}.factors li.bad{border-left-color:var(--bad)}
.factors li small{color:var(--soft);margin-right:6px}
.types{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.type{text-align:center;padding:10px 4px;border-radius:12px;border:1px solid var(--line);background:var(--card2);color:var(--soft);font-size:13px;font-weight:700}
.type.on{color:#06202e;background:var(--accent);border-color:var(--accent)}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kv>div{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.kv .k{font-size:12px;color:var(--soft)}
.kv .v{font-weight:600;word-break:break-all}
.kv .v.mono{font:600 13px ui-monospace,Menlo,monospace}
.kv .v.good{color:var(--good)}.kv .v.warn{color:var(--warn)}.kv .v.bad{color:var(--bad)}
.kv .full{grid-column:1/-1}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--soft);font-weight:600;font-size:12px}
.hist{list-style:none;display:grid;gap:6px;margin-top:8px}
.hist li{display:flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.hist .g{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;background:rgba(148,163,184,.15);flex:none}
.hist .g.A{background:rgba(16,185,129,.2);color:var(--good)}.hist .g.B{background:rgba(56,189,248,.2);color:var(--accent)}.hist .g.C,.hist .g.D{background:rgba(245,158,11,.2);color:var(--warn)}.hist .g.F{background:rgba(239,68,68,.2);color:var(--bad)}
.hist .m{flex:1;min-width:0}
.hist .m button{background:none;color:var(--text);padding:0;min-height:0;font-weight:700;text-align:left;border-radius:0}
.hist .m .ipb{font:13px ui-monospace,Menlo,monospace;color:var(--accent);font-weight:600}
.hist .m div{font-size:12px;color:var(--soft)}
.hist .del{background:none;color:var(--soft);min-height:36px;padding:0 8px;font-size:18px}
.muted{color:var(--muted)}.small{font-size:13px}
footer{color:var(--soft);font-size:12px;text-align:center;margin-top:18px;line-height:1.7}
.skel{color:var(--soft)}
@media (max-width:600px){
  .hero{flex-direction:row;align-items:flex-start}.ip{font-size:22px}.ring{width:92px;height:92px}.ring-txt b{font-size:26px}
  .kv{grid-template-columns:1fr}.types{grid-template-columns:repeat(3,minmax(0,1fr))}.scores{grid-template-columns:1fr 1fr}
}
@media (display-mode:standalone){.top{padding-top:4px}}