/* System fonts only (no remote fonts). Logical properties keep the layout correct in RTL (ar, ur). */
:root {
  --fg: #12202b;
  --muted: #475569;
  --bg: #f7faf9;
  --card: #ffffff;
  --line: #cbd5d1;
  --accent: #0f766e;
  --accent-fg: #ffffff;
  --err: #b42318;
  --err-bg: #fef3f2;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", "Noto Naskh Arabic",
    "Noto Nastaliq Urdu", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Tamil", "Noto Sans Telugu",
    "Noto Sans Thai", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.wrap { max-inline-size: 42rem; margin-inline: auto; padding: 1rem; }
.top { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; justify-content: space-between; align-items: flex-start; }
h1 { margin: 0; font-size: 1.6rem; line-height: 1.2; }
h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.tagline { margin: 0.2rem 0 0; color: var(--muted); }
.lang { display: flex; flex-direction: column; gap: 0.2rem; min-inline-size: 10rem; }
.lead { margin-block: 1rem; }
label { font-weight: 600; }
.field { margin-block-end: 0.9rem; }
input[type="text"], select, textarea {
  inline-size: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: #fff;
  color: inherit;
  font: inherit;
}
input[type="text"] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: start; }
input[aria-invalid="true"] { border-color: var(--err); outline: 2px solid var(--err); outline-offset: 0; }
textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; resize: vertical; }
.hint { margin: 0.2rem 0 0; font-size: 0.875rem; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 0.75rem; }
button {
  min-block-size: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: #fff;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}
.status { min-block-size: 1.5rem; margin-block: 0.5rem; color: var(--muted); }
.errors { margin-block: 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--err); border-radius: 0.4rem; background: var(--err-bg); color: var(--err); }
.errors ul { margin: 0; padding-inline-start: 1.25rem; }
.result { margin-block: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--card); }
dl { display: grid; grid-template-columns: 1fr; gap: 0.15rem 1rem; margin: 0; }
dt { font-weight: 600; color: var(--muted); margin-block-start: 0.5rem; }
dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 30rem) {
  dl { grid-template-columns: minmax(9rem, max-content) 1fr; }
  dt { margin-block-start: 0; }
}
/* IP addresses, masks, prefixes and counts are always ASCII and always left-to-right, even inside RTL pages. */
.num { direction: ltr; unicode-bidi: isolate; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.note { margin-block: 0.75rem 0; color: var(--muted); }
details { margin-block-start: 0.5rem; }
summary { cursor: pointer; font-weight: 600; padding-block: 0.4rem; }
.notice { padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: 0.4rem; background: #fff7ed; }
.foot { margin-block-start: 1.5rem; padding-block-start: 1rem; border-block-start: 1px solid var(--line); font-size: 0.875rem; color: var(--muted); }
.foot p { margin-block: 0.4rem; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }