<section class="nm-ctl" aria-label="Soft UI form controls showcase">
  <div class="card">

    <div class="sec">
      <div class="sec-head">
        <div class="sec-title">Radio Buttons</div>
        <div class="sec-tag">Custom CSS · No JavaScript</div>
      </div>
      <div class="controls-row">

        <div class="col-stack">
          <div class="sub-tag">Style A — Concave Dimple</div>
          <div class="radio-classic">
            <label class="rc-item">
              <input class="rc-input" type="radio" name="nm-ctl-rA" checked />
              <span class="rc-circle" aria-hidden="true"></span>
              <span class="rc-label">Sans-serif<span class="rc-sublabel">Clean · Modern</span></span>
            </label>
            <label class="rc-item">
              <input class="rc-input" type="radio" name="nm-ctl-rA" />
              <span class="rc-circle" aria-hidden="true"></span>
              <span class="rc-label">Serif<span class="rc-sublabel">Refined · Editorial</span></span>
            </label>
            <label class="rc-item">
              <input class="rc-input" type="radio" name="nm-ctl-rA" />
              <span class="rc-circle" aria-hidden="true"></span>
              <span class="rc-label">Monospace<span class="rc-sublabel">Code · Precise</span></span>
            </label>
            <label class="rc-item">
              <input class="rc-input" type="radio" name="nm-ctl-rA" />
              <span class="rc-circle" aria-hidden="true"></span>
              <span class="rc-label">Display<span class="rc-sublabel">Bold · Expressive</span></span>
            </label>
          </div>
        </div>

        <div class="col-stack">
          <div class="sub-tag">Style B — Pill Segment</div>
          <div class="pill-group">
            <input class="pill-input" type="radio" name="nm-ctl-rB1" id="nm-ctl-rB1-d" checked />
            <label class="pill-label" for="nm-ctl-rB1-d">Day</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB1" id="nm-ctl-rB1-w" />
            <label class="pill-label" for="nm-ctl-rB1-w">Week</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB1" id="nm-ctl-rB1-m" />
            <label class="pill-label" for="nm-ctl-rB1-m">Month</label>
          </div>
          <div class="pill-group">
            <input class="pill-input" type="radio" name="nm-ctl-rB2" id="nm-ctl-rB2-s" checked />
            <label class="pill-label" for="nm-ctl-rB2-s">S</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB2" id="nm-ctl-rB2-m" />
            <label class="pill-label" for="nm-ctl-rB2-m">M</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB2" id="nm-ctl-rB2-l" />
            <label class="pill-label" for="nm-ctl-rB2-l">L</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB2" id="nm-ctl-rB2-xl" />
            <label class="pill-label" for="nm-ctl-rB2-xl">XL</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB2" id="nm-ctl-rB2-2xl" />
            <label class="pill-label" for="nm-ctl-rB2-2xl">2XL</label>
          </div>
          <div class="pill-group-v">
            <input class="pill-input" type="radio" name="nm-ctl-rB3" id="nm-ctl-rB3-1" />
            <label class="pill-label-v" for="nm-ctl-rB3-1"><span class="pill-icon" aria-hidden="true">🎨</span>Design</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB3" id="nm-ctl-rB3-2" checked />
            <label class="pill-label-v" for="nm-ctl-rB3-2"><span class="pill-icon" aria-hidden="true">⚡</span>Develop</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB3" id="nm-ctl-rB3-3" />
            <label class="pill-label-v" for="nm-ctl-rB3-3"><span class="pill-icon" aria-hidden="true">🚀</span>Deploy</label>
          </div>
        </div>

        <div class="col-stack col-stack-flex">
          <div class="sub-tag">Style C — Card Select</div>
          <div class="card-radio-group">
            <input class="card-input" type="radio" name="nm-ctl-rC" id="nm-ctl-rC-1" />
            <label class="card-label" for="nm-ctl-rC-1">
              <span class="card-icon" aria-hidden="true">🌱</span>
              <span class="card-title">Starter</span>
              <span class="card-desc">For personal projects</span>
              <span class="card-price">Free</span>
            </label>
            <input class="card-input" type="radio" name="nm-ctl-rC" id="nm-ctl-rC-2" checked />
            <label class="card-label" for="nm-ctl-rC-2">
              <span class="card-icon" aria-hidden="true">⚡</span>
              <span class="card-title">Pro</span>
              <span class="card-desc">Teams up to 10</span>
              <span class="card-price">$12/mo</span>
            </label>
            <input class="card-input" type="radio" name="nm-ctl-rC" id="nm-ctl-rC-3" />
            <label class="card-label" for="nm-ctl-rC-3">
              <span class="card-icon" aria-hidden="true">🏢</span>
              <span class="card-title">Enterprise</span>
              <span class="card-desc">Unlimited seats</span>
              <span class="card-price">Custom</span>
            </label>
          </div>
        </div>
      </div>
    </div>

    <div class="div-line" aria-hidden="true"></div>

    <div class="sec">
      <div class="sec-head">
        <div class="sec-title">Checkboxes</div>
        <div class="sec-tag">Pure CSS inset · accent fill transition</div>
      </div>
      <div class="controls-row">

        <div class="col-stack">
          <div class="sub-tag">Style A — Dimple Box</div>
          <div class="check-classic">
            <label class="cb-item">
              <input class="cb-input" type="checkbox" checked />
              <span class="cb-box" aria-hidden="true"><span class="cb-check"></span></span>
              <span class="cb-txt">Dark mode support</span>
            </label>
            <label class="cb-item">
              <input class="cb-input" type="checkbox" checked />
              <span class="cb-box" aria-hidden="true"><span class="cb-check"></span></span>
              <span class="cb-txt">Keyboard navigation</span>
            </label>
            <label class="cb-item">
              <input class="cb-input" type="checkbox" />
              <span class="cb-box" aria-hidden="true"><span class="cb-check"></span></span>
              <span class="cb-txt">Analytics tracking</span>
            </label>
            <label class="cb-item">
              <input class="cb-input" type="checkbox" />
              <span class="cb-box" aria-hidden="true"><span class="cb-check"></span></span>
              <span class="cb-txt">Marketing emails</span>
            </label>
          </div>
        </div>

        <div class="col-stack col-stack-flex">
          <div class="sub-tag">Style B — Stamp Pill</div>
          <div class="stamp-group">
            <input class="stamp-input" type="checkbox" id="nm-ctl-s1" checked />
            <label class="stamp-label" for="nm-ctl-s1">
              <span class="stamp-tick" aria-hidden="true"></span>
              React
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s2" checked />
            <label class="stamp-label" for="nm-ctl-s2">
              <span class="stamp-tick" aria-hidden="true"></span>
              TypeScript
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s3" />
            <label class="stamp-label" for="nm-ctl-s3">
              <span class="stamp-tick" aria-hidden="true"></span>
              Vue
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s4" />
            <label class="stamp-label" for="nm-ctl-s4">
              <span class="stamp-tick" aria-hidden="true"></span>
              Angular
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s5" checked />
            <label class="stamp-label" for="nm-ctl-s5">
              <span class="stamp-tick" aria-hidden="true"></span>
              TailwindCSS
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s6" />
            <label class="stamp-label" for="nm-ctl-s6">
              <span class="stamp-tick" aria-hidden="true"></span>
              GraphQL
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s7" />
            <label class="stamp-label" for="nm-ctl-s7">
              <span class="stamp-tick" aria-hidden="true"></span>
              Node.js
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s8" checked />
            <label class="stamp-label" for="nm-ctl-s8">
              <span class="stamp-tick" aria-hidden="true"></span>
              Figma
            </label>
          </div>
        </div>

        <div class="col-stack">
          <div class="sub-tag">Style C — Card Check</div>
          <div class="card-check-group">
            <input class="cc-input" type="checkbox" id="nm-ctl-cc1" checked />
            <label class="cc-label" for="nm-ctl-cc1">
              <span class="cc-sq" aria-hidden="true"><span class="cc-sq-inner">✓</span></span>
              <span class="cc-text">
                <span class="cc-name">Sync across devices</span>
                <span class="cc-detail">iCloud · Google Drive</span>
              </span>
              <span class="cc-badge">ON</span>
            </label>
            <input class="cc-input" type="checkbox" id="nm-ctl-cc2" checked />
            <label class="cc-label" for="nm-ctl-cc2">
              <span class="cc-sq" aria-hidden="true"><span class="cc-sq-inner">✓</span></span>
              <span class="cc-text">
                <span class="cc-name">Offline mode</span>
                <span class="cc-detail">Cache on local storage</span>
              </span>
              <span class="cc-badge">ON</span>
            </label>
            <input class="cc-input" type="checkbox" id="nm-ctl-cc3" />
            <label class="cc-label" for="nm-ctl-cc3">
              <span class="cc-sq" aria-hidden="true"><span class="cc-sq-inner">✓</span></span>
              <span class="cc-text">
                <span class="cc-name">Crash reporting</span>
                <span class="cc-detail">Send to Sentry · Firebase</span>
              </span>
              <span class="cc-badge">OFF</span>
            </label>
          </div>
        </div>

      </div>
    </div>

  </div>
