/* panels */
.panel{
  max-width:var(--content-max);
  margin:clamp(60px,8vmin,96px) auto 28px;
  padding:22px 18px 18px;
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.05);
}

/* cards */
.card{
  background:var(--card-bg);
  border:1px solid var(--panel-border);
  border-radius:var(--radius-lg);
  padding:16px;
  transition:background .2s, transform .06s, box-shadow .2s;
}
.card:hover{ background:var(--card-bg-hover); transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.28) }

/* CTA buttons */
.btn{display:inline-flex; gap:10px; align-items:center; padding:10px 14px; border-radius:12px; font-weight:800; letter-spacing:.3px; text-decoration:none;}
.btn.primary{background:linear-gradient(90deg,var(--nova-gold),var(--orbit-bronze)); color:#111; box-shadow:0 6px 18px rgba(228,161,27,.20); border:0}

/* ambience/voice pills */
.pill{display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.16); color:var(--text); font-weight:700}
.pill[aria-checked="true"]{background:linear-gradient(90deg,var(--nova-gold),var(--orbit-bronze)); color:#111}

/* aliases so old class names keep working */
.ng-panel,.welcome-panel,.horizon-panel,.panel-narrow{ background:var(--panel-bg) }
.ng-card,.card-pane{ background:var(--card-bg) }