.dark-arts-header {
  text-align: center; margin-bottom: var(--gap-xl);
  background: radial-gradient(ellipse at top, rgba(255, 0, 100, 0.15) 0%, rgba(10, 0, 10, 0.6) 70%);
  padding: var(--gap-xl) var(--gap-lg);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 0, 100, 0.3);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 40px rgba(255, 0, 100, 0.1);
  position: relative; overflow: hidden;
}
.dark-arts-header::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #ff0055, transparent); }

.dark-matter-label { display: block; font-size: 1.1rem; color: #ff0055; text-transform: uppercase; letter-spacing: 4px; font-weight: 800; text-shadow: 0 0 10px rgba(255,0,100,0.5); }
.dark-matter-value { display: block; font-size: 4.5rem; font-family: var(--font-display); font-weight: 900; color: #fff; text-shadow: 0 0 30px #ff0055, 0 0 60px #ff0055; margin: var(--gap-sm) 0; line-height: 1; }
.dark-matter-rate { font-family: var(--font-mono); color: var(--text-secondary); font-size: 1rem; margin-top: 8px; }

.dark-upgrade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap-lg); margin-top: var(--gap-xl); }
.dark-upgrade-card {
  background: rgba(20, 0, 10, 0.6); border: 1px solid rgba(255, 0, 100, 0.2); border-radius: var(--radius-md); padding: var(--gap-lg);
  transition: var(--transition-normal); cursor: pointer; position: relative; box-shadow: 0 8px 20px rgba(0,0,0,0.3); overflow: hidden;
}
.dark-upgrade-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: #ff0055; opacity: 0.5; transition: var(--transition-fast); }
.dark-upgrade-card:hover:not(.purchased):not(.unaffordable) { background: rgba(40, 0, 20, 0.8); border-color: #ff0055; transform: translateY(-5px); box-shadow: 0 15px 30px rgba(255, 0, 100, 0.2); }
.dark-upgrade-card:hover:not(.purchased):not(.unaffordable)::before { opacity: 1; box-shadow: 0 0 15px #ff0055; }

.dark-upgrade-name { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: #fff; margin-bottom: 6px; }
.dark-upgrade-cost { font-family: var(--font-mono); font-size: 0.95rem; color: #ff0055; margin-bottom: var(--gap-md); font-weight: bold; background: rgba(255, 0, 100, 0.1); padding: 4px 8px; border-radius: 4px; display: inline-block; }
.dark-upgrade-desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; }
.dark-upgrade-card.purchased { border-color: var(--success-green); opacity: 0.5; filter: grayscale(0.5); }
.dark-upgrade-card.purchased::before { background: var(--success-green); }
.dark-upgrade-card.purchased::after { content: "✓"; position: absolute; top: var(--gap-md); right: var(--gap-md); color: var(--success-green); font-weight: 900; font-size: 1.5rem; text-shadow: 0 0 10px var(--success-green); }
.dark-upgrade-card.unaffordable .dark-upgrade-cost { color: var(--danger-red); background: rgba(255, 23, 68, 0.1); }