Back to CSS Neumorphism Dark Mode Neumorphism CSS + JS
Share
HTML 
<section class="nm-drk" aria-label="Dark mode neumorphism showcase">
  <div class="card">

    <!-- System monitor -->
    <div class="sys-card">
      <div class="tag">System Monitor · Dark Neu Formula</div>
      <div class="rings-cluster">
        <div class="mon-ring mon-ring-1">
          <svg viewBox="0 0 110 110" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <defs>
              <filter id="nm-drk-g1"><feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
            </defs>
            <circle cx="55" cy="55" r="44" fill="none" stroke="#161d2e" stroke-width="9"/>
            <circle cx="55" cy="55" r="44" fill="none" stroke="#00f5d4" stroke-width="9"
              stroke-linecap="round" stroke-dasharray="198 277" filter="url(#nm-drk-g1)" transform="rotate(-90 55 55)" data-nm-drk-ring="cpu"/>
          </svg>
          <div class="mon-center">
            <div class="mon-val mon-val-t1">72%</div>
            <div class="mon-sub">CPU</div>
          </div>
        </div>

        <div class="mon-ring mon-ring-2">
          <svg viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <circle cx="45" cy="45" r="36" fill="none" stroke="#161d2e" stroke-width="8"/>
            <circle cx="45" cy="45" r="36" fill="none" stroke="#bd93f9" stroke-width="8"
              stroke-linecap="round" stroke-dasharray="145 226" filter="url(#nm-drk-g1)" transform="rotate(-90 45 45)" data-nm-drk-ring="ram"/>
          </svg>
          <div class="mon-center">
            <div class="mon-val mon-val-vt">64%</div>
            <div class="mon-sub">RAM</div>
          </div>
        </div>

        <div class="mon-ring mon-ring-3">
          <svg viewBox="0 0 76 76" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <circle cx="38" cy="38" r="30" fill="none" stroke="#161d2e" stroke-width="7"/>
            <circle cx="38" cy="38" r="30" fill="none" stroke="#ff79c6" stroke-width="7"
              stroke-linecap="round" stroke-dasharray="103 189" filter="url(#nm-drk-g1)" transform="rotate(-90 38 38)" data-nm-drk-ring="gpu"/>
          </svg>
          <div class="mon-center">
            <div class="mon-val mon-val-pk">43%</div>
            <div class="mon-sub">GPU</div>
          </div>
        </div>
      </div>

      <div class="sys-metrics">
        <div class="metric-chip">
          <div class="mc-val mc-val-t1">45°C</div>
          <div class="mc-label">Temp</div>
        </div>
        <div class="metric-chip">
          <div class="mc-val mc-val-amb">2.4W</div>
          <div class="mc-label">Power</div>
        </div>
        <div class="metric-chip">
          <div class="mc-val mc-val-vt">4.2G</div>
          <div class="mc-label">VRAM</div>
        </div>
      </div>

      <div class="proc-list">
        <div class="proc-item">
          <span class="proc-name">node server.js</span>
          <div class="proc-bar-bg" aria-hidden="true"><div class="proc-bar proc-bar-t1" style="width:58%"></div></div>
          <span class="proc-pct proc-pct-t1">58%</span>
        </div>
        <div class="proc-item">
          <span class="proc-name">chrome.exe</span>
          <div class="proc-bar-bg" aria-hidden="true"><div class="proc-bar proc-bar-vt" style="width:34%"></div></div>
          <span class="proc-pct proc-pct-vt">34%</span>
        </div>
        <div class="proc-item">
          <span class="proc-name">figma.desktop</span>
          <div class="proc-bar-bg" aria-hidden="true"><div class="proc-bar proc-bar-pk" style="width:20%"></div></div>
          <span class="proc-pct proc-pct-pk">20%</span>
        </div>
      </div>
    </div>

    <!-- Notifications -->
    <div class="notif-card">
      <div class="tag">Notifications · Glow Accent Borders</div>

      <div class="notif-item nt-t1">
        <div class="notif-icon-wrap" aria-hidden="true">🚀</div>
        <div class="notif-body">
          <div class="notif-title">Deploy Successful</div>
          <div class="notif-msg">v2.4.1 is live on production. 0 errors, 3ms build time.</div>
          <div class="notif-time">2 min ago</div>
        </div>
        <div class="notif-badge nt-t1" aria-hidden="true"></div>
      </div>

      <div class="notif-item nt-vt">
        <div class="notif-icon-wrap" aria-hidden="true">💡</div>
        <div class="notif-body">
          <div class="notif-title">Design review ready</div>
          <div class="notif-msg">Jordan shared "Neumorphic System v3" for your feedback.</div>
          <div class="notif-time">18 min ago</div>
        </div>
        <div class="notif-badge nt-vt" aria-hidden="true"></div>
      </div>

      <div class="notif-item nt-pk">
        <div class="notif-icon-wrap" aria-hidden="true">⚠️</div>
        <div class="notif-body">
          <div class="notif-title">RAM threshold exceeded</div>
          <div class="notif-msg">Process usage above 80%. Consider closing Chrome tabs.</div>
          <div class="notif-time">42 min ago</div>
        </div>
        <div class="notif-badge nt-pk" aria-hidden="true"></div>
      </div>

      <div class="notif-item nt-amb">
        <div class="notif-icon-wrap" aria-hidden="true">📦</div>
        <div class="notif-body">
          <div class="notif-title">Dependency update</div>
          <div class="notif-msg">12 packages ready to update. Run npm audit for details.</div>
          <div class="notif-time">1 hr ago</div>
        </div>
        <div class="notif-badge nt-read" aria-hidden="true"></div>
      </div>
    </div>

    <!-- Right sidebar: clock + glow-tip + music -->
    <div class="side-col">
      <div class="clock-card">
        <div class="clock-face">
          <div class="clock-hr" data-nm-drk-clock>10:42</div>
          <div class="clock-sec-txt" data-nm-drk-sec>:00 AM</div>
        </div>

        <div class="glow-tip">
          <div class="glow-code">
            <span class="comment">/* Dark Neu Formula */</span><br />
            <span class="key">--sd:</span> <span class="val">#0e1425</span>;<br />
            <span class="key">--sl:</span> <span class="val">#263050</span>;<br />
            <span class="key">box-shadow:</span><br />
            &nbsp;&nbsp;<span class="val">10px 10px 26px</span> var(--sd),<br />
            &nbsp;&nbsp;<span class="val">-8px -8px 20px</span> var(--sl);
          </div>
        </div>
      </div>

      <div class="music-card" data-nm-drk-music>
        <div class="music-disc" aria-hidden="true">
          <div class="disc-label"></div>
        </div>
        <div class="music-info">
          <div class="music-title">Neon Dusk</div>
          <div class="music-artist">Phantom Circuit · 2026</div>
        </div>
        <div class="mini-progress" aria-hidden="true"><div class="mini-prog-fill"></div></div>
        <div class="music-times">
          <span>1:48</span><span>4:22</span>
        </div>
        <div class="music-controls">
          <button type="button" class="mc-btn" aria-label="Previous">⏮</button>
          <button type="button" class="mc-play" data-nm-drk-play aria-label="Play / Pause">⏸</button>
          <button type="button" class="mc-btn" aria-label="Next">⏭</button>
        </div>
      </div>
    </div>

    <!-- Bottom metrics grid -->
    <div class="metrics-grid">
      <div class="metric-card">
        <div class="mc-top">
          <div class="mc-icon-wrap" aria-hidden="true">📡</div>
          <span class="mc-trend up">▲ +12%</span>
        </div>
        <div class="mc-big mc-big-t1">1.2<span class="mc-unit">Gb</span></div>
        <div class="mc-name">Network In</div>
        <div class="sparkline" data-nm-drk-spark="0" aria-hidden="true"></div>
      </div>

      <div class="metric-card">
        <div class="mc-top">
          <div class="mc-icon-wrap" aria-hidden="true">⚡</div>
          <span class="mc-trend down">▼ −3%</span>
        </div>
        <div class="mc-big mc-big-amb">84<span class="mc-unit">W</span></div>
        <div class="mc-name">Power Draw</div>
        <div class="sparkline" data-nm-drk-spark="1" aria-hidden="true"></div>
      </div>

      <div class="metric-card">
        <div class="mc-top">
          <div class="mc-icon-wrap" aria-hidden="true">💾</div>
          <span class="mc-trend up">▲ +5%</span>
        </div>
        <div class="mc-big mc-big-vt">512<span class="mc-unit">MB</span></div>
        <div class="mc-name">Disk Write</div>
        <div class="sparkline" data-nm-drk-spark="2" aria-hidden="true"></div>
      </div>

      <div class="metric-card">
        <div class="mc-top">
          <div class="mc-icon-wrap" aria-hidden="true">🌡️</div>
          <span class="mc-trend mc-trend-hot">▲ HIGH</span>
        </div>
        <div class="mc-big mc-big-pk">67<span class="mc-unit">°C</span></div>
        <div class="mc-name">GPU Temp</div>
        <div class="sparkline" data-nm-drk-spark="3" aria-hidden="true"></div>
      </div>
    </div>

  </div>