</section>

/* ─── 11 Soft UI Form Controls — pure CSS showcase ───────────────── */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

.nm-ctl {
  --nm-ctl-bg:  #f0ebe2;
  --nm-ctl-sd:  #d0cbbf;
  --nm-ctl-sl:  #fffdf8;
  --nm-ctl-ib:  #e8e2d8;
  --nm-ctl-acc: #5c6bc0;
  --nm-ctl-ac2: #8c9ce0;
  --nm-ctl-ac3: #3a4a9a;
  --nm-ctl-grn: #4a8a68;
  --nm-ctl-txt: #6a6258;
  --nm-ctl-txt2:#1a1510;
  --nm-ctl-neu-sm:    5px 5px 12px var(--nm-ctl-sd), -5px -5px 12px var(--nm-ctl-sl);
  --nm-ctl-neu-sm-in: inset 4px 4px 9px var(--nm-ctl-sd), inset -4px -4px 9px var(--nm-ctl-sl);

  position: relative;
  width: 100%;
  min-height: 880px;
  background: var(--nm-ctl-bg);
  font-family: 'Raleway', system-ui, sans-serif;
  color: var(--nm-ctl-txt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nm-ctl *,
.nm-ctl *::before,
.nm-ctl *::after { box-sizing: border-box; }

.nm-ctl .card {
  position: relative;
  width: 100%;
  max-width: 860px;
  background: var(--nm-ctl-bg);
  border-radius: 40px;
  padding: 40px 36px;
  box-shadow: 20px 20px 50px var(--nm-ctl-sd), -20px -20px 50px var(--nm-ctl-sl);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.nm-ctl .sec { display: flex; flex-direction: column; gap: 16px; }
.nm-ctl .sec-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.nm-ctl .sec-title { font-size: 14px; font-weight: 800; color: var(--nm-ctl-txt2); letter-spacing: 0.3px; }
.nm-ctl .sec-tag {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--nm-ctl-txt);
  opacity: 0.5;
}
.nm-ctl .sub-tag {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nm-ctl-txt);
  opacity: 0.5;
  margin-bottom: 4px;
}
.nm-ctl .controls-row { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.nm-ctl .col-stack { display: flex; flex-direction: column; gap: 12px; }
.nm-ctl .col-stack-flex { flex: 1; min-width: 180px; }
.nm-ctl .div-line {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--nm-ctl-sd), transparent);
  opacity: 0.5;
}

