/* ==========================================================================
   ijoo.org — shared calculator chrome (WireGuard IP Calc + IP Calculator)
   ========================================================================== */

/* ==========================================================================
   ijoo.org — WireGuard Calc IP
   ========================================================================== */

.wghero{ padding:48px 0 26px; max-width:74ch; }
.wghero__title{
  font-size:clamp(30px,5.4vw,48px); letter-spacing:-.02em; line-height:1.06;
  padding-bottom:.06em;
  background:linear-gradient(96deg,#fff 6%,var(--cyan) 46%,var(--mag) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wghero__sub{ margin:10px 0 0; font-size:14.5px; color:var(--dim); }

/* ---------------- tabs ---------------- */

.wg__tabs{
  display:flex; flex-wrap:wrap; gap:0; margin-bottom:0;
  border-bottom:1px solid var(--line);
}
.wg__tab{
  padding:11px 20px; cursor:pointer; position:relative;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  color:var(--faint); background:transparent; border:0;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .16s, border-color .16s;
}
.wg__tab:hover{ color:var(--cyan); }
.wg__tab.is-on{ color:var(--mag); border-bottom-color:var(--mag); }

.wg__panel{ padding:26px 0 70px; }

/* ---------------- inputs ---------------- */

.wg__hint{ margin:0 0 16px; font-size:13.5px; color:var(--dim); max-width:70ch; }
.wg__note{ margin:18px 0 0; font-size:12px; color:var(--faint); max-width:70ch; }
.wg__note code{ color:var(--cyan); }

.wg__ta, .wg__in{
  font-family:var(--mono); font-size:13.5px; line-height:1.7; color:var(--text);
  background:rgba(10,3,18,.75); border:1px solid var(--line); border-radius:4px;
  padding:14px 16px; width:100%;
  transition:border-color .16s;
}
.wg__ta{ resize:vertical; min-height:170px; }
.wg__ta:focus, .wg__in:focus{ outline:none; border-color:var(--cyan); }
.wg__ta::placeholder, .wg__in::placeholder{ color:var(--faint); }

.wg__inline{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.wg__in{ width:auto; min-width:220px; }
.wg__in--sm{ min-width:90px; width:90px; text-align:center; }
.wg__slash{ font-size:12px; color:var(--faint); }

.wg__row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }

/* ---------------- output ---------------- */

.wg__out{
  margin:16px 0 0; padding:16px 18px; min-height:20px;
  font-family:var(--mono); font-size:13.5px; line-height:1.75; color:var(--cyan);
  background:rgba(10,3,18,.75); border:1px solid var(--line); border-radius:4px;
  white-space:pre-wrap; word-break:break-all; overflow-x:auto;
}

.wg__status{ margin:14px 0 0; font-size:12px; color:var(--faint); }
.wg__warn{ color:var(--amber); }

.wg__tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.wg__tbl th{
  text-align:left; padding:8px 14px 8px 0; white-space:nowrap;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); font-weight:400; vertical-align:top; width:1%;
  border-bottom:1px solid rgba(255,47,208,.12);
}
.wg__tbl td{ padding:8px 0; color:var(--text); border-bottom:1px solid rgba(255,47,208,.12); }
.wg__tbl tr:hover td{ color:var(--cyan); }

.wg__empty{ margin:0 0 16px; font-size:13px; color:var(--faint); }