.ip-hero { padding: 36px 0 24px; }
.ip-hero h1 { margin: 12px 0 8px; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.2; }
.ip-hero .lede { max-width: 760px; color: var(--muted); }
.ip-workspace { display: grid; gap: 24px; padding-bottom: 48px; }
.ip-panel { padding: clamp(20px, 4vw, 38px); min-width: 0; background: var(--paper); }
.ip-main { border-top: 4px solid var(--brand); }
.ip-eyebrow { color: var(--brand); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; }
.ip-main h2 { font-size: 1rem; font-weight: 400; color: var(--muted); margin: 0; }
.ip-address { display: flex; align-items: center; min-height: 108px; margin: 8px 0; color: var(--brand); font: 600 clamp(1.65rem, 4.8vw, 3.6rem)/1.25 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; word-break: break-word; }
.ip-status { min-height: 28px; color: var(--muted); margin: 8px 0; }
.ip-versions, .ip-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 24px 0 0; }
.ip-versions > div, .ip-details > div { padding: 14px 0; border-top: 1px solid var(--line); min-width: 0; }
.ip-details dt, .ip-versions dt { font-size: .85rem; color: var(--muted); }
.ip-details dd, .ip-versions dd { margin: 5px 0 0; overflow-wrap: anywhere; }
.ip-versions dd { font-family: ui-monospace, Consolas, monospace; }
.ip-panel h2 { margin-top: 0; }
.ip-panel p { color: var(--muted); }
.ip-panel a { color: var(--brand); }
.ip-error { color: var(--danger); }
.ip-main[aria-busy="true"] .ip-address:empty { background: var(--soft); border-radius: 10px; }
.ip-main .button-row { margin: 14px 0 0; }
.ip-note { font-size: .9rem; }
@media (max-width: 540px) { .ip-details, .ip-versions { grid-template-columns: minmax(0, 1fr); } .ip-address { min-height: 132px; } }