</section>
CSS 
/* ─── 13 Dark Mode Neumorphism — neon system hub ──────────────── */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

.nm-drk {
  --nm-drk-bg:  #1a2035;
  --nm-drk-sd:  #0e1425;
  --nm-drk-sl:  #263050;
  --nm-drk-ib:  #161d2e;
  --nm-drk-t1:  #00f5d4;
  --nm-drk-t2:  #00c8ac;
  --nm-drk-vt:  #bd93f9;
  --nm-drk-pk:  #ff79c6;
  --nm-drk-amb: #ffb86c;
  --nm-drk-grn: #50fa7b;
  --nm-drk-red: #ff5555;
  --nm-drk-txt: #6d8aae;
  --nm-drk-txt2:#cdd9f0;
  --nm-drk-neu:       10px 10px 26px var(--nm-drk-sd), -8px -8px 20px var(--nm-drk-sl);
  --nm-drk-neu-in:    inset 8px 8px 18px var(--nm-drk-sd), inset -6px -6px 14px var(--nm-drk-sl);
  --nm-drk-neu-sm:    6px 6px 14px var(--nm-drk-sd), -5px -5px 12px var(--nm-drk-sl);
  --nm-drk-neu-sm-in: inset 5px 5px 11px var(--nm-drk-sd), inset -4px -4px 9px var(--nm-drk-sl);

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

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

.nm-drk .card {
  position: relative;
  width: 100%;
  max-width: 860px;
  background: var(--nm-drk-bg);
  border-radius: 44px;
  padding: 36px 32px;
  box-shadow: 22px 22px 54px var(--nm-drk-sd), -18px -18px 44px var(--nm-drk-sl);
  display: grid;
  grid-template-columns: 1fr 1fr 200px;
  grid-template-rows: auto auto;
  gap: 20px;
}

.nm-drk .tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--nm-drk-txt);
  opacity: 0.5;
  margin-bottom: 14px;
}

