/* =========================================================================
   ASN Lookup (/asn-lookup)
   Shares the IP-tools teal family so it reads as a sibling of
   /asn-ip-owner-lookup and /what-is-my-ip, which it cross-links with.
   Scoped entirely under .asnl-page.
   ========================================================================= */

.asnl-page{
  --a-primary:#0f766e;
  --a-primary-dark:#0b5d57;
  --a-primary-soft:#ecfdf5;
  --a-accent:#0891b2;
  --a-accent-soft:#ecfeff;
  --a-text:#102a2e;
  --a-soft:#415678;
  --a-muted:#667085;
  --a-line:#d9e8e7;
  --a-surface:#fff;
  --a-page:#f5fbfa;
  --a-success:#109447;
  --a-success-soft:#effbf4;
  --a-warning:#d97706;
  --a-warning-soft:#fff7ed;
  --a-danger:#d92d20;
  --a-danger-soft:#fff1f0;
  --a-purple:#7c3aed;
  --a-purple-soft:#f4efff;
  --a-shadow:0 14px 38px rgba(15,118,110,.08);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--a-text);
}
.asnl-page *{box-sizing:border-box}
.asnl-page a{color:inherit}
.asnl-page button,.asnl-page input{font:inherit}
.asnl-page button{cursor:pointer}
.asnl-page code{font-family:"SFMono-Regular",Consolas,monospace}
.asnl-page .page-shell{width:min(1440px,calc(100% - 32px));margin:0 auto;padding:24px 0 48px}
.asnl-page .hidden{display:none!important}

/* ---------- hero ---------- */
.asnl-page .hero{
  position:relative;overflow:hidden;padding:34px;border-radius:26px;
  border:1px solid #cce5e1;
  background:
    radial-gradient(circle at 88% 20%, rgba(8,145,178,.14), transparent 24%),
    linear-gradient(135deg,#fbfffe 0%,#eaf9f6 100%);
  box-shadow:var(--a-shadow);
}
.asnl-page .hero-heading{display:flex;align-items:center;gap:18px;max-width:920px}
.asnl-page .hero-icon{
  width:74px;height:74px;flex:0 0 74px;display:grid;place-items:center;border-radius:50%;
  color:#fff;font-size:30px;
  background:linear-gradient(145deg,#14b8a6,var(--a-primary-dark));
  border:7px solid rgba(255,255,255,.85);box-shadow:0 12px 26px rgba(15,118,110,.24);
}
.asnl-page h1{margin:0;font-size:clamp(1.8rem,3.6vw,2.9rem);letter-spacing:-.04em;line-height:1.08}
.asnl-page .hero-copy p{margin:9px 0 0;color:var(--a-soft);font-size:1rem;line-height:1.6}

/* ---------- controls ---------- */
.asnl-page .controls{margin-top:24px;display:grid;gap:13px}
.asnl-page .target-row{display:grid;grid-template-columns:1fr auto;gap:12px}
.asnl-page .input-wrap{position:relative}
.asnl-page .input-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--a-muted)}
.asnl-page .target-input{
  width:100%;height:54px;padding:0 16px 0 44px;border-radius:14px;border:1px solid var(--a-line);
  outline:none;background:#fff;font-size:.95rem;box-shadow:0 4px 14px rgba(16,24,40,.04);
  transition:border-color .15s,box-shadow .15s;
}
.asnl-page .target-input:focus{border-color:var(--a-primary);box-shadow:0 0 0 4px rgba(15,118,110,.12)}
.asnl-page .start-btn{
  min-width:150px;height:54px;padding:0 24px;border:0;border-radius:14px;font-weight:850;color:#fff;
  background:linear-gradient(135deg,var(--a-primary),var(--a-primary-dark));
  box-shadow:0 11px 22px rgba(15,118,110,.22);
}
.asnl-page .start-btn:disabled{opacity:.65;cursor:not-allowed}

.asnl-page .sample-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.8rem;color:var(--a-muted);font-weight:700}
.asnl-page .sample-chip{
  padding:7px 12px;border-radius:999px;border:1px solid var(--a-line);background:#fff;
  font-size:.78rem;font-weight:750;color:var(--a-soft);transition:border-color .15s,background .15s;
}
.asnl-page .sample-chip:hover{border-color:var(--a-primary);background:var(--a-primary-soft);color:var(--a-primary-dark)}