/* Style A — Classic radio */
.nm-ctl .radio-classic { display: flex; flex-direction: column; gap: 12px; min-width: 160px; }
.nm-ctl .rc-item {
  display: flex;
  align-items: center;
  gap: 13px;
  cursor: pointer;
  user-select: none;
}
.nm-ctl .rc-input { position: absolute; opacity: 0; pointer-events: none; }
.nm-ctl .rc-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm-in);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: box-shadow 0.2s ease;
  position: relative;
}
.nm-ctl .rc-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--nm-ctl-acc);
  box-shadow: 0 0 8px rgba(92, 107, 192, 0.5);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nm-ctl .rc-input:checked ~ .rc-circle::after { transform: translate(-50%, -50%) scale(1); }
.nm-ctl .rc-input:checked ~ .rc-circle { box-shadow: var(--nm-ctl-neu-sm); }
.nm-ctl .rc-label {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 600;
  color: var(--nm-ctl-txt2);
  transition: color 0.2s;
  line-height: 1.3;
}
.nm-ctl .rc-item:hover .rc-label { color: var(--nm-ctl-acc); }
.nm-ctl .rc-sublabel { font-size: 10px; color: var(--nm-ctl-txt); font-weight: 400; margin-top: 1px; }

/* Style B — Pill group */
.nm-ctl .pill-group {
  display: flex;
  background: var(--nm-ctl-ib);
  border-radius: 20px;
  padding: 5px;
  box-shadow: var(--nm-ctl-neu-sm-in);
  gap: 4px;
}
.nm-ctl .pill-input { position: absolute; opacity: 0; pointer-events: none; }
.nm-ctl .pill-label {
  flex: 1;
  padding: 9px 14px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 700;
  color: var(--nm-ctl-txt);
  cursor: pointer;
  text-align: center;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
.nm-ctl .pill-input:checked + .pill-label {
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm);
  color: var(--nm-ctl-acc);
}