/* System monitor */
.nm-drk .sys-card {
  background: var(--nm-drk-bg);
  border-radius: 24px;
  box-shadow: var(--nm-drk-neu);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nm-drk .rings-cluster {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}
.nm-drk .mon-ring {
  position: relative;
  width: 100px;
  height: 100px;
}
.nm-drk .mon-ring-2 { width: 84px; height: 84px; }
.nm-drk .mon-ring-3 { width: 70px; height: 70px; }
.nm-drk .mon-ring svg { width: 100%; height: 100%; }
.nm-drk .mon-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.nm-drk .mon-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--nm-drk-txt2);
  line-height: 1;
}
.nm-drk .mon-val-t1 { color: var(--nm-drk-t1); text-shadow: 0 0 12px rgba(0, 245, 212, 0.5); }
.nm-drk .mon-val-vt { color: var(--nm-drk-vt); text-shadow: 0 0 10px rgba(189, 147, 249, 0.5); font-size: 13px; }
.nm-drk .mon-val-pk { color: var(--nm-drk-pk); text-shadow: 0 0 10px rgba(255, 121, 198, 0.5); font-size: 12px; }
.nm-drk .mon-sub {
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nm-drk-txt);
  margin-top: 3px;
}

.nm-drk .sys-metrics { display: flex; gap: 8px; }
.nm-drk .metric-chip {
  flex: 1;
  background: var(--nm-drk-ib);
  border-radius: 12px;
  padding: 10px 8px;
  box-shadow: var(--nm-drk-neu-sm-in);
  text-align: center;
}
.nm-drk .mc-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--nm-drk-txt2);
}
.nm-drk .mc-val-t1  { color: var(--nm-drk-t1); }
.nm-drk .mc-val-amb { color: var(--nm-drk-amb); }
.nm-drk .mc-val-vt  { color: var(--nm-drk-vt); }
.nm-drk .mc-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--nm-drk-txt);
  text-transform: uppercase;
  margin-top: 3px;
}

