/* ip.itzgee.com — the redesign (2026-09-28). Shared tokens, header and footer from /embed/header.css. */
[hidden] { display: none !important; }
code { font-family: var(--mono); font-size: .9em; padding: .05em .35em; border: 1px solid var(--hair-2); border-radius: 5px; background: var(--surface); }

/* hero */
.i-hero { position: relative; padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0 clamp(3rem, 2rem + 4vw, 5rem); border-bottom: 1px solid var(--hair); overflow: hidden; }
.i-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--hair) 1px, transparent 1px), linear-gradient(90deg, var(--hair) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 60% 90% at 80% 20%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 60% 90% at 80% 20%, #000 10%, transparent 70%); pointer-events: none; }
.i-hero-in { position: relative; }
.i-hero h1 { margin-top: var(--s3); font-size: clamp(2.4rem, 1.3rem + 3.8vw, 4.5rem); letter-spacing: -0.045em; line-height: 1; max-width: 900px; }

.banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s5); padding: var(--s2) var(--s3); border: 1px solid var(--hair-2); border-radius: var(--r-panel); background: var(--surface); }
.banner .led { width: 12px; height: 12px; border-radius: 50%; background: var(--text-3); flex: none; }
.led--ok { background: var(--live) !important; box-shadow: 0 0 0 4px var(--live-soft); }
.led--warn { background: var(--warn) !important; }
.led--down { background: var(--down) !important; }
.b-t { min-width: 0; flex: 1 1 260px; }
.b-verdict { font-size: var(--fs-lead); font-weight: 560; letter-spacing: -0.015em; }
.b-sub { color: var(--text-2); font-size: var(--fs-small); overflow-wrap: anywhere; }
.b-tag { height: 26px; display: inline-flex; align-items: center; padding: 0 .65rem; border: 1px solid var(--hair-2); border-radius: 999px; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.banner.secured { border-color: color-mix(in srgb, var(--live) 40%, transparent); }
.banner.secured .b-tag { color: var(--live); border-color: color-mix(in srgb, var(--live) 40%, transparent); }
.banner.tor .b-tag, .banner.anon .b-tag { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.banner.direct .b-tag, .banner.error .b-tag { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, transparent); }
.re { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: 0 .9rem; border: 1px solid var(--edge); border-radius: var(--r-small); background: none; color: var(--text); font: inherit; font-size: .875rem; cursor: pointer; }
.re svg { width: 15px; height: 15px; }
.re.spin svg { animation: spin .8s linear 1; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (hover: hover) { .re:hover { background: var(--surface-2); } }

.delta { margin-top: var(--s1); padding: var(--s2) var(--s3); border: 1px dashed var(--edge); border-radius: var(--r-small); font-size: var(--fs-small); color: var(--text-2); display: grid; gap: .3rem; }
.d-t { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.d-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.d-k { min-width: 6rem; color: var(--text-3); }
.d-old { text-decoration: line-through; color: var(--text-3); }
.d-new { color: var(--text); }

.i-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s4); margin-top: var(--s5); align-items: start; }
.ipblock { position: relative; cursor: copy; min-width: 0; }
.hero-ip { margin-top: var(--s2); font-size: clamp(2.2rem, 1rem + 5.2vw, 5.2rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; overflow-wrap: anywhere; }
.copied { position: absolute; top: 0; right: 0; opacity: 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--live); transition: opacity .2s; }
.ipblock.flash .copied { opacity: 1; }
.ident { margin-top: var(--s2); font-size: var(--fs-lead); color: var(--text); }
.hero-meta { margin-top: .4rem; color: var(--text-2); font-size: var(--fs-small); }
.skeleton { color: var(--text-3); }
.loc-card { display: grid; gap: .3rem; padding: var(--s3); border: 1px solid var(--hair-2); border-radius: var(--r-panel); background: var(--surface); }
.loc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s1); }
.loc-code { min-width: 40px; height: 30px; display: inline-grid; place-items: center; padding: 0 .5rem; border: 1px solid var(--edge); border-radius: 6px; font-size: .875rem; font-weight: 600; }
.loc-code:empty { display: none; }
.loc-city { font-size: 1.9rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.loc-country { color: var(--text-2); }
.loc-coords { font-size: .8125rem; color: var(--text-3); }
.loc-note { margin-top: var(--s1); padding-top: var(--s1); border-top: 1px solid var(--hair); font-size: .8125rem; color: var(--text-3); }
@media (max-width: 860px) { .i-body { grid-template-columns: 1fr; } }

/* sections */
.i-sec { padding-top: var(--section); }
.i-sec:last-child { padding-bottom: var(--s8); }
.i-head { display: grid; gap: var(--s2); margin-bottom: var(--s5); max-width: 760px; }
.i-head .label b, .dnsband .label b { color: var(--text); font-weight: 500; }
.i-head h2, .dnsband h2 { font-size: var(--fs-h2); }
.i-p { color: var(--text-2); max-width: 620px; }

/* the three checks */
.checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.chk { display: grid; align-content: start; gap: .4rem; padding: var(--s3); border: 1px solid var(--hair-2); border-radius: var(--r-panel); background: var(--surface); min-width: 0; }
.chk h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; }
.chk-q { color: var(--text-2); font-size: var(--fs-small); margin-bottom: var(--s1); }
.chk-out { display: grid; gap: .4rem; }
.chk-out .out { color: var(--text-3); font-family: var(--mono); font-size: .8125rem; }
.kv { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--hair); font-size: .875rem; }
.kk { color: var(--text-3); font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding-top: .15rem; }
.kd { overflow-wrap: anywhere; }
.kd.mono-ip { font-family: var(--mono); font-size: .8125rem; }
.verdict { margin-top: var(--s1); padding: .7rem .85rem; border-radius: var(--r-small); border-left: 3px solid var(--edge); background: var(--surface-2); font-size: .875rem; line-height: 1.5; }
.verdict.ok { border-left-color: var(--live); }
.verdict.warn { border-left-color: var(--warn); }
.verdict.bad { border-left-color: var(--down); }
@media (max-width: 960px) { .checks { grid-template-columns: 1fr; } }

