:root{
  --cm-bg0:#05070b;
  --cm-bg1:#070b12;
  --cm-ink:rgba(255,255,255,.92);
  --cm-muted:rgba(255,255,255,.72);
  --cm-muted2:rgba(255,255,255,.55);

  --cm-blue:#58b7ff;
  --cm-amber:#ff7b1a;
  --cm-slate:#2a3140;
  --cm-card:rgba(255,255,255,.04);
  --cm-card2:rgba(255,255,255,.06);
  --cm-border:rgba(255,255,255,.10);
}

.cm-body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--cm-ink);
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(88,183,255,.16), transparent 55%),
    radial-gradient(1000px 700px at 85% 20%, rgba(255,123,26,.15), transparent 55%),
    radial-gradient(900px 600px at 50% 110%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, var(--cm-bg0), var(--cm-bg1));
  min-height: 100vh;
}

/* subtle “cracked / storm” texture */
.cm-body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(35deg, rgba(255,255,255,.03) 0 1px, transparent 1px 34px);
  opacity:.20;
  mix-blend-mode:overlay;
}

.cm-title{
  font-family: Cinzel, serif;
  letter-spacing:.04em;
  text-transform: uppercase;
}

.cm-nav{
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,.45);
}

.cm-brand{
  font-family: Cinzel, serif;
  letter-spacing:.08em;
  text-transform: uppercase;
  font-weight:700;
}

.cm-mark{
  width:22px;
  height:22px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--cm-blue), var(--cm-amber));
  box-shadow: 0 0 20px rgba(88,183,255,.25);
}

.cm-kicker{
  font-size:.85rem;
  letter-spacing:.12em;
  text-transform: uppercase;
  color: var(--cm-muted2);
}

.cm-hero{
  position:relative;
  border-bottom:1px solid var(--cm-border);
}

.cm-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 500px at 70% 30%, rgba(255,123,26,.10), transparent 60%),
    radial-gradient(700px 450px at 25% 35%, rgba(88,183,255,.10), transparent 60%);
  pointer-events:none;
}

.cm-card{
  background: var(--cm-card);
  border: 1px solid var(--cm-border);
  border-radius: 1.25rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.cm-album.card{
  background: var(--cm-card);
  border: 1px solid var(--cm-border);
  border-radius: 1.25rem;
  overflow:hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.cm-accent-fs{
  --cm-accentA: rgba(88,183,255,.22);
  --cm-accentB: rgba(255,123,26,.20);
}
.cm-accent-ns{
  --cm-accentA: rgba(88,183,255,.18);
  --cm-accentB: rgba(255,123,26,.28);
}

.cm-album.card::before,
.cm-album-hero::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(600px 420px at 20% 15%, var(--cm-accentA), transparent 60%),
              radial-gradient(700px 460px at 85% 35%, var(--cm-accentB), transparent 60%);
  pointer-events:none;
}

.cm-album.card{
  position:relative;
}

.cm-album .card-body{
  position:relative;
}

.cm-album-hero{
  position:relative;
  border-bottom:1px solid var(--cm-border);
}

.cm-btn{
  border:0;
  background: linear-gradient(135deg, rgba(88,183,255,.95), rgba(255,123,26,.95));
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.cm-btn:hover{ filter: brightness(1.05); }

.cm-avatar{
  width:44px;
  height:44px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(88,183,255,.8), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(255,123,26,.8), transparent 55%),
    rgba(255,255,255,.06);
  border:1px solid var(--cm-border);
}

.cm-pulse{
  width:10px;
  height:10px;
  border-radius: 50%;
  background: rgba(88,183,255,.9);
  box-shadow: 0 0 0 0 rgba(88,183,255,.35);
  animation: cmPulse 2.2s infinite;
}
@keyframes cmPulse{
  0%{ box-shadow: 0 0 0 0 rgba(88,183,255,.35); }
  70%{ box-shadow: 0 0 0 12px rgba(88,183,255,0); }
  100%{ box-shadow: 0 0 0 0 rgba(88,183,255,0); }
}

.cm-cover-wrap{
  position:relative;
}
.cm-cover{
  border:1px solid var(--cm-border);
}

.cm-accordion .accordion-item{
  border: 1px solid var(--cm-border) !important;
  background: rgba(255,255,255,.03) !important;
  border-radius: 1rem !important;
  overflow:hidden;
  margin-bottom:.85rem;
}

.cm-acc-btn{
  background: rgba(0,0,0,.15) !important;
  color: var(--cm-ink) !important;
}
.cm-acc-btn:focus{
  box-shadow: 0 0 0 .2rem rgba(88,183,255,.18) !important;
}
.accordion-button::after{
  filter: invert(1);
  opacity:.85;
}

.cm-pre{
  background: rgba(0,0,0,.35);
  border: 1px solid var(--cm-border);
  border-radius: 1rem;
  padding: 1rem;
  max-height: 520px;
  overflow:auto;
  color: rgba(255,255,255,.92);
}

.cm-footer{
  background: rgba(0,0,0,.25);
}

a{ text-decoration: none; }
a:hover{ text-decoration: underline; }

.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--cm-bg1);
  color: var(--cm-ink);
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 1000;
}
.skip-link:focus {
  top: 6px;
}