.nm-drk .proc-list { display: flex; flex-direction: column; gap: 6px; }
.nm-drk .proc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--nm-drk-ib);
  border-radius: 10px;
  padding: 7px 10px;
  box-shadow: var(--nm-drk-neu-sm-in);
}
.nm-drk .proc-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--nm-drk-txt2);
  flex: 1;
}
.nm-drk .proc-bar-bg {
  flex: 2;
  height: 4px;
  border-radius: 2px;
  background: var(--nm-drk-bg);
  overflow: hidden;
}
.nm-drk .proc-bar { height: 100%; border-radius: 2px; }
.nm-drk .proc-bar-t1 { background: linear-gradient(90deg, var(--nm-drk-t2), var(--nm-drk-t1)); }
.nm-drk .proc-bar-vt { background: linear-gradient(90deg, #8050c8, var(--nm-drk-vt)); }
.nm-drk .proc-bar-pk { background: linear-gradient(90deg, #c050a0, var(--nm-drk-pk)); }
.nm-drk .proc-pct {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--nm-drk-txt);
  width: 30px;
  text-align: right;
}
.nm-drk .proc-pct-t1 { color: var(--nm-drk-t1); }
.nm-drk .proc-pct-vt { color: var(--nm-drk-vt); }
.nm-drk .proc-pct-pk { color: var(--nm-drk-pk); }

/* Notifications */
.nm-drk .notif-card {
  background: var(--nm-drk-bg);
  border-radius: 24px;
  box-shadow: var(--nm-drk-neu);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nm-drk .notif-item {
  background: var(--nm-drk-bg);
  border-radius: 14px;
  padding: 12px 12px;
  box-shadow: var(--nm-drk-neu-sm);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.nm-drk .notif-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  border-radius: 0 2px 2px 0;
}
.nm-drk .notif-item.nt-t1::before  { background: var(--nm-drk-t1);  box-shadow: 0 0 8px var(--nm-drk-t1); }
.nm-drk .notif-item.nt-vt::before  { background: var(--nm-drk-vt);  box-shadow: 0 0 8px var(--nm-drk-vt); }
.nm-drk .notif-item.nt-pk::before  { background: var(--nm-drk-pk);  box-shadow: 0 0 8px var(--nm-drk-pk); }
.nm-drk .notif-item.nt-amb::before { background: var(--nm-drk-amb); box-shadow: 0 0 8px var(--nm-drk-amb); }
.nm-drk .notif-item:hover {
  box-shadow: 8px 8px 18px var(--nm-drk-sd), -8px -8px 18px var(--nm-drk-sl);
  transform: translateX(2px);
}
.nm-drk .notif-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--nm-drk-bg);
  box-shadow: var(--nm-drk-neu-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.nm-drk .notif-body { flex: 1; }
.nm-drk .notif-title { font-size: 11px; font-weight: 700; color: var(--nm-drk-txt2); }
.nm-drk .notif-msg { font-size: 10px; color: var(--nm-drk-txt); margin-top: 3px; line-height: 1.4; }
.nm-drk .notif-time {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  color: var(--nm-drk-txt);
  margin-top: 4px;
}
.nm-drk .notif-badge {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.nm-drk .notif-badge.nt-t1 { background: var(--nm-drk-t1); box-shadow: 0 0 6px var(--nm-drk-t1); }
.nm-drk .notif-badge.nt-vt { background: var(--nm-drk-vt); box-shadow: 0 0 6px var(--nm-drk-vt); }
.nm-drk .notif-badge.nt-pk { background: var(--nm-drk-pk); box-shadow: 0 0 6px var(--nm-drk-pk); }
.nm-drk .notif-badge.nt-read { background: var(--nm-drk-txt); opacity: 0.3; }

/* Right sidebar */
.nm-drk .side-col {
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.nm-drk .clock-card {
  background: var(--nm-drk-bg);
  border-radius: 22px;
  box-shadow: var(--nm-drk-neu);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.nm-drk .clock-face {
  background: var(--nm-drk-ib);
  border-radius: 14px;
  box-shadow: var(--nm-drk-neu-sm-in);
  padding: 12px 16px;
  text-align: center;
  width: 100%;
}
.nm-drk .clock-hr {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 30px;
  font-weight: 700;
  color: var(--nm-drk-t1);
  letter-spacing: -1px;
  line-height: 1;
  text-shadow: 0 0 20px rgba(0, 245, 212, 0.4);
}
.nm-drk .clock-sec-txt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--nm-drk-txt);
  letter-spacing: 1px;
  margin-top: 3px;
}

.nm-drk .glow-tip {
  background: var(--nm-drk-ib);
  border-radius: 12px;
  box-shadow: var(--nm-drk-neu-sm-in);
  padding: 10px;
  width: 100%;
}
.nm-drk .glow-code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8px;
  line-height: 1.8;
  color: var(--nm-drk-txt);
}
.nm-drk .glow-code .key { color: var(--nm-drk-vt); }
.nm-drk .glow-code .val { color: var(--nm-drk-t1); }
.nm-drk .glow-code .comment { color: var(--nm-drk-txt); opacity: 0.5; }

.nm-drk .music-card {
  background: var(--nm-drk-bg);
  border-radius: 22px;
  box-shadow: var(--nm-drk-neu);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.nm-drk .music-disc {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--nm-drk-bg);
  box-shadow: var(--nm-drk-neu-sm);
  position: relative;
  animation: nm-drk-spin 6s linear infinite;
}
@keyframes nm-drk-spin { to { transform: rotate(360deg); } }
.nm-drk .music-card.paused .music-disc { animation-play-state: paused; }
.nm-drk .music-disc::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2a1e3a 0%, #1a1428 50%, #0e0a18 100%);
  box-shadow: var(--nm-drk-neu-sm-in);
}
.nm-drk .music-disc::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at center,
    transparent 0%, transparent 5px,
    rgba(189, 147, 249, 0.06) 5px, rgba(189, 147, 249, 0.06) 6px);
}
.nm-drk .disc-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--nm-drk-bg);
  box-shadow: var(--nm-drk-neu-sm);
  z-index: 2;
}
.nm-drk .music-info { text-align: center; }
.nm-drk .music-title { font-size: 12px; font-weight: 700; color: var(--nm-drk-txt2); }
.nm-drk .music-artist { font-size: 10px; color: var(--nm-drk-txt); margin-top: 2px; }