/* DNS band */
.dnsband { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4); align-items: end; padding: var(--s5); border: 1px solid var(--hair-2); border-radius: var(--r-panel); background: var(--surface); }
.dnsband > div { display: grid; gap: var(--s2); }
@media (max-width: 760px) { .dnsband { grid-template-columns: 1fr; padding: var(--s4) var(--s3); } }

/* look something up */
.lookup-form { display: flex; align-items: center; gap: .7rem; max-width: 760px; min-height: 56px; padding: 0 .45rem 0 1rem; border: 1px solid var(--edge); border-radius: var(--r-small); background: var(--bg); }
.lookup-form:focus-within { outline: 2px solid var(--text); outline-offset: 1px; }
.lookup-form svg { width: 18px; height: 18px; color: var(--text-2); flex: none; }
.lp-input { flex: 1; min-width: 0; height: 52px; border: 0; background: none; color: var(--text); font: inherit; font-family: var(--mono); font-size: .95rem; outline: none; }
.lp-input::placeholder { color: var(--text-3); font-family: var(--font); }
.lookup-form .btn { min-height: 42px; }
.lookup-recent { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--s2); }
.lr-chip { min-height: 32px; padding: 0 .75rem; border: 1px solid var(--hair-2); border-radius: 999px; background: none; color: var(--text-2); font-family: var(--mono); font-size: .8125rem; cursor: pointer; }
@media (hover: hover) { .lr-chip:hover { color: var(--text); border-color: var(--edge); } }
.lookup-result { margin-top: var(--s3); max-width: 760px; }
.lr-card { padding: var(--s2) var(--s3); border: 1px solid var(--hair-2); border-radius: var(--r-panel); background: var(--surface); }
.lr-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s2); padding: .7rem 0; border-top: 1px solid var(--hair); }
.lr-row:first-child { border-top: 0; }
.lr-k { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding-top: .15rem; }
.lr-v { overflow-wrap: anywhere; }
.lr-v .on { color: var(--warn); }
.lr-msg { color: var(--text-2); padding: .5rem 0; }

/* in plain English */
.guide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s6); }
.i-head--pin { position: sticky; top: 104px; align-self: start; }
.manual { border-top: 1px solid var(--hair-2); }
.manual article { padding: var(--s4) 0; border-bottom: 1px solid var(--hair); display: grid; gap: .6rem; }
.manual h3 { font-size: var(--fs-lead); font-weight: 560; letter-spacing: -0.015em; }
.manual p { color: var(--text-2); }
.manual b { color: var(--text); font-weight: 560; }
.i-note { margin-top: var(--s6); max-width: 700px; color: var(--text-3); font-size: var(--fs-small); }
@media (max-width: 900px) { .guide { grid-template-columns: 1fr; gap: var(--s3); } .i-head--pin { position: static; } }
@media (max-width: 560px) { .kv, .lr-row { grid-template-columns: 1fr; gap: .15rem; } }

/* /dns/ */
.i-back { display: inline-flex; margin-bottom: var(--s3); font-size: var(--fs-small); color: var(--text-2); }
.i-lede { margin-top: var(--s3); max-width: 640px; font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); }
.i-p b { color: var(--text); font-weight: 560; }
.checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dnsband--plain { grid-template-columns: 1fr; }
.chk-out .tl.out { color: var(--text-3); font-family: var(--mono); font-size: .8125rem; }
@media (hover: hover) { .i-back:hover { color: var(--text); } }
@media (max-width: 960px) { .checks--2 { grid-template-columns: 1fr; } }