.nm-ctl .pill-group-v {
  display: flex;
  flex-direction: column;
  background: var(--nm-ctl-ib);
  border-radius: 18px;
  padding: 5px;
  box-shadow: var(--nm-ctl-neu-sm-in);
  gap: 4px;
  min-width: 160px;
}
.nm-ctl .pill-label-v {
  padding: 9px 14px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 700;
  color: var(--nm-ctl-txt);
  cursor: pointer;
  transition: all 0.22s;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nm-ctl .pill-input:checked + .pill-label-v {
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm);
  color: var(--nm-ctl-acc);
}
.nm-ctl .pill-icon { font-size: 16px; }

/* Style C — Card radio */
.nm-ctl .card-radio-group { display: flex; gap: 12px; flex-wrap: wrap; }
.nm-ctl .card-input { position: absolute; opacity: 0; pointer-events: none; }
.nm-ctl .card-label {
  flex: 1;
  background: var(--nm-ctl-bg);
  border-radius: 18px;
  padding: 16px 12px;
  box-shadow: var(--nm-ctl-neu-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all 0.22s ease;
  min-width: 100px;
  position: relative;
}
.nm-ctl .card-label:hover {
  transform: translateY(-2px);
  box-shadow: 8px 8px 20px var(--nm-ctl-sd), -8px -8px 20px var(--nm-ctl-sl);
}
.nm-ctl .card-input:checked + .card-label { box-shadow: var(--nm-ctl-neu-sm-in); }
.nm-ctl .card-label::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm-in);
  transition: all 0.2s;
}
.nm-ctl .card-input:checked + .card-label::before {
  background: var(--nm-ctl-acc);
  box-shadow: 0 0 8px rgba(92, 107, 192, 0.4);
}
.nm-ctl .card-label::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nm-ctl .card-input:checked + .card-label::after { transform: scale(1); }
.nm-ctl .card-icon { font-size: 24px; }
.nm-ctl .card-title { font-size: 12px; font-weight: 800; color: var(--nm-ctl-txt2); letter-spacing: 0.3px; }
.nm-ctl .card-desc { font-size: 10px; color: var(--nm-ctl-txt); text-align: center; line-height: 1.4; }
.nm-ctl .card-price {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--nm-ctl-acc);
  margin-top: 2px;
}