.nm-drk .mini-progress {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--nm-drk-ib);
  box-shadow: var(--nm-drk-neu-sm-in);
}
.nm-drk .mini-prog-fill {
  height: 100%;
  width: 42%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--nm-drk-vt), var(--nm-drk-t1));
  box-shadow: 0 0 6px rgba(0, 245, 212, 0.3);
}
.nm-drk .music-times {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  color: var(--nm-drk-txt);
}

.nm-drk .music-controls { display: flex; gap: 10px; align-items: center; }
.nm-drk .mc-btn {
  width: 32px;
  height: 32px;
  background: var(--nm-drk-bg);
  border: none;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--nm-drk-txt2);
  box-shadow: var(--nm-drk-neu-sm);
  transition: all 0.15s;
}
.nm-drk .mc-btn:active { box-shadow: var(--nm-drk-neu-sm-in); }
.nm-drk .mc-play {
  width: 42px;
  height: 42px;
  font-size: 16px;
  background: linear-gradient(145deg, var(--nm-drk-vt), #8050c8);
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 6px 6px 14px rgba(140, 80, 200, 0.4), -4px -4px 10px var(--nm-drk-sl);
}
.nm-drk .mc-play:active { box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.3); }

/* Metrics grid */
.nm-drk .metrics-grid {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.nm-drk .metric-card {
  background: var(--nm-drk-bg);
  border-radius: 20px;
  box-shadow: var(--nm-drk-neu-sm);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.nm-drk .metric-card:hover {
  box-shadow: 8px 8px 20px var(--nm-drk-sd), -8px -8px 20px var(--nm-drk-sl);
  transform: translateY(-1px);
}
.nm-drk .mc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.nm-drk .mc-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--nm-drk-bg);
  box-shadow: var(--nm-drk-neu-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.nm-drk .mc-trend {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
}
.nm-drk .mc-trend.up { color: var(--nm-drk-grn); }
.nm-drk .mc-trend.down { color: var(--nm-drk-red); }
.nm-drk .mc-trend-hot { color: var(--nm-drk-pk); }

.nm-drk .mc-big {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 24px;
  font-weight: 700;
  color: var(--nm-drk-txt2);
  line-height: 1;
  letter-spacing: -1px;
}
.nm-drk .mc-big-t1  { color: var(--nm-drk-t1);  text-shadow: 0 0 14px rgba(0, 245, 212, 0.3); }
.nm-drk .mc-big-amb { color: var(--nm-drk-amb); text-shadow: 0 0 14px rgba(255, 184, 108, 0.3); }
.nm-drk .mc-big-vt  { color: var(--nm-drk-vt);  text-shadow: 0 0 14px rgba(189, 147, 249, 0.3); }
.nm-drk .mc-big-pk  { color: var(--nm-drk-pk);  text-shadow: 0 0 14px rgba(255, 121, 198, 0.3); }
.nm-drk .mc-unit { font-size: 12px; color: var(--nm-drk-txt); }
.nm-drk .mc-name {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--nm-drk-txt);
}

.nm-drk .sparkline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 26px;
}
.nm-drk .spark-bar {
  flex: 1;
  border-radius: 2px;
  min-height: 3px;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.nm-drk .metric-card:hover .spark-bar { opacity: 1; }
.nm-drk .spark-bar.last { opacity: 1; }

@media (max-width: 880px) {
  .nm-drk .card {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .nm-drk .side-col,
  .nm-drk .metrics-grid { grid-row: auto; grid-column: auto; }
  .nm-drk .metrics-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .nm-drk .music-disc { animation: none; }
  .nm-drk .notif-item,
  .nm-drk .metric-card { transition: none; }
}
JS 
(() => {
  const root = document.querySelector('.nm-drk');
  if (!root) return;

  // Clock
  const clockHr = root.querySelector('[data-nm-drk-clock]');
  const clockSec = root.querySelector('[data-nm-drk-sec]');
  function updateClock() {
    const now = new Date();
    const h = now.getHours() % 12 || 12;
    const m = String(now.getMinutes()).padStart(2, '0');
    const s = String(now.getSeconds()).padStart(2, '0');
    const ap = now.getHours() >= 12 ? 'PM' : 'AM';
    if (clockHr) clockHr.textContent = h + ':' + m;
    if (clockSec) clockSec.textContent = ':' + s + ' ' + ap;
  }
  updateClock();
  setInterval(updateClock, 1000);

  // Music toggle
  let playing = true;
  const musicCard = root.querySelector('[data-nm-drk-music]');
  const playBtn = root.querySelector('[data-nm-drk-play]');
  if (playBtn) playBtn.addEventListener('click', () => {
    playing = !playing;
    musicCard?.classList.toggle('paused', !playing);
    playBtn.textContent = playing ? '⏸' : '▶';
  });

  // Sparklines
  const sparkColors = ['#00f5d4', '#ffb86c', '#bd93f9', '#ff79c6'];
  const sparkRgb    = ['0,245,212', '255,184,108', '189,147,249', '255,121,198'];
  const sparkData = [
    [14, 22, 18, 30, 26, 38, 28, 40, 34, 42, 38, 44],
    [20, 28, 24, 20, 32, 22, 30, 26, 28, 22, 24, 20],
    [8, 14, 12, 20, 16, 24, 20, 28, 22, 26, 24, 28],
    [18, 22, 24, 28, 32, 30, 34, 38, 42, 44, 48, 52],
  ];
  root.querySelectorAll('[data-nm-drk-spark]').forEach(el => {
    const idx = parseInt(el.dataset.nmDrkSpark, 10);
    const data = sparkData[idx];
    const color = sparkColors[idx];
    const rgb = sparkRgb[idx];
    const max = Math.max(...data);
    data.forEach((v, i) => {
      const bar = document.createElement('div');
      bar.className = 'spark-bar' + (i === data.length - 1 ? ' last' : '');
      bar.style.height = Math.max(3, v / max * 26) + 'px';
      bar.style.background = color;
      bar.style.boxShadow = '0 0 4px rgba(' + rgb + ',0.5)';
      el.appendChild(bar);
    });
  });

  // Animate system rings — gentle ebb-and-flow
  setInterval(() => {
    root.querySelectorAll('[data-nm-drk-ring]').forEach(arc => {
      const totalDash = parseInt(arc.getAttribute('stroke-dasharray').split(' ')[1], 10);
      const pct = 0.35 + Math.random() * 0.5;
      const filled = Math.round(pct * (totalDash * 0.9));
      arc.setAttribute('stroke-dasharray', filled + ' ' + totalDash);
    });
  }, 3000);
})();