/* Image-reference design. Scope is strictly the homepage #tool component. */
section#tool.fip-ref-ui {
  --fip-ref-line:#e0ecfa; --fip-ref-ink:#0d2342; --fip-ref-muted:#526a88;
  --fip-ref-surface:#fff; --fip-ref-soft:#f4faff; --fip-ref-green:#15b650;
  font-family:Inter,system-ui,sans-serif;
}
section#tool.fip-ref-ui .dashboard-card {
  background:var(--fip-ref-surface); border:1px solid #e4edf8; border-radius:24px;
  box-shadow:0 22px 70px rgba(9,45,87,.10); color:var(--fip-ref-ink); overflow:hidden;
}
section#tool.fip-ref-ui .dashboard-card::before { display:none; }
section#tool.fip-ref-ui .dashboard-header {
  padding:28px 32px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:transparent; border:0;
}
section#tool.fip-ref-ui .fip-ref-eyebrow {
  display:table; width:max-content; padding:6px 14px; margin-bottom:9px; border-radius:99px;
  color:#fff; font-size:12px; font-weight:700; letter-spacing:.02em; text-transform:none;
  background:linear-gradient(105deg,#13c5b2,#006bf6);
}
section#tool.fip-ref-ui .dashboard-title-group h2 {font-size:clamp(1.4rem,2.5vw,2.2rem);font-weight:800;line-height:1.15;letter-spacing:-.045em;color:var(--fip-ref-ink)}
section#tool.fip-ref-ui .dashboard-title-group p {font-size:clamp(.84rem,1.4vw,1.05rem);color:var(--fip-ref-muted); margin-top:8px;line-height:1.5;}
section#tool.fip-ref-ui .dashboard-header > div:last-child {gap:10px;flex-wrap:wrap}
section#tool.fip-ref-ui #status-badge {background:#effbf2;border:1px solid #d7f3dc;color:#168a39;border-radius:99px;font-size:.78rem;padding:9px 14px;font-weight:650;white-space:nowrap}
section#tool.fip-ref-ui #status-badge.badge-error {background:#fff1f1;border-color:#f4d6d6;color:#c83232}
section#tool.fip-ref-ui #retry-btn {background:#0869f5;color:#fff;border:1px solid #0869f5;border-radius:12px;padding:11px 14px;font-weight:700}
section#tool.fip-ref-ui .dashboard-body {padding:0 32px 28px;}
section#tool.fip-ref-ui .ip-display-area {grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;margin:2px 0 18px;}
section#tool.fip-ref-ui .ip-card {border:1px solid var(--fip-ref-line);border-radius:17px;padding:20px 22px;gap:12px;min-height:196px;box-shadow:none;}
section#tool.fip-ref-ui .ip-card::after {display:none}
section#tool.fip-ref-ui #ipv4-card {background:linear-gradient(116deg,#0477fa 0%,#107ef2 43%,#176bc9 72%,#5cc9bb 120%);border-color:#2ca4ef;color:white;}
section#tool.fip-ref-ui #ipv4-card:hover {background:linear-gradient(116deg,#0477fa 0%,#107ef2 43%,#176bc9 72%,#5cc9bb 120%)}
section#tool.fip-ref-ui #ipv6-card {background:linear-gradient(180deg,var(--fip-ref-surface),var(--fip-ref-soft));}
section#tool.fip-ref-ui .ip-card-label {display:flex;align-items:center;gap:8px;font-size:14px;color:var(--fip-ref-ink);letter-spacing:0;font-weight:700;text-transform:none;min-width:0;}
section#tool.fip-ref-ui .ip-card-label i {color:#1684f8;font-size:19px;flex-shrink:0}
section#tool.fip-ref-ui #ipv4-card .ip-card-label,section#tool.fip-ref-ui #ipv4-card .ip-card-label i {color:white}
section#tool.fip-ref-ui .ip-version-tag {margin-left:auto;border:0;padding:4px 9px;background:#e6f1ff;color:#2d5f9e;font-size:.7rem;letter-spacing:0;font-weight:700;text-transform:none}
section#tool.fip-ref-ui #ipv4-card .ip-version-tag {display:none}
section#tool.fip-ref-ui .fip-ref-public {display:inline-flex;font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.2);white-space:nowrap;}
section#tool.fip-ref-ui .ip-value {font-size:clamp(1.18rem,2.9vw,2.25rem);line-height:1.2;font-weight:800;letter-spacing:-.025em;color:var(--fip-ref-ink);word-break:break-word;}
section#tool.fip-ref-ui #ipv4-display {font-size:clamp(1.65rem,3.4vw,2.55rem);color:#fff;margin:2px 0 0;}
section#tool.fip-ref-ui #ipv6-display {font-size:clamp(1rem,1.8vw,1.35rem);margin:8px 0 12px;word-break:break-all;}
section#tool.fip-ref-ui .ip-card .btn-copy {border-radius:9px;padding:7px 12px;margin:0;background:#e9f3ff;color:#1269e7;border:1px solid #d2e8ff;}
section#tool.fip-ref-ui #ipv4-card .btn-copy {background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.25);}
section#tool.fip-ref-ui .ip-card .badge {font-size:.7rem!important;border-radius:99px;}
section#tool.fip-ref-ui #ipv4-card .badge {background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.2);color:white;}
section#tool.fip-ref-ui #ipv6-card .badge-success {color:#118d45;background:#e1faeb;border-color:#d0f1db;}
section#tool.fip-ref-ui .fip-ref-identity {display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:auto;}
section#tool.fip-ref-ui .fip-ref-identity span {display:inline-flex;align-items:center;gap:8px;background:rgba(0,46,137,.19);border:1px solid rgba(255,255,255,.12);border-radius:99px;padding:7px 10px;color:#fff;font-size:12px;max-width:100%;}
section#tool.fip-ref-ui .fip-ref-identity b {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
section#tool.fip-ref-ui .fip-ref-ipv6-note {margin-top:auto;font-size:12px;color:var(--fip-ref-muted);line-height:1.5}
section#tool.fip-ref-ui .fip-ref-ipv6-note i {color:#18ad63;margin-right:4px}
section#tool.fip-ref-ui .fip-ref-content {display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
section#tool.fip-ref-ui .fip-ref-network,section#tool.fip-ref-ui .fip-ref-map-card {border:1px solid var(--fip-ref-line);border-radius:16px;overflow:hidden;background:var(--fip-ref-surface);}
section#tool.fip-ref-ui .fip-ref-network h3,section#tool.fip-ref-ui .fip-ref-panel-title {min-height:52px;display:flex;align-items:center;justify-content:space-between;padding:12px 18px;font-size:15px;font-weight:750;color:var(--fip-ref-ink);}
section#tool.fip-ref-ui .fip-ref-network h3 i,section#tool.fip-ref-ui .fip-ref-panel-title i {color:#06a8c3;margin-right:8px}
section#tool.fip-ref-ui #info-grid {display:grid;grid-template-columns:1fr;gap:0;}
section#tool.fip-ref-ui #info-grid .info-item {display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:9px;background:transparent;border:0;border-top:1px solid var(--fip-ref-line);border-radius:0;padding:9px 16px;min-height:40px;}
section#tool.fip-ref-ui #info-grid .info-item:nth-child(odd){background:var(--fip-ref-soft)}
section#tool.fip-ref-ui #info-grid .info-item:hover {border-color:var(--fip-ref-line)}
section#tool.fip-ref-ui .info-item-label {margin:0;font-size:11px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--fip-ref-muted);line-height:1.4}
section#tool.fip-ref-ui .info-item-label i {font-size:13px;color:#128adb;margin-right:5px}
section#tool.fip-ref-ui .info-item-value {min-width:0;font-size:12px;font-weight:650;color:var(--fip-ref-ink);overflow-wrap:anywhere}
section#tool.fip-ref-ui .fip-ref-side {display:flex;flex-direction:column;gap:12px}
section#tool.fip-ref-ui .fip-ref-panel-title h3 {font-size:15px;white-space:nowrap;font-weight:750}
section#tool.fip-ref-ui .fip-ref-viewmap {background:#0868f4;border-radius:10px;color:#fff;padding:8px 11px;font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap}
section#tool.fip-ref-ui .fip-ref-viewmap i {color:#fff}
section#tool.fip-ref-ui .fip-ref-map-visual {height:203px;position:relative;overflow:hidden;background:linear-gradient(125deg,#e3eff0,#b5ddf4);}
section#tool.fip-ref-ui #fip-ref-map {height:100%;width:100%;display:none;z-index:1}
section#tool.fip-ref-ui .fip-ref-map-placeholder {position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#35748d;background:linear-gradient(135deg,#ebf4ef,#d2e8f2)}
section#tool.fip-ref-ui .fip-ref-map-placeholder i {font-size:28px}
section#tool.fip-ref-ui .fip-ref-map-placeholder span {font-size:13px;font-weight:700}
section#tool.fip-ref-ui .fip-ref-approx {position:absolute;left:10px;bottom:9px;z-index:3;background:rgba(255,255,255,.88);border-radius:7px;padding:4px 7px;color:#36536b;font-size:10px;font-weight:600}
section#tool.fip-ref-ui .fip-ref-coords {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:8px 10px;}
section#tool.fip-ref-ui .fip-ref-coords > div {display:flex;align-items:center;gap:7px;padding:9px 7px;border-radius:10px;background:var(--fip-ref-soft);min-width:0}
section#tool.fip-ref-ui .fip-ref-coords i {color:#128adb;font-size:15px;}
section#tool.fip-ref-ui .fip-ref-coords span {min-width:0;font-size:10px;color:var(--fip-ref-muted);line-height:1.4}
section#tool.fip-ref-ui .fip-ref-coords strong {display:block;font-size:11px;color:var(--fip-ref-ink);font-weight:750;overflow-wrap:anywhere}
section#tool.fip-ref-ui .fip-ref-notice {display:flex;align-items:center;gap:13px;padding:16px 18px;border-radius:14px;background:linear-gradient(110deg,#f0fdf3,#dff8e9);border:1px solid #d9f4e3;color:#146535;}
section#tool.fip-ref-ui .fip-ref-notice > i {font-size:27px;color:#13a549}
section#tool.fip-ref-ui .fip-ref-notice b {display:block;font-size:13px}
section#tool.fip-ref-ui .fip-ref-notice small {display:block;color:#477459;font-size:11px;line-height:1.5;margin-top:4px}
section#tool.fip-ref-ui .fip-ref-actions {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
section#tool.fip-ref-ui .fip-ref-actions button {display:flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:11px;min-height:45px;background:#edf4fb;color:#144473;font-size:12px;font-weight:750;cursor:pointer;}
section#tool.fip-ref-ui .fip-ref-actions button.fip-ref-primary {color:#fff;background:linear-gradient(90deg,#0878fc,#0b61ed)}
section#tool.fip-ref-ui .fip-ref-actions button:disabled {opacity:.55;cursor:not-allowed}
section#tool.fip-ref-ui .fip-ref-actions button:focus-visible,section#tool.fip-ref-ui .fip-ref-viewmap:focus-visible {outline:3px solid #39b9f7;outline-offset:2px}
section#tool.fip-ref-ui .privacy-notice {margin-top:16px;}
section#tool.fip-ref-ui .privacy-notice p {font-size:11px;line-height:1.55;}
/* Dark mode follows the site's existing html[data-theme] switch. */
html[data-theme="dark"] section#tool.fip-ref-ui {--fip-ref-surface:#0f2039;--fip-ref-soft:#142b48;--fip-ref-line:#264664;--fip-ref-ink:#f0f7ff;--fip-ref-muted:#a7bbd0;}
html[data-theme="dark"] section#tool.fip-ref-ui .dashboard-card {border-color:#274663;background:#0b192d;box-shadow:0 18px 55px rgba(0,0,0,.35)}
html[data-theme="dark"] section#tool.fip-ref-ui #ipv6-card {background:#10243d}
html[data-theme="dark"] section#tool.fip-ref-ui #status-badge {color:#5ce9ab;background:#0c393c;border-color:#20565d}
html[data-theme="dark"] section#tool.fip-ref-ui .fip-ref-notice {background:#103a37;border-color:#20564a;color:#c4fce0}
html[data-theme="dark"] section#tool.fip-ref-ui .fip-ref-notice small {color:#9dd9c3}
html[data-theme="dark"] section#tool.fip-ref-ui .fip-ref-actions button {background:#1a3352;color:#e4f2ff}
html[data-theme="dark"] section#tool.fip-ref-ui .fip-ref-actions .fip-ref-primary {background:linear-gradient(90deg,#0879fa,#0b60ee)}
@media (max-width:850px) {
 section#tool.fip-ref-ui .dashboard-header {align-items:flex-start}
 section#tool.fip-ref-ui .ip-display-area,section#tool.fip-ref-ui .fip-ref-content {grid-template-columns:1fr}
}
@media (max-width:540px) {
 section#tool.fip-ref-ui .dashboard-card {border-radius:17px}
 section#tool.fip-ref-ui .dashboard-header {padding:18px 17px 16px}
 section#tool.fip-ref-ui .dashboard-title-group h2 {font-size:1.37rem}
 section#tool.fip-ref-ui .dashboard-title-group p {font-size:.84rem}
 section#tool.fip-ref-ui .dashboard-body {padding:0 13px 19px}
 section#tool.fip-ref-ui .ip-display-area {gap:12px;margin-bottom:14px}
 section#tool.fip-ref-ui .ip-card {padding:19px 16px;min-height:175px}
 section#tool.fip-ref-ui #ipv4-display {font-size:clamp(1.52rem,6.7vw,2.1rem)}
 section#tool.fip-ref-ui #ipv6-display {font-size:clamp(.96rem,4.1vw,1.25rem)}
 section#tool.fip-ref-ui .fip-ref-actions {grid-template-columns:repeat(2,1fr)}
 section#tool.fip-ref-ui .fip-ref-content {gap:12px}
 section#tool.fip-ref-ui .fip-ref-network h3,section#tool.fip-ref-ui .fip-ref-panel-title {padding:12px}
 section#tool.fip-ref-ui .fip-ref-map-visual {height:185px}
 section#tool.fip-ref-ui .fip-ref-identity span {font-size:11px}
}
/* Override the homepage's generic `section {padding:...}` rule for nested cards only. */
section#tool.fip-ref-ui section.fip-ref-network,
section#tool.fip-ref-ui section.fip-ref-map-card {padding:0!important;margin:0;}
section#tool.fip-ref-ui .fip-ref-network h3 {justify-content:flex-start;}
@media (max-width:540px) {
 section#tool.fip-ref-ui .dashboard-header {flex-direction:column;align-items:stretch;gap:12px;}
 section#tool.fip-ref-ui .dashboard-header > div:last-child {order:-1;justify-content:space-between;align-self:stretch;}
 section#tool.fip-ref-ui .fip-ref-eyebrow {display:none;}
}