:root {
    --bg1: #ffe9d6; --bg2: #ffd6e8; --card: #fffdfa;
    --ink: #4a3b34; --muted: #9b877c; --line: #efe6dd;
    --ok: #2f9e6e; --err: #c0564b; --warn: #b07b23;
    --onaccent: #fffdfa;
    --pill: #f3ece7; --pill-hover: #e9dfd8;
    --surface2: #f6f1ec; --surface2-border: #e6dbd1;
    --input-bg: #fffefc; --focus-ring: #e3cdb8;
    --flag-bg: #fff6e2; --flag-border: #f0dcae;
    --okflag-bg: #eef7f1; --okflag-border: #cbe5d6;
    --na: #bbaea4; --link-underline: #c2b0a3;
    --paw: #d8c4b6; --credit-underline: #e3d6cb;
    --accent-hover: #352923; --border-soft: rgba(0,0,0,.06);
    --shadow-sm: rgba(0,0,0,.05); --shadow-md: rgba(0,0,0,.06); --shadow-lg: rgba(0,0,0,.12);
  }
  html[data-theme="dark"] {
    --bg1: #241d19; --bg2: #2b2119; --card: #2c2420;
    --ink: #f1e6dc; --muted: #b0a093; --line: #453a32;
    --ok: #4fc190; --err: #e58979; --warn: #e3ac5c;
    --onaccent: #241d19;
    --pill: #3a2f28; --pill-hover: #453830;
    --surface2: #26201c; --surface2-border: #453a32;
    --input-bg: #221c18; --focus-ring: #6b5233;
    --flag-bg: #3a2f18; --flag-border: #5c4826;
    --okflag-bg: #1c3226; --okflag-border: #2f4d3c;
    --na: #8a7d72; --link-underline: #6b5d52;
    --paw: #6b5d52; --credit-underline: #453a32;
    --accent-hover: #e6d5c3; --border-soft: rgba(255,255,255,.08);
    --shadow-sm: rgba(0,0,0,.25); --shadow-md: rgba(0,0,0,.3); --shadow-lg: rgba(0,0,0,.4);
  }
  * { box-sizing: border-box; }
  body, .card, .toolcard, details.info, pre.output, input, select, .copy, .tab, #subnetCard .badge {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  body {
    margin: 0; min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 32px 16px 56px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    color: var(--ink);
    background: radial-gradient(circle at 20% 10%, var(--bg2), var(--bg1) 70%);
    background-attachment: fixed;
  }
  .theme-toggle {
    position: fixed; top: 14px; right: 14px; z-index: 50;
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-soft);
    background: var(--card); color: var(--ink); cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px var(--shadow-sm);
  }
  .theme-toggle:hover { background: var(--pill); }
  .theme-toggle svg { width: 19px; height: 19px; }
  .theme-toggle .icon-moon { display: none; }
  html[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
  html[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

  h1 { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; text-align: center; }
  p.sub { margin: 0; text-align: center; font-size: .87rem; color: var(--muted); max-width: 480px; }

  /* The body's flex `gap` alone isn't the whole story here — the cat SVG's
     own viewBox has a fair bit of empty space above the ears before the
     drawing actually starts, which reads as extra distance from the
     heading on top of that gap. A negative margin pulls the visible
     drawing closer without touching the gap used everywhere else
     (heading-to-cat and cat-to-tabs would otherwise always move together). */
  .cat-link { display: inline-block; line-height: 0; margin-top: -18px; }
  .cat { width: min(140px, 38vw); height: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.12)); }
  .cat .tail { transform-origin: 152px 300px; animation: wag 2.6s ease-in-out infinite; }
  .cat .lid  { transform-origin: center; animation: blink 5s infinite; }
  @keyframes wag { 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(-11deg)} }
  @keyframes blink { 0%,94%,100%{transform:scaleY(0)} 96%,98%{transform:scaleY(1)} }
  @media (prefers-reduced-motion: reduce) { .cat .tail, .cat .lid { animation: none } }

  .wrap { width: 100%; max-width: 820px; display: flex; flex-direction: column; gap: 16px; align-items: center; transition: max-width .15s ease; }
  .wrap.wide { max-width: 1100px; }
  .wrap.wide.wide6 { max-width: 1200px; }
  #myipSection { width: 100%; align-self: stretch; }

  /* One row on desktop — as more tools get added this would otherwise wrap
     to a second (often lopsided) line. flex-wrap stays off there on purpose;
     instead the row scrolls horizontally on anything too narrow to fit
     every tab, with the scrollbar itself hidden so it still reads as a
     clean pill row rather than a visible scroll widget. That only works
     when there's some other hint a row is scrollable (a mouse/trackpad,
     hover, room to see the row is cut off) — on a phone the hidden
     scrollbar leaves no such hint, so below 480px this switches to
     flex-wrap: wrap instead: multiple fully-visible rows beat a
     horizontal scroll nobody discovers by touch alone. */
  .tabs {
    display: flex; flex-wrap: nowrap; gap: 6px; justify-content: center; width: 100%;
    overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  @media (max-width: 480px) {
    .tabs { flex-wrap: wrap; overflow-x: visible; }
  }
  .tab {
    border: 1px solid var(--border-soft); background: var(--card); color: var(--muted);
    border-radius: 999px; padding: 7px 14px; font-size: .84rem; font-weight: 600;
    cursor: pointer; box-shadow: 0 3px 10px var(--shadow-sm); user-select: none;
    white-space: nowrap; flex: 0 0 auto;
  }
  .tab.active { background: var(--ink); color: var(--onaccent); border-color: var(--ink); }

  /* ---- shared "card" look, used both by My IP and by the tool panel ---- */
  .cards { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; width: 100%; }
  .card {
    flex: 1 1 300px; background: var(--card); border: 1px solid var(--border-soft);
    border-radius: 18px; padding: 18px 20px; box-shadow: 0 6px 20px var(--shadow-md);
    display: flex; flex-direction: column;
  }
  .card .copy { margin-top: auto; align-self: flex-start; }
  .toolcard {
    width: 100%; background: var(--card); border: 1px solid var(--border-soft);
    border-radius: 18px; padding: 20px; box-shadow: 0 6px 20px var(--shadow-md);
  }

  .label { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: 8px; }
  .value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.15rem; font-weight: 600; word-break: break-all; line-height: 1.35; min-height: 1.5em;
  }
  .value.ok { color: var(--ok); }
  .value.err { color: var(--err); font-weight: 500; font-size: .92rem; font-family: inherit; }
  .org { font-size: .84rem; color: var(--muted); margin-top: 6px; line-height: 1.4; }
  .copy {
    margin-top: 12px; border: 0; background: var(--pill); color: var(--ink);
    border-radius: 999px; padding: 6px 14px; font-size: .82rem; cursor: pointer;
  }
  .copy:hover { background: var(--pill-hover); }
  .copy:disabled { opacity: .4; cursor: default; }

  details.info {
    width: 100%; background: var(--card); border: 1px solid var(--border-soft);
    border-radius: 18px; box-shadow: 0 6px 20px var(--shadow-md); overflow: hidden;
  }
  details.info > summary {
    list-style: none; cursor: pointer; padding: 16px 20px;
    font-weight: 600; display: flex; align-items: center; gap: 10px; user-select: none;
  }
  details.info > summary::-webkit-details-marker { display: none; }
  .chev {
    width: 22px; height: 22px; border-radius: 50%; background: var(--pill);
    display: grid; place-items: center; font-size: 1rem; line-height: 1; transition: transform .2s ease;
  }
  details.info[open] .chev { transform: rotate(45deg); }
  .info-body { padding: 0 20px 18px; }
  .lead { font-size: .87rem; line-height: 1.65; color: var(--muted); margin: 0 0 18px; }
  .lead a { color: inherit; }
  .flag, .okflag, .neutral {
    font-size: .87rem; line-height: 1.6; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px;
  }
  .flag    { background: var(--flag-bg); border: 1px solid var(--flag-border); color: var(--warn); }
  .okflag  { background: var(--okflag-bg); border: 1px solid var(--okflag-border); color: var(--ok); }
  .neutral { background: var(--surface2); border: 1px solid var(--surface2-border); color: var(--ink); }

  .group + .group { margin-top: 22px; }
  .group h2 {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--muted); margin: 0 0 8px; font-weight: 700;
  }
  table { width: 100%; border-collapse: collapse; font-size: .9rem; }
  td { padding: 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
  tr:last-child td { border-bottom: 0; }
  td.k { color: var(--muted); width: 42%; padding-right: 12px; }
  td.v { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-word; }
  td.v.na { font-family: inherit; color: var(--na); font-style: italic; }
  td.v.good { color: var(--ok); }
  td.v.bad  { color: var(--err); }
  td.v a {
    color: inherit; text-decoration: none;
    border-bottom: 1px dotted var(--link-underline); padding-bottom: 1px;
  }
  td.v a:hover { border-bottom-style: solid; }
  td.v .sub {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: .78rem; color: var(--muted); margin-left: 8px;
  }

  /* ---- ping/traceroute/dns/whois tool panel ---- */
  /* Was preceded by a "Result" label (removed) whose margin-bottom gave this
     spacing from whatever's above (form, hint, progress bar) — kept here as
     margin-top instead so the same breathing room survives without it. */
  .output-wrap { position: relative; width: 100%; margin-top: 8px; }
  .output-wrap .copy {
    position: absolute; top: 10px; right: 10px; margin-top: 0; z-index: 1;
    padding: 4px 12px; font-size: .78rem;
    background: var(--ink); color: var(--onaccent); box-shadow: 0 2px 6px var(--shadow-lg);
  }
  .output-wrap .copy:hover { background: var(--accent-hover); }
  .family { display: flex; gap: 16px; margin: 0 0 14px; font-size: .87rem; color: var(--muted); }
  .family label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
  .family.hidden { display: none; }

  form#f { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
  input[type=text] {
    flex: 1 1 160px; min-width: 0; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line);
    background: var(--input-bg); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .95rem;
  }
  input[type=text]:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
  input#target.auto {
    border-style: dashed; border-color: var(--muted); color: var(--muted); background: var(--surface2);
  }
  input#target.auto:focus { color: var(--ink); }
  .target-hint {
    display: flex; align-items: center; gap: 6px;
    margin: -10px 0 16px; font-size: .78rem; color: var(--muted);
  }
  .target-hint[hidden] { display: none; }
  .target-hint svg { flex: 0 0 auto; opacity: .8; }
  .hint-clear {
    flex: 0 0 auto; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--ink); color: var(--onaccent); font: inherit;
    padding: 2px 10px; font-size: .72rem;
  }
  .hint-clear:hover { background: var(--accent-hover); }
  .scan-progress {
    margin: -6px 0 16px; display: flex; align-items: center; gap: 8px;
    font-size: .78rem; color: var(--muted);
  }
  .scan-progress[hidden] { display: none; }
  .scan-progress .bar-track {
    flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--surface2);
    overflow: hidden; border: 1px solid var(--line);
  }
  .scan-progress .bar-fill {
    height: 100%; width: 0%; background: var(--accent, var(--ink));
    transition: width .15s ease-out;
  }
  .scan-progress .bar-label { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
  input.portInput {
    flex: 0 1 90px; min-width: 0; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line);
    background: var(--input-bg); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .95rem;
  }
  input.portInput:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
  input.portInput.hidden { display: none; }
  button.run {
    flex: 0 0 auto;
    border: 0; background: var(--ink); color: var(--onaccent); border-radius: 12px;
    padding: 0 22px; font-size: .92rem; font-weight: 600; cursor: pointer;
  }
  button.run:disabled { opacity: .45; cursor: progress; }

  @media (max-width: 420px) {
    form#f { flex-wrap: wrap; }
    input[type=text] { flex: 1 1 100%; }
    input.portInput { flex: 1 1 auto; }
    button.run { flex: 1 1 auto; padding: 11px 22px; }
  }

  pre.output {
    margin: 0; background: var(--surface2); border: 1px solid var(--line); border-radius: 12px;
    padding: 44px 16px 16px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem; color: var(--ink); white-space: pre-wrap; word-break: break-word;
    min-height: 100px; line-height: 1.5;
  }
  pre.output.err { color: var(--err); }
  pre.output.ok  { color: var(--ok); }

  .credit {
    display: flex; align-items: center; gap: 8px;
    margin-top: 6px; font-size: .78rem; color: var(--muted); letter-spacing: .02em;
  }
  .credit .paw { color: var(--paw); flex: none; }
  .credit a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--credit-underline); }
  .credit a:hover { color: var(--ink); border-bottom-color: currentColor; }

  /* ---- Subnet Calc (SubnetMaster), scoped so it can't leak into the other tabs ---- */
  #subnetCard { width: 100%; display: flex; flex-direction: column; gap: 16px; }
  #subnetCard[hidden] { display: none; }
  #subnetCard .toolcard { padding-top: 14px; padding-bottom: 16px; }
  #subnetCard .sm-grid2 { display: flex; flex-wrap: wrap; gap: 16px; }
  #subnetCard .sm-grid2 > .toolcard { flex: 1 1 300px; }
  /* IPv6 values (full addresses, 39-digit decimals, hex) are much longer
     than IPv4's — side-by-side halves wrap constantly, so stack the two
     "Network Details" / "Address Range & Hosts" cards full-width instead. */
  #subnetCard.ver6 .sm-grid2 > .toolcard { flex: 1 1 100%; }
  #subnetCard .sm-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px;
  }
  #subnetCard .sm-head .label { font-weight: 700; margin-bottom: 0; }
  #subnetCard .toolcard.collapsed .sm-head { margin-bottom: 0; }
  #subnetCard .toolcard.collapsed .sm-body { display: none; }
  #subnetCard label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
  #subnetCard .sm-head .toggle {
    background: transparent; border: 1px solid var(--line); color: var(--muted);
  }
  #subnetCard .sm-head .toggle:hover { border-color: var(--ink); color: var(--ink); background: transparent; }
  #subnetCard input[type=text],
  #subnetCard select {
    width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line);
    background: var(--input-bg); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .95rem;
  }
  #subnetCard input[type=text]:focus,
  #subnetCard select:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
  #subnetCard input.err { border-color: var(--err); }
  #subnetCard .sm-ver { display: flex; gap: 6px; margin-bottom: 14px; }
  #subnetCard .sm-verbtn {
    border: 1px solid var(--border-soft); background: var(--card); color: var(--muted);
    border-radius: 999px; padding: 5px 16px; font-size: .82rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
  }
  #subnetCard .sm-verbtn.active { background: var(--ink); color: var(--onaccent); border-color: var(--ink); }
  #subnetCard .sm-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 700px) { #subnetCard .sm-g2 { grid-template-columns: 1fr; } }
  #subnetCard input[type=range] { width: 100%; accent-color: var(--ink); margin: 6px 0 0; }
  #subnetCard #wcRange { accent-color: var(--warn); }
  #subnetCard .sm-slbl { display: flex; justify-content: space-between; align-items: baseline; }
  #subnetCard .sm-slbl b { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); font-size: .95rem; }
  #subnetCard table { width: 100%; border-collapse: collapse; font-size: .87rem; }
  #subnetCard td { padding: 4px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
  #subnetCard tr:last-child td { border-bottom: 0; }
  #subnetCard td.k { color: var(--muted); width: 42%; padding-right: 12px; white-space: nowrap; }
  #subnetCard td.v {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-word;
    display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 1.6em;
  }
  #subnetCard td.v .txt { min-width: 0; word-break: break-word; }
  #subnetCard button.copy { flex: none; }
  #subnetCard td.v .copy, #subnetCard .sm-binrow .copy {
    margin-top: 0; padding: 2px 10px; font-size: .72rem;
  }
  #subnetCard .sm-bin {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem;
    letter-spacing: .3px; word-break: break-all; line-height: 1.6;
  }
  /* IPv6 binary rows only (135 chars incl. separators) on wide viewports:
     shrink slightly and stop wrapping so the full 128-bit row fits on one
     line instead of breaking mid-hextet. IPv4's 32-bit rows (.sm-bin
     without .sm-bin6) and narrow viewports keep the wrapping rule above. */
  @media (min-width: 900px) {
    #subnetCard .sm-bin.sm-bin6 {
      font-size: .74rem; letter-spacing: 0; white-space: nowrap; word-break: normal;
      display: block; min-width: 0; overflow-x: auto;
      scrollbar-width: none; -ms-overflow-style: none;
    }
    #subnetCard .sm-bin.sm-bin6::-webkit-scrollbar { display: none; }
    /* Size the value column to the text itself instead of 1fr, so the
       Copy button sits right after the bits instead of at the far edge
       of a much wider row. */
    #subnetCard .sm-binrow.sm-bin6 { grid-template-columns: 110px max-content auto; }
  }
  #subnetCard .sm-bin .d { color: var(--muted); }
  #subnetCard .sm-n { color: var(--ink); font-weight: 600; }
  #subnetCard .sm-h { color: var(--warn); font-weight: 600; }
  #subnetCard .sm-legend { font-size: .76rem; color: var(--muted); margin-top: 8px; }
  #subnetCard .sm-legend i { font-style: normal; font-weight: 600; }
  #subnetCard .sm-binrow {
    display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; align-items: center;
    padding: 4px 0; border-bottom: 1px solid var(--line);
  }
  #subnetCard .sm-binrow:last-child { border-bottom: none; }
  #subnetCard .sm-binrow span.lab { color: var(--muted); font-size: .82rem; }
  @media (max-width: 700px) {
    #subnetCard .sm-binrow { grid-template-columns: 1fr auto; gap: 2px 10px; }
    #subnetCard .sm-binrow span.lab { grid-column: 1 / -1; }
  }
  #subnetCard .badge {
    display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: .78rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--surface2); border: 1px solid var(--line);
  }
  #subnetCard .badge.priv { color: var(--ok); border-color: var(--ok); }
  #subnetCard .badge.pub { color: var(--ink); }
  #subnetCard .badge a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
  #subnetCard .badge a:hover, #subnetCard .badge a:focus-visible { text-decoration: none; border-bottom-style: solid; }
  #subnetCard .sm-msg { color: var(--err); font-size: .85rem; margin-top: 6px; min-height: 1em; }
  #subnetCard #cntNum {
    width: 88px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line);
    background: var(--input-bg); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9rem; text-align: right;
  }
  #subnetCard #cntNum:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
  #subnetCard .sm-note { font-size: .8rem; color: var(--muted); margin: 0 0 10px; min-height: 1em; }
  #subnetCard .sm-swipe { display: none; font-size: .75rem; color: var(--muted); margin: 0 0 8px; }
  #subnetCard .sm-listbar { display: flex; gap: 18px; align-items: flex-end; margin-bottom: 14px; flex-wrap: wrap; }
  #subnetCard .sm-listbar .sm-sl { flex: 1 1 260px; }
  #subnetCard .sm-scroll { max-height: 440px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
  #subnetCard #smTList th {
    position: sticky; top: 0; z-index: 1; background: var(--surface2); color: var(--muted);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; text-align: left;
    padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
  }
  #subnetCard #smTList td {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem;
    padding: 6px 10px; white-space: nowrap; display: table-cell; vertical-align: middle;
  }
  #subnetCard #smTList td.idx { color: var(--muted); font-size: .78rem; }
  #subnetCard #smTList tr:hover td { background: var(--surface2); }
  #subnetCard #smTList td.act { text-align: right; padding: 4px 8px; vertical-align: middle; }
  #subnetCard #smTList .copy { padding: 3px 10px; font-size: .72rem; margin-top: 0; }
  @media (max-width: 600px) {
    #subnetCard #cntNum { font-size: 16px; width: 96px; }
    #subnetCard input[type=text], #subnetCard select { font-size: 16px; }
    #subnetCard .sm-bin { font-size: .72rem; letter-spacing: 0; word-break: normal; }
    #subnetCard .sm-binrow { padding: 7px 0; gap: 4px 8px; }
    #subnetCard .sm-legend { font-size: .72rem; line-height: 1.7; }
    #subnetCard .sm-scroll { max-height: 60vh; }
    #subnetCard #smTList th { padding: 7px 8px; font-size: .66rem; }
    #subnetCard #smTList td { font-size: .78rem; padding: 5px 8px; }
    #subnetCard .sm-swipe { display: block; }
    #subnetCard .sm-listbar { gap: 12px; }
    #subnetCard .sm-listbar .sm-sl { flex: 1 1 100%; }
    #subnetCard .sm-note { font-size: .76rem; }
  }