:root { --bg: #070b16; --s1: rgba(13, 20, 36, .82); --s2: #131c30; --s3: #1a2540; --line: rgba(173, 206, 255, .1); --line2: rgba(173, 206, 255, .2); --text: #eef3fb; --muted: rgba(220, 230, 248, .58); --ice: #a9cbff; --on-ice: #061226; --up: #3ce3ab; --down: #f23674; --font: "Geist", Inter, Arial, sans-serif; --mono: "Geist Mono", ui-monospace, monospace }
* { box-sizing: border-box; margin: 0; padding: 0 }
[hidden] { display: none !important }
html { background: var(--bg); color-scheme: dark } body { background: var(--bg); color: var(--text); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; min-height: 100vh }
a { color: inherit; text-decoration: none; cursor: pointer } button, input { font: inherit; color: inherit } button { cursor: pointer; border: 0; background: none } em, i { font-style: normal }
.muted { color: var(--muted) } .mono { font-family: var(--mono) }
.bg { position: fixed; inset: 0; z-index: -1; background: url(../img/sky.jpg) center/cover; opacity: .55 } .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,11,22,.5), var(--bg) 70%) }
.btn { height: 42px; padding: 0 20px; border-radius: 999px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line2); transition: opacity .15s, background .15s }
.btn.ice { background: var(--ice); color: var(--on-ice); border-color: transparent; font-weight: 600 } .btn.ice:hover { opacity: .9 } .btn[disabled] { opacity: .4; cursor: not-allowed }
.btn.line:hover { background: rgba(169,203,255,.08) } .btn.sm { height: 32px; padding: 0 14px; font-size: 13px }
.top { position: sticky; top: 0; z-index: 10; height: 64px; display: flex; align-items: center; gap: 28px; padding: 0 max(20px, calc((100vw - 1120px) / 2)); background: rgba(7,11,22,.7); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line) }
.logo { display: flex; align-items: center; gap: 9px; font: 600 19px var(--font); letter-spacing: -.02em } .logo img { width: 26px; height: 26px; object-fit: contain } .logo span { transform: translateY(-1px) }
.top nav { display: flex; gap: 2px } .top nav a { height: 34px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; color: var(--muted); font-weight: 500 } .top nav a.on { color: var(--text); background: rgba(169,203,255,.1) } .top nav a:hover { color: var(--text) }
.top .right { margin-left: auto; display: flex; gap: 8px; align-items: center }
.net { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 13px } .net img { width: 16px; height: 16px }

.col { max-width: 680px; margin: 0 auto; padding: 56px 20px 90px }
.col h1 { font: 500 40px var(--font); letter-spacing: -.04em } .col > p.muted { margin: 6px 0 26px }
.search { height: 74px; display: flex; align-items: center; padding: 0 26px; border-radius: 999px; background: var(--s1); border: 1px solid var(--line2); backdrop-filter: blur(16px) } .search:focus-within { border-color: rgba(169,203,255,.6) }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 400 30px var(--mono); letter-spacing: -.02em } .search .tld { font: 400 30px var(--mono); color: var(--muted) }
.hint { margin: 12px 0 0; text-align: center; color: var(--muted); font-size: 14px; min-height: 21px } .hint.left { text-align: left } .hint .bad { color: var(--down) } .hint .ok { color: var(--up) }
.card { margin-top: 22px; padding: 26px; border-radius: 22px; background: var(--s1); border: 1px solid var(--line); backdrop-filter: blur(20px) }
.ch { display: flex; justify-content: space-between; align-items: center; gap: 12px } .ch b { font: 500 26px var(--mono); letter-spacing: -.02em; word-break: break-all }
.pill { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(169,203,255,.12); color: var(--ice); white-space: nowrap } .pill.ok { background: rgba(60,227,171,.12); color: var(--up) } .pill.bad { background: rgba(242,54,116,.12); color: var(--down) }
.f { display: block; margin-top: 18px } .f > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 7px }
.f > input, .in { width: 100%; height: 50px; border-radius: 14px; border: 1px solid var(--line); background: rgba(7,11,22,.6); outline: none } .f > input { padding: 0 16px; font: 14px var(--mono) } .f > input:focus, .in:focus-within { border-color: rgba(169,203,255,.55) }
.in { display: flex; align-items: center; padding-right: 16px } .in input { flex: 1; min-width: 0; height: 100%; padding: 0 16px; border: 0; background: none; outline: none; font: 400 20px var(--mono) } .unit { color: var(--muted); font: 15px var(--mono) }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(7,11,22,.6); border: 1px solid var(--line) } .seg a { flex: 1; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--muted); font: 500 14px var(--mono) } .seg a.on { background: rgba(169,203,255,.14); color: var(--text) }
.sum { margin-top: 18px; border-top: 1px solid var(--line) } .sum div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line) } .sum span, .kv span { color: var(--muted); font-size: 14px } .sum b, .kv b { font: 500 14px var(--mono); text-align: right; word-break: break-all }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; margin-top: 20px } .kv a { color: var(--ice) }
.go { width: 100%; height: 54px; margin-top: 22px; font-size: 16px }
.acts { display: flex; gap: 8px; margin-top: 22px; flex-wrap: wrap } .acts .btn { flex: 1 }
.note { margin-top: 12px; color: var(--muted); font-size: 12px; text-align: center }

.nm { margin-top: 12px; padding: 22px; border-radius: 20px; background: var(--s1); border: 1px solid var(--line) }
.nm .ch b { font-size: 22px } .nm .meta { margin-top: 6px; color: var(--muted); font: 13px var(--mono) } .nm .acts .btn { flex: none }
.empty { padding: 56px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line2); border-radius: 20px } .empty b { display: block; color: var(--text); font-size: 20px; font-weight: 500; margin-bottom: 4px } .empty .btn { margin-top: 16px }
.sheet { position: fixed; inset: 0; z-index: 30; background: rgba(3,6,12,.7); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 20px } .sheet .card { width: min(520px, 100%); margin: 0; background: #0d1424 }
.sheet h2 { font: 500 24px var(--font); letter-spacing: -.03em } .sheet .acts .btn { flex: 1 }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: #131c30; border: 1px solid var(--line2); border-radius: 14px; padding: 12px 18px; z-index: 40; transition: .25s; pointer-events: none; max-width: 92vw } .toast.on { opacity: 1; transform: translate(-50%, 0) } .toast.bad { border-color: rgba(242,54,116,.6) }
@media (max-width: 760px) { .top nav, .net { display: none } .search { height: 62px; padding: 0 18px } .search input, .search .tld { font-size: 22px } .col { padding-top: 36px } }