.dndc-wrap {
  --dndc-bg: #120f17;
  --dndc-panel: #1d1824;
  --dndc-panel-2: #241d2c;
  --dndc-line: rgba(255,255,255,0.08);
  --dndc-text: #f4eef8;
  --dndc-soft: #b9b0c4;
  --dndc-accent: #8b5cf6;
  --dndc-emerald: #10b981;
  color: var(--dndc-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.dndc-shell {
  background: radial-gradient(circle at top left, rgba(139,92,246,0.18), transparent 28%), linear-gradient(180deg, #0f0c14 0%, #15111b 100%);
  border: 1px solid var(--dndc-line);
  border-radius: 28px;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}
.dndc-hero {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--dndc-line);
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 22px;
}
.dndc-badge {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(139,92,246,0.18);
  border: 1px solid rgba(139,92,246,0.35);
  font-size: 12px;
  margin-bottom: 14px;
}
.dndc-hero h1,
.dndc-panel h2,
.dndc-card h2 {
  color: var(--dndc-text);
  margin-top: 0;
}
.dndc-hero p,
.dndc-panel p,
.dndc-card p,
.dndc-muted {
  color: var(--dndc-soft);
}
.dndc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.dndc-actions--end {
  justify-content: flex-end;
}
.dndc-btn {
  border: 1px solid var(--dndc-line);
  background: rgba(255,255,255,0.05);
  color: var(--dndc-text);
  border-radius: 14px;
  padding: 12px 16px;
  cursor: pointer;
}
.dndc-btn-primary {
  background: var(--dndc-accent);
  border-color: transparent;
}
.dndc-screen { display: none; }
.dndc-screen.is-active { display: block; }
.dndc-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
.dndc-card,
.dndc-panel,
.dndc-character-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--dndc-line);
  border-radius: 22px;
  padding: 18px;
}
.dndc-character-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: 14px;
}
.dndc-character-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dndc-character-card strong,
.dndc-character-card span { color: var(--dndc-text); }
.dndc-character-card span { color: var(--dndc-soft); font-size: 14px; }
.dndc-portrait {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--dndc-line);
}
.dndc-character-card--new .dndc-portrait {
  background: rgba(16,185,129,0.15);
}
.dndc-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  margin-top: 16px;
}
.dndc-form-grid label span {
  display: block;
  font-size: 13px;
  color: var(--dndc-soft);
  margin-bottom: 8px;
}
.dndc-form-grid input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--dndc-line);
  background: rgba(0,0,0,0.25);
  color: var(--dndc-text);
}
@media (max-width: 900px) {
  .dndc-card-grid,
  .dndc-character-grid,
  .dndc-form-grid {
    grid-template-columns: 1fr;
  }
}