body {
background: linear-gradient(135deg,#2a003e,#12001f);
color: white;
font-family: system-ui;
padding: 16px;
}

.card {
background: rgba(255,255,255,0.06);
border-radius: 18px;
padding: 16px;
margin-bottom: 20px;
}

button {
background: linear-gradient(135deg,#ff7a18,#ffb347);
border:none;
padding:14px;
border-radius:30px;
width:100%;
margin-top:10px;
}

.media { width:100%; border-radius:14px; }

.audio-box { display:flex; gap:12px; align-items:center; }
.spin { width:60px; animation: spin 6s linear infinite; }
@keyframes spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }

.output {
margin-top:12px;
padding:12px;
background:#1e0030;
border-radius:12px;
}
.testimony {
background: rgba(255,255,255,0.05);
padding: 12px;
border-radius: 12px;
margin-bottom: 10px;
}
.testimony small {
opacity: 0.7;
}

/* NAV PILL BUTTONS */
.nav.pills {
display: flex;
gap: 10px;
flex-wrap: wrap;
}

.nav .pill {
padding: 10px 16px;
border-radius: 999px;
background: rgba(255,255,255,0.08);
color: #eaeaff;
text-decoration: none;
font-weight: 600;
font-size: 14px;
border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(10px);
transition: all .25s ease;
}

.nav .pill:hover {
background: rgba(255,255,255,0.16);
}

.nav .pill.active {
background: linear-gradient(135deg,#ff9f43,#ff7a18);
color: #1b0a2e;
border: none;
}

.nav .pill.accent {
border: 1px solid #ff9f43;
color: #ffb36a;
}