/* Kalkulator Subnet IP — memakai palet & token warna dari tema utama PapuaTech (var(--peri) dkk),
   tidak mendefinisikan ulang :root seperti tool MLBB Counter, karena tampilannya memang
   dimaksudkan menyatu dengan tema situs, bukan tema tersendiri. */
.ipcalc-page{padding:140px 5vw 96px;max-width:900px;margin:0 auto}
.ipcalc-page .back-link{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-size:.85rem;margin-bottom:24px}
.ipcalc-page .back-link:hover{color:var(--text)}

.ipc-head h1{font-family:'Unbounded',sans-serif;font-size:1.7rem;margin-bottom:8px}
.ipc-head p{color:var(--muted);margin-bottom:32px;max-width:60ch}

.ipc-form{
  display:grid;grid-template-columns:1.3fr 1fr;gap:24px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;margin-bottom:20px;
}
.ipc-field label{display:block;font-family:'JetBrains Mono';font-size:.75rem;color:var(--muted);margin-bottom:10px}
.ipc-field input[type="text"]{
  width:100%;background:rgba(7,11,30,.7);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;color:var(--text);font-family:'JetBrains Mono';font-size:1rem;outline:none;transition:border-color .2s;
}
.ipc-field input[type="text"]:focus{border-color:var(--peri)}

.ipc-cidr-row{display:flex;align-items:center;gap:10px}
.ipc-cidr-slash{font-family:'JetBrains Mono';color:var(--muted);font-size:1.1rem}
.ipc-cidr-row input[type="number"]{
  width:64px;background:rgba(7,11,30,.7);border:1px solid var(--line);border-radius:10px;
  padding:12px 10px;color:var(--peri);font-family:'JetBrains Mono';font-weight:700;font-size:1rem;outline:none;text-align:center;
}
.ipc-cidr-row input[type="number"]:focus{border-color:var(--peri)}
.ipc-cidr-row input[type="range"]{flex:1;accent-color:var(--peri)}

.ipc-error{
  background:rgba(255,94,122,.1);border:1px solid rgba(255,94,122,.35);color:#ff9fb0;
  padding:12px 16px;border-radius:10px;font-size:.85rem;margin-bottom:20px;
}
.ipc-error.d-none{display:none}

.ipc-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:24px}
.ipc-card{background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:18px}
.ipc-card .lbl{font-family:'JetBrains Mono';font-size:.66rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin-bottom:8px}
.ipc-card .val{font-family:'JetBrains Mono';font-size:1.1rem;font-weight:700;color:var(--text);word-break:break-all}
.ipc-card.accent .val{color:var(--peri)}
.ipc-card.accent2 .val{color:var(--cyan)}

.ipc-binary{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.ipc-binary h3{font-size:.85rem;color:var(--text);margin-bottom:4px;font-weight:700}
.ipc-binary .ipc-bin-legend{font-size:.72rem;color:var(--muted);margin-bottom:16px}
.ipc-binary .ipc-bin-legend b.net{color:var(--peri)}
.ipc-binary .ipc-bin-legend b.host{color:var(--coral)}
.ipc-bin-row{display:flex;gap:14px;align-items:baseline;font-family:'JetBrains Mono';font-size:.92rem;margin-bottom:10px;flex-wrap:wrap}
.ipc-bin-row .bin-label{width:110px;flex-shrink:0;color:var(--muted);font-size:.75rem}
.ipc-bin-row .bin-bits{letter-spacing:1px}
.bin-bit.net{color:var(--peri);font-weight:700}
.bin-bit.host{color:var(--coral);font-weight:700}
.bin-dot{color:var(--muted);margin:0 3px}

@media(max-width:720px){
  .ipc-form{grid-template-columns:1fr}
  .ipc-bin-row{flex-direction:column;gap:4px}
  .ipc-bin-row .bin-label{width:auto}
  /* .bin-bits berisi 32 <span> bit + pemisah — sebagai flex item ia tidak menyusut di bawah
     lebar kontennya sendiri (min-width:auto bawaan flex), jadi malah terpotong ke luar kartu
     alih-alih membungkus. Keluarkan dari konteks flex supaya bisa wrap normal. */
  .ipc-bin-row .bin-bits{display:block;min-width:0;font-size:.8rem;letter-spacing:.5px;line-height:1.6}
}