/* Checkboxes Style A — classic box */
.nm-ctl .check-classic { display: flex; flex-direction: column; gap: 12px; min-width: 180px; }
.nm-ctl .cb-item {
  display: flex;
  align-items: center;
  gap: 13px;
  cursor: pointer;
  user-select: none;
}
.nm-ctl .cb-input { position: absolute; opacity: 0; pointer-events: none; }
.nm-ctl .cb-box {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm-in);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  overflow: hidden;
  position: relative;
}
.nm-ctl .cb-check {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0) rotate(20deg);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nm-ctl .cb-check::before {
  content: '';
  width: 5px;
  height: 9px;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(45deg);
  margin-top: -4px;
}
.nm-ctl .cb-input:checked ~ .cb-box {
  background: linear-gradient(145deg, var(--nm-ctl-acc), var(--nm-ctl-ac3));
  box-shadow: 3px 3px 8px rgba(92, 107, 192, 0.35), -2px -2px 6px var(--nm-ctl-sl);
}
.nm-ctl .cb-input:checked ~ .cb-box .cb-check { transform: scale(1) rotate(0deg); }
.nm-ctl .cb-txt {
  font-size: 13px;
  font-weight: 600;
  color: var(--nm-ctl-txt2);
  transition: color 0.2s;
  line-height: 1.3;
}
.nm-ctl .cb-item:hover .cb-txt { color: var(--nm-ctl-acc); }

/* Checkboxes Style B — stamp pill */
.nm-ctl .stamp-group { display: flex; gap: 10px; flex-wrap: wrap; }
.nm-ctl .stamp-input { position: absolute; opacity: 0; pointer-events: none; }
.nm-ctl .stamp-label {
  padding: 9px 16px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  color: var(--nm-ctl-txt);
  cursor: pointer;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  user-select: none;
}
.nm-ctl .stamp-label:hover { transform: translateY(-1px); color: var(--nm-ctl-acc); }
.nm-ctl .stamp-input:checked + .stamp-label {
  box-shadow: var(--nm-ctl-neu-sm-in);
  color: var(--nm-ctl-acc);
  font-weight: 800;
}
.nm-ctl .stamp-tick {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm-in);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.nm-ctl .stamp-input:checked + .stamp-label .stamp-tick {
  background: var(--nm-ctl-acc);
  box-shadow: 0 0 6px rgba(92, 107, 192, 0.4);
  color: #fff;
  font-size: 10px;
}
.nm-ctl .stamp-input:checked + .stamp-label .stamp-tick::after { content: '\2713'; }

/* Checkboxes Style C — card check */
.nm-ctl .card-check-group { display: flex; flex-direction: column; gap: 10px; min-width: 240px; }
.nm-ctl .cc-input { position: absolute; opacity: 0; pointer-events: none; }
.nm-ctl .cc-label {
  background: var(--nm-ctl-bg);
  border-radius: 16px;
  padding: 13px 16px;
  box-shadow: var(--nm-ctl-neu-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.2s;
  user-select: none;
}
.nm-ctl .cc-label:hover { box-shadow: 7px 7px 16px var(--nm-ctl-sd), -7px -7px 16px var(--nm-ctl-sl); }
.nm-ctl .cc-input:checked + .cc-label { box-shadow: var(--nm-ctl-neu-sm-in); }
.nm-ctl .cc-sq {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm-in);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.nm-ctl .cc-input:checked + .cc-label .cc-sq {
  background: linear-gradient(145deg, var(--nm-ctl-grn), #2a6a48);
  box-shadow: 2px 2px 6px rgba(74, 138, 104, 0.4);
}
.nm-ctl .cc-sq-inner {
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-size: 12px;
  color: #fff;
}
.nm-ctl .cc-input:checked + .cc-label .cc-sq-inner { transform: scale(1); }
.nm-ctl .cc-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.nm-ctl .cc-name { font-size: 13px; font-weight: 700; color: var(--nm-ctl-txt2); }
.nm-ctl .cc-detail { font-size: 10px; color: var(--nm-ctl-txt); margin-top: 2px; }
.nm-ctl .cc-badge {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--nm-ctl-txt);
  padding: 3px 8px;
  background: var(--nm-ctl-ib);
  border-radius: 8px;
  box-shadow: var(--nm-ctl-neu-sm-in);
}

@media (prefers-reduced-motion: reduce) {
  .nm-ctl .rc-circle::after,
  .nm-ctl .pill-label,
  .nm-ctl .pill-label-v,
  .nm-ctl .card-label,
  .nm-ctl .card-label::after,
  .nm-ctl .cb-box,
  .nm-ctl .cb-check,
  .nm-ctl .stamp-label,
  .nm-ctl .cc-label,
  .nm-ctl .cc-sq-inner { transition: none; animation: none; }
}