.asnl-page .message{display:none;padding:11px 14px;border-radius:11px;font-size:.88rem}
.asnl-page .message.show{display:block}
.asnl-page .message.success{color:var(--a-success);background:var(--a-success-soft);border:1px solid #b9e3c8}
.asnl-page .message.error{color:var(--a-danger);background:var(--a-danger-soft);border:1px solid #f4c6c1}
.asnl-page .message.warning{color:var(--a-warning);background:var(--a-warning-soft);border:1px solid #fcd9a8}

.asnl-page .loading-line{display:none;height:4px;border-radius:999px;overflow:hidden;background:rgba(15,118,110,.12)}
.asnl-page .loading-line.show{display:block}
.asnl-page .loading-line::after{content:"";display:block;width:34%;height:100%;background:var(--a-primary);animation:asnlLoad 1.1s ease-in-out infinite}
@keyframes asnlLoad{from{transform:translateX(-110%)}to{transform:translateX(310%)}}

.asnl-page .empty-state{
  margin-top:18px;padding:40px 22px;border:1px dashed #c9e0dc;border-radius:20px;
  color:var(--a-muted);background:rgba(255,255,255,.7);text-align:center;font-size:.92rem;line-height:1.6;
}

/* ---------- results ---------- */
.asnl-page .results{display:none;margin-top:18px}
.asnl-page .results.show{display:block}
.asnl-page .card{border:1px solid var(--a-line);border-radius:20px;background:var(--a-surface);box-shadow:0 8px 26px rgba(16,24,40,.045)}
.asnl-page .panel{padding:20px}
.asnl-page .panel-title{display:flex;align-items:center;gap:10px;margin:0;font-size:1rem}
.asnl-page .panel-title span:first-child{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--a-primary-soft);color:var(--a-primary)}
.asnl-page .panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.asnl-page .panel-copy{margin:12px 0 14px;color:var(--a-muted);font-size:.83rem;line-height:1.6}

/* ---------- holder headline ---------- */
.asnl-page .holder-card{
  padding:24px;margin-bottom:16px;
  background:
    radial-gradient(circle at 92% 10%, rgba(8,145,178,.10), transparent 26%),
    linear-gradient(145deg,#fff,var(--a-primary-soft));
}
.asnl-page .holder-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.asnl-page .holder-badge{
  padding:11px 16px;border-radius:14px;background:var(--a-primary-dark);color:#fff;
  font-family:"SFMono-Regular",Consolas,monospace;font-size:1.05rem;font-weight:900;letter-spacing:-.02em;
  box-shadow:0 8px 18px rgba(11,93,87,.28);flex:0 0 auto;
}
.asnl-page .holder-body{flex:1 1 240px;min-width:0}
.asnl-page .holder-body h2{margin:0;font-size:1.3rem;font-weight:900;letter-spacing:-.02em;overflow-wrap:anywhere}
.asnl-page .holder-body p{margin:4px 0 0;color:var(--a-muted);font-size:.86rem}
.asnl-page .announced-pill{
  padding:7px 14px;border-radius:999px;font-size:.76rem;font-weight:850;white-space:nowrap;
  border:1px solid var(--a-line);background:#fff;color:var(--a-muted);
}
.asnl-page .announced-pill.is-live{color:var(--a-success);background:var(--a-success-soft);border-color:#b9e3c8}
.asnl-page .announced-pill.is-idle{color:var(--a-warning);background:var(--a-warning-soft);border-color:#fcd9a8}

/* ---------- metrics ---------- */
.asnl-page .summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.asnl-page .metric-card{padding:18px;display:flex;align-items:center;gap:14px;min-height:100px}
.asnl-page .metric-icon{
  width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;border-radius:50%;
  background:var(--a-primary-soft);color:var(--a-primary);font-size:1.1rem;
}
.asnl-page .metric-icon.purple{background:var(--a-purple-soft);color:var(--a-purple)}
.asnl-page .metric-icon.green{background:var(--a-success-soft);color:var(--a-success)}
.asnl-page .metric-icon.orange{background:var(--a-warning-soft);color:var(--a-warning)}
.asnl-page .metric-label{display:block;color:#475467;font-size:.75rem;font-weight:850}
.asnl-page .metric-value{display:block;margin-top:3px;font-size:1.35rem;font-weight:900;font-variant-numeric:tabular-nums}
.asnl-page .metric-sub{display:block;margin-top:2px;color:var(--a-muted);font-size:.75rem}

/* ---------- detail table ---------- */
.asnl-page .main-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.asnl-page .detail-table{border:1px solid var(--a-line);border-radius:13px;overflow:hidden}
.asnl-page .detail-row{
  display:grid;grid-template-columns:minmax(150px,.8fr) minmax(0,1.2fr);gap:14px;
  padding:12px 14px;border-bottom:1px solid #edf3f2;
}
.asnl-page .detail-row:last-child{border-bottom:0}
.asnl-page .detail-key{color:#344054;font-size:.79rem;font-weight:850}
.asnl-page .detail-value{color:#475467;font-size:.79rem;overflow-wrap:anywhere}

/* ---------- neighbours ---------- */
.asnl-page .neighbour-groups{display:grid;gap:16px}
.asnl-page .neighbour-label{
  margin:0 0 8px;color:var(--a-muted);font-size:.7rem;font-weight:850;
  text-transform:uppercase;letter-spacing:.05em;
}
.asnl-page .neighbour-list{display:flex;flex-wrap:wrap;gap:7px}
.asnl-page .neighbour-chip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:10px;
  border:1px solid var(--a-line);background:#fbfdfd;font-size:.78rem;font-weight:750;
  color:var(--a-soft);text-decoration:none;transition:border-color .15s,background .15s,transform .15s;
}
.asnl-page .neighbour-chip:hover{border-color:var(--a-primary);background:var(--a-primary-soft);transform:translateY(-1px)}
.asnl-page .neighbour-chip .peers{color:var(--a-muted);font-size:.71rem;font-weight:650}
.asnl-page .stack-empty{margin:0;color:var(--a-muted);font-size:.82rem;line-height:1.6}

/* ---------- prefixes ---------- */
.asnl-page .prefix-tabs{display:flex;gap:6px}
.asnl-page .prefix-tab{
  padding:7px 15px;border-radius:999px;border:1px solid var(--a-line);background:#fff;
  font-size:.78rem;font-weight:800;color:var(--a-muted);transition:.15s;
}
.asnl-page .prefix-tab.is-active{background:var(--a-primary);border-color:var(--a-primary);color:#fff}
.asnl-page .prefix-tab:disabled{opacity:.45;cursor:not-allowed}
.asnl-page .prefix-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:7px;
  max-height:340px;overflow-y:auto;
}
.asnl-page .prefix-item{
  padding:8px 11px;border:1px solid var(--a-line);border-radius:9px;background:#fbfdfd;
  font-family:"SFMono-Regular",Consolas,monospace;font-size:.77rem;color:var(--a-primary-dark);
  overflow-wrap:anywhere;
}

.asnl-page .note-card{
  margin-top:16px;padding:16px 18px;border-left:4px solid var(--a-primary);border-radius:11px;
  color:#315d5a;background:var(--a-primary-soft);font-size:.86rem;line-height:1.6;
}

@media (max-width:1100px){
  .asnl-page .summary-grid{grid-template-columns:repeat(2,1fr)}
  .asnl-page .main-grid{grid-template-columns:1fr}
}
@media (max-width:780px){
  .asnl-page .page-shell{width:min(100% - 20px,1440px)}
  .asnl-page .hero{padding:22px 18px}
  .asnl-page .hero-heading{align-items:flex-start}
  .asnl-page .hero-icon{width:56px;height:56px;flex-basis:56px;font-size:24px}
  .asnl-page .target-row{grid-template-columns:1fr}
  .asnl-page .summary-grid{grid-template-columns:1fr}
  .asnl-page .detail-row{grid-template-columns:1fr;gap:4px}
}