:root {
    --ink: #eceddf;
    --muted: #a9c0bd;
    --line: rgba(176, 213, 205, .2);
    --gold: #d1b981;
    --jade: #89bdb4;
    --night: #091b25;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    color: var(--ink);
    background: #091b25;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; }
.ip-page {
    min-height: 100vh;
    overflow: hidden;
    background: radial-gradient(ellipse 70% 40% at 85% 6%, rgba(44, 98, 105, .38), transparent 68%),
        radial-gradient(ellipse 65% 40% at 0% 45%, rgba(32, 73, 79, .3), transparent 70%),
        linear-gradient(155deg, #0d2732 0%, #091b25 55%, #102832 100%);
}
.ip-container { max-width: 1260px; padding-left: 28px; padding-right: 28px; }
.topbar { height: 88px; border-bottom: 1px solid var(--line); }
.brand { color: var(--ink); }
.brand:hover { color: #fff; }
.brand-mark {
    display: flex; align-items: center; justify-content: center; width: 39px; height: 44px;
    border: 1px solid #b8c9b9; border-radius: 50% 50% 45% 45%;
    color: #f2ead5; font-family: Georgia, serif; font-size: 17px; letter-spacing: -2px;
    box-shadow: inset 0 0 0 3px #153b45, 0 0 18px rgba(130, 204, 194, .12);
}
.brand-mark span { color: #dfbd78; }
.brand-name { font-family: Georgia, serif; font-size: 20px; font-weight: 700; letter-spacing: .02em; }
.brand-name span { color: #cbb47e; }
.topbar-note { color: #a7beb9; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.topbar-separator { margin: 0 9px; color: #a38e64; }
.status-dot, .pulse-dot, .map-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #9ad3c6; margin-right: 8px; box-shadow: 0 0 9px #7cc9bb; }
.intro { position: relative; min-height: 490px; display: flex; align-items: center; padding: 70px 0 66px; }
.intro-content { position: relative; z-index: 1; width: 62%; max-width: 690px; }
.webway-emblem { position: absolute; right: -10px; top: 50%; transform: translateY(-50%); width: min(48%, 545px); height: auto; pointer-events: none; }
.eyebrow, .section-number { color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .19em; }
.eyebrow-line { display: inline-block; width: 26px; height: 1px; margin: 0 9px 3px 0; background: var(--gold); }
.eyebrow-index { margin-left: 8px; color: #8aa9a4; }
.intro h1 { margin: 23px 0 16px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(42px, 5vw, 65px); font-weight: 400; line-height: 1.1; letter-spacing: -.04em; color: #f5f0df; }
.intro h1 em { color: #a4d1c4; font-weight: 400; }
.intro h1.notice-title { font-size: clamp(30px, 3.5vw, 44px); line-height: 1.2; letter-spacing: -.025em; }
.notice-title a { color: #a4d1c4; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .13em; }
.intro > .intro-content > p:not(.lookup-hint) { margin: 0 0 27px; max-width: 490px; color: #b3c6c0; font-size: 15px; line-height: 1.7; }
.lookup-form { max-width: 620px; padding: 5px 5px 5px 17px; background: #eff0e5; border: 1px solid #d4d7c5; border-radius: 4px 20px 4px 20px; box-shadow: 0 10px 45px rgba(0, 0, 0, .2); }
.search-icon { width: 20px; height: 20px; flex: none; color: #57756e; }
.lookup-form .form-control { height: 48px; min-width: 0; padding: 0 14px; border: 0; box-shadow: none; background: transparent; color: #183a3a; font-size: 15px; }
.lookup-form .form-control::placeholder { color: #758d86; }
.lookup-form:focus-within { outline: 3px solid rgba(155, 220, 203, .35); outline-offset: 3px; }
.lookup-button, .lookup-button:focus { height: 48px; padding: 0 20px; border: 1px solid #c6ae79; border-radius: 2px 15px 2px 15px; background: #244d50; color: #f6f1df; font-size: 12px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.lookup-button:hover { background: #326861; border-color: #d8c18e; color: white; }
.lookup-button span { padding-left: 14px; color: #e7c888; }
.lookup-hint { margin: 13px 0 0; color: #96b1aa; font-size: 12px; }
.section-heading { border-bottom: 1px solid var(--line); padding-bottom: 15px; margin-bottom: 20px; }
.section-heading h2 { margin: 8px 0 0; color: #eee9d8; font-family: Georgia, serif; font-size: 27px; font-weight: 400; letter-spacing: -.025em; }
.section-caption { color: #9db3ad; font-size: 12px; }
.result-card, .map-card, .detail-card { overflow: hidden; border: 1px solid rgba(183, 209, 196, .25); border-radius: 3px 24px 3px 24px; }
.result-card { position: relative; display: flex; flex-direction: column; min-height: 390px; padding: 32px; background: linear-gradient(145deg, #234c50, #102e38 78%); color: #f4f1e2; }
.result-card:after { content: ""; position: absolute; top: -128px; right: -112px; width: 310px; height: 310px; border: 1px solid rgba(209, 185, 129, .28); border-radius: 50%; box-shadow: 0 0 0 22px rgba(182, 215, 198, .025), 0 0 0 45px rgba(182, 215, 198, .025); pointer-events: none; }
.result-label { color: #bcd5c9; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.pulse-dot { background: #cf7f70; box-shadow: 0 0 0 4px rgba(212, 125, 111, .12), 0 0 10px #d47d6f; }
.ip-version { display: inline-block; margin-left: 10px; padding: 5px 8px; border: 1px solid rgba(217, 206, 165, .35); border-radius: 2px 8px; color: #e6d5ad; letter-spacing: .03em; }
.ip-title { margin: 39px 0 12px; overflow-wrap: anywhere; font-family: Georgia, serif; font-size: clamp(29px, 3.1vw, 42px); font-weight: 400; line-height: 1.15; letter-spacing: -.035em; }
.ip-summary { display: flex; align-items: center; gap: 7px; margin: 0; color: #d0dfd4; font-size: 15px; }
.ip-summary svg { width: 18px; height: 18px; flex: none; color: #dfbf84; }
.result-bottom { margin-top: auto; padding-top: 38px; }
.result-bottom p { margin: 0 0 16px; color: #abc4b9; font-size: 12px; }
.copy-button, .raw-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 2px 12px; font-size: 12px; font-weight: 700; }
.copy-button, .copy-button:hover { background: #e5dabd; color: #173c3c; }
.copy-button:hover { background: #fff3d0; }
.copy-button svg { width: 16px; height: 16px; }
.raw-button, .raw-button:hover { border: 1px solid #86a7a0; color: #e5eee4; }
.raw-button:hover { background: rgba(255,255,255,.08); }
.raw-button span { color: #e0c68f; }
.map-card { display: flex; flex-direction: column; background: #e9ebdf; color: #183a3c; }
.map-topline { display: flex; justify-content: space-between; gap: 10px; padding: 15px 20px; background: #e9ebdf; color: #718982; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.map-topline span:first-child { color: #315953; }
.map-dot { width: 6px; height: 6px; background: #ab665b; box-shadow: none; }
.map-card #mapid { width: 100%; min-height: 250px; flex: 1; background: #d9e5dc; }
.map-meta { padding: 17px 20px; }
.map-meta div { min-width: 0; }
.map-meta span, .map-meta strong { display: block; }
.map-meta span { margin-bottom: 5px; color: #728982; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.map-meta strong { overflow-wrap: anywhere; font-size: 13px; font-weight: 700; }
.leaflet-container { font-family: inherit; }
.leaflet-container img { max-width: none !important; }
.details-heading { margin-top: 56px; }
.detail-card { min-height: 145px; padding: 21px; background: rgba(224, 232, 216, .055); }
.detail-label { color: #aac4bb; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.detail-label span { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; margin-right: 8px; border: 1px solid #8a8d6e; border-radius: 50%; color: #dfc891; font-family: Georgia, serif; font-size: 10px; letter-spacing: 0; }
.detail-value { margin: 20px 0 4px; overflow-wrap: anywhere; color: #f0eddd; font-family: Georgia, serif; font-size: 20px; font-weight: 400; }
.time-value { font-family: inherit; font-size: 16px; letter-spacing: -.02em; }
.detail-note { margin: 0; color: #a4bdb4; font-size: 12px; }
.flag { display: inline-flex; align-items: center; min-height: 24px; }
.site-footer { margin-top: 56px; padding: 22px 0 32px; border-top: 1px solid var(--line); color: #9db3a9; font-size: 10px; letter-spacing: .05em; }
@media (max-width: 991px) {
    .intro { min-height: 410px; padding: 55px 0 48px; }
    .intro-content { width: 68%; }
    .webway-emblem { right: -55px; width: 53%; opacity: .75; }
    .result-card { min-height: 310px; }
    .map-card #mapid { height: 290px; flex: auto; }
    .details-heading { margin-top: 42px; }
}
@media (max-width: 575px) {
    .ip-container { padding-left: 18px; padding-right: 18px; }
    .topbar { height: 74px; }
    .topbar-note { font-size: 9px; letter-spacing: .07em; }
    .topbar-separator { margin: 0 3px; }
    .intro { min-height: 390px; padding: 50px 0 43px; align-items: flex-start; }
    .intro-content { width: 100%; }
    .webway-emblem { top: 25px; right: -95px; transform: none; width: 270px; opacity: .24; }
    .intro h1 { margin-top: 25px; font-size: clamp(37px, 10vw, 48px); }
    .intro > .intro-content > p:not(.lookup-hint) { max-width: 300px; font-size: 14px; }
    .lookup-form { padding-left: 12px; }
    .lookup-form .form-control { padding: 0 9px; font-size: 14px; }
    .lookup-button { padding: 0 13px; }
    .lookup-button span { padding-left: 5px; }
    .result-card { min-height: 300px; padding: 25px; }
    .ip-title { margin-top: 32px; }
    .section-caption { display: none; }
    .map-card #mapid { height: 260px; }
    .detail-card { min-height: 126px; }
    .detail-value { margin-top: 14px; }
    .site-footer { margin-top: 40px; }
}

.tools-nav { display: flex; justify-content: flex-end; gap: 23px; padding-top: 16px; }
.tools-nav a { color: #b8cec2; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.tools-nav a:hover, .site-footer a:hover { color: #f2ddb0; }
.tools-nav a span { color: var(--gold); }
.dns-section { margin-top: 56px; }
.dns-section > p, .admin-intro > p, .admin-panel > p { color: #b3c6c0; font-size: 14px; line-height: 1.7; }
.dns-section .lookup-form { max-width: 620px; }
.dns-results { max-width: 800px; margin-top: 17px; color: #b3c6c0; font-size: 13px; overflow-wrap: anywhere; }
.dns-row { display: grid; grid-template-columns: 65px minmax(0, 1fr) 75px; gap: 12px; padding: 13px; border-bottom: 1px solid var(--line); }
.dns-row strong { color: var(--gold); font-size: 11px; letter-spacing: .08em; }
.dns-row small { color: #a8beb5; text-align: right; }
.admin-intro { max-width: 700px; padding: 60px 0 30px; }
.admin-intro h1 { margin: 20px 0 12px; color: #f5f0df; font-family: Georgia, serif; font-size: clamp(40px, 5vw, 60px); font-weight: 400; letter-spacing: -.04em; }
.admin-intro h1 em { color: #a4d1c4; }
.admin-panel { padding: 28px; border: 1px solid var(--line); border-radius: 3px 24px; background: rgba(224,232,216,.055); }
.admin-panel h2 { color: #eee9d8; font: 25px Georgia, serif; }
.admin-form label { display: block; margin: 20px 0 8px; color: #c6d5c8; font-size: 12px; }
.admin-panel .lookup-form { max-width: 740px; }
.tool-message { margin: 15px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 3px 12px; overflow-wrap: anywhere; }
.tool-message.error { color: #ffd2c4; border-color: #b66c61; }
.tool-message.success, .tool-message a { color: #c6e8ce; }
.admin-list { margin-top: 48px; }
.empty-note { color: var(--muted); font-size: 14px; }
.link-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.link-row-main { min-width: 0; }
.link-row-top, .link-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.link-code { color: #f0e5c5; font-weight: 700; }
.link-state { padding: 3px 7px; border: 1px solid #719988; border-radius: 10px; color: #b9dec6; font-size: 10px; }
.link-state.disabled { color: #c5a89b; border-color: #8d6c65; }
.link-target { margin-top: 6px; color: #b3c6c0; overflow-wrap: anywhere; font-size: 13px; }
.link-date { color: #9db3a9; font-size: 11px; }
.link-pages { display: flex; gap: 20px; margin-top: 20px; color: #b3c6c0; font-size: 12px; }
.link-pages a { color: #e0c68f; }
.site-footer a { color: #b8cec2; }
@media (max-width: 575px) {
    .tools-nav { justify-content: flex-start; padding-top: 15px; }
    .dns-section { margin-top: 42px; }
    .dns-row { grid-template-columns: 45px minmax(0, 1fr); gap: 8px; }
    .dns-row small { grid-column: 2; text-align: left; }
    .admin-intro { padding-top: 45px; }
    .admin-panel { padding: 20px; }
    .link-row { align-items: flex-start; flex-direction: column; }
}