/* buttons, cards, chips, toasts, inputs */
.cta{
  padding:12px 22px; border-radius:999px; font-weight:800; letter-spacing:.02em;
  border:1px solid transparent; background:var(--grad); color:#051025;
  box-shadow:0 10px 28px rgba(124,58,237,.30), 0 10px 28px rgba(34,211,238,.25);
  cursor:pointer; transition:transform .1s ease, filter .2s ease;
  font-family: var(--sys);
}
.cta:hover{ transform:translateY(-2px); filter:brightness(1.04); }

.tiny{
  background:transparent; border:1px solid rgba(255,255,255,.2);
  color:#cfe3ff; border-radius:999px; padding:6px 12px; cursor:pointer;
  font-family: var(--sys);
}

.card{
  background:linear-gradient(180deg, var(--card-2), var(--card-1));
  border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow-1);
}

.label-chip, .album-chip{
  padding:2px 8px; border-radius:999px; font-size:12px;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08);
  color:#d7e6ff; font-family: var(--sys);
}

.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:20px; background:rgba(0,0,0,.7); color:#fff;
  padding:10px 14px; border-radius:10px; z-index:99999;
  font-family: var(--sys);
}
.toast.error{ background:rgba(120,0,0,.8); }

input, button, select, textarea{ font-family: var(--sys); letter-spacing:.01em; font-weight:400; color: var(--ink); }

/* --- Modal visibility fix --- */
.modal-mask[hidden] {
  display: none !important;
}