/* Calculateur de sous-réseau — autonome, theme-aware, aucune dépendance externe. */
:root {
  --sn-bg: #f7f7fb; --sn-surface: #ffffff; --sn-border: #e4e4ee;
  --sn-text: #1b1b28; --sn-muted: #6b6b7d; --sn-accent: #6d28d9;
  --sn-danger: #b91c1c; --sn-head: #f0effa;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sn-bg: #14141b; --sn-surface: #1e1e29; --sn-border: #2e2e3d;
    --sn-text: #ececf2; --sn-muted: #9a9aae; --sn-accent: #a78bfa;
    --sn-danger: #f87171; --sn-head: #24243250;
  }
}
:root[data-theme="dark"] {
  --sn-bg: #14141b; --sn-surface: #1e1e29; --sn-border: #2e2e3d;
  --sn-text: #ececf2; --sn-muted: #9a9aae; --sn-accent: #a78bfa;
  --sn-danger: #f87171; --sn-head: #24243250;
}
:root[data-theme="light"] {
  --sn-bg: #f7f7fb; --sn-surface: #ffffff; --sn-border: #e4e4ee;
  --sn-text: #1b1b28; --sn-muted: #6b6b7d; --sn-accent: #6d28d9;
  --sn-danger: #b91c1c; --sn-head: #f0effa;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--sn-bg); color: var(--sn-text);
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.5;
}
.sn { max-width: 640px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }
.sn-back { color: var(--sn-accent); text-decoration: none; font-size: .9rem; }
.sn-back:hover { text-decoration: underline; }
.sn h1 { margin: .8rem 0 .3rem; font-size: 1.6rem; }
.sn-sub { color: var(--sn-muted); margin: 0 0 1.5rem; }
.sn-sub code { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }

.sn-form { display: flex; gap: .6rem; margin-bottom: 1rem; }
.sn-input {
  flex: 1; padding: .7rem .9rem; font-size: 1rem;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--sn-surface); color: var(--sn-text);
  border: 1px solid var(--sn-border); border-radius: 10px;
}
.sn-input:focus-visible { outline: 2px solid var(--sn-accent); outline-offset: 1px; }
.sn-btn {
  padding: .7rem 1.2rem; font-size: 1rem; font-weight: 600; cursor: pointer;
  background: var(--sn-accent); color: #fff; border: none; border-radius: 10px;
}
.sn-btn:hover { filter: brightness(1.05); }

.sn-error { color: var(--sn-danger); font-weight: 600; margin: .5rem 0; }

.sn-table {
  width: 100%; border-collapse: collapse;
  background: var(--sn-surface); border: 1px solid var(--sn-border); border-radius: 12px;
  overflow: hidden;
}
.sn-table th, .sn-table td { text-align: left; padding: .65rem .9rem; border-bottom: 1px solid var(--sn-border); }
.sn-table tr:last-child th, .sn-table tr:last-child td { border-bottom: none; }
.sn-table th { width: 48%; color: var(--sn-muted); font-weight: 500; background: var(--sn-head); }
.sn-table td {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
}