/* assets/subnet.css */
.nr-subnet{
  --c-bg: var(--wp--preset--color--base,#fff);
  --c-surface: color-mix(in oklab, var(--c-bg), black 6%);
  --c-text: var(--wp--preset--color--contrast,inherit);
  --c-muted: color-mix(in oklab, var(--c-text), transparent 55%);
  --c-primary: var(--wp--preset--color--primary,#0a66c2);
  --c-border: color-mix(in oklab, var(--c-text), transparent 80%);
  color: var(--c-text);
}
.nr-subnet__title{margin:0 0 .5rem; font-weight:600}
.nr-subnet__intro{margin:0 0 1rem; color:var(--c-muted)}

/* Tabs */
.nr-subnet__tabs{display:flex; gap:.4rem; margin-bottom:.6rem}
.nr-subnet__tab{appearance:none; border:1px solid var(--c-border); background:var(--c-surface); color:inherit; padding:.45rem .8rem; border-radius:6px; cursor:pointer}
.nr-subnet__tab.is-active{border-color:var(--c-primary); box-shadow:0 0 0 1px var(--c-primary) inset}
.nr-subnet__panel{display:none}
.nr-subnet__panel.is-active{display:block}

.nr-subnet__grid{display:grid; gap:1rem; grid-template-columns:1fr}
@media(min-width: 900px){.nr-subnet__grid{grid-template-columns:1fr 1fr}}

.nr-subnet__card{background:var(--c-surface); border:1px solid var(--c-border); border-radius:8px; padding:1rem}
.nr-subnet__card-title{margin:0 0 .6rem; font-weight:600}

.nr-subnet__label{display:block; margin:.6rem 0; font-size:.95em}
.nr-subnet__input{width:100%; padding:.55rem .7rem; border:1px solid var(--c-border); border-radius:6px; background:var(--c-bg); color:inherit; font:inherit; box-sizing:border-box}

.nr-subnet__range{width:100%}
.nr-subnet__range-val{font-size:.9em; color:var(--c-muted)}

.nr-subnet__split{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}

.nr-subnet__actions{display:flex; gap:.6rem; margin-top:.8rem; flex-wrap:wrap}
.nr-subnet__btn{appearance:none; border:1px solid var(--c-primary); background:var(--c-primary); color:#fff; padding:.5rem .9rem; border-radius:6px; cursor:pointer; font:inherit}
.nr-subnet__btn--alt{background:transparent; color:var(--c-primary)}
.nr-subnet__btn--ghost{background:transparent; color:inherit; border-color:var(--c-border)}

.nr-subnet__error{color:#b00020; min-height:1.25em; margin-top:.4rem}

.nr-subnet__table{display:grid; grid-template-columns:1fr 1fr; gap:.5rem .8rem}
.nr-subnet__table > div{display:contents}
.nr-subnet__table span{color:var(--c-muted)}
.nr-subnet__table output{display:block; padding:.4rem .6rem; background:var(--c-bg); border:1px solid var(--c-border); border-radius:6px; word-break:break-all}

.nr-subnet *{box-sizing:border-box}